add main page
This commit is contained in:
188
css/style.css
188
css/style.css
@@ -80,6 +80,18 @@ h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 45px;
|
||||
border-bottom: 2px solid rgb(161, 137, 0);
|
||||
@@ -88,6 +100,7 @@ header {
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
color: rgb(2, 2, 120);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -129,4 +142,179 @@ header {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.settings {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.settings-rest {
|
||||
width: 33.3%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.settings .sort {
|
||||
color: rgb(103, 103, 103);
|
||||
}
|
||||
.settings .sort span {
|
||||
color: rgba(1, 1, 81, 0.711);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.settings .calendar {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.settings .calendar::before {
|
||||
content: url("../icons/calendar1.svg");
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -20px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.settings .ended {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-align: end;
|
||||
}
|
||||
.settings .ended::before {
|
||||
content: url("../icons/toggle_off.svg");
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 240px;
|
||||
font-size: 12px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.card__image {
|
||||
width: 240px;
|
||||
}
|
||||
.card__title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.card__describe {
|
||||
min-height: 84px;
|
||||
}
|
||||
.card-inf {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0 10px 13px;
|
||||
}
|
||||
.card-inf__item {
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
color: rgb(103, 103, 103);
|
||||
}
|
||||
.card-inf__item::before {
|
||||
content: url("../icons/clock.svg");
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: -13px;
|
||||
}
|
||||
.card-inf .date::before {
|
||||
content: url("../icons/calendar2.svg");
|
||||
}
|
||||
.card .subscribe {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(1, 1, 81, 0.711);
|
||||
color: rgba(1, 1, 81, 0.711);
|
||||
font-size: 10px;
|
||||
height: 25px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.card .subscribe:hover {
|
||||
color: white;
|
||||
background-color: rgba(1, 1, 81, 0.711);
|
||||
}
|
||||
.card .more {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card .themes {
|
||||
margin: 5px 0;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
color: rgba(255, 166, 0, 0.566);
|
||||
}
|
||||
.card .themes__name {
|
||||
padding: 3px 2px;
|
||||
border: 1px solid rgba(255, 166, 0, 0.566);
|
||||
margin-left: 5px;
|
||||
}
|
||||
.card .themes li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 15px 0;
|
||||
background-color: rgba(141, 97, 2, 0.468);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer .text {
|
||||
padding-top: 15px;
|
||||
color: white;
|
||||
width: 30%;
|
||||
}
|
||||
.footer .social {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 60%;
|
||||
}
|
||||
.footer .item a {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(1, 1, 81, 0.711);
|
||||
position: relative;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.footer .item a:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.footer .item img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.footer .networks {
|
||||
width: 20%;
|
||||
}
|
||||
.footer .networks .text {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.footer .about {
|
||||
padding-top: 15px;
|
||||
color: white;
|
||||
width: 30%;
|
||||
}
|
||||
.footer .about__column {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
}
|
||||
@@ -1 +1,21 @@
|
||||
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><path d="M24,29H8a5,5,0,0,1-5-5V10A5,5,0,0,1,8,5H24a5,5,0,0,1,5,5V24A5,5,0,0,1,24,29ZM8,7a3,3,0,0,0-3,3V24a3,3,0,0,0,3,3H24a3,3,0,0,0,3-3V10a3,3,0,0,0-3-3Z"/><path d="M24,25H20a1,1,0,0,1-1-1V20a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,24,25Zm-3-2h2V21H21Z"/><path d="M28,13H4a1,1,0,0,1,0-2H28a1,1,0,0,1,0,2Z"/><path d="M11,9a1,1,0,0,1-1-1V4a1,1,0,0,1,2,0V8A1,1,0,0,1,11,9Z"/><path d="M21,9a1,1,0,0,1-1-1V4a1,1,0,0,1,2,0V8A1,1,0,0,1,21,9Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<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"
|
||||
width="15px" height="15px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g id="calendar_1_">
|
||||
<path fill="blue" d="M29.334,3H25V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v2h-6V1c0-0.553-0.448-1-1-1s-1,0.447-1,1v2H9V1
|
||||
c0-0.553-0.448-1-1-1S7,0.447,7,1v2H2.667C1.194,3,0,4.193,0,5.666v23.667C0,30.806,1.194,32,2.667,32h26.667
|
||||
C30.807,32,32,30.806,32,29.333V5.666C32,4.193,30.807,3,29.334,3z M30,29.333C30,29.701,29.701,30,29.334,30H2.667
|
||||
C2.299,30,2,29.701,2,29.333V5.666C2,5.299,2.299,5,2.667,5H7v2c0,0.553,0.448,1,1,1s1-0.447,1-1V5h6v2c0,0.553,0.448,1,1,1
|
||||
s1-0.447,1-1V5h6v2c0,0.553,0.447,1,1,1s1-0.447,1-1V5h4.334C29.701,5,30,5.299,30,5.666V29.333z"/>
|
||||
<rect x="7" y="12" fill="blue" width="4" height="3"/>
|
||||
<rect x="7" y="17" fill="blue" width="4" height="3"/>
|
||||
<rect x="7" y="22" fill="blue" width="4" height="3"/>
|
||||
<rect x="14" y="22" fill="blue" width="4" height="3"/>
|
||||
<rect x="14" y="17" fill="blue" width="4" height="3"/>
|
||||
<rect x="14" y="12" fill="blue" width="4" height="3"/>
|
||||
<rect x="21" y="22" fill="blue" width="4" height="3"/>
|
||||
<rect x="21" y="17" fill="blue" width="4" height="3"/>
|
||||
<rect x="21" y="12" fill="blue" width="4" height="3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 685 B After Width: | Height: | Size: 1.4 KiB |
@@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-toggle-switch-off-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" /></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-toggle-switch-off-outline" width="24" height="24" viewBox="0 0 24 24"><path fill='blue' d="M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" /></svg>
|
||||
|
Before Width: | Height: | Size: 537 B After Width: | Height: | Size: 549 B |
@@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-toggle-switch-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" /></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-toggle-switch-outline" width="24" height="24" viewBox="0 0 24 24"><path fill='blue' d="M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" /></svg>
|
||||
|
Before Width: | Height: | Size: 538 B After Width: | Height: | Size: 550 B |
BIN
images/house.jpg
Normal file
BIN
images/house.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
57
index.html
57
index.html
@@ -8,6 +8,7 @@
|
||||
<title>Courses</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<div class="container header">
|
||||
<p class="logo">BodyMindCare</p>
|
||||
@@ -25,35 +26,12 @@
|
||||
<div class="container">
|
||||
<div class="settings">
|
||||
<p class="sort">Сортиртировать по: <span>Дате</span></p>
|
||||
<div class="settings-rest">
|
||||
<p class="calendar">Календарь</p>
|
||||
<p class="ended">Скрыть завершенные</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<img src="" alt="card-image" />
|
||||
<div class="themes">
|
||||
<span class="theme__name">Lorem</span>
|
||||
<span class="theme__name">Theme1</span>
|
||||
</div>
|
||||
<p class="card__title">Lorem ipsum dolor sit.</p>
|
||||
<p class="card__describe">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
|
||||
dolores quos autem est aut, animi numquam fugiat voluptatem, vero
|
||||
vel, magni expedita aliquid. Tempore vel quas tenetur ipsa at ab?
|
||||
Ex eaque numquam blanditiis voluptatibus eius earum quas
|
||||
cupiditate id, voluptatem delectus ipsum, facilis dolorem unde
|
||||
aspernatur labore soluta non repellat quos magni molestias maiores
|
||||
atque dolore molestiae? Voluptatum, cum?<span class="more"
|
||||
>См. подробнее...</span
|
||||
>
|
||||
</p>
|
||||
<div class="card-inf">
|
||||
<p class="card-inf__item">20:00 - 22:00</p>
|
||||
<p class="card-inf__item">05 Нояб 2022</p>
|
||||
</div>
|
||||
<button class="subscribe">Записаться</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
@@ -61,43 +39,47 @@
|
||||
<p class="logo">BodyMindCare</p>
|
||||
<div class="footer">
|
||||
<p class="text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,
|
||||
eos.
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum,
|
||||
tempore! Quam molestias itaque doloribus harum facere.
|
||||
</p>
|
||||
<div>
|
||||
<div class="networks">
|
||||
<p class="text">Я В СОЦИАЛЬНЫХ СЕТЯХ</p>
|
||||
<ul class="social">
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="insta" /></a>
|
||||
<a href="#"
|
||||
><img src="./icons/instagram.svg" alt="insta"
|
||||
/></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="linkedin" /></a>
|
||||
<a href="#"
|
||||
><img src="./icons/linkedin.svg" alt="linkedin"
|
||||
/></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="vk" /></a>
|
||||
<a href="#"><img src="./icons/vk.svg" alt="vk" /></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="telega" /></a>
|
||||
<a href="#"><img src="/icons/telegram.svg" alt="telega" /></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="skype" /></a>
|
||||
<a href="#"><img src="/icons/skype.svg" alt="skype" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about">
|
||||
<div>
|
||||
<div class="about__column">
|
||||
<p>Почта</p>
|
||||
<p>BodyMindCare@gmail.ru</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="about__column">
|
||||
<p>Телефон</p>
|
||||
<p>+375 33 123-45-67</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="about__column">
|
||||
<p>Время работы:</p>
|
||||
<p>пн-пт 10:00-21:00</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="about__column">
|
||||
<p></p>
|
||||
<p>сб-вс 08:00-21:00</p>
|
||||
</div>
|
||||
@@ -105,6 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
102
script.js
102
script.js
@@ -1,7 +1,76 @@
|
||||
const cards = [
|
||||
{
|
||||
themes: ["Lorem", "Theme1"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Lorem", "Theme2"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Theme1"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Lorem", "Theme1", "Theme2"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
describe:
|
||||
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, a",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Lorem", "Theme1"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Lorem", "Theme1"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Lorem", "Theme1"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
{
|
||||
themes: ["Lorem", "Theme1"],
|
||||
title: "Lorem ipsum dolor sit.",
|
||||
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?",
|
||||
time: "20:00 - 22:00",
|
||||
date: "05 Нояб 2022",
|
||||
},
|
||||
];
|
||||
|
||||
const navigationItems = document.querySelectorAll(".nav__item");
|
||||
|
||||
navigationItems.forEach((item) => {
|
||||
item.onclick = (elem) => {
|
||||
elem.preventDefault();
|
||||
|
||||
navigationItems.forEach((item2) =>
|
||||
item2.classList.remove("nav__item_active")
|
||||
);
|
||||
@@ -10,3 +79,36 @@ navigationItems.forEach((item) => {
|
||||
item.classList.add("nav__item_active");
|
||||
};
|
||||
});
|
||||
|
||||
/* function createThemes(card) {
|
||||
const ul = document.createElement("ul");
|
||||
ul.className = "themes";
|
||||
card.themes.forEach((theme) => {
|
||||
ul.innerHTML = `<li class="themes__name">Lorem</li>`;
|
||||
document.ul.append();
|
||||
});
|
||||
} */
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "card";
|
||||
div.innerHTML = `
|
||||
<img class="card__image" src="/images/house.jpg" alt="card-image" />
|
||||
<ul class="themes">
|
||||
${card.themes.map((theme) => {
|
||||
return `<li class="themes__name">${theme}</li>`;
|
||||
})}
|
||||
</ul>
|
||||
<p class="card__title">${card.title}</p>
|
||||
<p class="card__describe">
|
||||
${card.describe}<a href="#" class="more">См. подробнее...</a>
|
||||
</p>
|
||||
<div class="card-inf">
|
||||
<p class="card-inf__item time">${card.time}</p>
|
||||
<p class="card-inf__item date">${card.date}</p>
|
||||
</div>
|
||||
<button class="subscribe">Записаться</button>
|
||||
`;
|
||||
|
||||
document.querySelector(".cards").append(div);
|
||||
});
|
||||
|
||||
219
style.scss
219
style.scss
@@ -69,6 +69,18 @@ h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 45px;
|
||||
border-bottom: 2px solid rgb(161, 137, 0);
|
||||
@@ -77,6 +89,7 @@ header {
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
color: rgb(2, 2, 120);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -123,4 +136,210 @@ header {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.settings {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-rest {
|
||||
width: 33.3%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sort {
|
||||
color: rgb(103, 103, 103);
|
||||
|
||||
span {
|
||||
color: rgba(1, 1, 81, 0.711);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: url("../icons/calendar1.svg");
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -20px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ended {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: url("../icons/toggle_off.svg");
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -30px;
|
||||
}
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
.cards{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 240px;
|
||||
font-size: 12px;
|
||||
margin: 15px 0;
|
||||
|
||||
&__image {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&__describe{
|
||||
min-height: 84px;
|
||||
}
|
||||
|
||||
&-inf {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0 10px 13px;
|
||||
|
||||
&__item {
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
color: rgb(103, 103, 103);
|
||||
|
||||
&::before {
|
||||
content: url("../icons/clock.svg");
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.date::before {
|
||||
content: url("../icons/calendar2.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(1, 1, 81, 0.711);
|
||||
color: rgba(1, 1, 81, 0.711);
|
||||
font-size: 10px;
|
||||
height: 25px;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: rgba(1, 1, 81, 0.711);
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.themes {
|
||||
margin: 5px 0;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
color: rgba(255, 166, 0, 0.566);
|
||||
|
||||
&__name {
|
||||
padding: 3px 2px;
|
||||
border: 1px solid rgba(255, 166, 0, 0.566);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 15px 0;
|
||||
background-color: rgba(141, 97, 2, 0.468);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.text {
|
||||
padding-top: 15px;
|
||||
color: white;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.item {
|
||||
a {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(1, 1, 81, 0.711);
|
||||
position: relative;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.networks {
|
||||
width: 20%;
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
padding-top: 15px;
|
||||
color: white;
|
||||
width: 30%;
|
||||
|
||||
&__column {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user