Script Web
!DOCTYPE
html>
<html>
<head>
<style
type="text/css">
#wrap {
max-width:1000px;
margin:auto;
background-color:lightblue;
}
#menu_horisontal {
width:997px;
height:30px;
border:1px
solid black;
background-color:black;
color:white;
text-align:center;
top:0px;
position:fixed;
z-index:200;
}
#header {
position:relative;
top:27px;
max-width:1000px;
height:200px;
border:1px
solid black;
background-color:lightgrey;
display:block;
}
#header h1 {
font-family:gabrielle;
font-size:55px;
text-align:left;
font-weight:bold;
color:black;
margin-top:60px;
margin-left:170px;
margin-bottom:0px;
padding:0;
text-shadow:3px
2px 1px grey;
}
#logo {
position:absolute;
width:130px;
height:130px;
top:10px;
border:1px
solid black;
left:20px;
background-color:lightgrey;
text-align:center;
border-radius:360px;
}
#sosialmedia {
position:absolute;
width:200px;
height:30px;
top:160px;
right:10px;
border:1px
solid black;
background-color:lightgrey;
text-align:center;
}
<div id="wrap">
<div
id="menu_horisontal">Menu Horisontal</div>
<div id="header">
<h1>Wisata Kota Malang</h1>
<div id="logo">Logo</div>
<div id="sosialmedia">Social
Media</div>
</div>
<body>
</html>
Hasil dari script diatas
Kemudian menambah layout lagi
dengan menggunkan script seperti dibawah ini :
!DOCTYPE
html>
<html>
<head>
<style
type="text/css">
#wrap {
max-width:1000px;
margin:auto;
background-color:lightblue;
}
#menu_horisontal
{
width:997px;
height:30px;
border:1px solid black;
background-color:black;
color:white;
text-align:center;
top:0px;
position:fixed;
z-index:200;
}
#header {
position:relative;
top:27px;
max-width:1000px;
height:200px;
border:1px solid black;
background-color:lightgrey;
display:block;
}
#header h1 {
font-family:gabrielle;
font-size:55px;
text-align:left;
font-weight:bold;
color:black;
margin-top:60px;
margin-left:170px;
margin-bottom:0px;
padding:0;
text-shadow:3px 2px 1px grey;
}
#logo {
position:absolute;
width:130px;
height:130px;
top:10px;
border:1px solid black;
left:20px;
background-color:lightgrey;
text-align:center;
border-radius:360px;
}
#sosialmedia {
position:absolute;
width:200px;
height:30px;
top:160px;
right:10px;
border:1px solid black;
background-color:lightgrey;
text-align:center;
#menu {
position:relative;
width:997px;
height:30px;
background-color:lightgrey;
color:black;
top:29px;
right:0px;
text-align:center;
border:1px
solid black;
}
#kanan {
width:200px;
margin-top:34px;
min-height:510px;
position:relative;
display:block;
float:right;
}
#trending {
position:absolute;
width:197px;
height:300px;
background-color:lightgrey;
display:block;
border:1px
solid black;
text-align:center;
}
#banner {
position:absolute;
top:305px;
width:197px;
min-height:200px;
background-color:lightgrey;
display:block;
border:1px
solid black;
margin-bottom:200px;
text-align:center;
}
<div id="wrap">
<div
id="menu_horisontal">Menu Horisontal</div>
<div
id="header">
<h1>Wisata
Kota Malang</h1>
<div
id="logo">Logo</div>
<div
id="sosialmedia">Social Media</div>
</div>
<div id="menu">Menu</div>
<div
id="kanan">
<div
id="trending">Trending</div>
<div
id="banner"></div>
</div>
<body>
</html>
Hasil
dari penambahan script diatas
Script untuk membuat content
dan footer
!DOCTYPE
html>
<html>
<head>
<style
type="text/css">
#wrap {
max-width:1000px;
margin:auto;
background-color:lightblue;
}
#menu_horisontal
{
width:997px;
height:30px;
border:1px solid black;
background-color:black;
color:white;
text-align:center;
top:0px;
position:fixed;
z-index:200;
}
#header {
position:relative;
top:27px;
max-width:1000px;
height:200px;
border:1px solid black;
background-color:lightgrey;
display:block;
}
#header h1 {
font-family:gabrielle;
font-size:55px;
text-align:left;
font-weight:bold;
color:black;
margin-top:60px;
margin-left:170px;
margin-bottom:0px;
padding:0;
text-shadow:3px 2px 1px grey;
}
#logo {
position:absolute;
width:130px;
height:130px;
top:10px;
border:1px solid black;
left:20px;
background-color:lightgrey;
text-align:center;
border-radius:360px;
}
#sosialmedia {
position:absolute;
width:200px;
height:30px;
top:160px;
right:10px;
border:1px solid black;
background-color:lightgrey;
text-align:center;
#menu {
position:relative;
width:997px;
height:30px;
background-color:lightgrey;
color:black;
top:29px;
right:0px;
text-align:center;
border:1px solid black;
}
#kanan {
width:200px;
margin-top:34px;
min-height:510px;
position:relative;
display:block;
float:right;
}
#trending {
position:absolute;
width:197px;
height:300px;
background-color:lightgrey;
display:block;
border:1px solid black;
text-align:center;
}
#banner {
position:absolute;
top:305px;
width:197px;
min-height:200px;
background-color:lightgrey;
display:block;
border:1px solid black;
margin-bottom:200px;
text-align:center;
}
#content {
position:relative;
top:34px;
max-width:795px;
height:505px;
background-color:black;
display:block;
border:1px
solid black;
text-align:center;
}
#slide {
position:relative;
top:2px;
max-width:793px;
height:200px;
background-color:lightgrey;
display:block;
border:1px
solid black;
}
#isi {
position:relative;
top:4px;
max-width:793px;
height:295px;
background-color:lightgrey;
display:block;
border:1px
solid black;
}
#footer {
clear:both;
margin-top:24px;
max-width:1000px;
height:30px;
background-color:black;
color:white;
display:block;
text-align:center;
}
<div id="wrap">
<div
id="menu_horisontal">Menu Horisontal</div>
<div
id="header">
<h1>Wisata
Kota Malang</h1>
<div
id="logo">Logo</div>
<div
id="sosialmedia">Social Media</div>
</div>
<div
id="menu">Menu</div>
<div id="kanan">
<div
id="trending">Trending</div>
<div
id="banner"></div>
</div>
<div
id="content">
<div
id="slide">Slide Gambar</div>
<div
id="isi">Content</div>
</div>
<div
id="footer">Footer</div>
<body>
</html>
Tidak ada komentar:
Posting Komentar