Skip to content

Commit

Permalink
museum done
Browse files Browse the repository at this point in the history
  • Loading branch information
Iryna Mariiko authored and Iryna Mariiko committed Sep 20, 2024
1 parent e9ff4c8 commit efd200c
Show file tree
Hide file tree
Showing 9 changed files with 545 additions and 25 deletions.
Binary file added src/images/Following/following-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
143 changes: 139 additions & 4 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h1 class="header__title">Художній музей</h1>
<a class="menu__nav-link" href="#about-us">Про Нас</a>
</li>
<li class="menu__nav-item">
<a class="menu__nav-link" href="#current-events">Виставки та події</a>
<a class="menu__nav-link" href="#events">Виставки та події</a>
</li>
<li class="menu__nav-item">
<a class="menu__nav-link" href="#contact">Контакти</a>
Expand Down Expand Up @@ -109,7 +109,7 @@ <h1 class="header__title">Художній музей</h1>

<main class="main page__main">
<div class="container">
<section class="main__current" id="current-events">
<section class="main__current" id="events">
<h1 class="main__title">Актуальні події</h1>
<div class="main__current-grid">
<div class="main__current-wrapper">
Expand Down Expand Up @@ -172,9 +172,9 @@ <h3 class="main__lecture-title">Від класицизму до <br> роман
</div>
</section>

<section class="gallery">
<section class="main__gallery" id="gallery">
<div class="container">
<h1 class="main__title">Галерея</h1>
<h1 class="main__title main__title--gallery">Галерея</h1>
<div class="gallery__slider">
<div class="slider">
<div class="slides-container">
Expand Down Expand Up @@ -236,7 +236,142 @@ <h1 class="main__title">Галерея</h1>
</div>
</div>
</section>

<section class="main__following" id="about-us">
<img class="main__following-img" alt="picture"
src="./images/Following/Following.webp">

<div class="container">
<div class="main__following-content">
<div class="main__following-text">
<h1 class="main__following-title">Підписка</h1>
<p class="main__following-description">Бути в курсі всіх актуальних подій та останніх новин.</p>
</div>

<form class="main__following-form">
<input type="email" name="email"
class="main__following-input" placeholder="E-mail"
required>
<div class="main__following-dec"></div>
</form>
</div>
</div>
</section>
</main>

<footer class="footer">
<div class="container">
<div class="footer__wrapper">
<div class="footer__icon-logo">
<a href="#">
<img src="./images/Header/NAMU-favicon.webp" alt="NAMU"
class="footer__logo"/>
</a>

<div class="footer__icons">
<a class="footer__icon footer__icon--facebook"
href="https://www.facebook.com"
target="_blank">
</a>

<a class="footer__icon footer__icon--instagram"
href="https://www.instagram.com"
target="_blank">
</a>
</div>
</div>
<section class="footer__schedule">
<p class="footer__schedule-title">Графік роботи</p>
<ul class="footer__schedule-list">
<li class="footer__schedule-item">
<span class="footer__schedule-item--bold">12:00 — 20:00</span>
середа
</li>

<li class="footer__schedule-item">
<span class="footer__schedule-item--bold"> 12:00 — 20:00 </span>
четвер
</li>

<li class="footer__schedule-item">
<span class="footer__schedule-item--bold">12:00 — 20:00</span>
п’ятниця
</li>

<li class="footer__schedule-item">
<span class="footer__schedule-item--bold">11:00 — 19:00</span>
субота
</li>

<li class="footer__schedule-item">
<span class="footer__schedule-item--bold">11:00 — 19:00</span>
неділя
</li>
</ul>

<p class="footer__schedule-descriprion">
<span class="footer__schedule-descriprion--bold">Вихідні:</span>
понеділок, вівторок <br>
Каса припиняє роботу за 1 годину
до закриття музею
</p>
</section>

