<!DOCTYPE html>
<html lang="ru">
<head>
<title>Banners</title>
<meta charset="UTF-8">
<meta name="description" content="Описание">
<meta name="author" content="Имя Автора">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Иконка сайта -->
<link rel="shortcut icon" type="images/png" href="images/logo.png">
<link rel="apple-touch-icon" href="#">
<link rel="apple-touch-icon" sizes="72x72" href="#">
<link rel="apple-touch-icon" sizes="114x114" href="#">
<!-- Шрифты -->
<!-- Стили -->
<link rel="stylesheet" href="./style/main.css">
</ head>
<body>
<section class="banner">
<div class="container">
<h1 class="main-title">Акции и специальные предложения</h1>
<div class="flex-container">
<div class="banner-left">
<a href="#">
<img class="img-banner-left" src="img/img-banner-left.png" alt="Тетрадь Кубометрия">
<img class="label-stick" src="img/label-stick-banner-left.png" alt="подарок">
</a>
<div class="banner-left-title">Предзаказ тетради «Кубометрия 3D»</div>
<div class="timer-informer">Акция заканчивается 14 апреля. Через:</div>
<div class="clock-wrap">
<div class="clock-inline-block">
<span class="span1">1</span><span class="span2">2</span>
</div>
<div class="clock-inline-block">
<span class="span1">1</span><span class="span2">2</span>
</div>
<div class="clock-inline-block">
<span class="span1">1</span><span class="span2">2</span>
</div>
</div>
<div class="timer-description">
<div class="hours">часов</div>
<div class="minutes">минут</div>
<div class="seconds">секунд</div>
</div>
<div class="price-container">
<div class="price">9 999₽</div>
<input type="submit" class="btn-banner btn-left" value="Подробнее">
<div class="pre-price">9 999p<div class="cross-out"></div></div>
</div>
</div>
<form action="#">
<button type="submit">
<div class="button-width">
<div class="btn-right">Подробнее</div>
</div>
</button>
</form>
</div>
</div>
</section>
</body>
</html>
html {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html::after,
html::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*{
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* --------------------- fonts ------------------ */
@font-face {
font-family: "proximanova-regular";
src: url("https://bandaumnikov.ru/build/fonts/proximanova-regular.woff2");
}
@font-face {
font-family: "proximanova-bold";
src: url("https://bandaumnikov.ru/build/fonts/proximanova-bold.woff2");
}
@font-face {
font-family: "umnik-bold";
src: url("https://bandaumnikov.ru/build/fonts/umnik-bold.woff2");
}
body{
width: 100%;
max-width: 100%;
font-family: "proximanova-regular";
font-size: 16px;
color: #000000;
letter-spacing: 1.5px;
background: #ffffff;
}
ul, ol {
list-style-type: none;
}
a{
text-decoration: none;
color: #000000;
}
.container {
max-width: 81%;
margin: 0 auto;
}
}
img {
max-width: 100%;
height: auto;
}
.flex-container {
display: flex;
justify-content: space-between;
border: 1px solid black;
}
@media (max-width:1305px) {
.flex-container {
justify-content: center;
flex-wrap: wrap;
}
}
.main-title {
margin: 20px 0;
font-size: 2.5rem;
font-weight: 400;
border: 1px solid black;
}
@media (max-width: 1305px) {
.main-title {
text-align: center;
}
}
.banner-left {
position: relative;
margin-right: 40px;
max-width: 564px;
height: 294px;
background-image: url(../img/bg-banner-left.png);
background-repeat: no-repeat;
}
@media (max-width: 1305px) {
.banner-left {
margin-right: 0;
margin-bottom: 40px;
}
}
.img-banner-left {
float: left;
margin: 13px 28px 13px 15px;
}
.label-stick {
position: absolute;
top: 5px;
left: 145px;
width: 106px;
height: 119px;
}
.banner-left-title {
padding: 18px 0 0 250px;
font-family: "proximanova-bold";
font-weight: 600;
font-size: 1.875rem;
line-height: 1.1;
}
.timer-informer {
margin: 10px 0;
padding-left: 250px;
font-family: "proximanova-regular";
font-size: 0.8rem;
}
.clock-wrap {
display: flex;
align-content: flex-start;
margin-left: 250px;
margin-right: 34px; /* check it out!!!! */
font-family: "umnik-bold";
font-size: 3.4375rem;
font-weight: 600;
width: 280px;
}
.clock-inline-block {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-right: 10px;
width: 80px;
height: 55px;
background-color: #fff;
border-radius: 5px;
background-image: url(../img/vertical-slash.png);
background-repeat: no-repeat;
background-position: center;
}
.span2 {
margin-right: 3px;
}
.span1 {
margin-left: 3px;
}
.timer-description {
margin-left: 260px;
width: 280px;
font-weight: 600;
}
.hours,
.minutes {
display: inline-block;
margin-right: 35px;
}
.seconds {
display: inline-block;
}
.btn-banner {
padding: 10px 17px;
font-family: "proximanova-bold";
font-size: 1.125rem;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background-color: #ff0072;
border: none;
}
.btn-left {
display: inline-block;
margin: 15px 0 0 5px;
vertical-align: top;
}
.price-container {
margin-top: 10px;
padding-left: 250px;
}
.price {
display: inline-block;
margin: 0;
vertical-align: top;
font-family: "proximanova-bold";
font-size: 2.25rem;
font-weight: 600;
color: #ff0072;
}
.pre-price {
position: relative;
margin-top: -18px;
width: 64px;
font-family: "proximanova-regular";
text-transform: uppercase;
}
.cross-out {
position: absolute;
top: 7px;
left: 0;
width: 64px;
height: 10px;
background-image: url(../img/previous-price.png);
background-repeat: no-repeat;
background-position: center;
z-index: 10;
}
button {
margin: 0;
max-width: 564px;
height: 294px;
background-image: url(../img/bg-banner-right.png);
background-repeat: no-repeat;
border: none;
}
button:hover {
cursor: pointer;
}
.button-width {
position: relative;
margin-left: 282px;
margin-right: 282px;
}
.btn-right {
position: absolute;
top: 81px;
left: 107px;
padding-top: 9px;
width: 142px;
height: 45px;
font-family: "proximanova-bold";
font-size: 1.125rem;
color: #fff;
text-transform: uppercase;
background-color: #ff0072;
}
.btn-right:hover {
cursor: pointer;
}
Простой
Простой