Membuat Full Layout Web dengan html dan css

hey...sobat broangnet....

kali ini lanjutin tutor kemarin....
kai ini kita nyatuin semua bagian yang kita buat kemaren kayak header,navbar dan konten serta footernya...

oke langsung aja ambil kode nya di bawah ini...

buat file index.html taruh kode ini di dalamnya..

<html>
    <head><title>
        belajar membuat web
        </title>
    <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="navbar.css">
    </head>
<body>
    <div class="header">
        <h1>
BroangNet</h1>
<h3>
belajar web dengan sangat simpel</h3>
<label for="cari"><button>Cari</button></label>
        <input type="search" name="cari">
    </div>
<div class="nav">
    <ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Chat Room</a></li>
</ul>
</div>
<div class="konten">
    <div class="row">
        <div class="co-l menu">
        <ul>
<li><a href="tujuannya">Kategori</a></li>
<li><a href="tujuannya">komentar</a></li>
<li><a href="tujuannya">galery</a></li>
<li><a href="tujuannya">sosmed</a></li>
</ul>
</div>
<div class="co-r">
        <h1>
judul artikel</h1>
<p>
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</p>
<h1>
judul artikel</h1>
<p>
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</p>
<h1>
judul artikel</h1>
<p>
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</p>
</div>
</div>
</div>
<div class="footer">
        <p>
<a href="#">FansPage</a> || <a href="#">Instagram</a> || <a href=#>Twitter</a>
        <br>BroangNet-2017</p>
</div>
</body>
</html>

lalu file style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header{
    width: 100%;
    height: 100px;
    background-color: #1abc9c;
}

.header h1{
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 50px;
    color: snow;
    font-family: fantasy;
}
.header h3{
    padding-left: 10px;
    font-size: 15px;
    color: #c0392b;
    font-family: cursive;
}
.header label{
    float: right;
    margin-top: -22px;
    padding: 2px;
}
.header input[type=search]{
    float: right;
    margin-top: -20px;
    padding: 2px;
    width: 180px;
    height: 20px;
    
}

/* css navbar */

.nav{
    margin: auto;
    text-align: center;
    font-family: fantasy;
    width: 100%;
    font-size: 20px;
}
.nav ul{
    background: #7f8c8d;
    list-style: none;
    position: relative;
    display: inline-table;
    width: 100%;
    padding: 0 20px;
}
.nav ul li{
    float: left;
}
.nav ul li:hover{
    background: #1abc9c;
    
}
.nav ul li:hover a{
    color: snow;
}
.nav ul li a{
    display: block;
    padding: 5px;
    color: #bdc3c7;
    text-decoration: none;
}

/* css konten */

.konten{
    margin: auto;
    width: 60%;
    
}
.row:after{
    content: "";
    clear: both;
    display: block;
    
}
[class*="co-"]{
    float: left;
    padding: 15px;
}
.co-l{width: 25%;}
.co-r{width: 75%;}
.menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: fantasy;
}
.menu li{
    padding: 8px;
    margin-bottom: 5px;
    background: #16a085;
    color: snow;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover{
    background: #1abc9c;
}
.menu a{
    color: snow;
    text-decoration: none;
}
p{
    padding: 2px;
    font-family: sans-serif;
}
h1{
    font-family: sans-serif;
}

/* css footer */

.footer{
    margin: auto;
    width: 100%;
    height: 105px;
    background: gray;
    padding: 10px;
}
.footer a{
    text-decoration: none;
    color: #bdc3c7;
}
.footer a:hover{
    background: #1abc9c;
    font-size: 20px;
}
.footer p{
    margin: auto;
    text-align: center;
    padding: 20px 0px;
    color: #bdc3c7;
    font-family: sans-serif;
    font-size: 18px;
}

untuk videonya tonton di di chaner Broangnet

oke itu aja untuk kali ini...tunggu tutor2 berikutnya yaa...

Membuat Full Layout Web dengan html dan css

Contact form