Skip to content
Snippets Groups Projects
Commit cee4d2f5 authored by Sergio Pieshko's avatar Sergio Pieshko
Browse files

test general cont

parent e0dc0990
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/images/cover.jpg 0 → 100644
+ 0
− 0
View file @ cee4d2f5
src/images/cover.jpg

261 KiB

src/index.html
+ 21
− 24
View file @ cee4d2f5
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Заголовок страницы</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
<!-- <include src="./partials/example.html"></include> -->
<!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Заголовок страницы</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
</head>
<body>
<!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
<!-- <include src="./partials/example.html"></include> -->
<include src="./partials/general-container.html"></include>
<!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script>
</body>
</html>
\ No newline at end of file
src/partials/general-container.html 0 → 100644
+ 74
− 0
View file @ cee4d2f5
<section class="general-page">
<div class="container movies">
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
<div class="movie">
<div class="movie__cover-inner">
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
<div class="movie__info">
<p class="movie__title">Green Book</p>
<p class="movie__category">Drama, Action</p>
<p class="movie__year">2020</p>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
src/sass/_general-container.scss 0 → 100644
+ 33
− 0
View file @ cee4d2f5
.movie__cover{
max-width: 280px;
max-height: 398px;
border-radius: 5px;
@media screen and (min-width: 767px){
max-width: 336px;
max-height: 455px;
}
@media screen and (min-width: 1024px){
max-width: 309px;
max-height: 489px;
}
}
.movies{
display: flex;
flex-direction: column;
@media screen and (min-width: 767px){
display: flex;
flex-wrap: wrap;
flex-direction: unset;
}
}
.movie{
margin: auto;
}
.movie__cover-inner{
}
\ No newline at end of file
src/sass/_utility-classes.scss
+ 2
− 2
View file @ cee4d2f5
......@@ -28,12 +28,12 @@ a {
@media screen and (min-width: 768px) {
width: 768px;
padding: 0 76px;
padding: 0 32px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
padding: 0 71px;
padding: 0 32px;
}
}
......
src/sass/main.scss
+ 2
− 0
View file @ cee4d2f5
......@@ -6,3 +6,5 @@
// Стили для файла с примером HTML-фрагмента
@import './variables';
@import './utility-classes';
@import './general-container'
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment