Первая верстка, жду жесткой критики

@Эрик Суворов · Регистрация: 20.02.2019

Студворк — интернет-сервис помощи студентам

Впервые сверстал простой статичный сайт, html+css.
Не хочу приучаться делать неправильно, прошу от вас критики по поводу стилистических ошибок и неверных решений.

Архив приложил: шрифты, изображения, html и css файлы.

HTML5
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="css/Untitled-3.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<header>
  <div class="container">
    <div class="head clearfix">
      <div class="logo"> Leonardo Da Vinci </div>
      <div class="sendPigeon"> <img src="img/sendPigeon.png" alt="Pigeon"/> <a href ="#sendForm">Send pigeon</a> </div>
    </div>
    <div class="promo clearfix">
      <div class="title">
        <h1> Military vehicles  of the great genius </h1>
        <a class="buttonPromo" href="#">Choose vehicle</a> </div>
      <img class="militaryVehicle" src="img/militaryVehicle.png" alt="Military Vehicle"> </div>
    <a href="#about"><img class ="scrollAnchor" src="img/scrollAnchor.png" alt="Scroll"></a> </div>
</header>
<section>
  <div class="container">
    <div id="about">
      <h4>Leonardo Da Vinci </h4>
      <div class="content">
        <p class="initialLetter">Leonardo da Vinci or simply Leonardo, was an Italian polymath of the Renaissance whose areas of                       _       interest included invention, drawing, painting, sculpting, architecture, science, music, mathematics, engineering, literature, anatomy, geology, astronomy, botany, writing, history, and cartography. He has been variously called the father of palaeontology, ichnology, and architecture, and he is widely considered one of the greatest painters of all time.</p>
        <p>Leonardo is revered for his technological ingenuity. He conceptualised flying machines, a type of armoured fighting vehicle, concentrated solar power, an adding machine, and the double hull.</p>
        <p>The <a href ="#">catalog</a> presents the most successful of his military inventions.</p>
      </div>
    </div>
  </div>
  <div class="divider">
    <div class="dividerLine"></div>
    <img class="dividerImg" src="img/dividerImg.png" alt="Divider"> </div>
</section>
<section>
  <div class="container">
    <div class="products clearfix">
      <div class="product"> 
          <img src ="img/rapidWeapon.png" class="imgLeft" alt ="Rapid Weapon">
        <div class="productInfoR">
          <h3>Rapid Weapon</h3>
          <p class="description">Leonardo paid much attention to the design of automatic firearms. To increase the power and speed of fire, he fanned out a multitude of trunks.</p>
          <div class="specifications">
            <table>
              <tr>
                <td class="td1">Amount of trunks</td>
                <td class="td2">10</td>
                <td class="td3"></td>
                <td class="td4">Defeat range</td>
                <td class="td5">150м</td>
              </tr>
            </table>
          </div>
          <a class="buyButton" href="#">Buy product</a> </div>
      </div>
      <div class="product">
        <div class="productInfoL">
          <h3>Armored van</h3>
          <p class="description">Leonardo da Vinci designed a heavy turtle-shaped van, armed with cannons and armored armor. The movement of this platform is carried out by 8 people using a gearbox connected to the wheels.</p>
          <div class="specifications">
            <table>
              <tr>
                <td class="td1">Amount of trunks</td>
                <td class="td2">8</td>
                <td class="td3"></td>
                <td class="td4">Defeat range</td>
                <td class="td5">100м</td>
              </tr>
            </table>
          </div>
          <a class="buyButton" href="#">Buy product</a> </div>
        <img src ="img/armoredVan.png" class="imgRight" alt ="Armored Van"> </div>
      <div class="product"> 
          <img src ="img/winchCatapult.png" class="imgLeft" alt ="Winch Catapult">
        <div class="productInfoR">
          <h3>Winch Catapult</h3>
          <p class="description">The catapult has a flexible shoulder, bending backwards using a hand winch, as well as a bucket, where a stone is thrown along the ladder. A group of such catapults hitting the enemy at the same time can provide excellent protection.</p>
          <div class="specifications">
            <table>
              <tr>
                <td class="td1">Weight<br>
                  of projectile</td>
                <td class="td2">26kg</td>
                <td class="td3"></td>
                <td class="td4">Defeat range</td>
                <td class="td5">300м</td>
              </tr>
            </table>
          </div>
          <a class="buyButton" href="#">Buy product</a> </div>
      </div>
    </div>
  </div>
  <div class="divider">
    <div class="dividerLine"></div>
    <img class="dividerImg" src="img/dividerImg.png" alt="Divider"> </div>
