<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>МультФильмы - Смотри на HD качестве!</title>
<link rel="stylesheet" href="assets/css/main.css">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Montserrat:wght@700;800&family=Quicksand:wght@700&family=Syne+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<div class="header__logo">Мультфильмы HD</div>
<nav>
<a class="nav__link active" href="#">О нас</a>
<a class="nav__link" href="#">Контакты</a>
<a class="nav__link" href="#">Поддержка</a>
<a class="nav__link" href="#">Купить</a>
</nav>
</div>
<div class="slider__nije">
<div class="nijeslider_item active">
<span clas="slider_num">Уникальный</span>
проект
</div>
<div class="nijeslider_item">
<span clas="slider_num">3 Года</span>
Работы
</div>
<div class="nijeslider_item">
<span clas="slider_num">Поддержка</span>
24/7
</div>
</div>
</div>
</header>
<div class="intro">
<div class="container">
<div class="intro__inner">
<h2 class="intro__suptitle">СМОТРИ НА HD</h2>
<h1 class="intro__title">КАЧЕСТВЕ</h1>
<a class="lrn" href="#">ПОДРОБНЕЕ</a>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="section__header">
<h3 class="section__suptitle">What we do</h3>
<h2 class="section__title">Story abous us</h2>
<div class="section__text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ut nemo, eius cupiditate suscipit. Fuga, blanditiis perspiciatis reprehenderit commodi deserunt similique a maxime, aliquid itaque at! Magni animi placeat labore.</p>
</div>
</div>
<div class="about">
<div class="about__item">
<div class="about__img">
<img src="assets/css/images/about/kartinka1.jpg" alt="">
</div>
</div>
<div class="about__item">
<div class="about__img">
<img src="assets/css/images/about/kartinka3.jpg">
</div>
</div>
<div class="about__item">
<div class="about__img">
<img src="assets/css/images/about/kartinka2.jpg">
</div>
</div>
</div>
</div>
</section>
</body>
</html>body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #333;
}
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, h7, h8 {
margin: 0;
}
.container {
width: 100%;
max-width: 1350px;
margin: 0 auto;
}
.intro {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url(images/intro.jpg);
color: #000;
}
.intro__inner {
width: 100%;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.intro__title {
color: #fff;
font-size: 150px;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
}
.intro__title:after {
content: "";
display: block;
width: 60px;
height: 3px;
margin: 40px auto;
background-color: #fff
}
.intro__suptitle {
font-size: 72px;
color: #fff;
text-align: center;
}
.header {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding-top: 20px;
}
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo {
font-size: 30px;
font-weight: 710;
color: #fff;
}
.nav {
font-size: 14px;
text-transform: uppercase;
}
.nav__link{
display: inline-block;
vertical-align: top;
margin: 0 12px;
color: #fff;
text-decoration: none;
transition: color 0.3s linear;
position: relative;
}
.nav__link:after {
content: "";
display: block;
width: 100%;
height: 2px;
opacity: 0;
background-color: #ae00ff;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
transition: opacity 0.3s linear;
}
.nav__link:hover {
color: #ae00ff;
}
.nav__link:hover:after,
.nav__link.active:after {
opacity: 1;
}
.nav__link.active {
color: #ae00ff;
}
.lrn {
display: inline-block;
vertical-align: top;
border: 2px solid #fff;
padding: 3px 22px;
font-size: 14px;
font-weight: 100;
color: #fff;
text-transform: uppercase;
text-decoration: none;
transition: background 0.1s linear, color 0.3s linear;
}
.lrn:hover {
background-color: #fff;
color: #650491;
}
.slider__nije {
display: flex;
justify-content: space-between;
color: #fff;
margin-top: 625px;
}
.nijeslider_item {
width: 20%;
padding: 20px 0;
border-top: 2px solid #650491;
opacity: 0.7s;
font-size: 18px;
color: #fff;
text-transform: uppercase;
}
.nijeslider_item.active {
opacity: 1;
}
.slider_num {
font-size: 24px;
font-weight: 700;
color: black;
}
.section {
padding: 80px 0;
}
.section__header {
width: 100%;
max-width: 950px;
margin: 0 auto 40px;
text-align: center;
}
.section__suptitle {
font-family: 'Kaushan Script', cursive;
font-size: 24px;
color: #333;
}
.section__title {
font-size: 30px;
font-weight: 700;
color: #333;
text-transform: uppercase;
}
.section__title:after {
content: "";
display: block;
width: 60px;
height: 3px;
margin: 30px auto 0;
background-color: #ae00ff;
}
.section__text {
font-size: 15px;
color: #333;
}
.about {
display: flex;
justify-content: space-between;
}
.about__item {
width: 27%;
}
.about__item:hover .about__img img {
opacity: 0.7s;
}
.about__img {
background: linear-gradient(to bottom, #d92bc7, #9e4694)
}
.about__img img {
transition: 0.1s linear;
}
Простой
Средний
Простой
Простой
