<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" />
<title>Оно тебе надо — аукцион вещей, в которые никто не верил</title>
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/global.css" />
</head>
<body class="body">
<header class="header">
<nav class="header__menu">
<ul class="header__links-list">
<li class="header__links-list-item">
<a href="#" class="header__link header__link_active">главная</a>
</li>
<li class="header__links-list-item">
<a href="#" class="header__link">посмотреть лоты</a>
</li>
<li class="header__links-list-item">
<a href="#" class="header__link">об аукционе</a>
</li>
</ul>
</nav>
<div class="logo">
<img src="./images/logo-black.svg" class="header__logo" alt="" />
</div>
<address class="header__address">
<a href="tel:+99995555555" class="address">+9 999 555 5555</a>
<a href="mailto:info@sobaka.ge" class="address">info@sobaka.ge</a>
<p class="address">наб. Принсенграхт 263-265, Амстердам</p>
</address>
</header>
<main class="main">
<section class="cover">
<div class="overlay"></div>
<h1 class="cover__title">
<span class="aligned-text aligned-text_start"
>о<span class="aligned-second-letter">н</span
><span class="aligned-third-letter">о</span></span
>
<span class="aligned-text aligned-text_center">
<span class="aligned-text-center-t"
>т
<span class="aligned-text-center-e"
>е
<span class="aligned-text-center-b"
>б <span class="aligned-text-center-e2">е</span></span
></span
></span
>
</span>
<span class="aligned-text aligned-text_right"
>н<span class="aligned-text_right_second">ад</span
><span class="aligned-text_right_third">о</span></span
>
</h1>
<div class="cover__description">
<p class="cover__description-text">
Аукцион вещей, в<span> которые никто не верил</span>
</p>
<button class="bet-button">Сделать ставку</button>
</div>
</section>
<div class="cards">
<div class="lots__title"><h1>Лоты</h1></div>
<div class="container">
<div class="card card-1">
<div class="overlay"></div>
<div class="card__text">
<div class="card__text-title">
<h1>Фильм режиссёра, который бросил киношколу</h1>
</div>
<div class="card__text-info">
<p>
Не просто бросил, а ушёл с первой лекции. Какой была бы ваша
ставка, если бы вы не знали, что режиссёр — Пол Томас
Андерсон?
</p>
</div>
</div>
</div>
<div class="card card-2">
<div class="overlay"></div>
<div class="card__text">
<div class="card__text-title">
<h1>
Книга, где описан один скучный день из жизни рекламного агента
</h1>
</div>
<div class="card__text-info">
<p>
Объёмом почти в тысячу страниц. Иногда без знаков препинания и
с переходами на древнеанглийский. В ней одновременно
рассказывается о 16 июня 1904 года и об истории литературы,
начиная с античных времён. И это всё накладывается на
эпическую поэму Гомера. Сколько бы вы поставили на «Улисса»
Джеймса Джойса?
</p>
</div>
</div>
</div>
<div class="card card-3">
<div class="overlay"></div>
<div class="card__text">
<div class="card__text-title">
<h1>
Картина, которую повторит даже 5-летний сын маминой подруги
</h1>
</div>
<div class="card__text-info">
<p>
Ну действительно, там линия, тут кружочек, а здесь и вовсе
что-то похожее на инфузорию-туфельку. Никаких полей, лесов,
котиков… Сколько бы вы на такое поставили, если бы не знали,
что это — одна из революционных работ Кандинского?
</p>
</div>
</div>
</div>
</div>
</div>
<a href="#!" class="cards__click-info">посмотреть больше</a>
</div>
</div>
<section class="about">
<div class="about column">
<img class="about__img" src="./images/logo-white.svg" alt="">
</div>
</section>
</main>
</body>
</html>
header,
main,
footer {
margin: 0;
padding: 0;
max-width: 1054px;
}
.body {
font-family: Raleway, sans-serif;
margin: 0 auto;
width: 1100px;
}
.header {
display: flex;
padding: 92px 38px 92px 24px;
margin: auto;
justify-content: space-between;
align-items: center;
max-width: 1052px;
}
.header__menu {
display: flex;
}
.header__link {
text-decoration: none;
border-bottom: 1px black solid;
}
.header__links-list {
margin-right: 1px;
width: 387px;
text-decoration: none;
display: flex;
flex-direction: row;
gap: 32px;
list-style-type: circle;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.header__link_active {
text-decoration: none;
border-bottom: 0;
}
.header__links-list-item:first-child {
list-style-type: none;
}
.logo {
width: 148px;
height: 105px;
flex-shrink: 0;
margin: 0 184px 0 32px;
}
.header__logo {
width: 100%;
height: 100%;
}
.header__address {
width: 240px;
font-family: "Raleway", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 135%;
}
.cover {
position: relative;
background-size: cover;
padding: 165px 50px 50px;
display: flex;
flex-flow: column;
width: 1082px;
height: 757px;
background-image: url("../images/cover.jpg");
margin: 96px auto 0;
margin: 0 auto;
font-family: "Raleway", Arial, sans-serif;
}
.overlay {
box-sizing: border-box;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 0;
}
.cover__title {
position: relative;
z-index: 2;
color: #fff;
font-family: "Raleway", sans-serif;
font-size: 100px;
font-style: normal;
font-weight: 700;
line-height: 115%;
text-transform: uppercase;
}
.aligned-text {
width: 100%;
display: block;
letter-spacing: 30px;
}
.aligned-text_start {
margin-left: -4px;
}
.aligned-text_center {
display: block;
text-align: center;
padding-top: 9px;
padding-left: 15px;
padding-right: 75px;
letter-spacing: 0;
}
.aligned-third-letter {
margin-left: 30px;
}
.aligned-text-center-t {
margin-left: 17px;
}
.aligned-text-center-b {
margin-right: 17px;
}
.aligned-text-center-e2 {
padding-left: 20px;
}
.aligned_third-letter {
padding-left: 30px;
}
.aligned-text_right {
padding-top: 5px;
display: block;
text-align: right;
letter-spacing: 0;
}
.aligned-text_right_second {
letter-spacing: 30px;
padding-left: 58px;
}
.cover__description {
z-index: 2;
margin: 135px 0 0;
position: relative;
width: 100%;
display: flex;
justify-content: flex-end;
}
.cover__description-text {
position: relative;
color: #fff;
font-family: "Raleway", sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 28px;
text-transform: uppercase;
margin: auto 59px auto 0;
word-spacing: 17px;
padding: 0;
}
.cover__description-text span {
padding-left: ;
padding-right: ;
}
.bet-button {
min-width: 252px;
height: 100%;
position: relative;
color: #fff;
font-family: "Raleway", Arial, sans-serif;
font-size: 22px;
font-style: normal;
padding: 12px 29px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
border: 1px solid #fff;
background-color: transparent;
}
/* Карточки Лоты */
.cards .lots__title {
margin-left: 60px;
margin-bottom: 27px;
}
.cards {
margin-top: 179px;
width: 1100px;
text-transform: uppercase;
}
.cards h1 {
font-family: "Raleway", sans-serif;
font-size: 40px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.cards .container {
width: 1100px;
display: flex;
gap: 25px;
}
.card {
height: 554px;
position: relative;
}
.overlay__cards {
opacity: 0.6;
}
.card-1 {
margin-left: 25px;
background-image: url("../images/card1.png");
background-size: cover;
width: 328px;
}
.card-2 {
background-image: url("../images/card2.jpg");
background-size: cover;
width: 330px;
}
.card-3 {
margin-left: -2px;
width: 328px;
background-image: url("../images/card3.jpg");
background-size: cover;
}
.card__text {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
margin: 0;
position: relative;
flex-flow: column;
}
.card__text-title h1 {
color: #fff;
font-family: Raleway, sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 26.4px */
text-decoration-line: underline;
text-transform: uppercase;
margin: 48px 40px 0;
padding: 0;
}
.card__text-info p {
color: #fff;
font-family: Raleway, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 24px */
text-transform: none;
margin: 0 40px 48px;
padding: 0;
}
.card__text-title {
z-index: 2;
}
.card__text-info {
z-index: 2;
}
.card__text-info p {
font-family: "Raleway", sans-serif;
font-weight: 300;
}
.card .card__text-title h1 {
font-family: "Raleway", sans-serif;
font-weight: 700;
}
.card-2 .card__text-title h1 {
z-index: 2;
}
.card-3 .card__text-title h1 {
}
.card .overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
margin: 0;
padding: 0;
}
.cards__click-info {
display: inline-block;
color: #000;
font-family: Raleway, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 30px;
margin-left: 65px;
text-decoration: underline;
text-underline-offset: 10px;
}
.cards__click-info {
height: 5px;
}
/* about */
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.