frontend-coder

<link rel="preload" href="article-lead-sm.jpg" as="image" type="image/jpeg" media="only screen and (max-width: 48rem)">
статус загрузки картинки высокий

<link rel="preload" as="font" href="Calibre-Regular.woff2" type="font/woff2" crossorigin />
<link rel="preload" as="font" href="Calibre-Semibold.woff2" type="font/woff2" crossorigin />
статус загрузки шрифтов высокий

frontend-coder

Grid css
parent div {
display:grid;
grid-temlate-colums: 300px 300px 300px;
grid-temlate-rows: 250px 300px 350px;
grid-auto-flow:column; //свойство задает выборку дочерних элементов в колонку, а нижнее свойство указывает высоты колонок 
grid-template-rows:200px 200px 200px;
}

child div {

frontend-coder

HTML

<div class="block" id="advantage">
	<div class="container">

		<div class="row">
			<ul class="tambl_row-three clearfix">

				<li class="tambl_item-three">
					<div class="icon icon-color"></div>

frontend-coder

HTML

<!-- 4 тумб преимуществ в ряд -->

<div class="block" id="advantage">
	<div class="container">

		<div class="row">
			<ul class="tambl_row-four clearfix">

frontend-coder

HTML

<!-- 5 тумб преимуществ в ряд -->

<div class="block" id="advantage">
	<div class="container">
		<div class="row">

			<ul class="tambl_row-five clearfix">

frontend-coder

HTML

<!-- 6 тумб преимуществ в ряд -->

<div class="block" id="advantage">
	<div class="container">
		<div class="row">

			<ul class="tambl_row-six clearfix">

frontend-coder

1 разместить по средине блок с социальными иконками если родительский контейнер занимает высоту фиксированную - к примеру
100px, все что внутри - контейнер .social не зависимо от количества ссылкок, которые вставлены в теги ul li
.header-sicial {
	position: absolute;
	display: flex;
	right: 0;
	height: 100%;
	padding: 0 10px;
top: 0;}

frontend-coder

<nav>
  <ul class="menu">
    <li><a href="#!">Home</a></li>
    <li><a href="#!">About</a></li>
    <li><a href="#!">Contact</a></li>
    <li><a href="#!">Faq</a></li>
  </ul>
</nav>

frontend-coder

<div class="row grey ">
<h1 class="logo black startLogo">Logo</h1> 
</div>

<div class="row blue">
<h1 class="logo white altLogo">Logo</h1> 
</div>


<div class="row purple">

frontend-coder

<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
  </div>
</div>

<div class="content">
  <h1>Scroll Progress Bar</h1>
  <p>Cake icing danish caramels chocolate muffin. Muffin halvah halvah chocolate cake wafer ice cream lemon drops croissant cake. Liquorice cheesecake tiramisu sweet roll fruitcake biscuit cheesecake jujubes icing. Danish jelly-o donut lollipop. Marzipan candy jelly gummi bears. Chupa chups toffee toffee marzipan pie jujubes cotton candy cheesecake. Tootsie roll jelly beans sweet dessert. Donut jelly croissant sugar plum cake. Cupcake marshmallow pastry brownie. Dragée soufflé macaroon sweet roll pudding croissant marshmallow marzipan candy. Croissant pudding cheesecake. Chupa chups liquorice jelly-o candy canes bonbon pie cookie chocolate bar. Jelly beans sugar plum ice cream wafer gingerbread cheesecake oat cake dragée tart.</p>
  <p>Bonbon macaroon gummies candy canes cupcake icing sweet. Tootsie roll pie danish cake. Jelly-o jel