Skip to content

Commit

Permalink
add fixed task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@daryna-kopytko
daryna-kopytko committed Jan 21, 2025
1 parent ef476f2 commit 8361100
Show file tree
Hide file tree
Showing 13 changed files with 142 additions and 175 deletions.
Binary file removed src/images/benefits/design.png
View file
Binary file not shown.
3 changes: 3 additions & 0 deletions src/images/benefits/design.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/images/benefits/lighting.png
View file
Binary file not shown.
11 changes: 11 additions & 0 deletions src/images/benefits/lighting.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/images/benefits/multiroom.png
View file
Binary file not shown.
3 changes: 3 additions & 0 deletions src/images/benefits/multiroom.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/images/benefits/speacer.png
View file
Binary file not shown.
3 changes: 3 additions & 0 deletions src/images/benefits/speacer.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 44 additions & 83 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="header__container">
<div class="logo">
<a
href="/"
href="#home"
class="logo__link"
>
<img
Expand All @@ -43,7 +43,7 @@
<ul class="nav__list">
<li class="nav__item">
<a
href="#ourstory"
href="#ourstore"
class="nav__link"
>
OUR STORY
Expand All @@ -70,52 +70,14 @@

<li class="nav__item">
<a
href="#question"
href="#getintouch"
class="nav__link"
>
GET IN TOUCH
</a>
</li>
</ul>
</nav>

<div class="actions">
<div class="actions__controll">
<a
href="#specs"
class="actions__specs"
>
SPECS
</a>

<div class="actions__buttons">
<button
class="actions__buttons-en active-language"
type="button"
id="EN"
>
EN
</button>

<span class="actions__buttons-separator">/</span>

<button
class="actions__buttons-ua"
type="button"
id="UA"
>
UA
</button>
</div>
</div>

<button
class="actions__buy"
type="button"
>
BUY
</button>
</div>
</div>

<div class="actions-desk">
Expand Down Expand Up @@ -156,15 +118,17 @@
</button>
</div>

<div class="burger">
<div class="burger-menu">
<button
class="burger__open"
class="burger-menu__open"
type="button"
aria-label="Open menu"
></button>

<button
class="burger__close"
class="burger-menu__close"
type="button"
aria-label="Close menu"
></button>
</div>
</div>
Expand Down Expand Up @@ -196,7 +160,7 @@ <h1 class="presentation__info-title">
<ul class="nav__list">
<li class="nav__item">
<a
href="#ourstory"
href="#ourstore"
class="nav__link"
>
OUR STORY
Expand All @@ -223,7 +187,7 @@ <h1 class="presentation__info-title">

<li class="nav__item">
<a
href="#question"
href="#getintouch"
class="nav__link"
>
GET IN TOUCH
Expand All @@ -238,7 +202,7 @@ <h1 class="presentation__info-title">
<div class="benefits__cards">
<article class="card">
<img
src="/src/images/benefits/design.png"
src="/src/images/benefits/design.svg"
alt="futuristic design"
class="card__img"
/>
Expand All @@ -255,7 +219,7 @@ <h3 class="card__title">Futuristic Design</h3>

<article class="card">
<img
src="/src/images/benefits/speacer.png"
src="/src/images/benefits/speacer.svg"
alt="speacer system"
class="card__img"
/>
Expand All @@ -272,7 +236,7 @@ <h3 class="card__title">Tweeter Speaker System</h3>

<article class="card">
<img
src="/src/images/benefits/multiroom.png"
src="/src/images/benefits/multiroom.svg"
alt="multiroom system"
class="card__img"
/>
Expand All @@ -288,7 +252,7 @@ <h3 class="card__title">Multiroom System</h3>

<article class="card">
<img
src="/src/images/benefits/lighting.png"
src="/src/images/benefits/lighting.svg"
alt="lighting system"
class="card__img"
/>
Expand All @@ -313,7 +277,7 @@ <h3 class="card__title">Intuitive Lighting System</h3>
</section>

<section
id="about"
id="about-us"
class="about-us"
>
<h2 class="about-us__title-phone">DESIGNED FOR THE FUTURE</h2>
Expand Down Expand Up @@ -524,32 +488,40 @@ <h3 class="slide__title">Sound & Music</h3>
</section>

