Tugas PWEB C HTML dan CSS

Nama : Wisnu
NRP : 05111740000170
Kelas : PWEB C

Berikut ini adalah source code HTMLnya: 
<!DOCTYPE html>

<html>
<head>

    <title>Belajar Membuat Layout dengan HTML dan CSS punya misun</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
    <div class="header">
        <div class="jarak">
            <h2>Belajar membuat layout dengan HTML dan CSS milik misun</h2>
        </div>
    </div>
<div class="menu">
    <ul>
        <Li><a href="#">Home</a></Li>
        <Li><a href="#">About</a></Li>
        <Li><a href="#">Blog</a></Li>
        <Li><a href="#">Contact</a></Li>
    </ul>
</div>
  <div class="content">
  <div class="jarak">
   <!-- kiri -->
   <div class="kiri">
   <!-- blog -->
   <div class="border">
    <div class="jarak">
    <h3>Lorem Ipsum</h3>
    <p>Lorem Ipsum is simply dummy tect for printing and typesetting industry. Lorem Ipsum has been blablalbalblablalbla</p>
    <button class="btn"> Read More .. </button>
   </div>
  </div>
  <!-- end blog-->
  <!-- blog-->
  <div class="border">
  <div class="jarak">
   <h3> Lorem Ipsum</h3>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting Industry. Lorem Ipsum has been blablalbalblablalbalblablalbalblablalb</p>
   <button class="btn">Read More..</button>
  </div>
  </div>
  <!--end blog-->
 </div>
 <!-- kiri-->
 <!-- kanan-->
 <div class="kanan">
 <div class="jarak">
     <h3> CATEGORY</h3>
    <hr/>
    <p><a href="a" class="undercor">HTML</a></p>
    <p><a href="a" class="undercor">CSS</a></p>
    <p><a href="a" class="undercor">BOOTSTRAP</a></p>
    <p><a href="a" class="undercor">PHP</a></p>
    <p><a href="a" class="undercor">MYSQL</a></p>
    <p><a href="a" class="undercor">Jquery</a></p>
    <p><a href="a" class="undercor">Ajax</a></p>
   </div>
  </div>
  <!--kanan-->
  </div>
  </div>
   <div class="footer">
   <div class="jarak">
    <p>copyright 2018 misunnyontek all reserved</p>
  </div>
  </div>
  
</body>
</html>



Berikut ini adalah source code CSSnya: 
body
{
    background:#f3f3f3;
    color:#333;
    width:100%;
    font-family:sans-serif;
    margin:0 auto;
}

header
{
    width:90%;
    margin:auto;
    height:auto;
    height:12px;
    line-height:120px;
    background:#41A85F;
    color:#fff;
}

.contect
{
    width:90%;
    margin:auto;
    height:420px;
    padding:0.1px;
    background:#fff;
    color:#333;
}

.kiri
{
    width:70%;
    float:left;
    margin:auto;
    background:#fff;
    height:420px;
}

.kanan
{
    width:30%;
    float:left;
    margin:auto;
    background:#fff;
    height:420px;
}

.border
{
    border:2px solid #74C599;
    margin-top:1pc;
    padding-bottom:1pc;
    padding-left:2pc;
    padding-right:2pc;
}

.undercor
{
    text-decoration:none;
}

 .footer
 {  
     width:90%  
     margin:auto;  
     height:40px;  
     line-height:40px;  
     background:#41A8SF;  
     color:#fff;  
 }  
 
 .menu
 {  
     background-color : #53bd84;  
     height:50px;  
     line-height:50px;  
     position:relative;  
     width:90%;  
     margin:0 auto;  
     padding:0 auto;  
 }  
 
 .jarak
 {  
     padding:0 2pc;  
 }
 
 .menu ul
{  
     list-style:none;  
} 
 
 .menu ul li a
 {  
     float:left;  
     width:70px;  
     display:block;  
     text-align:center;  
     color:#FFF;  
     text-decoration:none;  
 }
 
 .menu ul li a:hover 
 {  
     background-color:#74C599;  
     display:block;  
 }



Ini adalah hasil screenschotnya:


Komentar

Posting Komentar

Postingan Populer