Skip to content

Instantly share code, notes, and snippets.

@kianurivzzz

kianurivzzz/index.html

Last active February 23, 2024 15:15
Show Gist options
  • Save kianurivzzz/25750d7e975bb7a650753a0e9d35f097 to your computer and use it in GitHub Desktop.
Save kianurivzzz/25750d7e975bb7a650753a0e9d35f097 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div class="container">
<section class="left-block">
<header class="logo">
<img src="img/disney-logo.svg" width="100" alt="">
</header>
<section class="left-block-content">
<div class="top-img">
<img src="img/dolby-digital.svg" width="24" alt="">
<img src="img/4k-video.svg" width="24" alt="">
</div>
<div class="luca-logo">
<img src="img/luca-logo.svg" width="240" alt="">
</div>
<article class="raiting-holder">
<a href="#" class="btn">
<img src="img/play.svg" alt="">
</a>
<div class="raiting-block">
<span class="raiting-block__text">IMDb RATING</span>
<div class="raiting-value">
<img src="img/star.svg" width="24" alt="">
<span>7.4/10</span>
</div>
</div>
</article>
<p class="left-text">
A young boy experiences an unforgettable seaside summer on the Italian Riviera filled with gelato, pasta and
endless scooter rides. Luca shares these adventures with his newfound best friend, but all the fun is
threatened by a deeply-held secret: he is a sea monster from another world just below the ocean's surface.
</p>
</section> <!-- Закрывающий тег от left-block-content -->
</section> <!-- Закрывающий тег от left-block -->
<section class="right-block">
<h1 class="block-title">Popular New</h1>
<section class="row">
<div class="img-holder">
<img src="img/play-circle.svg" class="play-btn" alt="">
<img src="img/films/money-heist.png" width="100%" alt="">
</div>
</section>
<section class="row">
<div class="img-holder fl">
<img src="img/play-circle.svg" class="play-btn" alt="">
<img src="img/films/top-gun.png" height="190" alt="">
</div>
<div class="img-holder fr">
<img src="img/play-circle.svg" class="play-btn" alt="">
<img src="img/films/american-dad.png" width="112.8" height="190" alt="">
</div>
</section>
<section class="row">
<div class="img-holder fl">
<img src="img/play-circle.svg" class="play-btn" alt="">
<img src="img/films/black-widow.png" height="230" alt="">
</div>
<div class="img-holder fr">
<img src="img/play-circle.svg" class="play-btn" alt="">
<img src="img/films/avengers.png" height="230" alt="">
</div>
</section>
</section>
<!-- Закрывающий тег от right-block -->
</div>
<!-- Закрывающий тег от container -->
<div class="avatar-logo">
<img src="img/avatar.svg" width="44" alt="">
</div>
<div class="bottom-shadow"></div>
</main>
</body>
</html>
Raw
style.css
* {
margin: 0;
/* сбрасываем внешние отступы */
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
/* устанавливаем тип шрифта */
}
main {
background-image: url(../img/background.png);
/* ставим фоновое изображение */
background-size: cover;
/* растягиваем фон по размерам блока */
background-repeat: no-repeat;
/* запрещаем картинке повторяться */
background-position: center;
/* выравниваем ее по центру каждой оси */
min-height: 100vh;
/* минимальная высота блока = высоте устройства */
padding-top: 40px;
}
.container {
max-width: 1100px;
/* максимально возможная ширина блока 1100 пикселей */
margin: 0 auto;
/* размещаем блок по центру экрана */
}
.left-block {
width: 630px;
/* задаем ширину блока */
float: left;
/* задаем поток обтекания слева */
}
.right-block {
width: 280px;
/* задаем ширину блока */
float: right;
/* задаем поток обтекания справа */
}
/* new */
.container:after {
content: '';
display: block;
clear: both;
}
.logo {
margin-bottom: 80px;
}
.left-block-content {
padding-left: 80px;
}
.top-img img {
vertical-align: middle;
margin-bottom: 12px;
}
.raiting-holder {
width: 170px;
margin-top: 20px;
margin-bottom: 30px;
}
.raiting-holder::after {
content: '';
display: block;
clear: both;
}
.btn {
background: linear-gradient(90deg, #0D0F42 -2.98%, rgba(9, 14, 113, 0.73) 50%);
border-radius: 6px;
display: block;
width: 40px;
height: 40px;
float: left;
margin-top: 4px;
}
.btn img {
margin: auto;
display: block;
width: 24px;
height: 100%
}
.raiting-block {
float: right;
color: #FFFFFF;
}
.raiting-block__text {
display: block;
}
.raiting-value img,
span {
vertical-align: middle;
}
.raiting-value img {
transition: 0.4s;
filter: grayscale(100%);
}
.raiting-value img:hover {
filter: grayscale(0%);
cursor: pointer;
}
.left-text {
font-style: normal;
font-weight: 400;
font-size: 21px;
line-height: 1.4;
color: #FFFFFF;
}
/* right-block */
.block-title {
color: #ffffff;
text-align: center;
font-size: 32px;
}
.row:after {
content: '';
display: block;
clear: both;
}
.img-holder {
position: relative;
margin-top: 16px;
}
.img-holder:after {
content: '';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.play-btn {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
margin: 0;
width: 40px;
transition: 0.2s;
}
.play-btn:hover {
width: 60px;
cursor: pointer;
}
.avatar-logo {
position: absolute;
top: 20px;
right: 40px;
}
.bottom-shadow {
position: absolute;
width: 100%;
height: 130px;
bottom: 0;
background: linear-gradient(180deg, rgba(11, 16, 26, 0) 38.02%, #0B101A 89.58%);
border-radius: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment