h3lp/learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add web design files

Browse Source
This commit is contained in:
h3lp
2025-11-20 21:37:53 +02:00
parent 258f24570a
commit 9192716bfb
510 changed files with 12551 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
web-design/Занятие_5/5.css Normal file
View 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/Занятие_5/5.html Normal file
View File

@@ -0,0 +1,103 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="5.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 &copy; 2007 Adios! Designed by <a href="#">Free CSS Templates</a></p>
</body>
</html>

BIN
web-design/Занятие_5/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 333 KiB

BIN
web-design/Занятие_5/images/img01.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 930 B

BIN
web-design/Занятие_5/images/img02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
web-design/Занятие_5/images/img03.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 B

BIN
web-design/Занятие_5/images/img04a.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 B

BIN
web-design/Занятие_5/images/img05a.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 B

BIN
web-design/Занятие_5/images/img06.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 B

BIN
web-design/Занятие_5/images/img06a.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 B

BIN
web-design/Занятие_5/images/img07.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 B

BIN
web-design/Занятие_5/images/img4.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 B

BIN
web-design/Занятие_5/images/img5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 B

BIN
web-design/Занятие_5/images/spacer.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 B