Buat seperti di atas
Jawab :
1. HTML
<html>
<head><title>latihan layout</title>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<div id="top" class="clearfix">
<ul>
<li id="judul">
<h1>Logo Website</h1>
</li>
<li id="gambar">
<img src="https://s3.amazonaws.com/peoplepng/wp-content/uploads/2018/06/08182002/eid-mosque-png-downloads.png">
</li>
</ul>
</div>
<div id="header" class="clearfix">
<ul>
<li><a href="#">Link 1</a></li>
<li class="drap"><a href="#">Link 2</a>
<div class="down">
<p><a href="dropdown1.html">Dropdown1</a></p>
<p><a href="dropdown2.html">Dropdown2</a></p>
<p><a href="dropdown3.html">Dropdown3</a></p>
</div>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="main" class="clearfix">
<div id="sidebar">
<div id="sidbar">
<h1>Sidbar Links</h1>
<hr>
<ul id="text">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="other">
<h1>Other Widgets</h1>
<hr>
<p>This is Photoshop's version of Lorem lpsum. proin gravida nibh vel velit auctor aliquet. aenean solicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</p>
</div>
</div>
<div id="kotak"></div>
<div id="content">
<h1>This is a Lorem Ipsum Heading</h1>
<p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
<p><a href="#">Read More</a></p>
<hr>
</div>
<div id="kotak"></div>
<div id="content">
<h1>This is a Lorem Ipsum Heading</h1>
<p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
<p><a href="#">Read More</a></p>
<hr>
</div>
<div id="kotak"></div>
<div id="content">
<h1>This is a Lorem Ipsum Heading</h1>
<p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
<p><a href="#">Read More</a></p>
<hr>
</div>
</div>
<div id="footer">
<p>© Copyright<a>YourSite</a>.All rights reserved.</p>
</div>
</div>
<body>
</html>
2. CSS name field (external.css)
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
body{
padding: 2%;
font-family: arial;
}
#container{
margin: auto;
}
#top{
background-color: #323232;
min-height: 17%;
}
#judul h1 {
float: left;
color: white;
font-size: 40px;
font-weight: bold;
margin: 3% 0% 0% 5%;
font-family: times new romant;
}
#gambar img{
float: right;
position: relative;
width: 25%;
margin: 2% 5% 0% 0%;
}
#header{
background-color:#666666;
}
#header ul li{
display: inline-block;
float: left;
border-right: 2px solid #3F3F3F;
padding: 1.5% 0% 1.5% 0%;
}
#header ul li:hover{
background-color:#444444;
}
#header ul li a{
text-decoration: none;
color: #D0D0D0;
font-weight: bold;
padding: 20px 30px 40px 30px;
}
.drap{
position: relative;
display: inline-block;
}
.down {
display: none;
position: absolute;
background-color: #666666;
float: left;
margin-top: 18px;
}
.down p {
padding: 13px 10px 13px 10px;
border-bottom: 2px solid #3F3F3F;
}
.down p:hover {
background-color: #444444;
}
.drap:hover .down{
display: block;
}
#main{
display: block;
}
#sidebar{
background-color: #E5E5E5;
float: right;
margin-left:20px;
width: 25%;
height: 1000px;
}
#sidbar hr{
width: 21%;
margin: 15px 0px 15px 0px;
position: absolute;
border: 1px ridge #ADADAD;
}
#sidbar {
float: left;
font-weight: bold;
margin: 30px 0px 0px 20px;
}
#text{
margin: 30px 20px 0px 20px;
float: left;
}
#text li{
margin-bottom: 20px;
}
#text li a{
text-decoration: none;
color: #E3A04A;
}
#other {
float: left;
margin: 0px 20px 10px 20px;
display: block;
}
#other h1{
font-weight: bold;
margin: 10px 0px 0px 0px;
}
#other hr{
width: 21%;
margin: 15px 0px 15px 0px;
position: absolute;
border: 1px ridge #ADADAD;
}
#other p{
margin: 30px 0px 0px 0px;
color: #7E7E7E;
}
#kotak{
background-color: #E5E5E5;
width: 225px;
height: 225px;
float: left;
margin: 40px 0px 0px 20px;
}
#content{
background-color: #FFFFFF;
}
#content h1{
font-weight: bold;
font-size: 20px;
padding: 50px 0px 0px 22%;
}
#content p{
padding: 20px 0px 10px 22%;
color: #7E7E7E;
}
#content p a{
color: #E3A04A;
text-decoration: none;
font-weight: bold;
}
#content hr{
margin: 120px 0px 0px 20px;
border: 1px ridge #ADADAD;
}
#footer{
background-color: #333333;
}
#footer p{
padding: 20px 0px 20px 0px;
text-align: center;
color: white;
font-weight: bold;
}
#footer a{
color: #BA6726;
}
Tidak ada komentar:
Posting Komentar