Add web design files
This commit is contained in:
232
web-design/сайт/adios/adios.css
Normal file
232
web-design/сайт/adios/adios.css
Normal file
@@ -0,0 +1,232 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
.main {
|
||||
width: 760px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.FL {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.FR {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.otstup {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 171px;
|
||||
border-bottom: 7px solid #E16629;
|
||||
}
|
||||
|
||||
.top_left {
|
||||
width: 240px;
|
||||
background-color: #29A4E1;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.adios {
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.tl_text {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top_right {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.toplink {
|
||||
height: 53px;
|
||||
border-top: 7px solid #29A4E1;
|
||||
}
|
||||
|
||||
.toplink:hover {
|
||||
border-top: 7px solid #1A7196;
|
||||
background-color: #DCDCDC;
|
||||
}
|
||||
|
||||
.toplinktext {
|
||||
margin-top: 15px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.home {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.plan {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
.support {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.about {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.contact {
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 760px;
|
||||
height: 425px;
|
||||
border-bottom: 7px solid #E16629;
|
||||
}
|
||||
|
||||
.content_left {
|
||||
width: 240px;
|
||||
height: 425px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.left_list {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.left_list li {
|
||||
color: #797979;
|
||||
width: 165px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 14px;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
.small_text {
|
||||
font-size: 11px;
|
||||
font-family: Arial;
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.content_right {
|
||||
width: 520px;
|
||||
height: 425px;
|
||||
}
|
||||
|
||||
.small_title {
|
||||
color: #797979;
|
||||
font-weight: bold;
|
||||
font-family: Arial;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.big_title {
|
||||
color: #797979;
|
||||
font-weight: bold;
|
||||
font-family: Arial;
|
||||
font-size: 22px;
|
||||
padding: 0;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.line1 {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.line2 {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.arrow_left {
|
||||
margin-top: 43px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.arrow_welcome {
|
||||
margin-right: 20px;
|
||||
margin-top: 39px;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 50px;
|
||||
width: 420px;
|
||||
font-size: 13px;
|
||||
font-family: Arial;
|
||||
color: #797979;
|
||||
}
|
||||
|
||||
.dotted_line {
|
||||
border-bottom: 2px dotted #BCBCBC;
|
||||
width: 480px;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.left_list_div {
|
||||
width: 230px;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.right_list_div {
|
||||
width: 230px;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.middle_title {
|
||||
color: #797979;
|
||||
font-weight: bold;
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list_arrow {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.line3 {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
text-align: center;
|
||||
color: #797979;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #29A3E1;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #797979;
|
||||
}
|
||||
103
web-design/сайт/adios/adios.html
Normal file
103
web-design/сайт/adios/adios.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>adios</title>
|
||||
<link href="adios.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main" align="center">
|
||||
<div class="top">
|
||||
<div class="top_left FL">
|
||||
<img src="images/img01.gif" width="240" height="70" alt="" />
|
||||
<p class="adios">adios!</p>
|
||||
<p class="tl_text">By Free CSS Templates</p>
|
||||
</div>
|
||||
<div class="top_right FR">
|
||||
<a href="#">
|
||||
<div class="toplink home FL">
|
||||
<p class="toplinktext"><u>H</u>ome</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="toplink plan FL">
|
||||
<p class="toplinktext"><u>P</u>lan a Cruise</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="toplink support FL">
|
||||
<p class="toplinktext">Customer <u>S</u>upport</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="toplink about FL">
|
||||
<p class="toplinktext">About <u>U</u>s</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="toplink contact FL">
|
||||
<p class="toplinktext"><u>C</u>ontact Us</p>
|
||||
</div>
|
||||
</a>
|
||||
<img src="images/img02.jpg" width="520" height="110" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="FL content_left" align="left">
|
||||
<p class="small_title FL">Recent Updates</p> <img class="FR arrow_left" src="images/img4.gif" width="9" height="9">
|
||||
<hr class="line1" size="3" color="#CFCFCF">
|
||||
<ul type="square" class="left_list">
|
||||
<li>
|
||||
<strong class="date">July 12, 2007</strong><br>
|
||||
<a href="#" class="text">Lorem Ipsum Dolor</a>
|
||||
<p class="small_text">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. <a href="#">Read more...</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<strong class="date">July 01, 2007</strong><br>
|
||||
<a href="#" class="text">Saqittis Et Convallis</a>
|
||||
<p class="small_text">Donec leo, vivamus fermentum nibh in augue praesent lorem ipsum dolor a lacus at urna congue rutum. <a href="#">Read more...</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<strong class="date">June 30, 2007</strong><br>
|
||||
<a href="#" class="text">Inteqer Nisl Risus</a>
|
||||
<p class="small_text">Quisque dictum integer nisl risus, sagittis convallis, rutum id, congue, and nibh. <a href="#">Read more...</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="FR content_right" align="left">
|
||||
<p class="big_title FL">Welcome to Adios!</p> <img class="FR arrow_welcome" src="images/img4.gif" width="9" height="9">
|
||||
<hr class="line2" size="3" color="#CFCFCF" align="center">
|
||||
<p class="text1"><strong>Adios</strong> is a <a href="#">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="#">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. <strong>Enjoy :)</strong></p>
|
||||
<div class="dotted_line"></div>
|
||||
<div class="left_list_div FL">
|
||||
<p class="middle_title FL">Wisi Maecenas Ligula</p> <img class="FR list_arrow" src="images/img4.gif" width="9" height="9">
|
||||
<hr class="line3" size="3" color="#CFCFCF">
|
||||
<ul>
|
||||
<li><a href="#" class="text">Mauris volputate dolor sit amet</a></li>
|
||||
<li><a href="#" class="text">Nulla luctus eleifend purus</a></li>
|
||||
<li><a href="#" class="text">Praesent scelerisque lorem</a></li>
|
||||
<li><a href="#" class="text">Ut nonummy rutrum sem</a></li>
|
||||
<li><a href="#" class="text">Pellentesque tempus quam</a></li>
|
||||
<li><a href="#" class="text">Fusce ultrices fringilla metus</a></li>
|
||||
<li><a href="#" class="text">Praesent mattis condimentuml</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right_list_div FR">
|
||||
<p class="middle_title FL">Pellentesque Tempus</p> <img class="FR list_arrow" src="images/img4.gif" width="9" height="9">
|
||||
<hr class="line3" size="3" color="#CFCFCF">
|
||||
<ol>
|
||||
<li><a href="#" class="text">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</a></li>
|
||||
<li><a href="#" class="text">Donec leo, vivamus fermentum nibh in augue praesent.</a></li>
|
||||
<li><a href="#" class="text">Quisque dictum integer nisl sagittis convallis rutum.</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copy">Copyright © 2007 Adios! Designed by <a href="#">Free CSS Templates</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
web-design/сайт/adios/images/img01.gif
Normal file
BIN
web-design/сайт/adios/images/img01.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 B |
BIN
web-design/сайт/adios/images/img02.jpg
Normal file
BIN
web-design/сайт/adios/images/img02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
web-design/сайт/adios/images/img4.gif
Normal file
BIN
web-design/сайт/adios/images/img4.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 B |
Reference in New Issue
Block a user