Skip to content

first try #2738

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

first try #2738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a8a7b3d
initial commit
ihorkrasnozhon Mar 7, 2026
4c9a056
initial commit
ihorkrasnozhon Mar 8, 2026
5f5a6fe
index swapped
ihorkrasnozhon Mar 8, 2026
cafdb06
bg fixed
ihorkrasnozhon Mar 8, 2026
c785994
bg fixed
ihorkrasnozhon Mar 8, 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
299 changes: 299 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,299 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Nothing</title>
<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=Space+Grotesk:wght@700&family=Space+Mono&display=swap"
rel="stylesheet"
>
<link rel="icon" type="image/x-icon" href="./src/images/favicon.svg">
<link
rel="stylesheet"
href="src/styles.css"
/>
<script
src="src/scripts/main.js"
defer
></script>
</head>
<body>
<header class="header" id="header">
<nav class="navigation">
<a href="/">
<img
src="src/images/logo.svg"
class="navigation__logo"
alt="logo-img">
</a>

<div class="navigation__actions">
<a href="/">
<img
src="src/images/phone.svg"
alt="call-img">
</a>

<a href="#menu">
<img
src="src/images/menu.svg"
alt="menu-img">
</a>
</div>

</nav>
<h1 class="title header__title">
Bring joy back to the everyday
</h1>
</header>

<div class="menu" id="menu">
<nav class="navigation">
<a href="/">
<img
src="src/images/logo.svg"
class="navigation__logo"
alt="logo-img"
>
</a>

<div class="navigation__actions">
<a href="#header">
<img src="src/images/cross.svg" alt="close-img">
</a>
</div>
</nav>

<nav class="page-navigation">
<ul class="menu__list">
<li>
<a class="menu__link" href="#recommended">Products</a>
</li>
<li>
<a class="menu__link" href="#categories">Store</a>
</li>
<li>
<a class="menu__link" href="#about">About us</a>
</li>
<li>
<a class="menu__link" href="#contact">Contact</a>
</li>
</ul>
</nav>

<div class="menu_footer">
<p>+1 234 5555-55-55</p>
<a class="menu__phone" href="/">CALL TO ORDER</a>
</div>

</div>

<main class="main">

<section class="recommended" id="recommended">
<h2 class="title title--secondary">Recommended</h2>

<div class="container">
<div class="recommended__grid">

<article class="product-card">
<div class="product-card__image-wrapper">
<img
src="src/images/photos/phone(1).jpg"
alt="Phone (1)"
class="product-card__image">
</div>

<div class="product-card__content">
<h3 class="product-card__title">Phone (1)</h3>
<p class="product-card__description product-card__description--mobile">
Designed with instinct, to bring joy back to the everyday.
Through the Glyph Interface, a perfected OS and exceptional dual camera.
All startlingly fast.
</p>

<p class="product-card__description product-card__description--nonmobile">
Through the Glyph Interface, a perfected OS and exceptional dual camera.
All startlingly fast.
</p>
<span class="product-card__price">$ 499.00</span>
</div>
</article>

<article class="product-card">
<div class="product-card__image-wrapper">
<img
src="src/images/photos/ear(2).jpg"
alt="Ear (2)"
class="product-card__image">
</div>

<div class="product-card__content">
<h3 class="product-card__title">Ear (2)</h3>
<p class="product-card__description">
Perfecting the path from artist to ear.
So that music sounds just as it was intended.
</p>
<span class="product-card__price">$ 149.00</span>
</div>
</article>

<article class="product-card">
<div class="product-card__image-wrapper">
<img
src="src/images/photos/ear(stick).jpg"
alt="Ear (stick)"
class="product-card__image">
</div>

<div class="product-card__content">
<h3 class="product-card__title">Ear (stick)</h3>
<p class="product-card__description">
Tech you can’t feel.
Leaving just space for sound to come to life.
Powered by custom sound technology.
</p>
<span class="product-card__price">$ 119.00</span>
</div>
</article>

</div>
</div>

</section>

<section class="categories" id="categories">
<h2 class="title title--secondary">Browse Nothing products by category</h2>
<div class="categories__grid">

<article class="categories__item">
<div class="categories__container categories__container--left-wide">
<img
src="src/images/photos/carrots.jpg"
alt="carrots-img"
class="categories__img"
>
<img
src="src/images/photos/headphones.jpg"
alt="headphones-img"
class="categories__img"
>
</div>
<h3 class="categories__title">All products</h3>
</article>

<article class="categories__item">
<div class="categories__container categories__container--right-wide">
<img
src="src/images/photos/earphone_single.jpg"
alt="earphone_single-img"
class="categories__img"
>
<img
src="src/images/photos/earphones_stick.jpg"
alt="earphones_stick-img"
class="categories__img"
>
</div>
<h3 class="categories__title">Audio</h3>
</article>

<article class="categories__item">
<div class="categories__container categories__container--left-wide">
<img
src="src/images/photos/phone2.jpg"
alt="phone2-img"
class="categories__img"
>
<img
src="src/images/photos/plug.jpg"
alt="plug-img"
class="categories__img"
>
</div>
<h3 class="categories__title">Accessories</h3>
</article>

<a href="#" class="button categories_button">View all</a>

</div>

</section>

<article class="divider">
<img
src="src/images/photos/panel.jpg"
alt="panel-img"
class="divider__img">
</article>

<section class="about" id="about">
<h2 class="title title--secondary about__title">About us</h2>
<p class="about__info">
We’re a London-based tech company on a mission to remove
barriers between people and technology.
<br><br>
To do this, we’re crafting intuitive, flawlessly connected
products that improve our lives without getting in the way.
No confusing tech-speak. No silly product names.
Just artistry, passion and trust. And products we’re proud
to share with our friends and family. Simple.
<br><br>
Because beautiful tech shouldn’t be complicated.
</p>
</section>

<section class="contact" id="contact">
<h2 class="title title--secondary contact__title">Contact us</h2>
<form class="form">
<input
class="form__input"
type="text"
placeholder="Name"
>
<input
class="form__input"
type="email"
placeholder="Email"
>
<textarea class="form__textarea" placeholder="Message"></textarea>

<button class="button form__button">Send</button>
</form>

<article class="our-info">
<h4 class="our-info__title">Phone</h4>
<p class="our-info__paragraph">+1 234 5555-55-55</p>

<h4 class="our-info__title">Email</h4>
<p class="our-info__paragraph">hello@nothing.com</p>

<h4 class="our-info__title">Address</h4>
<p class="our-info__paragraph">
400 first ave.
<br>
suite 700
<br>
Minneapolis, MN 55401
</p>
</article>
</section>


</main>

</body>
</html>
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,11 @@
"keywords": [],
"author": "Mate Academy",
"license": "GPL-3.0",
"dependencies": {},
"devDependencies": {
"@linthtml/linthtml": "^0.9.6",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^1.8.6",
"@mate-academy/scripts": "^2.1.1",
"@mate-academy/stylelint-config": "latest",
"@parcel/transformer-sass": "^2.12.0",
"jest": "^29.7.0",
Expand Down
4 changes: 2 additions & 2 deletions src/images/cross.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions src/images/crown.svg
View file
Open in desktop

This file was deleted.

Binary file removed src/images/favicon.png
View file
Open in desktop
Binary file not shown.
9 changes: 9 additions & 0 deletions src/images/favicon.svg
View file
Open in desktop
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/logo.png
View file
Open in desktop
Binary file not shown.
9 changes: 9 additions & 0 deletions src/images/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/images/menu-hover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 9 additions & 2 deletions src/images/menu.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading