Вы находитесь на странице: 1из 8

--------------------------------------------------------------------------------

--------------------------------
HTML
--------------------------------------------------------------------------------
--------------------------------
<html>
<head>
<meta charset="UTF-8"/>
<title>/ /</title>
<link rel="shortcut icon" type="ico" href="icon.png" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<a id="logo" href="#">/ /</a>
</header>
<nav id="nav">
<ul class="nav">
<li><a href="/ /" title="/ /" class="na
</ul>
</nav

--------------------------------------------------------------------------------
--------------------------------
CSS
--------------------------------------------------------------------------------
--------------------------------
html, body,
{
margin: 0;
padding: 0;
background: #f2f2f2;
font: 14px "Segoe UI", sans-serif;
}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}

a
{
color: #aa0000;
text-decoration: none;
}
a:hover
{
color: #aa0000;
text-decoration: underline;
}
img, a img
{
border: 0;
margin: 8px 16px 8px 16px;
padding: 0;
}

.nav
{
margin: 0;
padding: 0;
list-style: none;
}
.nav li
{
float: left;
}
#site-wrap
{
margin: 0 auto;
width: 900px;
}

.nav,
#site-wrap,
#header,
#nav,
#middle,
#footer
{
zoom: 1;
}

.nav:after,
#site-wrap:after,
#header:after,
#nav:after,
#middle:after,
#footer:after
{
content: "";
clear: both;
display: block;
}
/** Header */
#header
{
padding: 25px 0;
}
/** Logo */
#logo
{
padding: 8px 15px;
color: #ffffff;
border-radius: 5px;
border: 1px solid #981ble;
background: #3494e2 url( "images/logo-tile.png" ) repeat-x ;
font-size: 30px;
text-shadow: 0 0 10px rgba(255, 255, 255, .5);
float: left;
}
/** Language selection */
#lang-sel
{
color: #777777;
float: right;
}
#lang-sel strong
{
margin: 0 5px;
font-weight: normal;
float: left;
}
#lang-sel ul
{
margin: 0 5px;
float: left;
}
#lang-sel li
{
margin: 0 5px;
}
#lang-sel a
{
color: #000000;
}
#lang-sel a:hover
{
color: #990000;
}
#lang-sel .current a
{
font-weight: bold;
}

/** Info */
#header .info
{
margin: 20px 0 0 0;
color: #666666;
text-align: right;
font-size: 14px;
text-align: right;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
clear: right;
float: right;
}
#nav
{
border: 1px solid #262626;
border-radius: 5px;
color: #ffffff;
background: #030303 url( "images/nav-tile.png" ) 0 0 repeat-x;
}

#nav a
{
padding: 0 9px;
background: url( "images/nav-item-hovered-tile.png" ) left 50px
repeat-x;
color: #ffffff;
display: block;
}
#nav a:hover
{
background: #cb2027;
background-position: 0 0;
}
#nav .nav
{
font-size: 11px;
line-height: 32px;
font-weight: bold;
text-transform: uppercase;
float: left;
}
#nav .nav > li:first-child a
{
border-radius: 3px 0 0 3px;
}
#search
{
margin: 0;
padding: 4px;
height: 24px;
float: right;
}

#search input[type="search"]
{
margin: 0;
padding: 0 0 0 20px;
width: 180px;
height: 24px;
border: 1px solid #1a1a1a;
color: #ffffff;
background: #1abfbf;
box-sizing: border-box;
}
#middle
{
margin: 20px 0;
border: 1px solid #19686d;
border-radius: 10px;
background-color: #ffffff;
}

#footer
{
margin: 20px 0;
color: #888888;
}

#footer a
{
color: #888888;
text-decoration: none;
}
#footer a:hover
{
color: #990000;
}
#footer .nav
{
float: left;
}
#footer .nav li
{
padding: 0 10px;
border-left: 1px solid #e4e4e4;
}

#footer .nav li:first-child


{
border-left: 0;
}
#footer .copy
{
margin: 0;
text-align: right;
float: right;
}
.main
{
padding: 10px;
margin: 5px;
}
.sb
{
padding: 10px;
margin: 5px;
width: 190px;
}

.l-c
{
background-image: none;
}
.l-c .main
{
}
.l-c .sb
{
display: none;
}
.l-cs
{
background-image: url( "images/middle-l-cs-tile.png" ) no-repeat
;
background-position: top right;
background-repeat: repeat-y;
}

.l-cs .main
{
width: 650px;
float: left;
}

.l-cs .sb
{
float: left;
width: 100px;
}
}
.l-sc
{
background-image: url( "images/middle-l-sc-tile2.png" ) no-repea
t;
background-position: top left;
background-repeat: repeat-x;
}
.l-sc .main
{
width: 650px;
float: right;
}
.l-cs .sb
{
width: 150px;
float: right;
}

.l-sc .sb
{
float: left;
padding: 10px;
margin: 5px;
}
.l-sc .cs
{

.main ul
{
margin: 1em 0;
padding: 0;
list-style: inside;
}
.gallery
{
}
.gallery .preview
{
width: 100px;
text-align: center;
}
.gallery .preview img
{
border: 4px solid #f7ccf3;
}
.gallery .preview img:hover
{
border-color: #d2097f;
}

.gallery .thumbs li
{
margin: 2px 2px 2px 7px;
}
.gallery .thumbs li:first-child
{
margin-left: 0;
}
.gallery .thumbs a
{
border: 4px solid #f7ccf3;
display: block;
}
.gallery .thumbs a:hover
{
border-color: #d2097f;
}
.gallery .thumbs img
{
display: block;
}

p, h1
{
text-align: justify;
text-align: center;
}
div
{
text-align: center;
}
--------------------------------------------------------------------------
-
-------------------------------------------------------------------------