Add web design files
205
web-design/сайт/Clover Leaf/Clover Leaf.css
Normal file
@@ -0,0 +1,205 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
.FL {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.FR {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.CB {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 765px;
|
||||
height: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-bottom: 15px;
|
||||
width: 765px;
|
||||
height: 249px;
|
||||
}
|
||||
|
||||
.top_left {
|
||||
width: 260px;
|
||||
height: 249px;
|
||||
background-image: url(images/img1.gif);
|
||||
}
|
||||
|
||||
.clover {
|
||||
color: white;
|
||||
font-family: Arial;
|
||||
letter-spacing: -1px;
|
||||
font-size: 20px;
|
||||
margin-top: 106px;
|
||||
margin-left: 30px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.templates {
|
||||
color: white;
|
||||
font-family: Arial;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.leaf {
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
.top_right {
|
||||
width: 505px;
|
||||
height: 249px;
|
||||
background-image: url(images/img2.gif);
|
||||
}
|
||||
|
||||
.adv {
|
||||
margin-top: 51px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
margin-right: 26px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
display: inline;
|
||||
font-size: 9px;
|
||||
font-family: Arial;
|
||||
margin-left: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.menu_border {
|
||||
border-left: 2px dashed #0D6DFF;
|
||||
}
|
||||
|
||||
.menu li a {
|
||||
text-decoration: none;
|
||||
color: #0D6DFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 765px;
|
||||
height: 351px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #797979;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.image_text {
|
||||
color: white;
|
||||
font-family: Arial;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding-left: 20px;
|
||||
padding-top: 14px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.content_left {
|
||||
width: 223px;
|
||||
margin-left: 20px;
|
||||
height: 351px;
|
||||
}
|
||||
|
||||
.left_image {
|
||||
background-image: url(images/img5.gif);
|
||||
width: 223px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.left_list {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.left_list li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: black;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.content_right {
|
||||
width: 503px;
|
||||
height: 351px;
|
||||
}
|
||||
|
||||
.otstup {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.text_on_right_from_image {
|
||||
width: 320px;
|
||||
margin-right: 40px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.right_image {
|
||||
background-image: url(images/img6.gif);
|
||||
width: 503px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.right_list {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.right_list li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.right_list li p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 765px;
|
||||
height: 59px;
|
||||
background-image: url(images/img7.gif)
|
||||
}
|
||||
|
||||
.copy {
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-family: Arial;
|
||||
text-align: center;
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
.bottom_link {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.last {
|
||||
text-align: center;
|
||||
font-family: Arial;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.last a {
|
||||
color: black;
|
||||
}
|
||||
73
web-design/сайт/Clover Leaf/Clover Leaf.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link href="Clover Leaf.css" rel="stylesheet" type="text/css">
|
||||
<title>CLOVER LEAF</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<div class="top_left FL">
|
||||
<div class="FL">
|
||||
<h2 class="clover">CLOVER LEAF</h2>
|
||||
<p class="templates">BY FREE CSS TEMPLATES</p>
|
||||
</div>
|
||||
<img class="leaf" src="images/img3.gif" width="44" height="47" />
|
||||
</div>
|
||||
<div class="top_right FR">
|
||||
<ul class="menu FR">
|
||||
<li><a href="#">ABOUT US</a></li>
|
||||
<li class="menu_border"><a href="#">PRODUCTS</a></li>
|
||||
<li class="menu_border"><a href="#">SERVICES</a></li>
|
||||
<li class="menu_border"><a href="#">CLIENTS</a></li>
|
||||
<li class="menu_border"><a href="#">SUPPORT</a></li>
|
||||
</ul>
|
||||
<img class="adv" src="images/ad468x60.jpg" width="468" height="60" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content_left FL">
|
||||
<div class="left_image">
|
||||
<p class="image_text">LOREM IPSUM DOLOR</p>
|
||||
</div>
|
||||
<ul class="left_list">
|
||||
<li>
|
||||
<p class="text">In posuere eleifend odio quisque semper augue mattis wisi. <a class="link" href="#">Maecenas ligula...</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text">Donec leo, vivamus fermentum nibh in augue praesent a lacus at. <a class="link" href="#">Urna congue rutrum...</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text">Quisque dictum integer nisl risus, sagittis convallis, rutrum id. <a href="#" class="link">Congue and nibh...</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content_right FR">
|
||||
<div class="right_image">
|
||||
<p class="image_text">WELCOME TO CLOVER LEAF</p>
|
||||
</div>
|
||||
<img class="FL" src="images/img8.jpg" width="122" height="123" />
|
||||
<p class="text FR text_on_right_from_image"><strong>Clover Leaf</strong> is a <a href="#" class="link">Free CSS Templates</a> released under a <a href="#" class="link">Creative Commons Attribution 2.5 License.</a>. The photo is from <a href="#" class="link">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
|
||||
<p class="text CB otstup">An unordered list example:</p>
|
||||
<ul class="right_list">
|
||||
<li>
|
||||
<p class="text">List item number one</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text">List item number two</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text">List item number three</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<p class="copy">Copyright © 2007 Clover Leaf. All Right Reserved. Designed by <a href="#" class="bottom_link">Free CSS Templates</a>.</p>
|
||||
</div>
|
||||
<p class="last"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
web-design/сайт/Clover Leaf/images/ad468x60.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
web-design/сайт/Clover Leaf/images/img1.gif
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
web-design/сайт/Clover Leaf/images/img2.gif
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
web-design/сайт/Clover Leaf/images/img3.gif
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
web-design/сайт/Clover Leaf/images/img5.gif
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
web-design/сайт/Clover Leaf/images/img6.gif
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
web-design/сайт/Clover Leaf/images/img7.gif
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
web-design/сайт/Clover Leaf/images/img8.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |