1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
| body{background: #efefef url(../img/light-veneer.png);margin:0; padding:0; font:16px/24px Arial,Tahoma, sans-serif; color: #272727;}/* задаем стили и цвет всему сайту, url(../img/light-veneer.png)задаем фоновую картинку сайту, ../img/ означает вернуться в каталог выше и обратиться к папке img, margin:0; padding:0;обнуляем отступы,font:16px/24px -размер шрифта и расстояние между строчками*/
a{text-decoration: none;} /* убираем декорацию текстовых ссылок*/
a:hover{transition:all 0.5s ;} /* transition - позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства*/
/* Cтруктура сайта*/
div.mid {width: 1000px; margin: 0 auto;} /* отцентрируем блок mid и зададим ширину 1000px*/
div.header {padding-top: 20px;
background: /* стили для дива с классом хедер ( сначало идет градиент потом цвет)*/
radial-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0) 250px) 10% -200px no-repeat;/* радиальный градиент располагается вдоль своего радиуса, выходя наружу из центра элемента по круговой или эллиптической форме, при этом цвета градиента равномерно распределяются по всему пространству элемента, rgba-то RGB с добавлением альфа-канала четвёртым аргументом, который может принимать значения от 0 (прозрачность) до 1 (непрозрачность)*/
background-color:#101417; background-size: 500px 500px;}
div.footer {margin: 20px 0;text-align: center; text-transform: uppercase;} /* text-transform:uppercase -Все символы текста становятся прописными (верхний регистр).*/
/* Шапка сайта*/
div.topmenu-mini-wrapper{display: none;} /*прячем меню гамбургер*/
div.topmenu{float: right; height: 70px; line-height: 70px;} /*line-height: -высота строки*/
div.topmenu a{margin:0 0 0 10px; color: #1683a3;} /* внешний отступ ссылок с левой стороны в класе топменю 10px*/
div.topmenu a:hover{color: #fff;} /*стили при наведении на ссылки в классе топменю*/
div.afisha {padding: 20px 50px 1px 50px;margin-top: 20px; /* внутренние отступы для класса афиша (сверху 20 px справа 50px снизу 0 слева 50px, )*/
background:
linear-gradient(90deg, #c16a8a 100px, #a367ba 100px, #a367ba 200px, #2b798f 200px, #2b798f 300px, #76a7ac 300px, #76a7ac 400px,#93ae65 400px, #93ae65 500px, #dbb16f 500px) left top repeat-x; /*90deg- угол под которым идет градиент, linear-gradient- линейный градиент в фоне(первый и послдений цвет один раз прописываем до скольки он пикселей идет, остальные цвета прописываем так:указываем со скольки пикселей начинается цвет и затем через запятую прописываем снова этот цвет но уже указываем где он заканчивается) */
background-color: #f2f2f2;
background-size: 600px 10px;}
div.afisha img { float: left;}
div.afisha img:hover{
filter: alpha (Opacity=25); /* прозрачность для IE */
opacity: 0.25; /* прозрачность для других браузеров */}
div.afisha h3 { font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p {text-align: center;}
div.afisha p a {font-size: 20px; color: #fff;font-weight: bold;
/* границы и цвет кнопки*/
background:#b23600; border:1px solid #862900; padding: 5px 15px;
/* тени и скругление кнопки*/
border-radius: 3px; box-shadow: 2px 2px 7px -1px #777; text-shadow:0px 0px 3px #752300;} /* box-shadow:-параметры тени, text-shadow: - тень для текста */
div.afisha a:hover {background:#068bac; border:1px solid #046d88; text-shadow:0px 0px 3px #034E61;} /*стили при наведении на кнопку "перейти для заказа рекламы"*/
/* Главное меню*/
div.menu {background: #1683a3; border: 1px solid #016c8b; border-left: none; border-right: none; text-align: center;} /* solid сплошная граница*/
div.menu ul { margin: 0; padding: 0; list-style: none;} /*list-style: none -убираем маркеры*/
div.menu ul li {display:inline-block; margin: 5px 20px;} /*display: inline-block - блочный элемент, обтекаемый другими элементами, подобно встроенному элементу*/
div.menu ul li a{color: #fff; text-transform:uppercase; text-shadow: 1px 1px 3px #0b4455;} /* text-transform:uppercase -Все символы текста становятся прописными (верхний регистр).*/
div.menu ul li a:hover{color: #a3e1f3;}
/* контент сайта*/
div.fon {background:#fff; border:1px solid #ccc; border-top: none; padding: 40px;} /* padding: 40px;- внутренние отступы содержимого 40px*/
div.fon hr.line {border:none; border-bottom: 1px dashed #ccc; height: 0; margin: 40px 0;} /* создаем штрихпунктирную линию для тега hr с классом .line заключенных в класс div.fon*/
div.block { width:440px;float: left;}
div.block:nth-of-type(even){ float:right;}/* nth-of-type(even) -псевдокласс e используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов (even)- все четные номера элементов*/
div.block a p{ color:#272727;}
div.anons {background:#f5f5f5; border:1px solid #ccc;border-radius: 3px; padding: 20px;}
div.anons:hover{background: #e0eff4; border: 1px solid #bfd5dd; transition:all 1s ;} /* transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства, по существу это означает простейшую анимацию.*/
div.anons img{box-shadow: 1px 1px 5px #777; transition:transform 0.5s;}
div.anons:hover img {transform:scale(1.15) rotate(2deg);} /*rotate(2deg)- поворот картинки на 2 градуса,transform:scale- маштабирование объекта */
div.block:nth-of-type(even) div.anons:hover img {transform:scale(1.15) rotate(-2deg);}
div.anons h3{font-size:20px; font-weight: normal; margin: 20px 0 10px; padding: 0; color:#01617d; line-height: 20px;} /* line-height:-отвечает за расстояние между строками. */
div.anons p{text-shadow:1px 1px 0 #fff;}
div.rek{margin: 40px 0;}
div.rek img{border:1px solid #ccc;border-radius: 3px; position:relative;} /* position -указывает какой тип позиционирования используется для элемента(тут нужно для создания анимации) */
@keyframes prigskok/* @keyframes -правило устанавливает ключевые кадры при анимации элемента */
{
0%{top:0;}
10% {top:40px;}
20% {top:-30px;}
30%{top:40px;}
40% {top:-20px;}
50% {top:40px; }
60%{top:-10px;}
70% {top:40px;}
80% {top:0;}
90%{top:40px;}
95%{top:20px;}
100%{top:0;}
}
@-moz-keyframes prigskok
{
0%{top:0;}
10% {top:40px;}
20% {top:-30px;}
30%{top:40px;}
40% {top:-20px;}
50% {top:40px; }
60%{top:-10px;}
70% {top:40px;}
80% {top:0;}
90%{top:40px;}
95%{top:20px;}
100%{top:0;}
}
@-webkit-keyframes prigskok
{
0%{top:0;}
10% {top:40px;}
20% {top:-30px;}
30%{top:40px;}
40% {top:-20px;}
50% {top:40px; }
60%{top:-10px;}
70% {top:40px;}
80% {top:0;}
90%{top:40px;}
95%{top:20px;}
100%{top:0;}
}
div.rek img:hover{animation:prigskok 2s; -moz-animation:prigskok 2s; -webkit-animation:prigskok 2s;}
/* страница с контактами */
div.fon1 {background:#fff; border:1px solid #ccc; border-top: none; padding: 40px;} /* padding: 40px;- внутренние отступы содержимого 40px*/
div.contacts h2 { text-align: center;}
div.contacts p {text-align: center;}
/* Создаем два столбца для страницы контакты, которые плавают рядом друг с другом */
div.column_cont {display:flex; flex-direction: row;} /* display:flex;- делаем столбцы ввиде флекс контейнера */
div.column_cont input[type=text],input[type=date],select,textarea /* задаем свойства для input[type=text], select, textarea */
{
box-sizing: border-box; /* box-sizing - позволяет выбрать алгоритм вычисления ширины и высоты элемента, border-box-Ширина и высота определяется для всего элемента*/
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;} /* resize: vertical - Можно растягивать элемент только по высоте. */
div.column_cont1{padding-right:40px;}
/* подвал сайта */
div.footer span{margin: 0 40px; display: block;}
div.clear {clear: both;} /*очистка обтикания(убрать обтикание)*/
/* Адаптивный дизайн */
@media screen and (max-width: 1000px) /* @media -позволяют сделать из одного сайта несколько версий дизайна в зависимости от характеристик устройства
screen - для экранов компьютеров, планшетов, смартфонов и т.д. , and (и) - логическое И. С помощью него можно задать несколько условий и только при условии, что все они будут выполнены,
тогда стиль будет применен*/
{
div.mid{width:95%;}
div.afisha h3 { font-size: 22px;}
div.block {width:48%;}
div.anons img, div.rek img{width:100%;}
div.anons h3{font-size:18px;}
div.afisha p a {font-size:18px;}
}
@media screen and (max-width: 640px) {
div.header {text-align: center; background-position: center -130px; }
div.topmenu, div.block, div.block:nth-of-type(even), div.afisha img{float: none;}
div.block {width:auto; margin-bottom: 40px;}
div.block:nth-last-of-type(2) /* nth-last-of-type-выбирает каждый элемент, который является дочерним элементом своего родительского элемента (считая от последнего дочернего элемента) */
{margin-bottom:0;}
div.footer span{margin: 10px 0;}
div.topmenu-full-screen{display:none;}
/* Бургер меню */
div.topmenu-mini-wrapper { display:block;
margin-top: 0;
margin:150px;
width: 300px;
background-color:#fff;
position: relative; /* нужно для позиционирования в контейнере всех элементов*/
color:#1683a3; /*цвет текста */
text-align: center;
height: 40px; font-family: 'Arial'; cursor:pointer;} /* pointer устанавливает форму курсора в виде руки*/
#topmenu-mini-check { display: none;}
label.topmenu-mini{ display: block; position: absolute;top: 0; left: 0; bottom:10px; width: 100%;height: 100%;
z-index:2;}
div.burger-line {position:absolute; top: 8px; right: 10px; width: 35px; height: 2px;background-color:#ff66367f;} /* стилизуем полоски*/
div.burger-line.second, div.burger-line.third { top: 18px;}
div.burger-line.fourth{top: 28px;}
nav.topmenu-mini { display: block; position: absolute; width: 103%; bottom: 0; left:-9px; transform: translateY(100%); max-height: 0; font-size: 0; overflow: hidden; transition: 0.5s all} /* transform: translateY(100%) -сдвигать по вертикали на 100%, overflow: hidden;- дочерние элементы не будут вылезать за рамки родительских*/
.topmenu-mini-link { display: block; width: 100%; padding: 10px; color:#fff; text-decoration:none;border-top: 1px solid rgba(242,172,172,3); background-color:rgba(255,255,255,0.8); }
#topmenu-mini-check:checked ~ nav.topmenu-mini{max-height: 500px;font-size: 16px;} /*:checked - применяется к элементам <input> ~ значит будет применяться ко всем элементам nav.topmenu-mini*/
/* Рисуем крестик */
#topmenu-mini-check:checked ~ label div.burger-line.first { display: none;}
#topmenu-mini-check:checked ~ label div.burger-line.second { transform: rotate(45deg);}
#topmenu-mini-check:checked ~ label div.burger-line.third { transform: rotate(-45deg);}
#topmenu-mini-check:checked ~ label div.burger-line.fourth { display: none;}
} |
(
