Skip to content

create creative bakery landing #749

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

create creative bakery landing #749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b0d95b
create creative bakery landing
sonik-boom71 Mar 24, 2026
a2a1e92
fix hero height and section spacing
sonik-boom71 Mar 24, 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
1 change: 1 addition & 0 deletions README-START.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
main.scss and _fonts.scss fixed from lint log
300 changes: 289 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,297 @@
<!doctype html>
<html lang="en">
<html lang="en" class="page" id="top">
<head>
<meta charset="UTF-8" />
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Title</title>
<link
rel="stylesheet"
href="src/styles/main.scss"
/>
>
<title>Creative Bakery</title>
<meta
name="description"
content="Creative Bakery landing page with responsive layout, product cards, about section, and contact footer."
>
<link rel="icon" href="./src/images/cookie-hero.svg">
<script type="module" src="./src/scripts/main.js"></script>
<link rel="stylesheet" href="./src/styles/main.scss">
</head>
<body>
<h1>Hello Mate Academy</h1>
<script src="src/scripts/main.js"></script>
<body class="page__body">
<header class="header" id="home">
<div class="header__inner">
<a class="logo header__logo" href="#top" aria-label="Creative Bakery home">
Bakerlab
</a>

<button
class="header__burger"
type="button"
aria-label="Open menu"
aria-expanded="false"
aria-controls="mobile-menu"
>
<span class="header__burger-line"></span>
<span class="header__burger-line"></span>
<span class="header__burger-line"></span>
</button>

<nav class="nav header__nav" aria-label="Main navigation">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#products">Products</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#about">About Us</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#blog">Blog</a>
</li>
</ul>
</nav>

<a class="header__contact" href="#contact">
<img
class="header__contact-icon"
src="./src/images/icon-phone.svg"
alt=""
aria-hidden="true"
>
Contact us
</a>
</div>
</header>

<aside class="mobile-menu" id="mobile-menu" aria-hidden="true">
<div class="mobile-menu__panel">
<div class="mobile-menu__header">
<a class="logo mobile-menu__logo" href="#top">Bakerlab</a>

<button class="mobile-menu__close" type="button" aria-label="Close menu">
<img
class="mobile-menu__close-icon"
src="./src/images/icon-close.svg"
alt=""
aria-hidden="true"
>
</button>
</div>

<nav class="mobile-menu__nav" aria-label="Mobile navigation">
<a class="mobile-menu__link" href="#products">Products</a>
<a class="mobile-menu__link" href="#about">About Us</a>
<a class="mobile-menu__link" href="#blog">Blog</a>
<a class="mobile-menu__link mobile-menu__link--accent" href="#contact">
Contact us
</a>
</nav>
</div>
</aside>

<main class="main-content">
<section class="hero">
<div class="hero__inner">
<p class="hero__eyebrow">
We bake your fantasies — croissants,
cakes, cookies, and cupcakes.
</p>

<h1 class="hero__title">Creative Bakery</h1>

<a class="button hero__button" href="#about">
<span class="button__icon" aria-hidden="true"></span>
Learn more
</a>

<div class="hero__visual" aria-hidden="true">
<img
class="hero__image"
src="./src/images/cookie-hero.svg"
alt="Chocolate chip cookie"
>
</div>
</div>
</section>

<section class="products" id="products">
<div class="container">
<h2 class="section-title">What we bake</h2>
<p class="section-description">
We can customize our cookies right for your needs. Just imagine it.
</p>

<div class="products__grid">
<article class="product-card">
<a class="product-card__image-link" href="#contact" aria-label="Order oatmeat cookies cake">
<img class="product-card__image" src="./src/images/product-01.jpg" alt="Oatmeal cookies cake with orange slices">
</a>
<p class="product-card__category">Cakes</p>
<h3 class="product-card__title">Oatmeal cookies with golden raisins, orange zest and chocolate chips</h3>
<a class="product-card__link" href="#contact">
<img class="product-card__icon" src="./src/images/icon-arrow.svg" alt="" aria-hidden="true">
Order
</a>
</article>

<article class="product-card">
<a class="product-card__image-link" href="#contact" aria-label="Order chocolate biscuit cake">
<img class="product-card__image" src="./src/images/product-02.jpg" alt="Chocolate biscuit coffee cake with almonds and chocolate">
</a>
<p class="product-card__category">Cakes</p>
<h3 class="product-card__title">Chocolate biscuit coffee cake topped with a buttercream and powder</h3>
<a class="product-card__link" href="#contact">
<img class="product-card__icon" src="./src/images/icon-arrow.svg" alt="" aria-hidden="true">
Order
</a>
</article>

<article class="product-card">
<a class="product-card__image-link" href="#contact" aria-label="Order light glazed donuts">
<img class="product-card__image" src="./src/images/product-03.jpg" alt="Glazed donuts on plates">
</a>
<p class="product-card__category">Donuts</p>
<h3 class="product-card__title">Light multi-layered croissant strewn with cinnamon and almond bits</h3>
<a class="product-card__link" href="#contact">
<img class="product-card__icon" src="./src/images/icon-arrow.svg" alt="" aria-hidden="true">
Order
</a>
</article>