</section>
<section>
  <div class="container">
    <div class="advantages clearfix">
      <div class="advantagesTitle">
        <h2> Advantages of technology </h2>
      </div>
      <div class="advantage"> <img src="img/weapons.png" class="weaponsPng" alt="Diversity shells"> </div>
      <div class="advantage"> <img src="img/target.png" class="targetPng" alt="Accuracy"> </div>
      <div class="advantage"> <img src="img/shield.png" class="shieldPng" alt="Constructions"> </div>
      <div class="advantage"> <img src="img/draw.png" class="drawPng" alt="Creations"> </div>
    </div>
    <div class="advantagesText">
      <p>Diversity<br>
        shells</p>
      <p>Accuracy<br>
        hitting the target</p>
      <p>Strength<br>
        constructions</p>
      <p>Creations of the<br>
        great genius</p>
    </div>
    <div class="testimonials">
      <div class="testimonialsTitle">
        <h2> Client Testimonials </h2>
      </div>
      <div class="testimonial">
        <blockquote>
          <p class="testimonialText">The weapons of Leonardo proved to be excellent against the Venetian league in the battle of Fornovo. We used catapults in defense of heights, which allowed us to easily drop the enemy.</p>
          <cite class="author">Alexander VI</cite> </blockquote>
          <div class="testimonialIcons">
              <img class="testimonialIcon" src="img/warrior.png" alt="Warrior">
              <img class="testimonialIcon" src="img/christian.png" alt="Christian">
              <img class="testimonialIcon" src="img/king.png" alt="King">
          </div>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container">
    <div class="divider">
      <div class="dividerLine"></div>
      <img class="dividerImg" src="img/dividerImg.png" alt="Divider"> </div>
    <div id ="sendForm">
      <div class= "sendTitle">
        <h2>Send Pigeon</h2>
      </div>
      <div class="sendForms">
        <input type="text" class="nameForm" placeholder="Your name">
        <input type="email" class="emailForm" placeholder="Your mail">
      </div>
      <textarea placeholder="Your message" class="message"></textarea>
      <input type="submit" class="sendButton" value="Send">
    </div>
  </div>
</footer>
</body>
</html>

CSS
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
@charset "utf-8";
@font-face {
    font-family: "ChristmasScriptC";
    src:url(../fonts/ChristmasScriptC.woff);
   }
@font-face {
    font-family: "Lorabold";
    src:url(../fonts/Lorabold.woff);
   }
@font-face {
    font-family: "Lora-Regular";
    src:url(../fonts/Lora-Regular.woff);
   }
@font-face {
    font-family: "PTSerif-Bold";
    src:url(../fonts/PTSerif-Bold.woff);
   }
@font-face {
    font-family: "PTSerif-Regular";
    src:url(../fonts/PTSerif-Regular.woff);
   }
h2,h3,.td1,.td4,.author {
    font-family: "PTSerif-Bold";
}
.content, .td2, .td5, .description, .buyButton,.advantagesText,.nameForm,.emailForm,.message,.sendButton ,blockquote p {
    font-family: "PTSerif-Regular";
}
.buttonPromo,.sendPigeon a{
    font-family: "Lora-Regular";
}
.logo, h4{
    font-family: "ChristmasScriptC";
}
h1 {
    font-family: "Lorabold";
}
header {
    background: url(../img/bg.jpg) no-repeat center top;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    min-width: 906px;
    min-height: 500px;
}
body {
    padding: 0;
    margin: 0;
    background: #FFFFFF;
}
.container {
    width: 906px;
    margin: 0 auto;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
.logo {
    float: left;
    font-size: 32px;
}
.sendPigeon {
    float: right;
    font-size: 18px;
}
.sendPigeon a {
    color: #000000;
}
.promo {
    padding: 150px 0;
}
h1{
    font-size: 46px;
}
.title {
    font-size: 24px;
    width: 417px;
    text-align: left;
    position: absolute;
}
.buttonPromo {
    background: #fdfdfd;
    color: #000000;
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 22px;
    margin-top: 50px;
    font-weight: bold;
    letter-spacing: 1px;
    height: 47px;
    width: 226px;
    line-height: 47px
}
.militaryVehicle {
    float: right;
    width: 546px;
}
.scrollAnchor {
    display: block;
    position: absolute;
    bottom: 2px;
    left: 50%;
}
#about h4  {
    font-size: 60px;
    font-weight: 100;
    text-align: center;
}
.content {
    font-size: 16px;
    font-weight: bold;
}
.content a{
    color: #000000;
}
.initialLetter::first-letter {
    float: left;
    font-weight: 900;
    font-size: 42px;
    margin: -0.44em 0.2em 0px 0px;
    font-family: "ChristmasScriptC";
}
.dividerImg {
    display: block;
    margin: 0 auto;
    position: relative;
    margin-top: -41px;
}
.dividerLine {
    height: 4px;
    background: #ededed;
    background-size: cover;
}
.divider {
    margin-top: 100px;
}
.productInfoR {
    padding-left: 56px;
}
.productInfoL {
} 
.productInfoL,.productInfoR {
    width: 360px;
    float: left;
    
}
.td1 {
    width: 90px;
}
.td2 {
    font-size: 50px;
    padding-right: 20px;
}
.td3 {
    height: 70px;
    border-right: 2px solid #e5e5e5;
    transform: rotate(45deg);
}
.td4 {
    width: 50px;
    padding-left: 35px;
}
.td5 {
    font-size: 50px;
}
 
.advantages {
    margin-top: 70px;
}
.advantagesTitle {
    text-align: center;
}
.weaponsPng {
    margin-top: 8px;
}
.shieldPng {
    margin-top: 14px;
}
.drawPng {
    margin-top: 8px;
}
.advantage {
    float: left;
    width: 226.5px;
    text-align: center;
}
.advantagesText p {
    margin-top: 30px;
    font-size: 20px;
    width: 226.5px;
    text-align: center;
    float: left;
}
blockquote {
    margin: 0;
    background: white;
    padding: 30px 30px 30px 310px;
    position: relative;
    width: 475px;
}
blockquote:before {
    content: url(../img/avatar.png);
    left: 99px;
    bottom: 20px;
    position: absolute;
}
blockquote:after {
    content: "\201C";
    color: #dddddd;
    font-size: 200px;
    font-weight: bold;
    position: absolute;
    bottom: -10px;
    left: 220px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    
}
.testimonialsTitle {
    text-align: center;
}
#sendForm {
    width: 750px;
    margin: 0 auto;
}
.sendTitle {
    padding-top: 50px;
    text-align: center;
}
.sendForms {
    margin-top: 80px;
}
.nameForm {
    width: 360px;
    float: left;
    box-sizing: border-box;
    height: 50px;
}
.emailForm {
    width: 360px;
    height: 50px;
    float: right;
    box-sizing: border-box;
    margin-left: 30px;
}
.message {
    padding: 0;
    margin: 0;
    width: 750px;
    height: 130px;
    margin-top: 25px;
    box-sizing: border-box;
}
footer {
    background: url(../img/bgfooter.jpg) no-repeat center bottom;
    background-size: cover;
    padding-bottom: 50px;
}
.author {
    font-style: normal;
    border-top: 2px solid #dddddd;
    height: 10px;
    float: right;
    font-size:18px;
    padding: 10px 0px 0px 10px;
}
.buyButton, .sendButton {
    background: #dddddd;
    color: #000000;
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 22px;
    border: 1px solid #d6d6d6;
    width: 234px;
    height: 44px;
    line-height: 44px;
}
.buyButton {
    float: left;
    margin-top: 40px;
}
.sendButton {
    margin: 0 auto;
    margin-top: 50px;
    
}
 
 
.imgLeft {
    float: left;
}
 
.imgRight {
float: right;
}
.description {
    font-size:16px;
    line-height:25px;
    font-weight: bold;
}
.td1,.td4 {
    font-size:14px;
}
.td2,.td5{
    font-size: 35px;
}
h3 {
    font-size:30px;
}
h2{
    font-size: 36px;
}
.message ,.nameForm, .emailForm {
padding: 15px;
    font-size:18px;
}
.testimonialIcons{
    text-align: center;
    padding:20px;
}
.testimonialIcon{
    padding: 0 10px 0 10px;
}
 
.testimonials {
    margin-top: 180px;
}
 
.productInfoL, .productInfoR,.imgLeft,.imgRight{
    margin-top:100px;
}
.testimonialText {
    font-size:16px;
    line-height: 24px;
    font-weight: bold;
}

@AlexZaw · 20.02.2019, 15:37

Эрик Суворов, для начала, было бы неплохо научиться расставлять clearfix для тех блоков, для которых это необходимо. У вас блоки .product имеют нулевую высоту.
Секция Advantages of technology, почему у вас картинки отдельно от текста описания?
Почему <div id="sendForm">, а не форма? Как в этом диве будет работать <input type="submit" class="sendButton" value="Send">?

@Эрик Суворов · 20.02.2019, 17:25 **[ТС]**

Спасибо большое.

sendForm сделал дивом, чтобы прицепить якорь.
В Advantages of technology я выравнивал изображения по направляющей в макете. Текст в блоках .advantage начинал скакать и мне показалось простым решением вынести текст в отдельный блок.

В плане оформления и структуры css файла все в рамках дозволенного? Есть какие-то общепринятые стилистические нормы оформления кода?
Стоит ли присваивать имена дивам для наглядности, если я не буду использовать их в будущем как селекторы?

@AlexZaw · 20.02.2019, 18:14

Сообщение от Эрик Суворов

sendForm сделал дивом, чтобы прицепить якорь.

Можно было прицепить id к форме и якорь бы так-же работал. В вашем случае, при нажатии на кнопку <input type="submit" class="sendButton" value="Send"> у вас ничего не произойдет, ну если вы не будете обрабатывать ее с помощью js.

Сообщение от Эрик Суворов

и мне показалось простым решением вынести текст в отдельный блок.

Проще было вынести каждую картинку с описанием в отдельный блок, и выравнивать уже их, а так у вас получается описание оторвано от изображения и, при адаптации, они у вас рассыпятся так, что будет непонятно что к чему относится.

Сообщение от Эрик Суворов

В плане оформления и структуры css файла все в рамках дозволенного?

На первый взгляд все нормально, если не считать пустого класса .productInfoL. Ну и стили для body, заголовков и blockquote, я бы вынес наверх css файла, а не оставил бы их там где придется.

Сообщение от Эрик Суворов

Есть какие-то общепринятые стилистические нормы оформления кода?

Есть, но они относятся к визуальному восприятию. С этим у вас более-менее нормально. Есть конечно где то лишние переносы строк, где то наоборот переносов нет, но все это не критично, особенно если пользоваться минификатором css

Сообщение от Эрик Суворов

Стоит ли присваивать имена дивам для наглядности, если я не буду использовать их в будущем как селекторы?

Зачем? Это только увеличит объем кода, а понимание кода не добавит. Вот понятные названия классам, вместо td1-td5, давать стоит. В принципе вместо таблицы тут можно было бы воспользоваться обычными строчно-блочными элементами и спанами, но тут уж кому как нравиться

@Academik · 20.02.2019, 21:14

В дополнении к предыдущему посту при беглом просмотре бросается в глаза следующее:

Сообщение от Эрик Суворов

