* {
padding: 0;
margin: 0;
}
body {
font-family: Open Sans, sans-serif;
}
header {
background: url(../background.jpg) no-repeat bottom;
background-size: cover;
position: relative;
min-width: 120px;
}
.container {
margin: 0% 16%;
position: relative;
}
.top_line {
height: 80px;
background: white;
opacity: 0.7;
position: relative;
}
.clearfix::after {
content: '';
display: table;
width: 100%;
clear: both;
}
.menu {
display: block;
padding-top: 36px;
}
.menu li {
display: block;
float: left;
font-size: 14px;
margin-left: 60px;
}
.menu a {
color: #979b9b;
text-decoration: none;
}
.menu a:hover {
color: #eb435c;
}
.help {
border: 1px solid #eb435c;
border-radius: 20px;
text-decoration: none;
font-size: 10px;
color: #eb435c;
text-transform: uppercase;
padding: 10px 20px;
position: absolute;
top: 30%;
right: 3%;
}
.blackout {
position: relative;
height: 660px;
}
.blackout:before {
content: '';
position: absolute;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
background-color: rgba(0, 0, 0, 0.3);
}
.arrow {
position: absolute;
/* Абсолютное позиционирование */
border: 15px solid transparent;
/* Прозрачные границы */
border-top: 15px solid white;
/* Добавляем треугольник */
bottom: 0%;
right: 50%;
}
.titles {
position: absolute;
z-index: 1;
width: 40%;
top: 35%;
left: 32%;
}
.titles h1 {
color: white;
text-shadow: 1px 1px 2px black;
font-size: 40px;
text-align: center;
}
.information {
position: relative;
}
.order_title {
font-size: 25px;
color: #eb435c;
text-align: center;
position: relative;
}
h2 {
font-size: 25px;
color: #eb435c;
text-align: center;
}
.information p {
font-size: 14px;
color: #858584;
text-align: center;
font-weight: bolder;
width: 59%;
line-height: 2.0em;
position: absolute;
top: 200%;
left: 21%;
}
.orders {
margin-top: 250px;
margin-bottom: 80px;
display: flex;
justify-content: center;
}
.orders_item {
width: 254px;
color: #858584;
text-align: center;
font-weight: lighter;
font-size: 13px;
padding-right: 40px;
}
.orders_item img {
padding-bottom: 15px;
}
.orders_item h3 {
color: #eb435c;
padding-bottom: 19px;
}
.number {
color: #45d3ce;
font-size: 20px;
display: block;
float: left;
position: absolute;
top: -10%;
left: -24%;
}
.people {
display: block;
position: relative;
margin-left: 55px;
}
.about_text {
width: 260px;
}
.grey {
background-color: #f4f6f8;
}
.search {
padding-top: 90px;
padding-bottom: 70px;
}
.information_all {
margin-top: 25px;
font-size: 14px;
color: #858584;
text-align: center;
font-weight: bolder;
width: 750px;
line-height: 2.0em;
}
.all_items {
width: 770px;
height: 100px;
margin: 0% auto;
}
.buttons {
margin-top: 80px;
display: flex;
justify-content: center;
}
.search_item {
border: 1px solid #eb435c;
border-radius: 20px;
text-decoration: none;
font-size: 10px;
color: #eb435c;
text-transform: uppercase;
text-align: center;
padding: 10px 50px;
margin-right: 30px;
}
.buttons a:first-child {
padding: 10px 40px;
}
.search_item:hover {
background-color: #eb435c;
color: white;
transition: all .2s linear;
}
.clock_item {
background-color: white;
border-radius: 5px;
box-shadow: -12px 10px 20px -15px rgba(0, 0, 0, .2);
margin-top: 70px;
height: 370px;
width: 260px;
float: left;
margin-left: 30px
}
.clock_item img {
height: 180px;
padding-top: 4px;
}
.clocks_center {
padding-left: 15px;
width: 245px;
}
.clock_item:last-child {
float: right;
}
.clocks {
display: flex;
justify-content: center;
}
.text h6 {
padding-top: 15px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
}
.text span {
color: #eb435c;
}
.all_presents {
text-align: center;
margin-top: 70px;
}
.search_presents {
border: 1px solid #eb435c;
border-radius: 20px;
text-decoration: none;
font-size: 10px;
color: #eb435c;
text-transform: uppercase;
text-align: center;
padding: 10px 50px;
}
.contacts h2 {
font-size: 25px;
color: #eb435c;
text-align: left;
}
.contacts .adress {
padding-top: 20px;
font-weight: bold;
float: left;
font-size: 13px;
}
.contacts h3 {
color: #858584;
font-weight: lighter;
font-size: 13px;
}
.contacts {
padding-top: 80px;
width: 240px;
}
.adress h3:nth-of-type(1) {
color: black;
}
footer {
position: relative;
}
.map img {
width: 60%;
position: absolute;
top: 0%;
right: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/media.css">
</head>
<body>
<header class="header">
<div class="top_line">
<div class="container">
<nav>
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Премущества</a></li>
<li><a href="#">Каталог</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Корзина</a></li>
</ul>
</nav>
</div>
<a href="" class="help">Помогите выбрать</a>
</div>
<div class="blackout">
<div class="titles">
<h1>Ваш дедушка мороз живет у нас!
Покупайте подарки для детей и взрослых в одном месте!</h1>
</div>
<div class="arrow">
</div>
</div>
</header>
<section>
<div class="container">
<div class="information ">
<div class="order_title">Почему заказывают у нас?</div>
<p>Хорошие подарки на новый год не так просто найти.Мы предлагаем лучшее.В прошлом году у нас было больше 9435 тысячи заказов из всех уголков Беларуси, каждый клиент остался доволен, обращайтесь и Вы!</p>
</div>
<div class="orders">
<div class="orders_item ">
<img src="./order-icon1.jpg" alt="">
<h3>Больше-дешевле</h3>
<p class="about_text">Скидки до 10%! 1 подарок-1%;
2 подарок-2%; и так до 10%.<br>
Нужна большая скидка-звоните.</p>
</div>
<div class="orders_item">
<img src="./order-icon2.jpg" alt="">
<h3>Работа без посредников</h3>
<p class="about_text">Вся продукция идет напрямую от производителя, а это значит, что мы не ставим наценок на товар</p>
</div>
<div class="orders_item">
<img src="./order-icon3.jpg" alt="">
<h3>Быстрая доставка</h3>
<p class="about_text">Быстрая доставка в любые регионы Беларуси за 3 дня, по Минску-доставляем в день заказа.</p>
</div>
<div class="orders_item">
<img src="./order-icon4.jpg" alt="">
<h3 class="people"> <span class="number">9435</span> счастливых покупателей</h3>
<p class="about_text">У нас вы найдете подарки для взрослых и детей. Чего-то не нашли? Постараемся помочь, звоните!</p>
</div>
</div>
</div>
</section>
<section>
<div class="grey">
<div class="container">
<div class="search">
<div class="all_items">
<h2>А вот и то, что Вы ищете!</h2>
<p class=information_all>Весь ассортимент нашего магазина к вашим услугам. Подарки на новый год- это выражение любви и уважения, помните об этом и выбирайте!</p>
</div>
<div class="buttons">
<a href="" class="search_item">Весь перечень</a>
<a href="" class="search_item">Мужские</a>
<a href="" class="search_item">Женские</a>
<a href="" class="search_item">Детские</a>
</div>
<div class="clocks">
<div class="clock_item">
<img src="./clock1.jpg" alt="">
<div class="text">
<h6>Часы <span>Breitling Navitimer</span></h6>
<h6>Цена <span>45рублей</span></h6>
</div>
</div>
<div class="clock_item">
<img src="./clock2.jpg" alt="" class="clocks_center">
<div class="text">
<h6>Часы <span>Breitling Navitimer</span></h6>
<h6>Цена <span>45рублей</span></h6>
</div>
</div>
<div class="clock_item">
<img src="./clock3.jpg" alt="">
<div class="text">
<h6>Часы <span>Breitling Navitimer</span></h6>
<h6>Цена <span>45рублей</span></h6>
</div>
</div>
<div class="clock_item">
<img src="./clock4.jpg" alt="" class="clocks_center">
<div class="text">
<h6>Часы <span>Breitling Navitimer</span></h6>
<h6>Цена <span>45рублей</span></h6>
</div>
</div>
</div>
<div class="all_presents">
<a href="" class="search_presents">Все подарки</a>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="contacts">
<h2>Контакты</h2>
<div class="adress">
<h3>Адрес</h3>
<h3>220035 г.Минск, ул.Чичурина, 24-160</h3>
</div>
<div class="adress">
<h3>Адрес</h3>
<h3>220035 г.Минск, ул.Чичурина, 24-160</h3>
</div>
</div>
</div>
<div class="map">
<img src="map.jpg" alt="">
</div>
</footer>
</body>
</html>
При уменьшении страницы появляется отступ, чем больше уменьшаешь, тем больше отступ.
Как решить?
Просмотрев вашу проблему могу посоветовать используйте(изучите) bootstrap.
А что касается вашего вопроса в <div class="orders">
для класса orders_item
необходимо переписать стили, для начала избавьтесь от фиксированного width:
.orders_item {
width: 25%;
color: #858584;
text-align: center;
font-weight: lighter;
font-size: 13px;
box-sizing: border-box;
padding: 0 10px;
}
.about_text {
width: 100%;
}
.people {
display: block;
position: relative;
/* margin-left: 55px; */
}
Для класса clock_item
сделайте аналогично.
.clock_item {
width: 25%;
}
.clock_item img {
width: 100%;
}
Возможно этих исправлений будет достаточно...
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
В первом столбце описание полей, во втором значенияПо нажатии одной из трех кнопок именяется значения во втором столбце
Всех приветствуюТут недавно столкнулся с SVG графикой, необходимо сделать одну фигуру