Membuat Web Berita

Source Code HTML:


<<!DOCTYPE html>
<html>
<head>
    <title>Tech in Asia Kawe</title>
    <link rel="stylesheet" type="text/css" href="dex.css">
</head>
<body>
    <div class="header">
    <div class="jarak">
        <h2>Tech in Asia Kawe</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>
    <input type="text" placeholder="Search..."></input>
</ul>
    </div>
    <div class="content">
    <div class="jarak">
<!-- Kiri -->
    <div class="kiri">
<!-- Blog -->
    <div class="border">
    <div class="jarak">
    <img src="dna.jpg" alt="dna barbar" width="200x" height="150" align="left">
        <h3>The startup that lets businesses build products using DNA data</h3>
        <p>Awakens is a B2B/B2C marketplace that makes DNA data more accessible to users and businesses. Here's how exactly they plan to make money doing that...</p>
        <button class="btn"><a href="https://www.techinasia.com/talk/tomohiro-takano-awakens"></a>Read More..</button>
    </div>
    </div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="tikttok.jpg" alt="tiktok bowo" width="200" height="150" align="left">
<h3>Tik Tok is taking over the world</h3>
<p>In recent months, a Chinese app called Tik Tok has climbed app store rankings around the world, especially in neighboring Asian countries...</p>
<button class="btn"><a href="https://www.techinasia.com/tiktok-world"></a> Read More..</button>
</div>
</div>
<!-- end blog -->
</div>
<!-- kiri -->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h3>CATEGORY</h3>
<hr/>
<p><a href="#" class="undercor">2018</a></p>
<p><a href="#" class="undercor">2017</a></p>
<p><a href="#" class="undercor">2016</a></p>
<p><a href="#" class="undercor">2015</a></p>
</div>
</div>
<!-- kanan -->
</div>
</div>
<div class="copy">
<footer>c2018 Shafwatallah's</footer>
</div>
</body>
</html>

Source Code CSS:

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

.header{
    width: 90%;
    margin: auto;
    height: 120px;
    line-height: 120px;
    background: #BDB76B;
    color: #fff;
    font-family: gloss and bloom;
    font-weight: 100;
    font-size: 30;
    font-weight: bold;
}

.content{
    width: 90%;
    margin: auto;
    height: 420;
    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: 3pc;
    padding-right: 2pc;
    padding-left: 2pc;
}

.undecor{
    text-decoration: none;
}

.footer{
    width: 90%;
    margin: auto;
    height: 40px;
    line-height: 40px;
    background: #41A85f;
    color: #fff;
}

.menu{
    background-color: #BDB76B;
    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: #BDB76B;
    display: block;
}

.menu input {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;

}

.copy{
    background-color: #BDB76B;
    height: 50px;
    line-height: 50px;
    position: relative;
    width: 90%;
    margin: 90px auto;
    padding: 0 auto;
}



Komentar

Posting Komentar

Postingan Populer