PWEB B Tugas 1-2 - Membuat Personal Website
PWEB B Tugas 1-2 - Membuat Personal Website
Pada website saya kali ini, saya hanya menggunakan HTML dan CSS, saya masih belum menggunakan JavaScript untuk menambahkan berbagai macam fungsi, karena memang... website saya sangat simpel. Berikut kode HTML dan CSS yang saya gunakan untuk website saya:
index.html
<!doctype HTML> <html lang="en" data-react-helmet="lang"> <html> <head> <meta name="description" content="Christian Bennett Robin's CV Website"> <meta name="author" content="Christian Bennett Robin"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie-edge"> <title>Christian Bennett Robin</title> <link rel="stylesheet" href="styles/styles.css"> <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet"> </head> <body> <div class="box"> <div class="hello"> <div class="hello1">Hello, my name is</div> <div class="hello2">Christian Bennett Robin</div> <div class="hello1">an Informatics student currently studying Web Development.</div> </div> <div> <img class="photo" src="images/IMG_7239 2.jpg" alt="It's me!" width=300px height=300px> </div> </div> <div class="box2"> <a href="https://github.com/christianbennett" target="_blank"> <img src="images/logo.png" class="logo" alt="Click to visit my GitHub!"> </a> </div> </body> </html>
styles.css
html {
background-color: black;
font-family: "Abel", sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 86vh;
}
.hello {
display: flex;
flex-direction: column;
justify-content: center;
}
.hello1 {
text-align: end;
font-size: 2em;
color: gray;
}
.hello2 {
text-align: end;
font-size: 4em;
color: white;
}
.hello3 {
text-align: end;
font-size: 2em;
color: gray;
}
.photo {
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: white;
}
hr {
border-top: 1px solid white;
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
/* background-color: red; */
height: 5vh;
width: 100%;
margin-top: 13px;
}
.logo {
width: 40px;
height: 40px;
}
.logo:hover {
width: 45px;
height: 45px;
transition: 0.2s ease-in-out;
}
Website saya dapat dibuka di https://christianbennett.github.io
Sekian untuk pembuatan website saya yang masih sangat simpel ini. Mohon maaf bila ada kesalahan kata, sampai jumpa pada blog selanjutnya.
Comments
Post a Comment