Skip to content

MET landing #3015

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

MET landing #3015

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
dc7921b
add task solution
kseniiavasylenko Feb 24, 2026
1cfd2d7
add task solution
kseniiavasylenko Feb 24, 2026
3b4d89f
add task solution
kseniiavasylenko Feb 24, 2026
e997721
add some changes
kseniiavasylenko Feb 26, 2026
24b247e
add some changes
kseniiavasylenko Feb 27, 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
26 changes: 3 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,4 @@
# Landing Page
This project is the website of museum the MET. I used the BEM, Sass, transform, animations and grid.
DEMO-link: https://github.com/kseniiavasylenko/layout_landing-page/pulls
the MET-link: https://www.figma.com/design/lSR1m42L9YwzQwzzxKwHpw/THE-MET?node-id=8590-534&t=X7j5HR39shzApS6j-0

> ❗❗ You will complete this task in the **Landing** topic.
> Now just choose a design and do the parts from the videos.
> Note: in the first task of this topic you will find 4 examples of landing pages. Choose **only one** of them and create your page.

Choose a design for your landing page:

- [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET)
- [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1)
- [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0)
- [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)

Follow the instructions in this and next lessons to implement the page block by block:

- Here is [the design from the video](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0) (❗❗ DO NOT implement this design ❗❗ choose one of the options above ❗❗ ☝️)
- Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson.
- **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar.
- When done check yourself using the [CHECKLIST](./checklist.md) when finished.
- Deploy and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_landing-page/).

