<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">&#10006;</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;
	}

}	




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.