Tugas 2 - Pemrograman Web
Nama: Donny Fitrado
NRP: 05111740000171
Kelas: PWeb C
Berikut ini adalah source code nya:
Screenshot / dokumentasi:
Terima kasih dan mohon maaf apabila ada kesalahan.
NRP: 05111740000171
Kelas: PWeb C
Berikut ini adalah source code nya:
- 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 is simply dummy text of the printing and typesetting industry. Lorem ipsum has been </p>
<button class="btn"> Read More..</button>
</div>
</div>
<div class="border">
<div class="jarak">
<h3> Lore Ipsum</h3>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been </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;
}
Screenshot / dokumentasi:
Terima kasih dan mohon maaf apabila ada kesalahan.
Hasil tampilan webnya bagus sekali, berapa lama bikinnya ya? sudah bisa buka usaha bisnis pembuatan web nih
ReplyDelete