Membuat sebuah web sederhana dengan css dan html.
Index.html
<!DOCTYPE html>
<html>
<head>
<title> Belajar Membuat Layout dengan HTML dan CSS </title>
<link rel="stylesheet" type="text/css" href="Custom.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="jarak">
<h2>Belajar Membuat Layout dengan HTML dan 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">
<div class="kiri">
<div class="border">
<div class="jarak">
<h3> Lore Ipsum</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
<button class="btn"> Read More..</button>
</div>
</div>
<div class="border">
<div class="jarak">
<h3> Lore Ipsum</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
<button class="btn"> Read More..</button>
</div>
</div>
</div>
<div class="kanan">
<div class="jarak">
<h3> CATEGORY </h3>
<hr/>
<p><a href="#" class="undercor"> HTML </a></p>
<p><a href="#" class="undercor"> CSS </a></p>
<p><a href="#" class="undercor"> BOOTSTRAP </a></p>
<p><a href="#" class="undercor"> PHP </a></p>
<p><a href="#" class="undercor"> MySQL </a></p>
<p><a href="#" class="undercor"> Jquery </a></p>
<p><a href="#" class="undercor"> Ajax </a></p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="jarak">
<p> copyright 2017 codebareng all reservd </p>
</div>
</div>
</body>
</html>
Custom.css
body {
background:#f3f3f3;
colo:#333;
width:100%;
font-family:sans-serif;
margin:0 auto;
}
.header{
width:90%;
margin:auto;
height:120px;
line-height:120px;
background:#41A85F;
color:#fff;
}
.content{
width:90%;
margin:auto;
height:420px;
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:1pc;
padding-left:2pc;
padding-right:2pc;
}
.undercor{
text-decoration:none;
}
.footer{
width:90%;
margin:auto;
height:40px;
line-height:40px;
background:#41A85F;
color:#fff;
}
.menu{
background-color: #53bd84;
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;
}
Tidak ada komentar:
Posting Komentar