Skip to content

Commit 1edde17

Browse files
akio-qakio-q
committed
add wordpress study project
1 parent 86d3a85 commit 1edde17

28 files changed

+531
-0
lines changed

‎src/css/fonts.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@font-face {
2+
font-family: 'Roboto';
3+
src: local('Roboto Thin'), local('Roboto-Thin'),
4+
url('../fonts/Roboto-Thin.woff2') format('woff2'),
5+
url('../fonts/Roboto-Thin.woff') format('woff');
6+
font-weight: 100;
7+
font-style: normal;
8+
font-display: swap;
9+
}
10+
11+
@font-face {
12+
font-family: 'Roboto';
13+
src: local('Roboto Light'), local('Roboto-Light'),
14+
url('../fonts/Roboto-Light.woff2') format('woff2'),
15+
url('../fonts/Roboto-Light.woff') format('woff');
16+
font-weight: 300;
17+
font-style: normal;
18+
font-display: swap;
19+
}
20+
21+
@font-face {
22+
font-family: 'Roboto';
23+
src: local('Roboto Regular'), local('Roboto-Regular'),
24+
url('../fonts/Roboto-Regular.woff2') format('woff2'),
25+
url('../fonts/Roboto-Regular.woff') format('woff');
26+
font-weight: 400;
27+
font-style: normal;
28+
font-display: swap;
29+
}
30+
31+
@font-face {
32+
font-family: 'Roboto';
33+
src: local('Roboto Bold'), local('Roboto-Bold'),
34+
url('../fonts/Roboto-Bold.woff2') format('woff2'),
35+
url('../fonts/Roboto-Bold.woff') format('woff');
36+
font-weight: 700;
37+
font-style: normal;
38+
font-display: swap;
39+
}
40+
41+
@font-face {
42+
font-family: 'Roboto';
43+
src: local('Roboto Black'), local('Roboto-Black'),
44+
url('../fonts/Roboto-Black.woff2') format('woff2'),
45+
url('../fonts/Roboto-Black.woff') format('woff');
46+
font-weight: 900;
47+
font-style: normal;
48+
font-display: swap;
49+
}

‎src/css/style.css

