Здравствуйте. Впервые делаю сайт, перейдя от теории к практике, и столкнулась с рядом проблем. Главная - не могу создать несколько блоков (8, если быть точной) для отображения меню с каталогом товаров (картинка + подпись к ней). Помогите, пож-та, разобраться. И заранее простите, если кого мой код введёт в ужас.)
Прилагаю HTML
<!DOCTYPE html>
<html lang="ru">
<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">
<link rel="stylesheet" href="css/stylereset.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap');
</style>
<title>Мастерстрой</title>
</head>
<body>
<header class="header">
<div class="headmenu"></div>
<ul class="info">
<span>
<img class="imgloco" src="img/icon/Vector.svg" alt="">
</span>
<li class="loco">Волоколамский район, <br> пос. Чисмена, ул. Центральная, 1</li>
<span>
<img class="imgtime" src="img/icon/time.svg" alt="">
</span>
<li class="time">Режим работы: <br> с 8:00 до 20:00</li>
<span>
<img class="imgtelephone" src="img/icon/telephone.svg" alt="">
</span>
<li class="telephone">+7 (926) 105-94-14 <br>+7 (910) 470-67-97</li>
<li class="telephoneright">+7 (499) 994-90-99</li>
</ul>
<span class="buttomtop"><button class="infobuttom">Заказать звонок</button></span>
</header>
<nav>
<img class="logotip" src="img/icon/Rectangle 2.svg" alt="">
<ul class="menu"></ul>
<li class="one"> <a style="color: #000000;" href="#">О компании</a></li>
<li class="two" > <a style="color: #000000;" href="#"> Укладка тротуарной плитки</a></li>
<li class="three"> <a style="color: #000000;" href="#">Портфолио</a></li>
<li class="four"> <a style="color: #000000;" href="#">Полезно знать</a></li>
<li class="five"> <a style="color: #000000;" href="#">Доставка и оплата</a></li>
<li class="six"> <a style="color: #000000;" href="#"> Контакты</a></li>
</nav>
<div class="inform">
<h1 class="text__top">Тротуарная плитка в Волоколамске <br> напрямую от производителя</h1>
<p class="inform__text">Вам нужна качественная и недорогая тротуарная плитка в Волоколамске? Мы готовы предложить <br> отличную возможность приобрести современные модели с высокими показателями эстетики и <br> механической стойкости напрямую от производителя – компании «Мастер Строй».</p>
<span class="inform__buttom"><button class="top">Каталог</button></span>
</div>
<div class="page">
<h2 class="title__h2">Каталог продукции</h2>
<div class="wrapper">
<div class="procuct">
<div class="product__item">
<img src="/img/product1.png" alt="">
<p class="product__title">Прессованная плитка</p>
<div class="product__item">
<img src="/img/product2.png" alt="">
<p class="product__title">Вибролитая плитка</p>
<div class="product__item">
<img src="/img/product3.png" alt="">
<p class="product__title">Садовый бордюр</p>
<div class="product__item">
<img src="/img/product4.png" alt="">
<p class="product__title">Дорожный бордюр</p>
</div>
</div>
</div>
<button class="kataloge">Больше товаров</button>
</div>
</body>
</html>
И CSS
body {
max-width: 1600px;
font-family: 'Montserrat', sans-serif;;
}
.header {
background: #303030;
border: 1px solid #303030;
height: 100px;
padding-top: 22px;
}
.headmenu {
width: 100%;
display: flex;
}
.info {
overflow: hidden;
}
.loco, .time, .telephone, .telephoneright {
size: 12px;
color: #FFFFFF;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 15px;
float: left;
}
img {
float: left;
}
.imgloco {
padding-left: 200px;
padding-right: 36px;
}
.loco {
border-right: 1px solid #FFFFFF;
padding-right: 20px;
}
.imgtime {
padding-left: 20px;
padding-right: 20px;
}
.time {
border-right: 1px solid #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
.imgtelephone {
padding-left: 20px;
padding-right: 20px;
}
.telephone {
padding-left: 20px;
padding-right: 20px;
}
.telephoneright {
padding-left: 29px;
}
.buttomtop {
padding-left: 40px;
}
.infobuttom {
position: absolute;
width: 240px;
height: 50px;
left: 1085px;
top: 15px;
background: #FFFFFF;
border-radius: 30px;
top: 15px;
left: 1100px;
}
nav {
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border: 1px solid #303030;
height: 100px;
padding-left: 180px;
}
.menu {
padding-top: 32px;
}
.logotip {
width: 114px;
height: 55px;
top: 91px;
padding-top: 12px;
}
nav li {
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 15px;
color: #000000;
list-style: none;
display: inline;
}
.one {
padding-left: 130px;
}
.two {
padding-left: 49px;
}
.three {
padding-left: 49px;
}
.four {
padding-left: 49px;
}
.five {
padding-left: 49px;
}
.six {
padding-left: 49px;
}
.inform {
background: url(/img/inform.png);
width: 1600px;
height: 532px;
}
.text__top {
font: weight 700px;
line-height: 49px;
font-size: 40px;
padding-bottom: 20px;
line-height: 49px;
text-align: center;
color: #FFFFFF;
padding-top: 135px;
}
.inform__text {
font-weight: 400;
font-size: 14px;
line-height: 17px;
text-align: center;
color: #FFFFFF;
padding-bottom: 32px;
}
.top {
width: 240px;
height: 60px;
background: #E05100;
border-radius: 30px;
margin: 0 auto;
display: block;
}
.inform__buttom {
font-weight: 400;
font-size: 16px;
line-height: 20px;
text-align: center;
color: #FFFFFF;
}
.page {
height: 532px;
background: #E5E5E5;
}
.wrapper {
}
.title__h2 {
text-align: center;
font-weight: 700;
font-size: 35px;
line-height: 43px;
text-align: center;
color: #000000;
padding-top: 120px;
}
.procuct {
display: flex;
justify-content: space-between;
text-align: center;
}
.product__item {
}
.product__title {
}
.kataloge {
}
На макете это выглядит так
Средний
Простой
Средний