Tugas 1 Pemrograman Web Kelas F: Membuat profil diri menggunakan HTML dan CSS (opsional)
Nama: Hania Maghfira
Source code:
1. home.html
Merupakan main page dari profil diri.
2. open.html
Berisi profil diri dan kumpulan foto.
Tampilan:
Nama: Hania Maghfira
NRP: 5115100042
Source code:
1. home.html
Merupakan main page dari profil diri.
<!DOCTYPE html>
<html>
<title>Hania Maghfira</title>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<!-- favicon -->
<link rel="icon" type="image/gif" href="https://s-media-cache-ak0.pinimg.com/originals/03/11/20/0311203c3a6e3808bff8d23daf44a4af.png">
<!--style-->
<style>
body, h1 {font-family: "Raleway"}
h1 {letter-spacing: 7px}
div.button {font-size: 18px;}
</style>
<body>
<!--Page content-->
<div class="w3-content" style="max-width: 2000px">
<!--Header-->
<header class="w3-center w3-opacity w3-padding-32 w3-container ">
<h1 class="w3-xlarge">Autobiography</h1>
<h1>Hania Maghfira</h1>
<div class="w3-padding-32 button">
<div class="w3-bar w3-border">
<!-- link to open page -->
<a href="file:///D:/HTML/open.html" class="w3-bar-item w3-button">Open</a>
</div>
</div>
</header>
<!--end header-->
<!--body content-->
<div class="w3-center">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/16585346_206911493117517_7226495926804676608_n.jpg" alt="Hania" style="width: 540px; height: 304px">
</div>
<!--end of body content-->
</div>
<!--end of page content-->
</body>
</html>
2. open.html
Berisi profil diri dan kumpulan foto.
<!DOCTYPE html>
<html>
<title>Hania Maghfira</title>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" type="image/gif" href="https://s-media-cache-ak0.pinimg.com/originals/03/11/20/0311203c3a6e3808bff8d23daf44a4af.png">
<!--style-->
<style>
body, h1 {font-family: "Raleway"}
h1 {letter-spacing: 7px}
div.button {font-size: 18px;}
</style>
<body>
<!--Page content-->
<div class="w3-content w3-light-grey" style="max-width: 1000px">
<!--Header-->
<header class="w3-center w3-opacity w3-padding-32 w3-container w3-light-grey">
<h1 style="font-size: 45px">Hania Maghfira</h1>
<p style="letter-spacing: 4px; font-size: 12px">student ⚬ netizen ⚬ traveller</p>
<div style="margin-top: 50px" class="w3-center">
<a href="https://twitter.com/haniamaghfira" rel="nofollow" target="_blank" title="Twitter" class="w3-hover-text-red"><i class="fa fa-twitter transition35"></i></a>
<a href="https://www.facebook.com/haniamaghfira" rel="nofollow" target="_blank" title="Facebook" class="w3-hover-text-kight-blue"><i class="fa fa-facebook transition35"></i></a>
<a href="https://www.linkedin.com/in/hmaghfira" rel="nofollow" target="_blank" title="Linkedin" class="w3-hover-text-yellow"><i class="fa fa-linkedin transition35"></i></a>
<a href="https://www.instagram.com/hmaghfira" rel="nofollow" target="_blank" title="Instagram" class="w3-hover-text-green"><i class="fa fa-instagram transition35"></i></a>
</div>
</header>
<!--end header-->
<!--body content-->
<div class="w3-opacity" style="margin-left: 100px; margin-right: 100px; margin-top: 20px; margin-bottom: 100px; font-size: 18px; word-spacing: 5px; text-align: justify;">
<p>An on-going-to 20 years old girl who still pursuing and striving to reach her dreams. Become ESTJ person makes her love thinking, expressing all of her feeling, sometimes judging with sensing. But, she's actually friendly girl. Making joke or conversation with her will make you comfort and become entertained.<br>
<br>I was born on 19th August in Pasuruan, East Java. Do you know where is it? It is located among three main roads which is connecting Surabaya-Malang-Banyuwangi. It's so amazing, isn't? Haha. I am naturally Javanese, my mom from Brebes and my dad from Pasuruan. They meet each other in 'Rain City' when they were bachelor student in one of the best institute in there. And now, I am study in Surabaya. Will I meet my soulmate as my parent did? Wqwq.<br>
<br>My family live in Bali, paradise of Indonesia. And my current address is Keputih, Surabaya. I have become 2nd year student in Informatics Department of ITS Surabaya. It's such a wonderful life become a part of this world haha. I can create code, compile, and run it. Sounds easy, right? Wqwq. Beside that, I can meet people with unique characteristics, so I can learn how to life with manner and face them.<br>
<br>I like writing, anything, but often personal opini. Actually I'm not a girl who very loves read novel, story, or something like that, but I'm trying to love books and try to read them. Since October 2016 till now, I've succeeded read 4 books, those are Hujan Matahari and Lautan Langit by Kurniawan Gunadi, Filosofi Kopi by Dee Lestari, and Tentang Kamu by Tere Liye. And now I'm still reading biography of Tan Malaka. Beside writing, I love travelling. Adventure (always) makes my day haha!<br>
<br>Maybe this is just short of my life story. If you wonder how my life was or is or will, feel free to talk with me :). Choose any social media (that I have) to keep in touch. It won't make you regret, trust me, it works :D
</p>
</div>
<!-- wall of story -->
<div class="w3-center" style="margin-bottom: 20px">
<p style="letter-spacing: 5px; font-size: 20px">WALL OF STORY</p>
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/14583280_519393198267554_2345297510802653184_n.jpg" style="width: 240px; height: 240px;">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/13167249_196281427431656_880109944_n.jpg" style="width: 240px; height: 240px">
<img class="_icyx7" id="pImage_86" src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/14561857_550781431713165_5482921375666536448_n.jpg" style="width: 240px; height: 240px">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/12917903_1664612833812936_1593829825_n.jpg" style="width: 240px; height: 240px">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13269511_1197254876966066_485241213_n.jpg" style="width: 240px; height: 240px">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/14718266_1691279431183580_9102917540144742400_n.jpg" style="width: 240px; height: 240px">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13126804_1304763996204850_839985455_n.jpg" style="width: 240px; height: 240px">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/14547711_325914194460790_3319035466606444544_n.jpg" style="width: 240px; height: 240px">
</div>
<!-- end of wall of story -->
<!--end of body content-->
<!--footer-->
<footer class="w3-container w3-center w3-light-grey">
<p style="font-size: 20px; letter-spacing: 5px; margin-top: 55px">Thank you ♥
</p>
<div class="w3-padding-8 button">
<div class="w3-bar w3-border">
<!-- link to home page -->
<a href="file:///D:/HTML/home.html" class="w3-bar-item w3-button">Close</a>
</div>
</div>
</footer>
</div>
<!-- end of page content -->
</body>
</html>
Tampilan:
 |
| home page |
 |
| open-part1 |
 |
| open-part2 |
 |
| open-part3 |
