<html>
<title>
</title>
<head>
<style>
body {
background-color: #D2691E;
}
.menu1 {
border: 2px solid white;
background-color: #DEB887;
}
.menu1 ul li {
list-style: none;
display: inline;
margin: 10px;
padding: 17px;
font-size: 15px;
}
.menu1 ul li:hover {
background-color: #FFE4E1;
}
.nav {
border: 1px solid white;
background-color: #DEB887;
Width: 20%;
margin-top: 20px;
margin: 5px;
padding: 3px;
float: left;
}
.nav ul li {
margin: 20px;
list-style: none;
}
.clr01 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr02 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr03 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr04 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr05 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr06 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr07 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr08 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr09 {
border: 1px solid white;
background-color: #FFE4E1;
width: 90%;
}
.clr01:hover {
background-color: #00CED1;
}
.clr02:hover {
background-color: #9400D3;
}
.clr03:hover {
background-color: #FF1493;
}
.clr04:hover {
background-color: #00BFFF;
}
.clr05:hover {
background-color: #B22222;
}
.clr06:hover {
background-color: #66CDAA;
}
.clr07:hover {
background-color: #FF00FF;
}
.clr08:hover {
background-color: #DAA520;
}
.section {
border: 1px dotted white;
background-color: #DEB887;
margin: 5px;
float: left;
width: 77%;
height: 200px;
}
.footer {
border: 1px solid white;
float: left;
background-color: black;
clear: both;
width: 100%;
color: white;
text-align: center;
font-size: 20px;
}
.line1 {
border: 1px dotted black;
margin-top: 5px;
background-color: #FFE4E1;;
}
.line1 img{
width: 220px;
height: 150px;
margin: 4px;
margin-left: 20px;
border: 2px solid #66CDAA;
}
.line1 img:hover{
width: 240;
height: 165;
transition: 1s;
}
.section1 {
border: 1px dotted white;
background-color: #DEB887;
padding-top: 2px;
margin: 3px;
float: left;
width: 77%;
height: 350px;
}
.slide img {
border: 1px solid white;
width: 70%;
height: 300px;
margin: 10px;
}
.slider figure img{
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="menu1">
<ul>
<li> 12x36 Photo Album </li>
<li> 17x24 Photo album </li>
<li> All Size Album </li>
<li> Portraits Design </li>
<li> Pre Weds Photo Copy </li>
<li> Cinomatic Photo Effect </li>
</ul>
</div>
<div class="nav">
<ul>
<div class="clr01">
<li> Wedding Photography </li>
</div>
<div class="clr02">
<li> Candid Photography </li>
</div>
<div class="clr03">
<li> Cinomatic Photography </li>
</div>
<div class="clr04">
<li> Professinal Photography </li>
</div>
<div class="clr05">
<li> Event Photography </li>
</div>
<div class="clr06">
<li> Product Photography </li>
</div>
<div class="clr07">
<li> Fashion Photography </li>
</div>
<div class="clr08">
<li> Preweds Photography </li>
</div>
</ul>
</div>
<div class="section">
<div class="line1">
<img src="images/p01.jpg">
<img src="images/p02.jpg">
<img src="images/p03.jpg">
<img src="images/p04.jpg">
</div>
</div>
<div class="section1">
</div>
<div class="footer">
<p> www.oped.com </p>
</div>
</body>
</html>
Comments
Post a Comment