# Tips & Hints
- Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`.
- If some points from the checklist are not relevant to your design, just skip it.
281 changes: 277 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,295 @@
<!doctype html>
<html lang="en">
<html lang="en" class="page">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Landing Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="src/styles/main.scss"
href="src/styles/index.scss"
/>
<script
src="src/scripts/main.js"
defer
></script>
</head>
<body>
<h1>Landing Page</h1>
<body class="page__body">
<header class="header">
<div class="container">
<div class="header__content">
<div class="top-bar">
<a href="#" class="top-bar__logo-link">
<img src="src/images/logo.png" alt="the met logo"
class="top-bar__logo">
</a>
<div class="top-bar__icons">
<div class="contact">
<a href="tel: The Met Fifth Avenue +1 212-535-7710 The Met Cloisters +1 212-923-3700" class="icon icon--phone"></a>
<span class="contact__text">
The Met Fifth Avenue <br>
+1 212-535-7710 <br>
The Met Cloisters <br>
+1 212-923-3700
</span>
</div>
<a href="#menu" class="icon icon--menu"></a>
</div>
</div>
<h1 class="header__title">
Welcome <br>
to The MET
</h1>
</div>
</div>
</header>

<aside class="menu page__menu" id="menu">
<div class="container">
<div class="top-bar menu__top">
<a href="#" class="top-bar__logo">
<img class="top-bar__image" src="src/images/logo.png"
alt="the met logo">
</a>
<a href="#" class="icon icon--close"></a>
</div>

<div class="menu__bottom">
<nav class="nav menu__nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#about-us">About us</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#now-on-view">Now on view</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#explore-online">Explore Online</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#contacts">Contacts</a>
</li>
</ul>
</nav>

<a href="tel:+1 212-535-7710" class="menu__phone-the-met-fifth-avenue">
The Met Fifth Avenue <br>
+1 212-535-7710
</a>

<a href="tel:+1 212-923-3700" class="menu__the-met-cloisters">
The Met Cloisters <br>
+1 212-923-3700
</a>

<a href="#" class="menu__call-to-order">
Call to order
</a>
</div>
</div>
</aside>

<main class="main">
<div class="container">
<div class="main__content">
<section class="about-us" id="about-us">

<p class="about-us__subtitle">Plan your visit</p>
<h2 class="
about-us__title
section-title
section-title--align--left">Museum hours</h2>

<div class="about-us__content">
<p class="about-us__place">The Met Fifth Avenue</p>
<ul class="about-us__schedule">
<li>
<span>10 AM - 5 PM</span>
<span class="about-us__schedule__days">Sun, Mon, Tue, Thu</span>
</li>
<li>
<span>10 AM - 9 PM</span>
<span class="about-us__schedule__days">Fri, Sat</span>
</li>
<li>
<span>CLOSED</span>
<span class="about-us__schedule__days">Wen</span>
</li>
</ul>

<p class="about-us__closed">Closed on</p>
<span class="about-us__closed__text">Thanksgiving Day, Dec 25, Jan 1, and the first Monday in May.</span>

<p class="about-us__place">The Met Cloisters</p>

<ul class="about-us__schedule">
<li>
<span>10 am – 4.30 pm</span>
<span class="about-us__schedule__days">Thu - Tue</span>
</li>
<li>
<span>Closed</span>
<span class="about-us__schedule__days">Wen</span>
</li>
</ul>

<p class="about-us__closed">Closed on</p>
<span class="about-us__closed__text2">Thanksgiving Day, Dec 25, Jan 1</span>

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

<section class="now-on-view" id="now-on-view">
<h2 class="now-on-view__title section-title--align--center">Now On View</h2>
<h3 class="now-on-view__text">Explore exhibition gallery guides, videos, articles, and more.</h3>
<div class="categories__wrapper">
<article class="category">
<div class="category__photos">
<a href="#" class="category__link category__link--wide">
<img class="category__photo" src="src/images/layer--wide.png"
alt="layer">
</a>
<a href="#" class="category__link category__link--square">
<img class="category__photo" src="src/images/men--square.png"
alt="men">
</a>
</div>

<h2 class="category__title">A New Look at Old Masters</h2>
<h3 class="category__subtitle">December 12, 2020 – Through Spring 2023</h3>

</article>

<article class="category">
<div class="category__photos">
<a href="#" class="category__link category__link--square">
<img class="category__photo category__photo-block-3" src="src/images/block2_photo1-tablet.png"
alt="layer">
</a>
<a href="#" class="category__link category__link--square">
<img class="category__photo category__photo-block-3" src="src/images/block2_photo2.png"
alt="men">
</a>
<a href="#" class="category__link category__link--square">
<img class="category__photo category__photo-block-3" src="src/images/block2_photo3.png"
alt="men">
</a>
</div>

<h2 class="category__title">Bodhisattvas of Wisdom, Compassion, and Power</h2>
<h3 class="category__subtitle">March 27, 2021 – October 30, 2022</h3>

</article>

<article class="category">
<div class="category__photos">
<a href="#" class="category__link category__link--square">
<img class="category__photo" src="src/images/block3_photo1.png"
alt="layer">
</a>
<a href="#" class="category__link category__link--wide">
<img class="category__photo" src="src/images/block3_photo2.png"
alt="men">
</a>
</div>

<h2 class="category__title">Inspiring Walt Disney: The Animation of French Decorative Arts</h2>
<h3 class="category__subtitle">December 10, 2021 – March 6, 2022</h3>

<button class="now-on-view__button">View all exhibitions</button>

</article>

</div>
</section>

<section class="explore-online" id="explore-online">
<h2 class="explore__maintitle section-title section-title--align--center">More to Explore Online</h2>
<div class="explories__wrapper">
<article class="explore">
<div class="explore__item">
<a href="#" class="explore__link">
<img class="explore__photo explore__photo--1" src="src/images/explore1.png"
alt="layer">
</a>
</div>
<h2 class="explore__title">Collection Areas</h2>
<h3 class="explore__subtitle">These collection areas study, exhibit, and care for the objects in The Met collection.</h3>
</article>

<article class="explore">
<div class="explore__item">
<a href="#" class="explore__link">
<img class="explore__photo explore__photo--2" src="src/images/explore2.png"
alt="layer">
</a>
</div>
<h2 class="explore__title">Travel</h2>
<h3 class="explore__subtitle">Travel with The Met connects the Museum's wide and diverse audience to art, inspiration, and historical perspective.</h3>
</article>

<article class="explore">
<a href="#" class="explore__link">
<img class="explore__photo explore__photo--3" src="src/images/explore3.png"
alt="layer">
</a>
<h2 class="explore__title">Virtual group tours</h2>
<h3 class="explore__subtitle"> Request a guided tour, reserve admission and lead your own small group, or request a live virtual tour led by a Museum guide.</h3>
</article>
</div>
</section>

<section class="contacts" id="contacts">
<h2 class="contact-us__title section-title section-title--align--center">Contact us</h2>
<div class="contact-us">
<article class="contact-us__avenue">
<h3 class="contact-us__avenue--place">The Met Fifth Avenue</h3>
<p class="contact-us__avenue--name">phone</p>
<p class="contact-us__avenue--phone">+1 212-535-7710</p>
<p class="contact-us__avenue--name">address</p>
<p class="contact-us__avenue--address">1000 Fifth Avenue New York, NY 10028</p>
</article>

<article class="contact-us__cloisters">
<h3 class="contact-us__cloisters--place">The Met Cloisters</h3>
<p class="contact-us__cloisters--name">phone</p>
<p class="contact-us__cloisters--phone">+1 212-923-3700</p>
<p class="contact-us__cloisters--name">address</p>
<p class="contact-us__cloisters--address">99 Margaret Corbin Drive Fort Tryon Park New York, NY 10040</p>
</article>

<article class="contact-us__form">
<form action="http://localhost:3000/api" method="post">
<div class="contact-us__form__blocks">
<input type="text" name="name"
class="contact-us__form--block"
placeholder="Name">
<input type="text" name="email"
class="contact-us__form--block"
placeholder="Email">
<textarea
class="contact-us__form--block3"
placeholder="Message"></textarea>
</div>
<button class="contact-us__button">Send</button>
</form>
</article>
</div>
</section>
</div>
</main>

<footer class="footer">
<div class="footer__image"></div>
</footer>
</body>
</html>
Loading
Loading