Task layout landing page #2920
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,332 @@ | ||
| <!-- #region head --> | ||
| <!doctype html> | ||
| <html lang="en" class="page"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0" | ||
| /> | ||
| <title>The Met</title> | ||
| <link | ||
| rel="stylesheet" | ||
| href="src/styles/main.scss" | ||
| /> | ||
| <link rel="icon" href="src/imagens/THE MET.svg"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <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"> | ||
| <script | ||
| src="src/scripts/main.js" | ||
| defer | ||
| ></script> | ||
| </head> | ||
| <!-- #endregion head --> | ||
| <body class="page__body"> | ||
| <header class="header"> | ||
| <div class="top-bar"> | ||
| <a href="#" class="top-bar__logo-link"> | ||
| <img src="src/imagens/THE MET.svg" alt="the met logo" class="top-bar__logo"> | ||
| </a> | ||
|
|
||
| <div class="top-bar__icons"> | ||
| <a href="#" class="icon icon--phone"> | ||
| <div class="icon__phone-contat"> | ||
| The Met Fifth Avenue<br> | ||
| +1 212-535-7710<br> | ||
| The Met Cloisters<br> | ||
| +1 212-923-3700 | ||
| </div> | ||
| </a> | ||
| <a href="#menu" class="icon icon--menu"></a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="header__title"> | ||
| <h1 class="header__title-page">Welcome<br>to The MET</h1> | ||
| </div> | ||
| </header> | ||
|
|
||
| <aside class="page__menu menu" id="menu"> | ||
| <div class="top-bar top__menu"> | ||
| <a href="#" class="top-bar__logo"> | ||
| <img src="src/imagens/THE MET.svg" alt="the met logo"> | ||
| </a> | ||
|
|
||
|
|
||
| <a href="#" class="icon icon--close"></a> | ||
| </div> | ||
|
|
||
| <div class="menu__content"> | ||
| <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="#plan_your_visit">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="#more-to-explore">Explore Online</a> | ||
| </li> | ||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#contacts">Contacts</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <br> | ||
| <p class="location_contact">The Met Fifth Avenue</p> | ||
| <a href="tel:+1 212-535-7710" class="menu__phone-number"> | ||
| +1 212-535-7710 | ||
| </a> | ||
| <br> | ||
| <p class="location_contact">The Met Cloisters</p> | ||
| <a href="tel:+1 212-923-3700" class="menu__phone-number"> | ||
| +1 212-923-3700 | ||
| </a> | ||
| <br> | ||
| <a href="#" class="menu__call-to-order">call to order</a> | ||
| </div> | ||
|
|
||
| </aside> | ||
|
There was a problem hiding this comment.
.page:has(.page__menu:target) {
overflow: hidden; /* not to scroll the page */
}There was a problem hiding this comment. Make it possible to scroll the menu if it is higher than the viewport; .menu {
overflow: auto; /* to scroll the menu if needed */
}
.menu__top {
position: sticky; /* to keep cross always visible */
top: 0;
z-index: 1;
background-color: #e5e5e5;
} |
||
|
|
||
| <main class="main"> | ||
| <section class="plan_your_visit" id="plan_your_visit"> | ||
| <div class="section-title-container"> | ||
| <span class="plan__visit">Plan your visit</span> | ||
| <h2 class="section-title-hours"> | ||
| Museum hours | ||
| </h2> | ||
| </div> | ||
|
|
||
| <article class="hours_visit"> | ||
| <h3 class="location-visit">The Met Fifth Avenue</h3> | ||
|
|
||
| <div class="opening-hours"> | ||
| <div class="opening_hours-bold"> | ||
| <p>10 am - 5 pm</p> | ||
| <p>10 am - 9 pm</p> | ||
| <p>Closed</p> | ||
| </div> | ||
|
|
||
| <div class="opening_days"> | ||
| <p>Sun, Mon, Tue, Thu</p> | ||
| <p>Fri, Sat</p> | ||
| <p>Wen</p> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <p class="opening_hours-bold">Closed on</p> | ||
| <p>Thanksgiving Day, Dec 25, Jan 1, and the first Monday in May.</p> | ||
|
|
||
| <h3 class="location-visit">The Met Cloisters</h3> | ||
|
|
||
| <div class="opening-hours"> | ||
| <div class="opening_hours-bold"> | ||
| <p>10 am - 4.30 pm</p> | ||
| <p>Closed</p> | ||
| </div> | ||
|
|
||
| <div class="opening_days"> | ||
| <p>Thu - Tue</p> | ||
| <p>Wen</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p class="opening_hours-bold">Closed on</p> | ||
| <p>Thanksgiving Day, Dec 25, Jan 1</p> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section class="now-on-view" id="now-on-view"> | ||
| <div class="section-title">NOW ON VIEW | ||
| <p class="subtitle">Explore exhibition gallery guides, videos, articles, and more.</p> | ||
| </div> | ||
| <div class="now-on-view_content"> | ||
|
|
||
| <article class="exhibition-card"> | ||
| <div class="img-box"> | ||
| <a href="#" class="img-link --extend"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer46.png" alt="Layer46"> | ||
| </a> | ||
| <a href="#" class="img-link --standard"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer47.png" alt="Layer47"> | ||
| </a> | ||
| </div> | ||
|
There was a problem hiding this comment. These images are not matching the 
|
||
|
|
||
|
|
||
| <div class="text-content"> | ||
| <h3 class="exhibition-title">A NEW LOOK AT OLD MASTERS</h3> | ||
| <p class="exhibition-date">DECEMBER 12, 2020 - THROUGH SPRING 2023</p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="exhibition-card"> | ||
| <div class="img-box"> | ||
| <div class="img-3colums"> | ||
| <a href="#" class="img-link --one-img"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer48.png" alt="Layer48"> | ||
| </a> | ||
| <a href="#" class="img-link --two-img"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer49.png" alt="Layer49"> | ||
| </a> | ||
| <a href="#" class="img-link --tree-img"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer50.png" alt="Layer50"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="text-content"> | ||
| <h3 class="exhibition-title">BODHISATTVAS OF WISDOM, COMPASSION, AND POWER</h3> | ||
| <p class="exhibition-date">MARCH 27, 2021 – OCTOBER 30, 2022</p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="exhibition-card"> | ||
| <div class="img-box"> | ||
| <a href="#" class="img-link --standard-reverse"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer51.png" alt="Layer46"> | ||
| </a> | ||
| <a href="#" class="img-link --extend-reverse"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer52.png" alt="Layer47"> | ||
| </a> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <div class="text-content"> | ||
| <h3 class="exhibition-title">Inspiring Walt Disney: The Animation of French Decorative Arts</h3> | ||
| <p class="exhibition-date">December 10, 2021 – March 6, 2022</p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <button class="view-all-exhibitions"> | ||
| View all exhibitions | ||
| </button> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
| <section class="more-to-explore" id="more-to-explore"> | ||
| <h2 class="section-title">More to Explore Online</h2> | ||
| <div class="more-to-explore_content"> | ||
| <article class="exhibition-card"> | ||
|
|
||
| <div class="img-box"> | ||
| <a href="#" class="img-link"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer53.png" alt="Layer46"> | ||
| </a> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="text-content"> | ||
| <h3 class="exhibition-title-center">Collection Areas</h3> | ||
| <p class="exhibition-text">These collection areas study, exhibit, and care for the objects in The Met collection.</p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="exhibition-card"> | ||
|
|
||
| <div class="img-box"> | ||
| <a href="#" class="img-link"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer54.png" alt="Layer46"> | ||
| </a> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="text-content"> | ||
| <h3 class="exhibition-title-center">Travel</h3> | ||
| <p class="exhibition-text">Travel with The Met connects the Museum's wide and diverse audience to art, inspiration, and historical perspective.</p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article class="exhibition-card"> | ||
|
|
||
| <div class="img-box"> | ||
| <a href="#" class="img-link"> | ||
| <img class="img" src="./src/imagens/img-content-page/Layer55.png" alt="Layer46"> | ||
| </a> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="text-content"> | ||
| <h3 class="exhibition-title-center">Virtual group tours</h3> | ||
| <p class="exhibition-text"> Request a guided tour, reserve admission and lead your own small group, or request a live virtual tour led by a Museum guide.</p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="contact-us" id="contacts"> | ||
| <h2 class="section-title">Contact us</h2> | ||
| <div class="contacts_content"> | ||
| <div class="container_information-contacts"> | ||
| <div class="contacts_content-fifth_Avenue"> | ||
| <h3>The Met Fifth Avenue</h3> | ||
|
|
||
| <p>Phone</p> | ||
| <p> | ||
| <a href="tel:+1 212-535-7710" class="contact_phone"> | ||
| +1 212-535-7710 | ||
| </a> | ||
| </p> | ||
| <p>Address</p> | ||
| <a href="https://www.google.com/maps/place/1000+5th+Ave,+New+York,+NY+10028,+EUA/@40.7790628,-73.9807749,15z/data=!4m20!1m13!4m12!1m4!2m2!1d-48.4573184!2d-1.4450688!4e1!1m6!1m2!1s0x89c25896dcda965d:0x5bbcfab18ea2c739!2s1000+5th+Ave,+New+York,+NY+10028,+EUA!2m2!1d-73.9627407!2d40.7790613!3m5!1s0x89c25896dcda965d:0x5bbcfab18ea2c739!8m2!3d40.7790613!4d-73.9627407!16s%2Fg%2F1yl46zflv?entry=ttu&g_ep=EgoyMDI2MDIwNC4wIKXMDSoASAFQAw%3D%3D" | ||
| target="_blank" | ||
| class="location"> | ||
| <p>1000 Fifth Avenue <br> New York, NY 10028</p> | ||
| </a> | ||
| </div> | ||
| <br> | ||
| <div class="contacts_content-cloisters"> | ||
| <h3>The Met Cloisters</h3> | ||
|
|
||
| <p>Phone</p> | ||
| <p> | ||
| <a href="tel:+1 212-923-3700" class="contact_phone"> | ||
| +1 212-923-3700 | ||
| </a> | ||
| </p> | ||
| <p>Address</p> | ||
| <a href="https://www.google.com/maps/place/Cloisters/@40.8648628,-73.9317274,17z/data=!3m1!4b1!4m6!3m5!1s0x89c2f40170f2a62b:0x9191e7fa95df29ad!8m2!3d40.8648628!4d-73.9317274!16zL20vMDFyczdi?entry=ttu&g_ep=EgoyMDI2MDIwNC4wIKXMDSoASAFQAw%3D%3D" | ||
| target="_blank" | ||
| class="location"> | ||
| <p>99 Margaret Corbin Drive<br> Fort Tryon Park <br> New York, NY 10040</p> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
There was a problem hiding this comment.
|
||
|
|
||
| <div class="form_contact"> | ||
| <form onsubmit="this.reset(); return false;" class="form_contact-camp"> | ||
| <input type="text" placeholder="Ex: Jane Doe" | ||
| class="form_input-contact" | ||
| required | ||
| > | ||
|
|
||
| <input type="email" placeholder="Ex: seuemail@gmail.com" | ||
| class="form_input-contact" | ||
| required | ||
| > | ||
|
|
||
| <textarea name="message" id="message" | ||
| placeholder="message" class="message_contact" | ||
| required></textarea> | ||
| <button type="submit" class="button_contact">Send</button> | ||
| </form> | ||
|
There was a problem hiding this comment.
|
||
| </div> | ||
|
|
||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer class="footer"> | ||
| <div class="footer"></div> | ||
| </footer> | ||
|
There was a problem hiding this comment.
|
||
| </body> | ||
| </html> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.