Untitled
3 years ago in Plain Text
@font-face {
font-family: 'Inter';
src: url(https://pictures.s3.yandex.net/frontend-developer/responsive/Inter-Regular.woff);
font-weight: normal;
}
@font-face {
font-family: 'Inter';
src: url(https://pictures.s3.yandex.net/frontend-developer/responsive/Inter-Bold.woff2);
font-weight: bold;
}
/* это не совсем по БЭМ, но в учебном проекте допустимо.
В реальных условиях пишите margin: 0; внутри блоков */
h1, h2, h3, h4, h5, h6, p, li {
margin: 0;
}
body {
background-color: #000000;
}
.page {
max-width: 1440px;
margin: auto;
font-family: 'Inter';
}
.header {
background-color: #000000;
}
.header__container {
width: 90%;
margin: auto;
display: flex;
align-items: center;
height: 60px;
}
.header__title {
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
.cover {
min-height: calc(60vh - 60px);
background-image: url(https://pictures.s3.yandex.net/frontend-developer/responsive/cover.png);
background-size: cover;
background-position: center;
color: #ffffff;
box-sizing: border-box;
padding: 161px 0 98px;
}
.cover__container {
width: 90%;
margin: auto;
}
.cover__title {
font-size: 96px;
line-height: 96px;
max-width: 849px;
}
.cover__subtitle {
font-size: 16px;
max-width: 610px;
margin-top: 50px;
line-height: 24px;
}
.content {
padding: 60px 0;
background-color: #fff;
}
.content__columns {
display: flex;
justify-content: space-between;
width: 90%;
margin: auto;
flex-wrap: wrap;
}
.content__column {
width: calc((100% - 70px)/3);
}
.content__column-image {
width: 350px;
height: 350px;
background-size: cover;
background-position: center;
}
.content__column-image_hero_laika {
background-image: url(https://pictures.s3.yandex.net/frontend-developer/responsive/laika.png);
}
.content__column-image_hero_lunohod {
background-image: url(https://pictures.s3.yandex.net/frontend-developer/responsive/lunohod.jpg);
}
.content__column-image_hero_tesla {
background-image: url(https://pictures.s3.yandex.net/frontend-developer/responsive/tesla.png);
}
.content__column-title {
font-size: 30px;
margin: 37px 0 34px;
}
.column__text {
margin: 24px 0;
font-size: 14px;
line-height: 21px;
}
.column__quote {
font-size: 18px;
line-height: 27px;
margin-left: 0;
}
.column__quote-cite {
font-size: 12px;
line-height: 18px;
}
.share {
display: flex;
align-items: center;
margin-top: 34px;
}
.share__text {
font-weight: bold;
font-size: 18px;
line-height: 27px;
margin-right: 14px;
}
.share__icon {
text-decoration: none;
display: block;
margin-right: 6px;
}
.share__icon:last-of-type {
margin-right: 0;
}
.share__icon:hover {
opacity: .8;
}
.footer {
height: 60px;
background-color: #fff;
}
.footer__copyright {
width: 90%;
margin: auto;
font-size: 12px;
line-height: 18px;
}