<article class="product-card">
<a class="product-card__image-link" href="#contact" aria-label="Order coconut and nuts donut">
<img class="product-card__image" src="./src/images/product-04.jpg" alt="White glazed donut with walnuts and coconut">
</a>
<p class="product-card__category">Donuts</p>
<h3 class="product-card__title">Light multi-layered croissant strewn with coconut and nuts</h3>
<a class="product-card__link" href="#contact">
<img class="product-card__icon" src="./src/images/icon-arrow.svg" alt="" aria-hidden="true">
Order
</a>
</article>

<article class="product-card">
<a class="product-card__image-link" href="#contact" aria-label="Order chocolate cake">
<img class="product-card__image" src="./src/images/product-05.jpg" alt="Chocolate cake with powdered sugar">
</a>
<p class="product-card__category">Cakes</p>
<h3 class="product-card__title">Chocolate salted caramel, vanilla fruit pebbles</h3>
<a class="product-card__link" href="#contact">
<img class="product-card__icon" src="./src/images/icon-arrow.svg" alt="" aria-hidden="true">
Order
</a>
</article>

<article class="product-card" id="blog">
<a class="product-card__image-link" href="#contact" aria-label="Order assorted cookies">
<img class="product-card__image" src="./src/images/product-06.jpg" alt="Assorted cookies on pink background">
</a>
<p class="product-card__category">Cookies</p>
<h3 class="product-card__title">Oatmeal cookies with golden raisins, orange zest and chocolate chips</h3>
<a class="product-card__link" href="#contact">
<img class="product-card__icon" src="./src/images/icon-arrow.svg" alt="" aria-hidden="true">
Order
</a>
</article>
</div>
</div>
</section>

<section class="about" id="about">
<div class="container about__container">
<div class="about__heading">
<h2 class="section-title section-title--about">Few words about us</h2>
</div>

<div class="about__content">
<p class="about__text">
Like many design teams, Onfido made the transition from Abstract + Sketch,
to Figma in the last couple of years. One of the common resistance points
internally before making that switch, was Figma’s lack of pull-by-changing.
That Abstract enabled. The design team had come to rely on branching and had
built a lot of our processes around it.
</p>
</div>

<img class="about__crumbs" src="./src/images/crumbs-decor.svg" alt="" aria-hidden="true">

<div class="about__stats">
<article class="stat-card">
<h3 class="stat-card__value">2015</h3>
<p class="stat-card__label">Foundation year</p>
</article>

<article class="stat-card">
<h3 class="stat-card__value">23</h3>
<p class="stat-card__label">Stores</p>
</article>

<article class="stat-card">
<h3 class="stat-card__value">155</h3>
<p class="stat-card__label">Companies</p>
</article>

<article class="stat-card">
<h3 class="stat-card__value">10k+</h3>
<p class="stat-card__label">Clients</p>
</article>
</div>
</div>
</section>

<div id="terms" hidden></div>
</main>

<footer class="footer" id="contact">
<div class="container footer__container">
<div class="footer__brand">
<a class="footer__logo-link" href="#top" aria-label="Creative Bakery home">
<img class="footer__logo" src="./src/images/logo-footer.svg" alt="Bakerlab logo">
</a>

<nav class="footer__nav" aria-label="Footer navigation">
<p class="footer__title">Menu</p>
<ul class="footer__menu-list">
<li><a class="footer__menu-link" href="#products">Products</a></li>
<li><a class="footer__menu-link" href="#about">About Us</a></li>
<li><a class="footer__menu-link" href="#blog">Blog</a></li>
<li><a class="footer__menu-link" href="#terms">Terms &amp; Privacy</a></li>
</ul>
</nav>

<div class="footer__socials">
<a class="footer__social-link" href="https://www.facebook.com/" target="_blank" rel="noreferrer" aria-label="Facebook">
<img src="./src/images/icon-facebook.svg" alt="">
</a>
<a class="footer__social-link" href="https://www.instagram.com/" target="_blank" rel="noreferrer" aria-label="Instagram">
<img src="./src/images/icon-instagram.svg" alt="">
</a>
<a class="footer__social-link footer__social-link--twitter" href="https://x.com/" target="_blank" rel="noreferrer" aria-label="Twitter / X">
<img class="footer__social-image footer__social-image--default" src="./src/images/icon-twitter.svg" alt="">
<img class="footer__social-image footer__social-image--hover" src="./src/images/icon-twitter-hover.svg" alt="">
</a>
</div>
</div>

<div class="footer__contact-block">
<h2 class="footer__heading">Contact us</h2>

<div class="footer__columns">
<div>
<p class="footer__title">Call us</p>
<ul class="footer__contact-list">
<li><a class="footer__contact-link" href="tel:+6205550129">(629) 555-0129</a></li>
<li><a class="footer__contact-link" href="tel:+6035550123">(603) 555-0123</a></li>
<li><a class="footer__contact-link" href="tel:+7045550127">(704) 555-0127</a></li>
</ul>
</div>

<div>
<p class="footer__title">Email us</p>
<a class="footer__contact-link" href="mailto:bakerlab@example.com">bakerlab@example.com</a>
</div>
</div>

<p class="footer__copyright">© Bakerlab 2022</p>
</div>
</div>
</footer>
</body>
</html>
23 changes: 5 additions & 18 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.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@linthtml/linthtml": "^0.9.6",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^2.1.2",
"@mate-academy/scripts": "^2.1.3",
"@mate-academy/stylelint-config": "latest",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
Expand Down
Loading
Loading