Tugas Latihan CSS PWEB C

pada tanggal
Ini merupakan latihan CSS dan HTML


HTML:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Layout HTML</title>  
      <link rel="stylesheet" type="text/css" href="custom.css"/>  
 </head>  
 <body>  
      <div class="header">  
           <div class="jarak">  
                <h2>Membuat Layout dengan HTML dan CSS</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>wdadda</h3>  
                               <p>fsefmselfkmsemf;emfsef</p>  
                               <button class="btn">Read More...</button>  
                          </div>  
                     </div>  
                     <!--end blog -->  
                     <!--blog-->  
                     <div class="border">  
                          <div class="jarak">  
                               <h3>rdtgd</h3>  
                               <p>sfsfsfsefsef</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="#" class="undecor">HTML</a></p>  
                          <p><a href="#" class="undecor">CSS</a></p>  
                          <p><a href="#" class="undecor">BOOTSTRAP</a></p>  
                          <p><a href="#" class="undecor">PHP</a></p>  
                          <p><a href="#" class="undecor">MYSQL</a></p>  
                          <p><a href="#" class="undecor">Jquery</a></p>  
                          <p><a href="#" class="undecor">Ajax</a></p>  
                     </div>  
                </div>  
                <!--kanan-->  
           </div>  
      </div>  
      <div class="footer">  
           <div class="jarak">  
                <p>copyright 2018 coadebareng all reserved</p>  
           </div>  
      </div>  
 </body>  
 </html>

CSS:

 body{  
      background: #f3f3f3;  
      color: #333;  
      width: 100%;  
      font-family: sans-serif;  
      margin: 0 auto;  
 }  
 .header{  
      width: 90%;  
      margin: auto;  
      height: 120px;  
      line-height: 120px;  
      background: #41A85F;  
      color: #fff;   
 }  
 .content{  
      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;  
      margin-bottom: 1pc;  
      margin-left: 2pc;  
      margin-right: 2pc;  
 }  
 .undecor{  
      text-decoration: none;  
 }  
 .footer{  
      width: 90%;  
      margin: auto;  
      height: 40px;  
      line-height: 40px;  
      background: #41A85F;  
      color: #fff;  
 }  
 .menu{  
      background-color: #53bd84;  
      height: 50px;  
      line-height: 50px;  
      position: relative;  
      width: 90%;  
      margin: 0 auto;  
      padding: 0;  
 }  
 .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;  
 }

Komentar

Posting Komentar