<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/clear.css" rel="stylesheet" type="text/css" />
<link href="css/adaptive.css" rel="stylesheet" type="text/css" />
<script src="js/script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<title>Квартира</title>
</head>
<body>
<div class="wrapper">
<div class="item">
<div class="close">✖</div>
<div class="flex">
<div class="col img">
<img src="https://www.interfax.ru/ftproot/textphotos/2020/08/20/al700.jpg" alt="img">
</div>
<div class="col desc">
<h2>2-к квартира</h2>
<ul class="grid">
<li class="grid__item">
<span class="grid__title">Этаж</span>
<span class="grid__des">3 из 19</span>
</li>
<li class="grid__item">
<span class="grid__title">Высота потолков</span>
<span class="grid__des">3,2 м</span>
</li>
<li class="grid__item three">
<span class="grid__title">Отделка</span>
<span class="grid__des">Предчистовая</span>
</li>
<li class="grid__item">
<span class="grid__title">Общая площадь</span>
<span class="grid__des">32,24 м<sup>2</sup></span>
</li>
<li class="grid__item">
<span class="grid__title">Жилая площадь</span>
<span class="grid__des">22,24 м<sup>2</sup></span>
</li>
<li class="grid__item">
<span class="grid__title">Площадь кухни</span>
<span class="grid__des">14,24 м<sup>2</sup></span>
</li>
</ul>
<div class="ach">
<div class="viewing"><i class="fas fa-check"></i> Вы были на просмотре</div>
<div class="accreditation"><i class="fas fa-times"></i> Дом аккредитован другим банком</div>
</div>
</div>
</div>
<div class="col price">
<div class="info">
Ваша цена по брони до <span class="blue">19 сентября</span>
<span class="currentprice">3 312 666 Р</span>
<p>Текущая цена у застройщика<br>дороже на <span class="red">324 825 Р</span></p>
</div>
<div class="button"><i class="fas fa-key"></i> Выбрать для покупки</div>
</div>
</div>
</div>
</body>
* {
padding: 0;
margin: 0;
}
html, body {
font-size: 14px;
font-family: 'Roboto';
font-weight: 400;
line-height: 1;
scroll-behavior: smooth;
background-color: #E5E5E5;
height: 100%;
color: #989691;
}
h2 {
font-size: 24px;
font-weight: 700;
color: #383736;
margin-bottom: 18px !important;
line-height: 0.75em;
}
.col img {
width: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
max-width: 1280px;
padding: 30px 60px;
box-sizing: border-box;
margin: 0 auto;
}
.item {
position: relative;
display: flex;
flex-direction: row;
border-radius: 8px;
padding: 30px;
border:1px solid #ccc;
justify-content: space-between;
width: 100%;
margin-bottom: 30px;
background-color: #fff;
}
.close {
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
color: #C4C4C4;
transition: 0.3s;
font-size: 18px;
}
.close:hover {
background-color: #F5F4F2;
color: #000;
border-radius: 4px;
}
.close:active {
background-color: #E7E4DE;
color: #000;
border-radius: 4px;
}
.item .col.img {
width: 178px;
margin-right: 30px;
text-align: center;
}
.col.desc {
flex-grow: 1;
}
.grid {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-gap: 0 55px;
}
.flex {
display: flex;
}
sup {
font-size: 10px;
}
.grid__item {
margin-bottom: 18px;
}
.grid__title {
font-size: 12px;
font-weight: 400;
margin-bottom: 6px;
}
.grid__des {
font-size: 14px;
font-weight: 500;
color: #383736;
}
.grid__title, .grid__des {
display: block;
}
.item .col.desc .ach {
display: flex;
}
.item .col.desc .ach div {
display: flex;
align-items: center;
font-size: 12px;
font-weight: 500;
border-radius: 22px;
padding: 10px 20px;
}
.item .col.desc .ach div i {
margin-right: 10px;
}
.item .col.desc .ach div.viewing {
color: #64B851;
background-color: #F2FAF0;
margin-right: 15px;
}
.item .col.desc .ach div.accreditation {
color: #EB4B51;
background-color: #FAF0F0;
}
.item .col.price {
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 1px solid #F0EEEB;
padding-left: 30px;
min-width: 300px;
box-sizing: border-box;
}
.item .col.price .info .blue {
font-weight: 500;
color: #2794DB;
}
.item .col.price .currentprice {
color: #383736;
display: block;
font-size: 24px;
font-weight: 700;
margin-top: 10px;
margin-bottom: 18px;
}
.item .col.price .info .red {
font-weight: 500;
color: #EB4B51;
}
.item .col.price p {
line-height: 1.5;
}
.item .col.price .button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
color: #383736;
background-color: #FAC62D !important;
font-weight: 500;
padding: 13px 30px;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
transition: 0.3s;
text-align: center;
}
.item .col.price .button:hover {
background-color: #F0B505 !important;
}
.item .col.price .button:active {
background-color: #E1AB08 !important;
}
.item .col.price .button i {
margin-right: 15px;
transform: rotateY(180deg);
}
@media screen and (max-width: 1100px) {
.wrapper {
max-width: 920px;
}
.grid {
grid-template-columns: repeat(2, 1fr);
grid-gap: 0;
margin-bottom: 3px;
}
h2, .grid__item {
margin-bottom: 13px !important;
}
.item {
margin-bottom: 0px !important;
}
.grid__item:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.item .col.desc .ach {
flex-wrap: wrap;
}
.item .col.desc .ach div.viewing {
margin-right: 0;
margin-bottom: 8px;
}
}
@media screen and (max-width: 886px) {
.grid {
grid-template-columns: repeat(2, max-content);
grid-gap: 0 52px ;
}
.item {
flex-wrap: wrap;
}
.item .col.desc .ach {
margin-bottom: 18px;
flex-wrap: nowrap;
white-space: pre-wrap;
}
.item .col.desc .ach div.viewing {
margin-bottom: 0 !important;
margin-right: 15px;
}
.col.price {
width: 100%;
border-left: none !important;
border-top: 1px solid #F0EEEB;
padding-top: 18px;
}
.item .col.price p {
margin-bottom: 18px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.