Kode HTML dan CSS untuk membuat tampilan pertama Web
Kode HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="atas">
<div id="hoz">
<div class="konten">
<img src="gambar/kds.png" class="lg">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="box_sd">
<h2>Selamat Datang</h2>
<a href="#">Masuk</a>
<a href="#">Hubungi</a>
</div>
</div>
</div>
Kode CSS
*{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:white;
font-family: 'Arial', cursive;
font-size: 25px;
}
a:hover{
color: orange;
}
ul{
float: right;
}
li{
list-style: none;
display: inline-block;
padding: 10px;
line-height: 27px;
}
#atas{
background:url('gambar/oasis.jpg');
background-size: 100% 100%;
height: 650px;
padding-top: 35px;
}
#hoz{
background-color: rgba(255,255,255, 0.2);
height: 50px;
}
.konten{
width: 960px;
margin: 0 auto;
}
.lg{
height: 40px;
width: 35px;
padding-top: 5px;
}
#box_sd{
height: 300px;
width: 960px;
position: relative;
font-size: 70px;
color: white;
background-color: rgba(255,255,255, 0.2);
margin: 0 auto;
margin-top: 100px;
text-align: center;
padding-top: 60px;
}
#box_sd a{
margin-top: 50px;
display: inline-block;
border: 1px solid white;
width: 150px;
height: 65px;
font-size: 25px;
line-height: 65px;
font-weight: bold;
}
Comments
Post a Comment