maksim.tananikin/a3-global
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add second page

Browse Source
This commit is contained in:
Maksim Tananykin
2022-10-17 12:42:43 +03:00
parent ceeb5b14a2
commit c968c19b5c
8 changed files with 511 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
about.html Normal file
View File

@@ -0,0 +1,156 @@
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>About Course</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="container header">
<p class="logo">BodyMindCare</p>
<nav class="nav-header">
<ul class="nav">
<li>
<a data-chapter="main" class="nav__item" href="#">Главная</a>
</li>
<li>
<a
data-chapter="services"
class="nav__item nav__item_active"
href="#"
>Услуги</a
>
</li>
<li>
<a data-chapter="news" class="nav__item" href="#">Новости</a>
</li>
<li>
<a data-chapter="contacts" class="nav__item" href="#"
>Контакты</a
>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<div class="about-card">
<p class="about__title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut repellat veniam impedit optio consequatur aspernatur corporis numquam cupiditate?</p>
<div class="about-more">
<img src="./images/house.jpg" alt="card-image" class="about__image" />
<div class="about-text">
<p class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, quos. Accusamus suscipit cumque ea esse asperiores repellendus quisquam excepturi vel harum earum. Rerum totam dolores ut hic officiis, provident perferendis.
Commodi soluta facilis voluptatem? Ratione nostrum reprehenderit itaque pariatur eligendi veniam obcaecati beatae? Illum perspiciatis consectetur nisi maiores. At, incidunt facilis quisquam impedit non expedita nihil earum? Ipsum, totam ipsa.
</p>
<p class="card-inf__item date">05 Нояб 2022</p>
<p class="card-inf__item time">20:00-22:00</p>
<p class="card-inf__item people">до 12</p>
<button class="enroll">Записаться</button>
</div>
</div>
</div>
<div class="card-description">
<p class="card-description__header">Тема:</p>
<p class="card-description__text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad
voluptate ea eius, reprehenderit temporibus dignissimos!
</p>
</div>
<div class="card-description">
<p class="card-description__header">Для кого:</p>
<p class="card-description__text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore
voluptatibus voluptatem voluptas deleniti eum! Vel laborum
inventore quia animi unde. Dolor aspernatur ullam dolorum
inventore?
</p>
</div>
<div class="card-description">
<p class="card-description__header">Описание:</p>
<p class="card-description__text last">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla
deserunt itaque molestias provident at doloribus rerum aut,
sapiente saepe! Temporibus non dolor corrupti saepe harum delectus
eum, placeat iure quod. Possimus, ducimus atque consequuntur natus
at optio delectus amet id nostrum perferendis voluptatibus! Magni
delectus voluptas alias saepe assumenda repellendus maiores ex
fugit ut quae aliquam sapiente, laboriosam velit iure. Explicabo
iste quam nostrum fuga maiores ratione voluptatem sint blanditiis
vero. Error delectus pariatur blanditiis. Ipsa deleniti assumenda
dolore voluptate, nostrum mollitia. Ipsam placeat cupiditate optio
ea? Incidunt, neque illo! Nihil, tenetur officiis quas culpa ullam
incidunt dolor totam neque, deserunt quo a quia facilis voluptatem
quam at eaque consequuntur. Sed natus voluptatum voluptates
explicabo. Perspiciatis dolor ratione quasi quibusdam.
</p>
</div>
<h2 class="similar">Похожие курсы</h2>
<div class="cards"></div>
<button class="see">
Смотреть все
</button>
</div>
</main>
<footer>
<div class="container">
<p class="logo">BodyMindCare</p>
<div class="footer">
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum,
tempore! Quam molestias itaque doloribus harum facere.
</p>
<div class="networks">
<p class="text">Я В СОЦИАЛЬНЫХ СЕТЯХ</p>
<ul class="social">
<li class="item">
<a href="#"
><img src="./icons/instagram.svg" alt="insta"
/></a>
</li>
<li class="item">
<a href="#"
><img src="./icons/linkedin.svg" alt="linkedin"
/></a>
</li>
<li class="item">
<a href="#"><img src="./icons/vk.svg" alt="vk" /></a>
</li>
<li class="item">
<a href="#"><img src="/icons/telegram.svg" alt="telega" /></a>
</li>
<li class="item">
<a href="#"><img src="/icons/skype.svg" alt="skype" /></a>
</li>
</ul>
</div>
<div class="about">
<div class="about__column">
<p>Почта</p>
<p>BodyMindCare@gmail.ru</p>
</div>
<div class="about__column">
<p>Телефон</p>
<p>+375 33 123-45-67</p>
</div>
<div class="about__column">
<p>Время работы:</p>
<p>пн-пт 10:00-21:00</p>
</div>
<div class="about__column">
<p></p>
<p>сб-вс 08:00-21:00</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