<section class="footer__contact">
<p class="footer__contact-title">Контакти:</p>
<ul class="footer__contact-list">
<li class="footer__contact-item">
<a href="https://www.google.com/search?q=%D0%B2%D1%83%D0%BB.+%D0%9C.+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D1%8C%D0%BA%D0%BE%D0%B3%D0%BE%2C+6%3B+%D0%9A%D0%B8%D1%97%D0%B2%2C+01001&oq=%D0%B2%D1%83%D0%BB.+%D0%9C.+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D1%8C%D0%BA%D0%BE%D0%B3%D0%BE%2C+6%3B+%D0%9A%D0%B8%D1%97%D0%B2%2C+01001&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQABiABDIKCAIQABiABBiiBDIKCAMQABiABBiiBDIKCAQQABiABBiiBDIGCAUQRRg9MgYIBhBFGD0yBggHEEUYPdIBBzk4MWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8"
class="footer__contact-link" target="_blank">
вул. М. Грушевського, 6; Київ, 01001
</a>
</li>

<li class="footer__contact-item">
<a href="tel:+380442781357" class="footer__contact-link"
target="_blank">
тел. +38 (044) 278-13-57
</a>
</li>

<li class="footer__contact-item">
<a href="tel:+380442787454" class="footer__contact-link"
target="_blank">тел. +38 (044) 278-74-54</a>
</li>

<li class="footer__contact-item">
<a href="mailto:[email protected]" class="footer__contact-link"
target="_blank">
e-mail: [email protected]
</a>
</li>
</ul>
</section>

<div class="footer__nav">
<ul class="footer__nav-list">
<li class="footer__nav-item">
<a class="footer__nav-link" href="#gallery">Галерея</a>
</li>
<li class="footer__nav-item">
<a class="footer__nav-link" href="#about-us">Про Нас</a>
</li>
<li class="footer__nav-item">
<a class="footer__nav-link" href="#events">Виставки та події</a>
</li>
<li class="footer__nav-item">
<a class="footer__nav-link" href="#contact">Контакти</a>
</li>
</ul>
</div>
</div>

<div class="footer__description-wrapper">
<p class="footer__description">Designed by Zhyriada Marina</p>
<p class="footer__description">Copyright © 2019. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>
129 changes: 129 additions & 0 deletions src/styles/blocks/following.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
.main {
&__following {
position: relative;

&-img {
width: 100%;
height: 386px;
object-fit: cover;
position: relative;

@include on-tablet {
height: 380px;
}

@include on-desktop {
height: 550px;
}
}

&-content {
display: grid;
gap: 50px;
position: absolute;
top: 22%;
left: 0;
width: 100%;

@include on-tablet {
gap: 64px;
}

@include on-desktop {
gap: 72px;
top: 29%;
}
}

&-text {
display: grid;
gap: 20px;
text-align: center;
color: $acc-text-color;

@include on-tablet {
gap: 16px;
text-align: center;
}
}

&-title {
margin: 0;
font-family: $Montserrat-font;
font-weight: $font-weight-acc;
font-size: 36px;
line-height: 36px;

@include on-tablet {
font-size: 48px;
line-height: 48px;
}
}

&-description {
margin: 0;
font-family: $IBM-Plex-Sans-font;
font-size: 18px;
line-height: 27px;
padding-inline: 20px;
font-weight: normal;

@include on-tablet {
line-height: 18px;
}
}

&-form {
justify-self: center;
display: flex;
height: 50px;

@include hover (transform, scale(1.02));

&:hover {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

@include on-tablet {
height: 70px;
gap: 16px;
}

@include on-desktop {
gap: 30px;
}
}

&-input {
border: none;
padding-inline: 24px;

&:focus {
outline: none;
}

@include on-tablet {
width: 320px;
}

@include on-desktop {
width: 404px;
padding-inline: 32px;
}
}

&-dec {
height: 100%;
width: 50px;
background-color: $red;
background-image: url(../images/Following/following-2.png);
background-repeat: no-repeat;
background-size: 24px 24px;
background-position: center;

@include on-tablet {
width: 70px;
}
}
}
}
Loading

0 comments on commit efd200c

Please sign in to comment.