При доктайпе html5 слэш в конце не обязательно ставить.

HTML5
1
2
3
4
5
<header>
  <div class="container">
    ...
  </div>
<header>

Когда верстаете, ставьте цель не плодить лишних контейнеров. В данном случае можно класс присвоить элементу <header>. Ниже в коде данный прием можно использовать и с элементом <section>.

Сообщение от Эрик Суворов

.dividerImg { display: block; margin: 0 auto; position: relative; margin-top: -41px; }

margin: 0 auto; работает в паре с width, у вас элемент центроваться не будет. position: relative; тут лишний.
На сколько я вижу класс .dividerImg в коде встречается один раз. Я бы не присваивал класс к изображению, а обратился бы к элементу через родителя .divider img

Сообщение от Эрик Суворов

body { padding: 0; margin: 0; background: #FFFFFF; }

У элемента <body> по умолчанию нет паддинга, а белый цвет по умолчанию. Тут можно оставить только марджин.

Сообщение от Эрик Суворов

.dividerLine { height: 4px; background: #ededed; background-size: cover; }

background-size используйте только в том случае, если в качестве фона используете изображение. Тут он лишний и никакую функцию не несет.

@Эрик Суворов · 20.02.2019, 22:33 **[ТС]**

Спасибо большое всем!

Я не расчитывал на такой фидбэк . Невероятно мотивирует развиваться дальше.

Как я понимаю на данный момент есть 3 актуальных инструмента для адаптивной верстки : CSS Grid, Flexbox и медиа-запросы. caniuse показывает, что некоторые браузеры(Blackberry Browser, Opera mini) не поддерживают Grid.
Какие инструменты сегодня будет лучше и правильнее использовать для достижения адаптивности?

@AlexZaw · 21.02.2019, 08:47

Сообщение от Эрик Суворов

что некоторые браузеры(Blackberry Browser, Opera mini) не поддерживают Grid.

Тот же caniuse говорит нам, что Opera Mini используют всего 1.81% пользователей в мире, а Blackberry Browser и вовсе 0.02%. Так что этими браузерами можно пренебречь (см.уточнения ниже).

Сообщение от Эрик Суворов

Какие инструменты сегодня будет лучше и правильнее использовать для достижения адаптивности?

Пользоваться можно всем, чем вам удобно, если не стоит конкретная задача по поддержке определенных браузеров.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	20.02.2019, 15:37
	Эрик Суворов, для начала, было бы неплохо научиться расставлять clearfix для тех блоков, для которых это необходимо. У вас блоки .product имеют нулевую высоту. Секция Advantages of technology, почему у вас картинки отдельно от текста описания? Почему <div id="sendForm">, а не форма? Как в этом диве будет работать <input type="submit" class="sendButton" value="Send">? 1

@Эрик Суворов 0 / 0 / 0 Регистрация: 20.02.2019 Сообщений: 3
	20.02.2019, 17:25 [ТС]
	Спасибо большое. sendForm сделал дивом, чтобы прицепить якорь. В Advantages of technology я выравнивал изображения по направляющей в макете. Текст в блоках .advantage начинал скакать и мне показалось простым решением вынести текст в отдельный блок. В плане оформления и структуры css файла все в рамках дозволенного? Есть какие-то общепринятые стилистические нормы оформления кода? Стоит ли присваивать имена дивам для наглядности, если я не буду использовать их в будущем как селекторы? 0

@Эрик Суворов 0 / 0 / 0 Регистрация: 20.02.2019 Сообщений: 3
	20.02.2019, 22:33 [ТС]
	Спасибо большое всем! Я не расчитывал на такой фидбэк . Невероятно мотивирует развиваться дальше. Как я понимаю на данный момент есть 3 актуальных инструмента для адаптивной верстки : CSS Grid, Flexbox и медиа-запросы. caniuse показывает, что некоторые браузеры(Blackberry Browser, Opera mini) не поддерживают Grid. Какие инструменты сегодня будет лучше и правильнее использовать для достижения адаптивности? 0