109
css/style.css
View File

@@ -191,19 +191,19 @@ main {
} }
.cards { .cards {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(4, 23.7%);
flex-wrap: wrap;
margin-bottom: 40px; margin-bottom: 40px;
grid-column-gap: 20px;
} }
.card { .card {
width: 240px; width: 100%;
font-size: 12px; font-size: 12px;
margin: 15px 0; margin: 15px 0;
} }
.card__image { .card__image {
width: 240px; width: 100%;
} }
.card__title { .card__title {
font-weight: 600; font-weight: 600;
@@ -233,6 +233,7 @@ main {
content: url("../icons/calendar2.svg"); content: url("../icons/calendar2.svg");
} }
.card .subscribe { .card .subscribe {
display: inline-block;
width: 100%; width: 100%;
border: 1px solid rgba(1, 1, 81, 0.711); border: 1px solid rgba(1, 1, 81, 0.711);
color: rgba(1, 1, 81, 0.711); color: rgba(1, 1, 81, 0.711);
@@ -318,3 +319,101 @@ footer {
display: grid; display: grid;
grid-template-columns: 40% 60%; grid-template-columns: 40% 60%;
} }
.similar {
font-size: 24px;
margin-top: 40px;
}
.card-description {
display: grid;
grid-template-columns: 15% 85%;
margin-bottom: 20px;
}
.card-description__header {
color: rgba(141, 97, 2, 0.468);
}
.card-description__text {
font-size: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(141, 97, 2, 0.468);
}
.card-description__text.last {
border-bottom: none;
}
.about-card {
background-color: rgb(36, 70, 107);
padding: 25px 35px;
margin: 30px 0;
}
.about-card .card-inf__item {
color: rgba(255, 255, 255, 0.626);
margin-left: 15px;
}
.about-card .card-inf__item::before {
left: -15px;
}
.about-card .date::before {
content: url("../icons/calendar2.svg");
}
.about-card .people::before {
content: url("../icons/people.svg");
}
.about__title {
font-size: 28px;
color: white;
line-height: 1.3;
margin-bottom: 15px;
}
.about-more {
display: flex;
justify-content: space-between;
}
.about__image {
width: 400px;
}
.about-text {
color: rgba(255, 255, 255, 0.626);
font-size: 14px;
width: 55%;
line-height: 1.3;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.enroll {
margin: 0 auto;
width: 150px;
padding: 10px 0;
border: 1px solid rgba(255, 255, 255, 0.626);
color: rgba(255, 255, 255, 0.626);
transition: 0.2s;
}
.enroll:hover {
background-color: rgba(255, 255, 255, 0.626);
color: rgb(36, 70, 107);
}
.see {
font-weight: 600;
width: 100%;
border-top: 1px solid rgba(141, 97, 2, 0.468);
border-bottom: 1px solid rgba(141, 97, 2, 0.468);
margin-bottom: 20px;
padding: 10px 0;
transition: 0.2s;
position: relative;
}
.see::after {
content: url("../icons/arrow_right.svg");
width: 30px;
height: 10px;
position: absolute;
top: 3px;
margin-left: 10px;
}
.see:hover {
background-color: rgba(141, 97, 2, 0.468);
}

7
icons/arrow_right.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path d="M2.9,51.6h87.6l-7.7,7.6c-1,1-1,2.6,0,3.5l0,0c1,1,2.6,1,3.5,0l12.9-13c0.4-0.4,0.4-1,0-1.4l-12.9-13c-1-1-2.6-1-3.5,0l0,0
c-1,1-1,2.6,0,3.5l7.7,7.6H2.9c-1.4,0-2.5,1.1-2.5,2.5l0,0C0.4,50.5,1.5,51.6,2.9,51.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 573 B

59
icons/people.svg Normal file
View File

@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 315.539 315.539" style="enable-background:new 0 0 315.539 315.539;" xml:space="preserve">
<g>
<g>
<g>
<path d="M38.877,38.884C17.44,38.884,0,56.325,0,77.761c0,21.436,17.44,38.877,38.877,38.877s38.877-17.44,38.877-38.877
S60.314,38.884,38.877,38.884z M38.877,101.638C25.711,101.638,15,90.927,15,77.761s10.711-23.877,23.877-23.877
s23.877,10.711,23.877,23.877S52.043,101.638,38.877,101.638z"/>
<path d="M38.877,131.65c-20.073,0-36.404,16.331-36.404,36.404v101.101c0,4.143,3.358,7.5,7.5,7.5h57.808
c4.142,0,7.5-3.357,7.5-7.5V168.054C75.281,147.981,58.95,131.65,38.877,131.65z M60.281,261.655H17.473v-93.601
c0-11.802,9.602-21.404,21.404-21.404c11.803,0,21.404,9.601,21.404,21.404V261.655z"/>
<path d="M157.77,38.884c-21.437,0-38.877,17.44-38.877,38.877s17.44,38.877,38.877,38.877s38.877-17.44,38.877-38.877
S179.207,38.884,157.77,38.884z M157.77,101.638c-13.166,0-23.877-10.711-23.877-23.877s10.711-23.877,23.877-23.877
s23.877,10.711,23.877,23.877S170.936,101.638,157.77,101.638z"/>
<path d="M157.769,131.65c-20.073,0-36.404,16.331-36.404,36.404v101.101c0,4.143,3.358,7.5,7.5,7.5h57.808
c4.142,0,7.5-3.357,7.5-7.5V168.054C194.173,147.981,177.842,131.65,157.769,131.65z M179.174,261.655h-42.808v-93.601
c0-11.802,9.602-21.404,21.404-21.404s21.404,9.601,21.404,21.404V261.655z"/>
<path d="M276.662,116.638c21.437,0,38.877-17.44,38.877-38.877s-17.44-38.877-38.877-38.877s-38.877,17.44-38.877,38.877
S255.225,116.638,276.662,116.638z M276.662,53.884c13.166,0,23.877,10.711,23.877,23.877s-10.711,23.877-23.877,23.877
c-13.166,0-23.877-10.711-23.877-23.877S263.496,53.884,276.662,53.884z"/>
<path d="M276.662,131.65c-20.073,0-36.404,16.331-36.404,36.404v101.101c0,4.143,3.358,7.5,7.5,7.5h57.808
c4.142,0,7.5-3.357,7.5-7.5V168.054C313.066,147.981,296.735,131.65,276.662,131.65z M298.066,261.655h-42.808v-93.601
c0-11.802,9.602-21.404,21.404-21.404s21.404,9.601,21.404,21.404V261.655z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

8
index.html
View File

@@ -14,10 +14,10 @@
<p class="logo">BodyMindCare</p> <p class="logo">BodyMindCare</p>
<nav class="nav-header"> <nav class="nav-header">
<ul class="nav"> <ul class="nav">
<li><a class="nav__item" href="#">Главная</a></li> <li><a data-chapter="main" class="nav__item" href="#">Главная</a></li>
<li><a class="nav__item nav__item_active" href="#">Услуги</a></li> <li><a data-chapter="services" class="nav__item nav__item_active" href="#">Услуги</a></li>
<li><a class="nav__item" href="#">Новости</a></li> <li><a data-chapter="news" class="nav__item" href="#">Новости</a></li>
<li><a class="nav__item" href="#">Контакты</a></li> <li><a data-chapter="contacts" class="nav__item" href="#">Контакты</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>

70
script.js
View File

@@ -1,71 +1,120 @@
const cards = [ const cards = [
{ {
id: 1,
themes: ["Lorem", "Theme1"], themes: ["Lorem", "Theme1"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 10,
}, },
{ {
id: 2,
themes: ["Lorem", "Theme2"], themes: ["Lorem", "Theme2"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 12,
}, },
{ {
id: 3,
themes: ["Theme1"], themes: ["Theme1"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 4,
}, },
{ {
id: 4,
themes: ["Lorem", "Theme1", "Theme2"], themes: ["Lorem", "Theme1", "Theme2"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, a", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, a",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 8,
}, },
{ {
id: 5,
themes: ["Lorem", "Theme1"], themes: ["Lorem", "Theme1"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 5,
}, },
{ {
id: 6,
themes: ["Lorem", "Theme1"], themes: ["Lorem", "Theme1"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 15,
}, },
{ {
id: 7,
themes: ["Lorem", "Theme1"], themes: ["Lorem", "Theme1"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 20,
}, },
{ {
id: 8,
themes: ["Lorem", "Theme1"], themes: ["Lorem", "Theme1"],
title: "Lorem ipsum dolor sit.", title: "Lorem ipsum dolor sit.",
describe: describe:
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
time: "20:00 - 22:00", time: "20:00 - 22:00",
date: "05 Нояб 2022", date: "05 Нояб 2022",
forWhome:
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
fullDescription:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.",
people: 7,
}, },
]; ];
const navigationItems = document.querySelectorAll(".nav__item"); const navigationItems = document.querySelectorAll(".nav__item");
const url = window.location.href;
navigationItems.forEach((item) => { navigationItems.forEach((item) => {
item.onclick = (elem) => { item.onclick = (elem) => {
@@ -80,16 +129,15 @@ navigationItems.forEach((item) => {
}; };
}); });
/* function createThemes(card) { const cardsToShow =
const ul = document.createElement("ul"); url === "http://127.0.0.1:5500/" ? cards : cards.slice(0, 4);
ul.className = "themes";
card.themes.forEach((theme) => {
ul.innerHTML = `<li class="themes__name">Lorem</li>`;
document.ul.append();
});
} */
cards.forEach((card, index) => { function setCard(card) {
localStorage.setItem("card", card);
location.href = "about.html";
}
cardsToShow.forEach((card) => {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = "card"; div.className = "card";
div.innerHTML = ` div.innerHTML = `
@@ -101,13 +149,13 @@ cards.forEach((card, index) => {
</ul> </ul>
<p class="card__title">${card.title}</p> <p class="card__title">${card.title}</p>
<p class="card__describe"> <p class="card__describe">
${card.describe}<a href="#" class="more">См. подробнее...</a> ${card.describe} <a href="about.html" onclick="${() => setCard(card)}" class="more">См. подробнее...</a>
</p> </p>
<div class="card-inf"> <div class="card-inf">
<p class="card-inf__item time">${card.time}</p> <p class="card-inf__item time">${card.time}</p>
<p class="card-inf__item date">${card.date}</p> <p class="card-inf__item date">${card.date}</p>
</div> </div>
<button class="subscribe">Записаться</button> <button onclick="${() => setCard(card)}" class="subscribe">Записаться</button>
`; `;
document.querySelector(".cards").append(div); document.querySelector(".cards").append(div);

0
scriptAbout.js Normal file
View File

129
style.scss
View File

@@ -191,20 +191,20 @@ main {
} }
} }
.cards{ .cards {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: repeat(4, 23.7%);
flex-wrap: wrap;
margin-bottom: 40px; margin-bottom: 40px;
grid-column-gap: 20px;
} }
.card { .card {
width: 240px; width: 100%;
font-size: 12px; font-size: 12px;
margin: 15px 0; margin: 15px 0;
&__image { &__image {
width: 240px; width: 100%;
} }
&__title { &__title {
@@ -212,7 +212,7 @@ main {
margin-bottom: 5px; margin-bottom: 5px;
} }
&__describe{ &__describe {
min-height: 84px; min-height: 84px;
} }
@@ -241,6 +241,7 @@ main {
} }
.subscribe { .subscribe {
display: inline-block;
width: 100%; width: 100%;
border: 1px solid rgba(1, 1, 81, 0.711); border: 1px solid rgba(1, 1, 81, 0.711);
color: rgba(1, 1, 81, 0.711); color: rgba(1, 1, 81, 0.711);
@@ -343,3 +344,117 @@ footer {
} }
} }
} }
.similar {
font-size: 24px;
margin-top: 40px;
}
.card-description {
display: grid;
grid-template-columns: 15% 85%;
margin-bottom: 20px;
&__header {
color: rgba(141, 97, 2, 0.468);
}
&__text {
font-size: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(141, 97, 2, 0.468);
}
&__text.last {
border-bottom: none;
}
}
.about {
&-card {
background-color: rgb(36, 70, 107);
padding: 25px 35px;
margin: 30px 0;
.card-inf__item {
color: rgba(255, 255, 255, 0.626);
margin-left: 15px;
}
.card-inf__item::before{
left: -15px;
}
.date::before{
content: url("../icons/calendar2.svg");
}
.people::before{
content: url("../icons/people.svg");
}
}
&__title {
font-size: 28px;
color: white;
line-height: 1.3;
margin-bottom: 15px;
}
&-more {
display: flex;
justify-content: space-between;
}
&__image {
width: 400px;
}
&-text {
color: rgba(255, 255, 255, 0.626);
font-size: 14px;
width: 55%;
line-height: 1.3;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.enroll {
margin: 0 auto;
width: 150px;
padding: 10px 0;
border: 1px solid rgba(255, 255, 255, 0.626);
color: rgba(255, 255, 255, 0.626);
transition: 0.2s;
&:hover {
background-color: rgba(255, 255, 255, 0.626);
color: rgb(36, 70, 107);
}
}
.see {
font-weight: 600;
width: 100%;
border-top: 1px solid rgba(141, 97, 2, 0.468);
border-bottom: 1px solid rgba(141, 97, 2, 0.468);
margin-bottom: 20px;
padding: 10px 0;
transition: 0.2s;
position: relative;
&::after {
content: url("../icons/arrow_right.svg");
width: 30px;
height: 10px;
position: absolute;
top: 3px;
margin-left: 10px;
}
&:hover {
background-color: rgba(141, 97, 2, 0.468);
}
}