Skip to content

solution #535

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
LinaDo1609 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

solution #535

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fbf6fe4
solution
Dec 3, 2025
f4b320e
solution
Dec 3, 2025
eec2135
update config, because js file does not work
Dec 3, 2025
a4dc55a
updated solution
Dec 5, 2025
f8a1696
updated solution
Dec 5, 2025
ff84dcb
hide horizontal scroll
Dec 5, 2025
009c7d4
hide horizontal scroll
Dec 5, 2025
de1ef57
hide horizontal scroll
Dec 5, 2025
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
358 changes: 353 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,362 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<title>Crazy baby</title>
<link
rel="icon"
type="image/png"
href="./src/images/icons/favicon2.svg"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<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"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="src/styles/main.scss"
href="./src/styles/main.scss"
/>
</head>
<body>
<h1>Hello Mate Academy</h1>
<script src="src/scripts/main.js"></script>

<body class="page" id="home">
<div class="page__container">
<header class="header">
<div class="header__upper">
<a href="#home">
<img src="./src/images/icons/logo.svg" alt="logo" class="logo" />
</a>

<nav class="header__nav">
<a href="#" class="header__spec">
Spec
</a>

<div class="header__language">
<a href="#" class="header__link header__link--active">
ENG /
</a>
<a href="#" class="header__link">
UA
</a>
</div>

<button class="header__buy">Buy</button>

<button class="header__burger">
<img src="./src/images/icons/Icon-Burger-menu.png" alt="menu" />
</button>
</nav>
</div>

<main class="main-info grid animate" data-animate="scale">
<h1 class="main-info__title grid--1-5 grid--1-5-tab grid--1-5-mob">
Futuristic Wireless Speaker
</h1>

<p class="main-info__desc grid--1-4 grid--1-4-tab grid--1-5-mob">
Luna’s performance is balanced and smooth in all frequency ranges
which makes the music both naturally pleasant and distinctly more
layered.
</p>

<picture class="main-info__img grid--1-5-mob">
<source srcset="./src/images/img/speakers-tab.png" type="image/webp" media="(max-width: 1279px)" />
<source srcset="./src/images/img/speakers-mob.png" type="image/webp" media="(max-width: 739px)" />
<img src="./src/images/img/speakers.png" alt="speakers" class="main-info__img grid--1-5-mob" />
</picture>
</main>
</header>

<aside class="aside aside__open">
<div class="aside__top">
<img src="./src/images/icons/logo.svg" alt="logo" class="logo" />
<button class="aside__close-button">
<img src="./src/images/icons/close.png" alt="close" />
</button>
</div>

<nav class="aside__nav">
<ol class="aside__nav-list">
<li class="aside__nav-item">
<a href="#ourStory" class="aside__nav-link">
Our story
</a>
</li>
<li class="aside__nav-item">
<a href="#about-us" class="aside__nav-link">
about us
</a>
</li>
<li class="aside__nav-item">
<a href="#features" class="aside__nav-link">
Features
</a>
</li>
<li class="aside__nav-item">
<a href="#contact" class="aside__nav-link">
Get in touch
</a>
</li>
</ol>
</nav>
</aside>

<section class="benefits">
<nav class="menu">
<ol class="menu__list">
<li class="menu__list-item">
<a href="#ourStory" class="menu__link">
Our story
</a>
</li>
<li class="menu__list-item">
<a href="#about-us" class="menu__link">
about us
</a>
</li>
<li class="menu__list-item">
<a href="#features" class="menu__link">
Features
</a>
</li>
<li class="menu__list-item">
<a href="#contact" class="menu__link">
Get in touch
</a>
</li>
</ol>
</nav>

<div class="benefits__content grid">
<div class="benefits__block animate grid--1-4 grid--1-5-tab grid--1-5-mob" data-animate="scale">
<img src="./src/images/icons/design.svg" alt="function design" class="benefits__icon" />
<h4 class="benefits__title">Futuristic Design</h4>
<p class="benefits__desc">
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>
</div>

<div class="benefits__block animate grid--4-7 grid--5-9-tab grid--1-5-mob" data-animate="scale">
<img src="./src/images/icons/volume.svg" alt="Speaker System" class="benefits__icon" />
<h4 class="benefits__title">Tweeter Speaker System</h4>
<p class="benefits__desc">
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>
</div>

<div class="benefits__block animate grid--7-10 grid--1-5-tab grid--1-5-mob" data-animate="scale">
<img src="./src/images/icons/wi-fi.svg" alt="multiroom System" class="benefits__icon" />
<h4 class="benefits__title">Multiroom System</h4>
<p class="benefits__desc">
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>
</div>

<div class="benefits__block animate grid--10-13 grid--5-9-tab grid--1-5-mob" data-animate="scale">
<img src="./src/images/icons/brightness.svg" alt="function design" class="benefits__icon" />
<h4 class="benefits__title">Intuitive Lighting System</h4>
<p class="benefits__desc">
An intuitive user interface allows you to adjust the hue and
saturation of color for lighting that fits any mood and situation.
</p>
</div>
</div>
</section>

<section class="presentation" id="ourStory">
<picture class="presentation__img">
<source media="(max-width:1279px)" srcset="./src/images/img/meet_luna-tab.png" type="image" />
<source media="(max-width:639px)" srcset="./src/images/img/meet_luna-mob.png" type="image" />
<img src="./src/images/img/meet_luna.png" alt="meet luna" class="presentation__img" />
</picture>
</section>

