20+ современных принципов верстки: что нужно знать, чтобы верстать сайты, которые не рассыпаются

<form><label>Номер телефона</label><input type="text" value="" /> <button 
class="button_red"><b>Заказать звонок</b></button></form>

<form>
  <label>Номер телефона</label>
  <input type="text" value="" />
  <button class="button_red">
    <b>Заказать звонок</b>
  </button>
</form>

.my_h2{
...какие-то CSS свойства
}

<h2 class="my_h2">Заголовок</h2>
<style>
.my_h2{
font-size: 32px;
}
</style>

<h2 style="font-size: 32px">
Заголовок</h2>

<h2 class="my_h2" style="font-size: 48px">Заголовок</h2>
<style>
.my_h2{
font-size: 32px;
}
</style>

<!-- Открытое меню -->
<div class="menu-open">...</div>

<!-- Секция с партнерами -->
<section class="section" id="authority">...</section>

<!-- Секция с подвалом -->
<footer class="section">...</footer>

<div class="t396__elem tn-elem tn-elem__3486420931629654093447 t-animate t-animate_started" data-elem-id="1629654093447" data-elem-type="text" data-field-top-value="380" data-field-left-value="600" data-field-width-value="403" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-style="fadeinup" data-animate-duration="1" data-animate-delay="0.9" data-animate-distance="25" data-fields="top,left,width,container,axisx,axisy,widthunits,leftunits,topunits" style="top: 380px; left: 951px; width: 403px; transform: translate3d(0px, 25px, 0px); transition-delay: 0.9s; transition-duration: 1s;"> <div class="tn-atom" field="tn_text_1629654093447">Position</div> </div>

<div class="text">Position</div>

<a href="/kontakty" class="menuLink">Контакты</a>

<div class="menuItem">
  <a href="/kontakty">Контакты</a>
</div>

<section class=”обложка”>
  <p class=”текстОбложки”>Правда-правда обложки</p>
</section>

<section class=”карточка”>
  <p class=”текстКарточки”>Правда-правда карточки</p>
</section>

<style>
.текстОбложки{
color: #ffffff;
font-size: 42px;
font-family: 'FuturaPT',Arial,sans-serif;
line-height: 1.3;
font-weight: 600;

margin-top: 80px;
width: 300px;
}

.текстКарточки{
color: #ffffff;
font-size: 42px;
font-family: 'FuturaPT',Arial,sans-serif;
line-height: 1.3;
font-weight: 600;

margin-top: 20px;
width: 100%; 
}
</style>

<section class=”обложка”>
  <p class=”текст текст__обложка”>Правда-правда обложки</p>
</section>

<section class=”карточка”>
  <p class=”текст текст__карточка”>Правда-правда карточки</p>
</section>

<style>

.текст{
color: #ffffff;
font-size: 42px;
font-family: 'FuturaPT',Arial,sans-serif;
line-height: 1.3;
font-weight: 600; 
}
.текст__обложка{
margin-top: 80px;
width: 300px;
}

.текст__карточка{
margin-top: 20px;
width: 100%; 
}
</style>

.текст_красный{
color: #ff0000; 
}