Behspotku - Hai sobat, kali ini saya akan membagikan sorce kode html/design web sederhana, disini saya juga menggunakan css dalam pembuatannya. Banyak dari sobat yang malas/pusing untuk membuat kodenya kan..! sobat bisa kok copas kode yang kami sediakan..
Oke, langsung ke kode aja ya, pertama sobat perlu satu file yang bernama index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>menu</title>
<style>
</style>
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#fff" stroke-width="5" />
<path d="M0,14 40,14" stroke="#fff" stroke-width="5" />
<path d="M0,23 30,23" stroke="#fff" stroke-width="5" />
</svg>
</a>
</span>
<ul class="navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#game">Games</a></li>
<li><a href="#sofware">Sofware</a></li>
<li><a href="#news">News</a></li>
<li><a href="#team">Team</a></li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
<div class="warna"><a href="#" id="copy" class="btn-close" onclick="closeSlideMenu()">×</a>
<div class="gambar1"><img src="2/KOGO copy.png" style="border-radius: 100px; border:solid 2px #fff;"><p /><p />
<div class="beh"><b>Beh Media9</b></div>
</div></div>
<hr color="white" />
<a href="#"><img src="2/rumah.png" width="23" height="18" style="padding-right: 18px;" /> Home</a>
<a href="#game"><img src="2/game.png" width="23" height="18" style="padding-right: 18px;" /> Games</a>
<a href="#sofware"><img src="2/aplikasi.png" width="23" height="18" style="padding-right: 18px;" /> Sofware</a>
<a href="#news"><img src="2/news.png" width="23" height="18" style="padding-right: 18px;" /> News</a>
<a href="#team"><img src="2/team.png" width="23" height="18" style="padding-right: 18px;" /> Team</a>
</div>
<div id="main">
<div class="content">
<center><div style="background:rgba(0,0,0,0.1);margin-top:40px; ">
</center></div>
<div class="isi"><center><b>GAMES</b></center>
<table class="table">
<td><div class="sampul"><span id="game" class="game"></span>
<img src="2/3.png" width="250" height="200">
<div class="donload"><b><strong>coc</strong></b><font style="float:right;"><a href=""><strong>DOWNLOAD</strong></a></font></div>
</img>
</div>
</td>
<td><div class="sampul"><span id="game" class="game"></span>
<img src="2/3.png" width="250" height="200">
<div class="donload"><b><strong>coc</strong></b><font style="float:right;"><a href=""><strong>DOWNLOAD</strong></a></font></div>
</img>
</div>
</td>
</table>
</div></div>
<div class="team">
<center><h1>Team</h1></center>
</div>
<footer>
<center>Copyrigt Behmedia9 © | Web Design By: Behspotku.blogspot.com </center>
</footer>
</div></div>
<script>
function openSlideMenu(){
document.getElementById('side-menu').style.width ='250px';
document.getElementById('main').style.marginLeft ='250px';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.width ='0';
document.getElementById('main').style.marginLeft ='0';
}
</script>
</body>
</html>
Sedikit penjelasan, kode yang berwarna kuning untuk membuat menu hamburgernya, karena ini design responsif..
Yang ke dua kita perlu file yang bernama style.css
style.css
body{
background-color: #f4f4f4;
margin:0px;
}
.navbar{
background-color: #0f9008;
overflow:hidden;
height:56px;
position: fixed;
width:100%;
}
.navbar a{
float:left;
display: block;
color:#f2f2f2;
text-align: center;
padding:14px 16px;
text-decoration: none;
font-size: 18px;
}
.navbar ul{
margin:8px 0 0 0;
list-style: none;
}
.navbar a:hover{
background:rgba(0,0,0,0.1);
color:white;
}
.side-nav{
height:100%;
width:0;
position:fixed;
z-index: 1;
top: 0;
left: 0;
color:black;
background-color: #fff;
opacity:1s;
overflow-x: hidden;
padding-top: 0px;
transition: 0.8s;
}
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 22px;
color:#000;
font-size: 18px;
display:block;
font-family: arial,Alba;
transition:0.3s;
}
.side-nav a:hover{
color:#20bb1d;
background:rgba(0,0,0,0.1);
}
.side-nav .btn-close{
position:absolute;
top:0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
#main{
transition:margin-left 0.5s;
padding: 8px;
padding-top:0px;
overflow:hidden;
width:auto;
}
.game{transition: margin-bottom 0.5s;}
.content{
background-color: white;
height:auto;
width:100%;
color:white;
padding:4px;
padding-top: 40px;
}
.satu{
margin-top: 20px;
}
.isi{
width:100%;
height:auto;
margin-top: 60px;
padding-bottom: 6px;
background-color: white;
}
footer{
width:100%;
height:90px;
background-color: #0f9008;
padding-top: 10px;
color:#fff;
}
.sampul{
width:250px;
height:auto;
background-color:#f2f4f7;
margin:8px;
padding:2px;
float:;
box-shadow: 1px 1px 1px 1px #ccc;
}
.sampul:hover{
background-color:#20bb1d;
}
.donload{
background-color:#20bb1d;width:auto;height:auto;padding:3px; color:white;
}
.donload:hover{
background:rgba(0,0,0,0.3);
color:#fff;
}
.gambar{
max-width: 100%
}
.gambar1{
width:auto;
height:auto;
margin-left: 28px;
border-radius:80px;
font-family: MV Boli;
background-image:url(2/KOGO copy.png);
}
.team{
background-color: #fff;
color:#555;
width:100%;
}
.warna{
background-image: url(1.png);
height:150px;
border-bottom: solid 2px #20bb1d;
}
#copy{
color:black;
}
#copy:hover{
background:rgba(0,0,0,0.0);
color:white;
}
.beh{
width:auto;
}
table{
width:100%;
}
td{
float:left;
}
@media(max-width:568px){
.navbar-nav{display: none;}
.navbar{
background-color: #0f9008;
overflow:hidden;
height:60px;
position: fixed;
width:100%;
}
.table{
width:100%;
}
}
@media(min-width:568px){
.open-slide{display:;}
}
Style.css fungsinya untuk mempercantik tampilan websait kita.. begitulah design websait sederhana kita sobat.. dengan senang hati, sobat boleh copas code di atas secara gratis..
Tapi ingat ya sobat.. sobat perlu mengganti gambar yang saya buat di kode di atas
0 Komentar