Selasa, 25 September 2018

PWEBC- TUGAS BERITA

Posted by Ayu Mutiara Sari | 08.33 |

Nama: Ayu Mutiara Sari
NRP: 05111740000149
Kelas: PWEB C
source: www.techinasia.com

code HTML:

 <!DOCTYPE html>   
  <html>   
  <head>   
    <title>Tech in Asia</title>   
    <link rel="stylesheet" href="yeay.css"/>   
  </head>   
  <body>   
    <div class="header">   
    <div class="menu1">   
       <ul>   
         <li><a href="#">NEWS</a></li>   
         <li><a href="#">JOBS</a></li>   
         <li><a href="#">COMPANIES</a></li>   
         <li><a href="#">EVENT</a></li>   
         <li><a href="#">ABOUT</a></li>   
         <li><a href="#">ADVERTISE</a></li>   
       </ul>   
    </div>   
    <div class="menu2">   
       <ul>   
         <li><a href="#">CATEGORIES</a></li>   
         <li><a href="#">MARKETS</a></li>   
         <li><a href="#">WRITERS</a></li>   
       </ul>   
    </div>   
    </div>   
    <div class="isi">   
       <div class="jarak">    
         <div class="kiri">  
         <div class="border">   
            <div class="jarak">   
              <img src="web1.jpg" style=" float: left; width: 280px;height: 200px;">   
              <h3>How one Silicon Valley investor helps US startups enter Japan</h3>   
              <p>Hire the right country manager.</p>   
              <button class="btn">Read More..</button>   
            </div>   
         </div>   
            <div class="border">   
            <div class="jarak">   
              <img src="web3.jpg" style="float: left;width: 280px;0height: 200px;">   
              <h3>I oversee government digital services at GovTech. Ask me anything!</h3>   
              <p>Before GovTech, Parimal was director of technology at DreamWorks Animation. Ask him anything!</p>   
              <button class="btn">Read More..</button>   
            </div>   
         </div>  
         <div class="border">   
            <div class="jarak">   
              <img src="web2.jpg" style="float: left;width: 280px;height: 200px;">   
              <h3>Singapore introduces new rules for bike-share users, fines for abusers</h3>   
              <p>The rules are part of the Land Transport Authority’s new licensing regime for bike-sharing services.</p>   
              <button class="btn">Read More..</button>   
            </div>   
         </div>    
         </div>     
         <div class="job">   
            <div class="jarak">   
              <h2>LATEST JOBS</h2>   
                 <img src="job1.png" style="float: left;width: 34px;height: 34px;">   
                 <h1>Software Engineer-Backend</h1>   
                 <p>Jakarta, Indonesia</p>   
                 <img src="job2.png" style="float: left;width: 34px;height: 34px;">   
                 <h1>Graphic Designer</h1>   
                 <p>Singapore, Singapore</p>   
                 <img src="job3.png" style="float: left;width: 34px;height:34px;">   
                 <h1>Senior NodeJs Developer</h1>   
                 <p>Singapore, Singapore</p>    
            </div>   
            <div class="footer" >   
              <h2>Copyright 2018 PwebC</h2>   
            </div>   
         </div>   
       </div>   
    </div>   
  </body>   
  </html>

code css:
 body{   
    background: #FF7F50;   
    color: #333;   
  /*   width: 100% ;   
    height: 100%;*/   
    font-family: "lato", cursive, sans-serif;   
    /*margin: 0 auto;*/   
  }   
  .isi{   
    width: 88%;   
    margin: auto;   
    /*height: 420px;*/   
    padding: 0.1px;   
    background: #FFF8DC;   
    color: #333;   
  }   
  .header{   
    margin: 0;   
    background: #FFF8DC;   
  }   
  .kiri{   
    width: 70%;   
    float: left;   
    margin: auto;   
    background: #FFF8DC;   
    /*height: 420px;*/   
  }   
  .job{   
    width: 25%;   
    float: left;   
    margin: auto;   
    background: #FFF8DC;   
    /*height: 420px;*/   
  }   
  .border{   
    /*border: 2px solid #000;*/   
    height: 200px;   
    margin-top: 1pc;   
    padding-bottom: 3pc;   
    padding-right: 2pc;   
  }   
  .undecor{   
    text-decoration: none;   
  }   
  .footer{   
    /*width: 90%;*/   
    margin: auto;   
    height: 40px;   
    line-height: 40px;   
    background: #F0EEEE;   
  }   
  .menu1{   
    background-color: #F0EEEE;   
    height: 50px;   
    line-height: 50px;   
    /*position: relative;*/   
    /*width: 90%;*/   
    /*margin: 0;*/   
    /*padding:0;*/   
  }   
  .menu2{   
    background-color: #F0EEEE;   
    height: 60px;   
    line-height: 60px;   
    /*position: relative;*/   
    /*width: 90%;*/   
    margin: 0;   
    /*padding:0 auto;*/   
  }   
  .jarak{   
    padding: 0 2pc;   
  }   
  .menu1 ul{   
    list-style: none;   
  }   
  .menu1 ul li a{   
    float: left;   
    width: 14%;   
    display: block;   
    text-align: center;   
    color: #A4A4A4;   
    text-decoration: none;   
  }   
  .menu1 ul li a:hover{   
    background-color: #DDDCDC;   
    display:block;   
  }   
  .menu2 ul{   
    list-style: none;   
  }   
  .menu2 ul li a{   
    float: left;   
    width: 14%;   
    display: block;   
    text-align: center;   
    color: #A4A4A4;   
    text-decoration: none;   
  }   
  .menu2 ul li a:hover{   
    background-color: #FAF9F9;   
    display:block;   
  }   
  .job p{   
    font-size: 12px;   
    margin: 0;   
    text-align:center;   
    margin: 10px;    
    color:#D9D8D8;   
  }   
  h3{   
    font-family: "Lucida Console";   
    font-weight: bold;   
    font-size: 24px;   
  }   
  p{   
    font-family: "Verdana";   
    font-size: 14px;   
    font-weight: lighter;   
    color: #ADACAC;   
  }   
  h1{   
    font-family: "Verdana";   
    font-size: 13px;   
    font-weight: bold;   
    text-align: center;   
    padding-top: 10px;   
  }   
  h2{   
    font-family: "Lucida Console";   
    font-weight: lighter;   
    font-size: 12px;   
  }

Hasil:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)