Rabu, 29 Maret 2017

Tugas 4 Pemrograman Web Kelas F

Tugas 4 Pemrograman Web Kelas F: Membuat Bootstrap

Nama: Hania Maghfira
NRP: 5115100042


Source code:



 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
      <title>Hania Maghfira</title>  
      <meta charset="utf-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">  
      <!-- <link rel="stylesheet" href="style.css"> -->  
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">  
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
      <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}  
           .carousel-inner > .item > img,  
            .carousel-inner > .item > a > img {  
              width: 70%;  
              margin: auto;  
            }  
      </style>  
 </head>  
 <body>  
 <!--Page content-->  
 <div class="w3-content" style="max-width: 1000px">  
 <!--Header-->  
      <header class="w3-center w3-opacity w3-padding-16 w3-container ">  
           <h1 class="w3-xlarge">Autobiography</h1>  
           <h1 style="font-size: 45px">Hania Maghfira</h1>  
           <p style="letter-spacing: 4px; font-size: 12px">student &#9900; netizen &#9900; traveller</p>  
      <div style="margin-top: 30px; letter-spacing: 3px" 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-center" style="margin-right: 200px; margin-left: 200px">  
      <div class="w3-container">  
       <br>  
       <div id="myCarousel" class="carousel slide" data-ride="carousel">  
   <!-- Indicators -->  
   <ol class="carousel-indicators">  
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
    <li data-target="#myCarousel" data-slide-to="1"></li>  
    <li data-target="#myCarousel" data-slide-to="2"></li>  
    <li data-target="#myCarousel" data-slide-to="3"></li>  
   </ol>  
   <!-- Wrapper for slides -->  
   <div class="carousel-inner" role="listbox">  
    <div class="item active">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/16585346_206911493117517_7226495926804676608_n.jpg" alt="Hania" style="width: 760px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Rooftop, 10 February 2017</h5>  
      <p class="w3-opacity">"If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you."—A. A. Milne</p>  
     </div>  
    </div>  
    <div class="item">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/16585590_435309843478880_538959915373297664_n.jpg" style="width: 412px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Villa Bumi Mas Pacet, East Java, 18-19 April 2017</h5>  
      <p class="w3-opacity">"Life isn't about finding yourself. Life is about creating yourself."—George Bernard.</p>  
     </div>  
    </div>  
    <div class="item">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/12317534_1060464463984013_1459294193_n.jpg" style="width: 451px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Penanggungan, East Java</h5>  
     </div>  
    </div>  
    <div class="item">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/17126877_770919969724602_829539754600038400_n.jpg" style="width: 482px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Kamu</h5>  
      <p class="w3-opacity">"Ada begitu banyak cara bagi Tuhan untuk mempertemukan. Terlihat rumit padahal sederhana, terlihat jauh padahal dekat, terlihat orang lain padahal kamu"—Makna Pencarian</p>  
     </div>  
    </div>  
   </div>  
   <!-- Left and right controls -->  
   <a class="left carousel-control" href="#myCarousel" data-slide="prev">  
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  
    <span class="sr-only">Previous</span>  
    <!-- <span class="icon-prev"></span> -->  
   </a>  
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">  
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  
    <span class="sr-only">Next</span>  
   </a>  
  </div>  
 </div>  
 <!-- quote -->  
      <blockquote style="margin-top: 12px; letter-spacing: 1px; font-size: 13px">Bukankah mengharapkan surga jauh lebih mungkin dari mengharapkan seseorang yang tidak jelas? Mari kita tata dan benahi lagi harapan kita. Sudahkah di tempat yang tepat?<footer>Kurniawan Gunadi</footer>  
      </blockquote>  
 </div>  
 <!-- boumme -->  
 <div 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>  
 <div class="w3-container" style="background-color: #242423; margin-top: 16px">  
      <p class="w3-center" style="letter-spacing: 1px; color: #FFFFFF; margin-top: 20px">Visit <a href="http://hmaghfira.blogspot.com">hmaghfira.blogspot.com</a>  
      </p>  
 </div>  
 <!--end of body content-->  
 </div>  
 <!--end of page content-->  
 </body>  
 </html>  


Tampilan source code

Share:

0 Comment: