-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (151 loc) · 10.2 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Flexbox Practice</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="main-block">
<div class="main-block__container">
<div class="main-block__flex-container">
<div class="main-block__flex-element">
<h1 class="main-block__title">Привет, друг!</h1>
<ul class="main-block__list">
<li>У тебя все получится!</li>
<li>Никогда не сдавайся!</li>
<li>Сегодня ты уже знаешь больше чем вчера!</li>
<li>Спасибо тебе за поддержку!</li>
</ul>
</div>
<div class="main-block__picture">
<img src="img/main-block/img.png" alt="">
</div>
</div>
</div>
</div>
<div class="what-is">
<div class="what-is__container">
<div class="what-is__flex-container">
<div class="what-is__picture">
<img src="img/what-is/img.png" alt="">
</div>
<div class="what-is__flex-element--2">
<h2 class="what-is__title title">Что такое FlexBox?</h2>
<div class="what-is__text">
<p>Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его
дочерних элементов flex-элементов.</p>
<p>Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок
flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера</p>
</div>
</div>
</div>
</div >
</div>
<div class="columns">
<div class="columns__container">
<!-- columns__title title -->
<h2 class="columns__title title">Колонки с flex-контейнерами</h2>
<!-- columns__row -->
<div class="columns__cards">
<!-- columns__column -->
<div class="columns__card-envelope">
<!-- columns__item item -->
<!-- item__row -->
<div class="columns__card card">
<!-- item__image -->
<div class="card__picture"><img src="img/columns/img.png" alt="picture"></div>
<!-- item__body -->
<div class="card__text">
<!-- item__title -->
<div class="card__title">The description for the image</div>
<!-- item__text -->
<div class="card__description">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</div>
</div>
</div>
</div>
<div class="columns__card-envelope">
<div class="columns__card card">
<div class="card__picture"><img src="img/columns/img.png" alt="picture"></div>
<div class="card__text">
<div class="card__title">The description for the image</div>
<div class="card__description">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel
exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde
perferendis nemo debitis dolor.</div>
</div>
</div>
</div>
<div class="columns__card-envelope">
<div class="columns__card card">
<div class="card__picture"><img src="img/columns/img.png" alt="picture"></div>
<div class="card__text">
<div class="card__title">The description for the image</div>
<div class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.</div>
</div>
</div>
</div>
<div class="columns__card-envelope">
<div class="columns__card card">
<div class="card__picture"><img src="img/columns/img.png" alt="picture"></div>
<div class="card__text">
<div class="card__title">The description for the image</div>
<div class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vertical-align">
<div class="vertical-align__container">
<h2 class="vertical-align__title title">Вертикальное выравнивание</h2>
<div class="vertical-align__cards-envelope--limit-width">
<div class="vertical-align__cards">
<div class="vertical-align__cards-envelope--for-gap cards-envelope--1">
<div class="vertical-align__card card">
<div class="card__pretitle">буду рад</div>
<div class="card__title">подписке</div>
<div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo vero reiciendis consectetur.</div>
<a class="card__button" href="#" onclick="return false">подписаться</a>
</div>
</div>
<div class="vertical-align__cards-envelope--for-gap cards-envelope--2">
<div class="vertical-align__card card">
<div class="card__pretitle">буду рад</div>
<div class="card__title">лайку</div>
<div class="card__text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo veroreiciendis consectetur voluptatibus atque et itaque, hic, deleniti. Sunt commodi tempora voluptatum dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo veroreiciendis consectetur tempora voluptatum dolorum.</p>
</div>
<a class="card__button" href="#" onclick="return false">лайк</a>
</div>
</div>
<div class="vertical-align__cards-envelope--for-gap cards-envelope--3">
<div class="vertical-align__card card">
<div class="card__pretitle">буду рад</div>
<div class="card__title">комментарию</div>
<div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</div>
<a class="card__button" href="#" onclick="return false">комментировать</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__container">
<div class="footer__flex-container">
<div class="footer__flex-element">
Фрилансер по жизни 2019
</div>
</div>
</div>
</footer>
</div>
</body>
</html>