Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Neti

    Uploaded by

    Netty Herawati

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Neti

    Uploaded by

    Netty Herawati
    3 views7 pages

    Original Title

    neti

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    3 views7 pages

    Neti

    Uploaded by

    Netty Herawati

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 7

    <!

    DOCTYPE html>

    <html>

    <head>

    <title>Membuat Layout Website Sederhana dengan HTML CSS</title>

    <link rel="stylesheet" href="style.css"/>

    </head>

    <body>

    <div class="header">

    <div class="jarak">

    <h2>Membuat Layout Website Sederhana dengan HTML 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>Lorem Ipsum</h3>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>

    <button class="btn">Read More ..</button>

    </div>

    </div>

    <!-- end blog -->

    <!-- blog -->

    <div class="border">

    <div class="jarak">

    <h3>Excepteur</h3>

    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    ...</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 © 2017. Your all reserved</p>

    </div>

    </div>

    </body>

    </html>

    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:#417aa8;

    color:#fff;

    .menu{

    background-color:#417aa8;

    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:#4b88bb;

    display:block;

    .content{

    width:90%;

    margin:auto;

    height:420px;

    padding:0px;

    background:#fff;

    color:#333;
    }

    .border{

    border:2px solid #4887b9;

    margin-top:1pc;

    padding-bottom:1pc;

    padding-left:2pc;

    padding-right:2pc;

    .kiri{

    width:70%;

    float:left;

    margin:auto;

    background:#fff;

    height:420px;

    .kanan{

    width:30%;

    float:left;

    margin:auto;

    background:#fff;

    height:420px;

    }
    .undecor{

    text-decoration:none;

    .footer{

    width:90%;

    margin:auto;

    height:40px;

    line-height:40px;

    background:#417aa8;

    color:#fff;

    margin-bottom: 1pc;

    You might also like