Membuat Web Berita

Nama   : Faqih Fathan Irfani
Nrp       : 05111740000175
Kelas    : PWEB C


Source Code HTML
<!DOCTYPE html>

<html>
<head>

    <title>Tugas berita FAQIH</title>
    <link rel="stylesheet" href="indexfix.css"/>
</head>
<body>
    <div class="header">
        <div class="jarak">
            <h2>Hot News</h2>
        </div>
    </div>
<div class="menu">
    <ul>
        <Li><a href="#">Home</a></Li>
        <Li><a href="#">Trending</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>Xiaomi CEO on the ‘life-and-death’ changes he’s making</h3>
    <p> <img src="leijun.jpg" alt="LeiJun" height="100px" width="100px" align="left" border="3"/>
    Alibaba’s not the only Chinese tech giant with plans to reshape itself and get younger. Xiaomi CEO Lei Jun recently unveiled a dramatic restructuring plan that promises to rework the company’s headquarters and bring a lot of young, talented staffers into the management pipeline.  </p>
    <button class="btn"><a href="https://www.techinasia.com/xiaomi-ceo-lifeanddeath-hes-making">Read More</a></button>
   </div>
  </div>
  <!-- end blog-->
  
  <!-- blog -->
   <div class="border">
    <div class="jarak">
    <h3>Here’s Jack Ma’s letter to staff about his retirement</h3>
    <p> <img src="jekma.jpg" alt="JackMa" height="100px" width="100px" align="left" border="3"/>
    Alibaba’s charismatic co-founder Jack Ma has announced that he will step down as chairman of the Chinese tech giant a year from now. He will hand the reins over to CEO Daniel Zhang, but will remain on the board until 2020.</p>
    <button class="btn"><a href="https://www.techinasia.com/jack-mas-full-letter-staff-retirement">Read More</a></button>
   </div>
  </div>
  <!-- end blog-->
  
  <!-- blog -->
   <div class="border">
    <div class="jarak">
    <h3>How Singapore can become a great logistics hub again.</h3>
    <p> <img src="kapal.jpg" alt="kapal" height="100px" width="100px" align="left" border="3"/>
    Logistics has always been one of the major pillars of Singapore’s economy. The city-state has prided itself as a key regional (at times global) hub for many multinational brands since early 1990s.</p>
    <button class="btn"><a href="https://www.techinasia.com/talk/singapore-great-logistics-hub-again">Read More</a></button>
   </div>
  </div>
  <!-- end blog-->
 </div>
<!--kiri-->
 <!-- kanan-->
 <div class="kanan">
 <div class="jarak">
     <h3>Check some other newspage!</h3>
    <hr/>
    <p><a href="techinasia.com" class="undercor">TechInAsia</a></p>
    <p><a href="cnn.com" class="undercor">CNN</a></p>
    <p><a href="channelnewsasia.com" class="undercor">ChannelNewsAsia</a></p>
    <p><a href="telegraph.co.uk" class="undercor">Telegraph</a></p>
    <p><a href="bbc.com/news" class="undercor">BBC News</a></p>
   </div>
  </div>
  <!--kanan-->
  </div>
  </div>
   <div class="footer">
   <div class="jarak">
    <p>copyright 2018 faqihirfani all reserved</p>
  </div>
  </div>
  
</body>
</html>



Source Code CSS
body
{
    background:#FFF5EE;
    color:#333;
    width:100%;
    font-family:sans-serif;
    margin:0 auto;
}

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

.content
{
    width:70%;
    margin:auto;
    height:1000px;
    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 #DB7093;
    margin-top:1pc;
    padding-bottom:1pc;
    padding-left:2pc;
    padding-right:2pc;
}

.undercor
{
    text-decoration:none;
}

 .footer
 {  
     width:70%  
     margin:auto;  
     height:100px;  
     line-height:40px;  
     background:#B22222;  
     color:#fff;  
 }  
 
 .menu
 {  
     background-color : #B22222;  
     height:50px;  
     line-height:50px;  
     position:relative;  
     width:90%;  
     margin:0 auto;  
     padding:0 auto;  
 }  
 
 .jarak
 {  
     padding:0 3pc;  
 }
 
 .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:#0000CD;  
     display:block;  
 }

Komentar

Posting Komentar

Postingan Populer