<section
id="questions"
id="getintouch"
class="questions"
>
<div class="questions__container">
<h2 class="questions__title">DO YOU HAVE ANY QUESTIONS?</h2>

<div class="questions__form">
<form class="form">
<label for="email"></label>
<input
id="email"
type="email"
name="email"
placeholder="Write your email"
class="form__email"
required
/>

<label for="message"></label>
<textarea
type="textarea"
name="message"
rows="4"
placeholder="Write your message"
class="form__message"
required
></textarea>

<button class="form__button">SEND</button>
<button
type="submit"
class="form__button"
aria-label="Swnd your message"
>
SEND
</button>
</form>
</div>
</div>
Expand All @@ -574,61 +546,50 @@ <h2 class="questions__title">DO YOU HAVE ANY QUESTIONS?</h2>
</div>

<div class="scroll-top">
<a href="#top">
<a
href="#top"
aria-label="Scroll to top"
role="button"
>
<img
src="./images/footer-img/arrow-to-top.svg"
alt="scrollTop"
alt="Scroll to Top"
/>
</a>
</div>
</div>

<div class="footer__block">
<section class="footer__block">
<ul class="footer__list">
<li class="footer__item">
<a
href="https://www.facebook.com/Kickstarter/"
class="footer__link"
>
<img
src="./images/footer-img/facebook-icon.svg"
alt="facebook link"
class="footer__icon"
/>
</a>
aria-label="Visit our Facebook page"
class="footer__link footer__link--facebook external-link"
></a>
</li>

<li class="footer__item">
<a
href="https://x.com/kickstarter"
class="footer__link"
>
<img
src="./images/footer-img/twitter-icon.svg"
alt="twitter link"
class="footer__icon"
/>
</a>
href="https://x.com/kickstarter/"
aria-label="Visit our Twitter page"
class="footer__link footer__link--twitter external-link"
></a>
</li>

<li class="footer__item">
<a
href="https://www.instagram.com/kickstarter"
class="footer__link"
>
<img
src="./images/footer-img/instagram-icon.svg"
alt="instagram link"
class="footer__icon"
/>
</a>
aria-label="Visit our Instagram page"
class="footer__link footer__link--instagram external-link"
></a>
</li>
</ul>

<p class="footer__rights">
© 2024 All rights reserved. Terms of Use & Privacy Policy
</p>
</div>
</section>
</footer>
</div>

Expand Down
53 changes: 51 additions & 2 deletions src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ function getChangeLanguage(language) {
}

document
.querySelector('.actions__buttons-en')
.querySelector('.actions-desk__buttons-en')
.addEventListener('click', () => getChangeLanguage('en'));

document
.querySelector('.actions-desk__buttons-en')
.addEventListener('click', () => getChangeLanguage('en'));

document
.querySelector('.actions__buttons-ua')
.querySelector('.actions-desk__buttons-ua')
.addEventListener('click', () => getChangeLanguage('ua'));

document
Expand Down Expand Up @@ -71,3 +71,52 @@ nextButton.addEventListener('click', () => {
previousButton.addEventListener('click', () => {
changeSlide(currentSlide - 1);
});

// відкривання та закривання меню
const openButton = document.querySelector('.burger-menu__open');
const closeButton = document.querySelector('.burger-menu__close');
const menu = document.querySelector('.menu');
const body = document.body;
const menuLinks = document.querySelectorAll('.nav__link');

function toggleButtons(isOpen) {
openButton.classList.toggle('rotated', isOpen);
openButton.style.display = isOpen ? 'none' : 'block';
closeButton.style.display = isOpen ? 'block' : 'none';
}

function openMenu() {
toggleButtons(true);
menu.classList.add('menu--active');
body.classList.add('no-scroll');
}

function closeMenu() {
toggleButtons(false);
menu.classList.remove('menu--active');
body.classList.remove('no-scroll');
}

menuLinks.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
closeMenu();

const targetId = link.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop,
behavior: 'smooth',
});
}
});
});

openButton.addEventListener('click', openMenu);
closeButton.addEventListener('click', closeMenu);

document.querySelector('a.external-link').forEach((link) => {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');
});
Loading

0 comments on commit 8361100

Please sign in to comment.