Zone Media9 - Kami akan memberikan tips dan trik untuk membuat websait sederhana yang sangat responsif banget untuk semua kalangan monitor teknologi..
berikut sorce codenya :
Pertama buat dulu file index.html
<!DOCTYPE html>
<html>
<head>
<title> web responsive </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#abaut">Abaut</a></li>
</nav>
</header>
<figure>
<img src="3.jpg" class="gambar">
</figure>
<content>
<a id="profile"><h1>Profile</h1></a>
contoh profile
<a id="abaut"><h1>Abaut</h1></a>
contoh profile
</content>
<footer>
<center> <font color="white">© ZonaMedia9</font></center>
</footer>
</body>
</html>
Kedua buat file style.css
body{
background-color: #f2f2f2;
margin:0px;
}
header{
background-color: #0ccf35;
width:100%;
height: 50px
}
a{
text-decoration: none;
color:black;
}
a:hover{
color:white;
}
li{
float:left;
padding:15px;
list-style: none
}
figure{
width:100%;
height:500px;
margin:0px;
}
.gambar{
width:100%;
height:500px;
}
footer{
width:100%;
padding-top: 50px;
height:100px;
background-color: #0c0657;
}
@media(max-width: 568px){
.gambar{
height:150px;
}
figure{
width:100%;
height:auto;
margin:0px;
}
footer{
padding-top: 25px;
height:50px;
background-color: #0c0657;
}
}
ini contoh gambarnya
ini responsifnya
gimana... mudah bukan.. jika menemukan kesulitan anda bisa menulis komentar anda..
dan sisnya terserah anda mau di efit gimana lagi bagusnya..
0 on: "Cara Membuat Website Yang Sangat Responsif Banget Dengan MUDAH"