<section class="about-us" id="about-us">
<div class="about-us__container animate grid" data-animate="slide-left">
<picture class="about-us__img grid--1-7 grid--1-5-tab grid--1-5-mob">
<source srcset="./src/images/img/draws-tab.png" type="image/webp" media="(max-width: 1279px)" />
<source srcset="./src/images/img/draws-mob.png" type="image/webp" media="(max-width: 739px)" />
<img src="./src/images/img/draws.png" alt="about-us" class="about-us__img" />
</picture>
<h2 class="about-us__title grid--7-13 grid--5-9-tab grid--1-5-mob">
DESIGNED FOR THE FUTURE
</h2>

<div class="about-us__info grid--7-13 grid--5-9-tab grid--1-5-mob">
<p class="about-us__desc">
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>
<button class="about-us__more">
<a href="#" class="about-us__link">
See more about us
</a>
</button>
</div>
</div>

<div class="about-us__container animate grid" data-animate="slide-right">
<h2 class="about-us__title grid--1-7 grid--1-5-tab grid--1-5-mob">
Luna Eye
</h2>

<div class="about-us__info grid--1-7 grid--1-5-tab grid--1-5-mob">
<p class="about-us__desc">
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>

<button class="about-us__more">
<a href="#" class="about-us__link">
See more about us
</a>
</button>
</div>

<picture class="about-us__img grid--7-13 grid--5-9-tab grid--1-5-mob">
<source srcset="./src/images/img/speaker_2-tab.png" type="image/webp" media="(max-width: 1279px)" />
<source srcset="./src/images/img/speaker_2-mob.png" type="image/webp" media="(max-width: 739px)" />
<img src="./src/images/img/speaker_2.png" alt="speaker" class="about-us__img" />
</picture>
</div>
</section>

<section class="testimonials grid">
<div class="testimonials__wrapper grid--3-11 grid--1-9-tab grid--1-5-mob">
<p class="testimonials__text">
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>

<div class="testimonials__author">
<img src="./src/images/img/avatar.png" alt="avatar" />
<h5 class="testimonials__name">Garrett Martin</h5>
<p class="testimonials__position">Creative Director</p>
</div>
</div>
</section>

<section class="features" id="features">
<h2 class="features__title">FEATURES</h2>
<div class="features__container grid">
<div class="features__section grid--2-5">
<h3 class="features__subtitle">Connectivity</h3>

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

<div class="features__section grid--7-10">
<h3 class="features__subtitle">App Features</h3>
<ol class="features__list">
<li class="features__point">Customize Music Schedule</li>
<li class="features__point">Wake Up with Favorite Songs</li>
<li class="features__point">Home Detection Auto Wake Up</li>
<li class="features__point">Color Wheel</li>
</ol>
</div>

<div class="features__section grid--2-5">
<h3 class="features__subtitle">Sound & Music</h3>
<ol class="features__list">
<li class="features__point">Feel-in-chest Base Power</li>
<li class="features__point">
Lossless Digital Audio Transmission
</li>
<li class="features__point">Easy & Stable Stereo Pairing</li>
<li class="features__point">
Crisp and Clear High Frequency Sound
</li>
<li class="features__point">
Streams from Cloud Music and Local Library
</li>
<li class="features__point">Auto Music from Last Song Stopped</li>
</ol>
</div>

<div class="swipper-nav grid--2-4-tab grid--2-4-mob">
<div class="swipper-nav__buttons">
<button class="swipper-nav__prev"></button>
<button class="swipper-nav__next"></button>
</div>

<div class="swipper-nav__pages">
<p class="swipper-nav__current-page">1</p>
<p class="swipper-nav__total-page">/ 3</p>
</div>
</div>

<picture class="features__img grid--1-5-mob">
<source media="(max-width: 1279px)" type="image/webp" srcset="../src/images/img/speaker_3-tab.png" />
<source media="(max-width:639px)" srcset="../src/images/img/speaker_3-mob.png" type="image" />
<img src="./src/images/img/speaker_3.png" alt="speaker feature" class="features__img" />
</picture>
</div>
</section>

<section class="questions animate grid" data-animate="slide-left" id="contact">
<h2 class="questions__title grid--1-6 grid--1-5-tab">
DO YOU HAVE ANY QUESTIONS?
</h2>
<form action="/submit" method="POST" class="questions__form grid--7-13 grid--5-9-tab grid--1-5-mob">
<input type="email" placeholder="Your email" class="questions__email" />
<textarea name="message" placeholder="Your message..." class="questions__text"></textarea>
<button class="questions__submit" type="submit">
send
</button>
</form>
</section>

<footer class="footer">
<a href="#home">
<img src="./src/images/icons/logo.svg" alt="logo" class="logo" />
</a>

<div class="footer__social">
<a href="https://facebook.com" class="footer__link" target="_blank">
<img src="./src/images/icons/facebook.svg" alt="facebook" class="footer__icon" />
</a>

<a href="https://x.com" class="footer__link" target="_blank">
<img src="./src/images/icons/twitter.svg" alt="twitter" class="footer__icon" />
</a>

<a href="https://instagram.com" class="footer__link" target="_blank">
<img src="./src/images/icons/instagram.svg" alt="instagram" class="footer__icon" />
</a>
</div>

<p class="footer__right">
© 2019 All rights reserved. Terms of Use & Privacy Policy
</p>

<a href="#home" class="footer__up">
<img src="./src/images/icons/up.png" alt="up" />
</a>
</footer>
</div>

<script type="module" src="src/scripts/main.js"></script>
</body>
</html>
Loading
Loading