Skip to content

Develop #545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kristinakovalchuk wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Develop #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
680d9af
finish header
kristinakovalchuk Feb 18, 2026
eec09bd
finish nav-menu
kristinakovalchuk Feb 18, 2026
f9fc561
finish main and footer add animation
kristinakovalchuk Feb 19, 2026
1a91406
corect order style
kristinakovalchuk Feb 19, 2026
e658ada
fix main.js file
kristinakovalchuk Feb 19, 2026
991ac15
fix: address mentor feedback
kristinakovalchuk Feb 20, 2026
ea4ff78
fix: img overflow
kristinakovalchuk Feb 20, 2026
79893a0
fix: img error
kristinakovalchuk Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
- name: Upload HTML report(backstop data)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: backstop_data
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Kickstarter landing page (HARD)

**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).**
**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).**

Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS
- The design 1440px
Expand Down Expand Up @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj
11. `git push origin develop` - to send you code for PR
12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
13. Replace `<your_account>` with your Github username in the
[DEMO LINK](https://<your_account>.github.io/Kickstarter/)
[DEMO LINK](https://kristinakovalchuk.github.io/Kickstarter/)
14. Copy `DEMO LINK` to the PR description

> To update you PR repeat steps 7-11
320 changes: 317 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,328 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<title>Kickstarter</title>
<link
rel="stylesheet"
href="src/styles/main.scss"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" href="./src/images/favicon-icon.svg" type="image/x-icon">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<script type="module" src="./src/scripts/main.js"></script>
</head>
<body>
<h1>Hello Mate Academy</h1>
<script src="src/scripts/main.js"></script>

<header class="header" id="page">
<div class="container">
<div class="header__content">

<div class="top-bar">

<img src="./src/images/logo-k.svg" alt="logo" class="top-bar__logo">

<div class="top-bar__menu-right">
<div class="top-bar__hidden-menu">

<a href="" class="top-bar__link">SPECS</a>

<div class="top-bar__lang-switcher">
<a href="#" class="top-bar__lang-switcher__link top-bar__lang-switcher__link--active">EN</a>
<span class="top-bar__lang-switcher__separator">/</span>
<a href="#" class="top-bar__lang-switcher__link">UA</a>
</div>

<a href="" class="top-bar__button">Buy</a>
</div>

<a href="#menu" class="icon icon--menu"></a>
</div>

</div>

<div class="header__bottom">
<div class="header__img"></div>

<p class="header__title">Futuristic Wireless Speaker</p>
<p class="header__description">
Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally pleasant and distinctly more layered.
</p>

</div>

</div>
</div>
</header>

<aside class="menu" id="menu">
<div class="container">

<div class="top-bar menu__top-bar">
<img src="./src/images/logo-k.svg" alt="logo" class="top-bar__logo">
<a href="#" class="icon icon--close"></a>
</div>

<nav class="menu__nav">
<ul class="menu__nav__list" >
<li><a href="#our_story" class="menu__nav__link">OUR STORY</a></li>
<li><a href="#about_us" class="menu__nav__link">ABOUT US</a></li>
<li><a href="#features" class="menu__nav__link">FEATURES</a></li>
<li><a href="#get_in_touch" class="menu__nav__link">GET IN TOUCH</a></li>
</ul>
</nav>

<div class="menu__bottom">
<div class="menu__link">
<a href="" class="top-bar__link">SPECS</a>
<div class="top-bar__lang-switcher">
<a href="#" class="top-bar__lang-switcher__link top-bar__lang-switcher__link--active">EN</a>
<span class="top-bar__lang-switcher__separator">/</span>
<a href="#" class="top-bar__lang-switcher__link">UA</a>
</div>
</div>

<a href="" class="top-bar__button">Buy</a>
</div>
</div>
</aside>

<main class="main__content">
<section class="our_story" id="our_story">
<div class="container">
<div class="our_story__content">

<article class="our_story__card">
<div class="icon icon--figure"></div>

<p class="our_story__title">Futuristic Design</p>

<p class="our_story__description">
To give Luna a truly flawless look, we specifically picked aircraft grade aluminum as its material and adopted both three-dimensional stretch-bending technology and a high precision cold forging technique.
</p>

</article>

<article class="our_story__card">
<div class="icon icon--sound"></div>

<p class="our_story__title">Tweeter Speaker System</p>

<p class="our_story__description">
To deliver a more layered sound performance better than a sole full-range speaker, our team equipped Luna with one more tweeter speaker responsible for high-frequency sound independently.
</p>

</article>

<article class="our_story__card">
<div class="icon icon--wifi"></div>

<p class="our_story__title">Multiroom System </p>

<p class="our_story__description">
Luna is natively compatible with your home Wi-Fi. Set up multiple speakers in different rooms to expand your music experience into the entire house.
</p>

</article>

<article class="our_story__card">
<div class="icon icon--sun"></div>

<p class="our_story__title">Intuitive Lighting System</p>

<p class="our_story__description">An intuitive user interface allows you to adjust the hue and saturation of color for lighting that fits any mood and situation.</p>

</article>
</div>

<img
src="./src/images/our-story/our-story.svg"
alt="photo"
class="our_story__img">

</div>
</section>

<section id="about_us">
<div class="container">
<div class="about_us__content">

<article class="about_us__card">
<p class="about_us__card__title about_us__right">DESIGNED FOR THE FUTURE</p>

<img
src="./src/images/about_us/2.svg"
alt="photo"
class="about_us__card__img about_us__left">

<div class="about_us__card__wrapper about_us__right">
<p class="about_us__card__description">
In 2014, a group of geeky industrial designers, engineering veterans and acoustic experts formed crazybaby. This is a bunch of passionate people who are crazy enough to think they can challenge the industry with disruptive audio products.
</p>
<a href="" class="about_us__card__link">See more about us</a>
</div>

</article>

<article class="about_us__card ">
<p class="about_us__card__title about_us__left">Luna Eye</p>

<img
src="./src/images/about_us/image 6.svg"
alt="photo"
class="about_us__card__img about_us__right">

<div class="about_us__card__wrapper about_us__left">
<p class="about_us__card__description">
Luna Eye is to the essence of this innovative light and audio system. It comprises an independent tweeter speaker, a light guiding component, a dome and a ring ornament.
</p>
<a href="" class="about_us__card__link">See more about us</a>
</div>

</article>

<div class="about_us__coment">
<img
src="./src/images/about_us/about_us-bg-img.svg"
alt="photo"
class="about_us__coment__bg-img">

<p class="about_us__coment__description">
It really took me by surprise honestly to have such full beautiful sound that coming out of this small compact device. And with the brush aluminum surface, it feels so familiar. Like my iPhone.
</p>

<img
src="./src/images/about_us/about_us-people.svg"
alt="people-photo"
class="about_us__coment__people-img">

<div class="about_us__coment__bio">
<p class="about_us__coment__name">Garrett Martin</p>
<p class="about_us__coment__position">Creative Director</p>
</div>
</div>
</div>

</div>
</section>

<section class="features" id="features">
<div class="container" >

<p class="features__title">FEATURES</p>

<div class="features__content">

<div class="features__wrapper">

<div class="features__slyder">
<div class="features__list-first">
<p class="features__content__title">Connectivity</p>
<ul class="features__list">
<li><p class="features__item">Hands Free Wireless Audio</p></li>
<li><p class="features__item">Bluetooth 4.0 LE</p></li>
<li><p class="features__item">Wi-Fi 2.4 GHz (802.11 b/g/n)</p></li>
<li><p class="features__item">Smart Multiroom System Set Up</p></li>
<li><p class="features__item">Party Mode with 6.0 Units and above</p></li>
<li><p class="features__item">MESHNET Multi Speaker Network</p></li>
</ul>
</ul>
</div>

<div class="features__list-second">
<p class="features__content__title">App Features</p>
<ul class="features__list">
<li><p class="features__item">Customize Music Schedule</p></li>
<li><p class="features__item">Wake Up with Favorite Songs</p></li>
<li><p class="features__item">Home Detection Auto Wake Up</p></li>
<li><p class="features__item">Color Wheel </p></li>
</div>

<div class="features__list-third">
<p class="features__content__title">Sound & Music</p>
<ul class="features__list">
<li><p class="features__item">Feel-in-chest Base Power</p></li>
<li><p class="features__item">Lossless Digital Audio Transmission</p></li>
<li><p class="features__item">Easy & Stable Stereo Pairing</p></li>
<li><p class="features__item">Crisp and Clear High Frequency Sound</p></li>
<li><p class="features__item">Streams from Cloud Music and Local Library</p></li>
<li><p class="features__item">Auto Music Playback from Last Song Stopped</p></li>
</ul>
</div>
</div>

<div class="features__button">
<div class="features__button__switch">
<a href="#" class="features__button__left icon icon--arrow-left"></a>
<a href="#" class="features__button__right icon icon--arrow-right"></a>
</div>
<div class="features__button__number">
<p class="features__button__number__left features__button__number__number features__button__number__number--active">01</p>
<p class="features__button__number__line">/</p>
<p class="features__button__number__right features__button__number__number">03</p>
</div>
</div>

<div class="features__img"></div>
</div>

</div>
</div>
</section>

<section id="get_in_touch">
<div class="container">
<div class="get_in_touch__content">
<p class="get_in_touch__title">DO YOU HAVE ANY QUESTIONS?</p>

<form
class="get_in_touch__input"
onsubmit="this.reset(); return false;"
>
<input
class="get_in_touch__input-email"
type="email"
placeholder="Your email"
required
/>

<textarea
class="get_in_touch__input-massage"
type="text"
placeholder="Your massage..."
required
></textarea>

<button
type="submit"
class="get_in_touch__input__button"
data-qa="hover">
Send
</button>
</form>
</div>
</div>
</section>
</main>

<footer class="footer">
<div class="container">
<div class="footer__top">
<img
src="./src/images/logo-k.svg"
alt="logo"
class="footer__logo">
<a href="#page" class="icon icon--arrow-top"></a>
</div>
<div class="footer__icons">
<a href="https://www.facebook.com/" target="_blank" class="icon icon--facebook"></a>
<a href="https://twitter.com/" target="_blank" class="icon icon--twitter"></a>
<a href="https://www.instagram.com/" target="_blank" class="icon icon--instagram"></a>
</div>
<p class="footer__text">
© 2019 All rights reserved. Terms of Use & Privacy Policy
</p>
</div>
</footer>
</body>
</html>
Loading
Loading