Lines changed: 329 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Roboto', sans-serif;
6+
}
7+
8+
.container {
9+
position: relative;
10+
width: 1140px;
11+
margin: 0 auto;
12+
}
13+
14+
.logo .logo_img {
15+
display: block;
16+
margin: 0 auto;
17+
}
18+
19+
.logo .logo_text {
20+
text-align: center;
21+
text-transform: uppercase;
22+
margin-top: 14px;
23+
font-size: 15px;
24+
font-weight: 400;
25+
color: #fff;
26+
}
27+
28+
h1 {
29+
margin-top: 53px;
30+
margin-bottom: 0;
31+
}
32+
33+
.title {
34+
text-align: center;
35+
text-transform: uppercase;
36+
font-size: 41px;
37+
font-weight: 900;
38+
color: #F9BF3B;
39+
}
40+
41+
.simple {
42+
position: relative;
43+
}
44+
45+
.simple .title_big {
46+
text-align: center;
47+
margin: 5px 0;
48+
text-transform: uppercase;
49+
font-size: 80px;
50+
font-weight: 900;
51+
color: #FFFFFF;
52+
}
53+
54+
.simple .line {
55+
height: 2px;
56+
width: 292px;
57+
position: absolute;
58+
bottom: 42px;
59+
background: #fff;
60+
}
61+
62+
.simple .line.second {
63+
left: 847px;
64+
}
65+
66+
.promo {
67+
height: 800px;
68+
padding: 38px 0 62px 0;
69+
background: url('../img/bg/main.png') center center/cover no-repeat;
70+
}
71+
72+
.promo .promo_text {
73+
text-align: center;
74+
margin-top: 18px;
75+
padding: 0 13px;
76+
font-size: 21px;
77+
font-weight: 300;
78+
line-height: 28px;
79+
color: #FFFFFF;
80+
}
81+
82+
.promo .promo_text span {
83+
text-transform: uppercase;
84+
font-weight: 700;
85+
color: #F9BF3B;
86+
}
87+
88+
.promo .promo_btn, .gift .gift_btn {
89+
padding: 24px 15px;
90+
display: block;
91+
margin: 0 auto;
92+
margin-top: 60px;
93+
text-transform: uppercase;
94+
text-align: center;
95+
border: none;
96+
border-radius: 2px;
97+
background: linear-gradient(0deg, #2798B9 0%, #3AB6DA 100%);
98+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
99+
color: #FFFFFF;
100+
font-size: 21px;
101+
text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.22);
102+
cursor: pointer;
103+
}
104+
105+
.promo .promo_btn:hover {
106+
background: linear-gradient(0deg, #1597bf 0%, #23a8cd 100%);
107+
transition: 0.4s;
108+
}
109+
110+
.more {
111+
margin-top: 72px;
112+
}
113+
114+
.more .more_text {
115+
text-align: center;
116+
text-transform: uppercase;
117+
font-size: 15px;
118+
font-weight: 100;
119+
color: #FFFFFF;
120+
}
121+
122+
.more .more_img {
123+
display: block;
124+
margin: 0 auto;
125+
margin-top: 11px;
126+
}
127+
128+
.waiting {
129+
min-height: 607px;
130+
background: #EFEFEF;
131+
padding: 85px 0 75px 0;
132+
}
133+
134+
.waiting .waiting_header, .finish .finish_header, .first-webinar .first-webinar_title {
135+
text-align: center;
136+
text-transform: uppercase;
137+
font-size: 30px;
138+
font-weight: 400;
139+
color: #252525;
140+
}
141+
142+
.waiting .waiting_divider, .finish .finish_divider {
143+
width: 220px;
144+
height: 4px;
145+
margin: 0 auto;
146+
margin-top: 16px;
147+
background: #F9BF3B;
148+
}
149+
150+
.waiting .waiting_subheader, .first-webinar .first-webinar_subtitle {
151+
text-align: center;
152+
margin-top: 18px;
153+
font-size: 23px;
154+
font-weight: 400;
155+
color: #4A4A4A;
156+
}
157+
158+
.waiting .waiting_wrapper {
159+
display: flex;
160+
justify-content: space-between;
161+
margin-top: 45px;
162+
}
163+
164+
.waiting .waiting_wrapper .waiting_item {
165+
width: 342px;
166+
text-align: center;
167+
}
168+
169+
.waiting .waiting_wrapper .waiting_item .waiting_img {
170+
width: 100%;
171+
}
172+
173+
.waiting .waiting_wrapper .waiting_item .waiting_descr {
174+
margin-top: 31px;
175+
font-size: 15px;
176+
font-weight: 300;
177+
line-height: 21px;
178+
color: #4A4A4A;
179+
}
180+
181+
.optimization {
182+
min-height: 547px;
183+
padding: 102px 0 0 0;
184+
}
185+
186+
.optimization .optimization_about {
187+
margin-left: 391px;
188+
}
189+
190+
.optimization .optimization_about .optimization_header, .first-webinar .first-webinar_date {
191+
text-transform: uppercase;
192+
font-size: 30px;
193+
font-weight: 900;
194+
color: #299CBD;
195+
}
196+
197+
.optimization .optimization_about .optimization_descr {
198+
margin-top: 10px;
199+
font-size: 17px;
200+
font-weight: 300;
201+
line-height: 27px;
202+
color: #4A4A4A;
203+
}
204+
205+
.optimization .optimization_about .optimization_descr .optimization_text {
206+
display: inline-block;
207+
margin-top: 9px;
208+
}
209+
210+
.optimization .optimization_about .optimization_text.bold {
211+
font-weight: 700;
212+
}
213+
214+
.optimization .optimization_img {
215+
position: absolute;
216+
top: -54px;
217+
left: -240px;
218+
z-index: -1;
219+
}
220+
221+
.finish {
222+
min-height: 447px;
223+
padding: 86px 0 72px 0;
224+
background: url('../img/bg/second.png') center center/cover no-repeat;
225+
}
226+
227+
.finish .finish_header {
228+
color: #fff;
229+
}
230+
231+
.finish .finish_wrapper {
232+
margin-top: 41px;
233+
display: flex;
234+
justify-content: space-between;
235+
}
236+
237+
.finish .finish_wrapper .finish_item {
238+
width: 204px;
239+
}
240+
241+
.finish .finish_wrapper .finish_round {
242+
width: 115px;
243+
height: 115px;
244+
display: flex;
245+
justify-content: center;
246+
align-items: center;
247+
margin: 0 auto;
248+
border-radius: 100%;
249+
background: #B4E2FF;
250+
}
251+
252+
.finish .finish_wrapper .finish_item .finish_descr {
253+
margin-top: 25px;
254+
text-align: center;
255+
font-size: 17px;
256+
font-weight: 300;
257+
line-height: 20px;
258+
color: #EFEFEF;
259+
}
260+
261+
.gift {
262+
min-height: 630px;
263+
padding: 88px 0;
264+
background: #EFEFEF;
265+
}
266+
267+
.gift .gift_img {
268+
display: block;
269+
margin: 0 auto;
270+
}
271+
272+
.gift .gift_descr {
273+
text-align: center;
274+
margin-top: 45px;
275+
font-size: 30px;
276+
font-weight: 400;
277+
line-height: 43px;
278+
color: #252525;
279+
}
280+
281+
.gift .gift_btn {
282+
margin-top: 50px;
283+
}
284+
285+
.first-webinar {
286+
min-height: 515px;
287+
padding: 90px 0 50px 0;
288+
}
289+
290+
.first-webinar .first-webinar_img {
291+
display: block;
292+
margin: 0 auto;
293+
}
294+
295+
.first-webinar .first-webinar_title {
296+
margin-top: 34px;
297+
}
298+
299+
.first-webinar .first-webinar_date {
300+
text-align: center;
301+
margin-top: 20px;
302+
font-size: 36px;
303+
}
304+
305+
.first-webinar .first-webinar_subtitle {
306+
margin-top: 14px;
307+
}
308+
309+
footer {
310+
min-height: 166px;
311+
padding: 75px 0 69px 0;
312+
background: #1A1A1A;
313+
}
314+
315+
.footer_links {
316+
text-align: center;
317+
font-size: 15px;
318+
font-weight: 300;
319+
line-height: 21px;
320+
color: #888888;
321+
}
322+
323+
.footer_links .footer_link {
324+
color: #888888;
325+
}
326+
327+
.footer_links .footer_link.number {
328+
text-decoration: none;
329+
}

‎src/fonts/Roboto-Black.woff

70.8 KB
Binary file not shown.

‎src/fonts/Roboto-Black.woff2

50.3 KB
Binary file not shown.

‎src/fonts/Roboto-Bold.woff

67.1 KB
Binary file not shown.

‎src/fonts/Roboto-Bold.woff2

47.5 KB
Binary file not shown.

‎src/fonts/Roboto-Light.woff

69 KB
Binary file not shown.

‎src/fonts/Roboto-Light.woff2

49 KB
Binary file not shown.

‎src/fonts/Roboto-Regular.woff

72.1 KB
Binary file not shown.

‎src/fonts/Roboto-Regular.woff2

51.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)