-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 18.9 KB
/
index.html
1
<!DOCTYPE html><html lang="pl"><head><link rel="stylesheet" href="/projekt-html-css-group-5/index.e5cfecb0.css"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Anemone</title><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=Inter:wght@500;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css" integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g==" crossorigin></head><body> <section class="container header-section"> <div class="header-section__item1"> <a href="#"> <svg class="header-section__logo"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-logo-mobile"></use> </svg> </a> </div> <div class="header-section__item2"> <ul class="header-section__nav"> <li class="header-nav__item"><a href="#">Anemone</a></li> <li class="header-nav__item"><a href="#">About</a></li> <li class="header-nav__item"><a href="#">Store</a></li> <li class="header-nav__item"><a href="#">Delivery</a></li> <li class="header-nav__item"><a href="#">Blog</a></li> </ul> </div> <div class="header-section__item3"> <a href="tel:+38 063 123 45 67"> <svg class="header-section__tel"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-tel"></use> </svg> </a> </div> <div class="header-section__item4"> <button class="js-open-menu menu-toggle" aria-expanded="false" aria-controls="mobile-menu"> <svg class="menu-toggle__icon"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-Burger"></use> </svg> </button> <div class="js-menu-container menu-container" id="mobile-menu"> <button class="js-close-menu menu-toggle"> <svg class="menu-toggle__close"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-close"></use> </svg> </button> <ul class="mobile-menu"> <li class="mobile-menu__item"><a href>Anemone</a></li> <li class="mobile-menu__item"><a href>About us</a></li> <li class="mobile-menu__item"><a href>Store</a></li> <li class="mobile-menu__item"><a href>Delivery</a></li> <li class="mobile-menu__item"><a href>Blog</a></li> </ul> </div> </div> </section> <section class="container hero-section"> <div class="hero-section__flex-box"> <p class="hero-section__description">flower<br>studio</p> <img class="hero-section__img" src="/projekt-html-css-group-5/hero-flower-145w.64388dbd.jpg" srcset="/projekt-html-css-group-5/hero-flower-145w.64388dbd.jpg 288w, /projekt-html-css-group-5/hero-flower-145w@2x.10544ddc.jpg 576w, /projekt-html-css-group-5/hero-flower-390w.7a39f509.jpg 344w, /projekt-html-css-group-5/hero-flower-390w@2x.b22d8ac3.jpg 688w, /projekt-html-css-group-5/hero-flower-542w.761a090c.jpg 632w, /projekt-html-css-group-5/hero-flower-542w@2x.2dc6282e.jpg 1264w" sizes="(min-width: 1280px) 390px, 636px (min-width: 768px) 390px, 636px" alt="różowy kwiatek z żółtym pyłkiem"> <button class="hero-section__button" type="submit" data-modal-open> <svg class="hero-section__icon" width="64" height="76"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-button-hero-mobile"></use> </svg> </button> </div> <h1 class="hero-section__header">ANEMONE</h1> </section> <div class="contact-us-div is-hidden" data-modal> <div class="backdrop-contact-us container"> <button type="button" class="backdrop-contact-us__close-button" data-modal-close> <svg class="contact-us-icon-close"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-close"></use> </svg> </button> <h3 class="backdrop-contact-us__header">Contact us</h3> <p class="backdrop-contact-us__description"> If you have any additional questions or you want to clarify something before you make an order please fill in your contact details. We will call you back. </p> <form class="backdrop-contact-us__form"> <ul class="backdrop-contact-us__table"> <li class="backdrop-contact-us__cell"> <label class="backdrop-contact-us__label" for="name">Name</label><input placeholder="Your name" type="text" id="name" class="backdrop-contact-us__input" name="name" required pattern="^[a-zA-Z]+\s[a-zA-Z]+$" title="Name must be two words separated by space."> </li> <li class="backdrop-contact-us__cell"> <label class="backdrop-contact-us__label" for="email">Email</label><input placeholder="Your email" type="email" id="email" class="backdrop-contact-us__input" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"> </li> <li class="backdrop-contact-us__cell"> <button type="button" class="backdrop-contact-us__button" data-modal-open2>Send</button> </li> </ul> </form> </div> </div> <div class="is-hidden thank-you-div" data-modal2> <div class="backdrop-thank-you container"> <button type="button" class="backdrop-thank-you__close-button"> <svg class="contact-us-icon-close"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-close"></use> </svg> </button> <img class="backdrop-thank-you__img" src="/projekt-html-css-group-5/plants.9662620b.jpg" srcset="/projekt-html-css-group-5/plants.9662620b.jpg 288w, /projekt-html-css-group-5/plants@2.8ad5ce58.jpg 576w, /projekt-html-css-group-5/plants-desktop.a2058043.jpg 344w, /projekt-html-css-group-5/plants-desktop@2.bde12a39.jpg 688w, /projekt-html-css-group-5/plants-desktop@2.bde12a39.jpg 632w, /projekt-html-css-group-5/plants-desktop@2.bde12a39.jpg 1264w" sizes="(min-width: 1280px) 266px, 202px (min-width: 768px) 266px, 202px" alt="rysunek kwiatkow w doniczkach"> <h3 class="backdrop-thank-you__header">Thank you!</h3> <p class="backdrop-thank-you__description"> We have received your contact details and will reach you soon. </p> <button type="submit" class="backdrop-thank-you__button" data-modal-close2>Continue</button> </div> </div> <section class="about-section container"> <h2 class="about-section__heading">About</h2> <div class="about-section__flex-box"> <p class="about-section__text"> We are a minimalistic flower studio. We love people and flowers. Therefore, every day we give people the beauty and joy creating stylish and modern masterpieces. Every bouquet we create is unique as you are. </p> <img src="/projekt-html-css-group-5/about-flower-288w.8a3e85c0.jpg" srcset="/projekt-html-css-group-5/about-flower-288w.8a3e85c0.jpg 288w, /projekt-html-css-group-5/about-flower-288w@2x.cb61687d.jpg 576w, /projekt-html-css-group-5/about-flower-344w.39bbf647.jpg 344w, /projekt-html-css-group-5/about-flower-344w@2x.bb404a6e.jpg 688w, /projekt-html-css-group-5/about-flower-632w.9f35a3f1.jpg 632w, /projekt-html-css-group-5/about-flower-632w@2x.2b168c06.jpg 1264w" sizes="(min-width: 1280px) 632px, (min-width: 768px) 344px, 288px" alt="dwa leżące jasno-pomarańczowe kwiatki z zielonymi liśćmi"> </div> </section> <section> <div class="container"> <h2 class="our-offer">store</h2> <ul class="our-offer__wrapper"> <li class="our-offer__item"> <img src="/projekt-html-css-group-5/store-flower-1-136w.2e32a460.jpg" srcset="/projekt-html-css-group-5/store-flower-1-136w.2e32a460.jpg 136w, /projekt-html-css-group-5/store-flower-1-136w@2x.7fa0f634.jpg 272w, /projekt-html-css-group-5/store-flower-1-344w.6ccaf418.jpg 344w, /projekt-html-css-group-5/store-flower-1-344w@2x.7ccafc33.jpg 688w, /projekt-html-css-group-5/store-flower-1-600w.67df18a1.jpg 600w, /projekt-html-css-group-5/store-flower-1-600w@2x.ae0e318c.jpg 1200w" sizes="(min-width: 1280px) 600px, (min-width: 768px) 344px, 100vw" class="our-offer__item--img" alt="red flowers"> <p class="our-offer__text">compliments</p> <p class="our-offer__text--price">from $15</p> </li> <li class="our-offer__item"> <img src="/projekt-html-css-group-5/store-flower-2-136w.86a80898.jpg" srcset="/projekt-html-css-group-5/store-flower-2-136w.86a80898.jpg 136w, /projekt-html-css-group-5/store-flower-2-136w@2x.07365b6a.jpg 272w, /projekt-html-css-group-5/store-flower-2-344w.ce64d057.jpg 344w, /projekt-html-css-group-5/store-flower-2-344w@2x.6753a634.jpg 688w, /projekt-html-css-group-5/store-flower-2-600w.3fe8a6b8.jpg 600w, /projekt-html-css-group-5/store-flower-2-600w@2x.2d0ec265.jpg 1200w" sizes="(min-width: 1280px) 600px, (min-width: 768px) 344px, 100vw" class="our-offer__item--img" alt="white flowers"> <p class="our-offer__text">bouquets size S</p> <p class="our-offer__text--price">from $25</p> </li> <li class="our-offer__item"> <img src="/projekt-html-css-group-5/store-flower-3-136w.68b8810b.jpg" srcset="/projekt-html-css-group-5/store-flower-3-136w.68b8810b.jpg 136w, /projekt-html-css-group-5/store-flower-3-136w@2x.72ff1924.jpg 272w, /projekt-html-css-group-5/store-flower-3-344w.426e61b7.jpg 344w, /projekt-html-css-group-5/store-flower-3-344w@2x.e6ce24a9.jpg 688w, /projekt-html-css-group-5/store-flower-3-600w.08c4998d.jpg 600w, /projekt-html-css-group-5/store-flower-3-600w@2x.af18f184.jpg 1200w" sizes="(min-width: 1280px) 600px, (min-width: 768px) 344px, 100vw" class="our-offer__item--img" alt="blue flowers"> <p class="our-offer__text">bouquets size M</p> <p class="our-offer__text--price">from $45</p> </li> <li class="our-offer__item"> <img src="/projekt-html-css-group-5/store-flower-4-136w.a7bfacb1.jpg" srcset="/projekt-html-css-group-5/store-flower-4-136w.a7bfacb1.jpg 136w, /projekt-html-css-group-5/store-flower-4-136w@2x.82c4c33e.jpg 272w, /projekt-html-css-group-5/store-flower-4-344w.5f55d5c0.jpg 344w, /projekt-html-css-group-5/store-flower-4-344w@2x.928d28ad.jpg 688w, /projekt-html-css-group-5/store-flower-4-600w.0cfd96f2.jpg 600w, /projekt-html-css-group-5/store-flower-4-600w@2x.96022505.jpg 1200w" sizes="(min-width: 1280px) 600px, (min-width: 768px) 344px, 100vw" class="our-offer__item--img" alt="various colours flowers"> <p class="our-offer__text">bouquets size L</p> <p class="our-offer__text--price">from $60</p> </li> </ul> <div class="button"> <button type="button" class="button__item" data-modal-open3>Order flowers</button> </div> <div class="backdrop is-hidden" data-modal3> <div class="modal"> <button type="button" class="modal__close" data-modal-close3> <svg class="modal__close--item"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-close"></use> </svg> </button> <div class="modal__wrapper"> <p class="modal__header">Contact us</p> <p class="modal__text"> If you have any additional questions or you want to clarify something before you make an order please fill in your contact details. We will call you back. </p> <form> <label for="user-name" class="modal__wrapper--input"> <p class="modal__text--item">Name</p> </label> <div class="modal__box"> <input type="text" name="name" id="user-name" minlength="2" required placeholder="Your name" class="modal__box--input"> </div> <label for="email" class="modal__wrapper--input"> <p class="modal__text--item">E-mail</p> </label> <div class="modal__box"> <input type="email" name="email" minlength="3" required id="email" placeholder="Your e-mail" class="modal__box--input"> </div> <div> <button type="button" class="modal__send" data-modal-open4>Send</button> </div> </form> </div> </div> </div> </div> </section> <div class="is-hidden thank-you-div" data-modal4> <div class="backdrop-thank-you container"> <button type="button" class="backdrop-thank-you__close-button"> <svg width="18" height="18"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-close"></use> </svg> </button> <img class="backdrop-thank-you__img" src="/projekt-html-css-group-5/plants.9662620b.jpg" srcset="/projekt-html-css-group-5/plants.9662620b.jpg 288w, /projekt-html-css-group-5/plants@2.8ad5ce58.jpg 576w, /projekt-html-css-group-5/plants-desktop.a2058043.jpg 344w, /projekt-html-css-group-5/plants-desktop@2.bde12a39.jpg 688w, /projekt-html-css-group-5/plants-desktop@2.bde12a39.jpg 632w, /projekt-html-css-group-5/plants-desktop@2.bde12a39.jpg 1264w" sizes="(min-width: 1280px) 266px, 202px (min-width: 768px) 266px, 202px" alt="rysunek kwiatkow w doniczkach"> <h3 class="backdrop-thank-you__header">Thank you!</h3> <p class="backdrop-thank-you__description"> We have received your contact details and will reach you soon. </p> <button type="submit" class="backdrop-thank-you__button" data-modal-close4>Continue</button> </div> </div> <section class="container"> <div class="delivery__content"> <h2 class="delivery__title">DELIVERY</h2> </div> <div class="delivery"> <ul class="delivery__list"> <li class="delivery__item">1</li> <li class="delivery__text">Choose your bouquet and make an order on website</li> </ul> </div> <div class="delivery"> <ul class="delivery__list"> <li class="delivery__item">2</li> <li class="delivery__text">Wait for the call to clarify the details of the order. You can pay online or to the courier</li> </ul> </div> <div class="delivery"> <ul class="delivery__list"> <li class="delivery__item">3</li> <li class="delivery__text">Wait for the delivery at the selected time or pick up the order from the store </li> </ul> </div> <div class="delivery"> <ul class="delivery__list"> <li class="delivery__item">4</li> <li class="delivery__text">Make someone happy or enjoy yourself</li> </ul> </div> <div> <img alt="flowers" src="/projekt-html-css-group-5/deilvery-flower-320w.63242bbf.jpg" srcset="/projekt-html-css-group-5/deilvery-flower-320w.63242bbf.jpg 320w, /projekt-html-css-group-5/deilvery-flower-320w@2x.8fae1aec.jpg 640w, /projekt-html-css-group-5/deilvery-flower-768w.c6c4dc40.jpg 7384w, /projekt-html-css-group-5/deilvery-flower-768w@2x.b6b8ea99.jpg 768w, /projekt-html-css-group-5/deilvery-flower-1280w.1363e7be.jpg 640w, /projekt-html-css-group-5/deilvery-flower-1280w@2x.efa3cae8.jpg 1280w" sizes="(min-width: 1280px) 600px, (min-width: 768px) 344px, 100vw" class="delivery__img"> </div></section> <section class="blog-section"> <div class="container"> <h2 class="blog-section__header">Blog</h2> <div class="blog-section__images"> <img class="blog-section__img" src="/projekt-html-css-group-5/blog-flower-1-136w.76ac67ab.jpg" srcset="/projekt-html-css-group-5/blog-flower-1-136w.76ac67ab.jpg 136w, /projekt-html-css-group-5/blog-flower-1-136w@2x.4e05a196.jpg 272w, /projekt-html-css-group-5/blog-flower-1-344w.1d7e3345.jpg 344w, /projekt-html-css-group-5/blog-flower-1-344w@2x.230267eb.jpg 688w, /projekt-html-css-group-5/blog-flower-1-390w.550c8710.jpg 390w, /projekt-html-css-group-5/blog-flower-1-390w@2x.3a311e7d.jpg 780w" sizes="(min-width: 1280px) 390px, (min-width: 768px) 344px, 136px" alt="zielone rośliny"> <img class="blog-section__img" src="/projekt-html-css-group-5/blog-flower-2-136w.22a3a06e.jpg" srcset="/projekt-html-css-group-5/blog-flower-2-136w.22a3a06e.jpg 136w, /projekt-html-css-group-5/blog-flower-2-136w@2x.a02cdd3c.jpg 272w, /projekt-html-css-group-5/blog-flower-2-344w.a8a95092.jpg 344w, /projekt-html-css-group-5/blog-flower-2-344w@2x.c4c1f7fc.jpg 688w, /projekt-html-css-group-5/blog-flower-2-390w.692d3732.jpg 390w, /projekt-html-css-group-5/blog-flower-2-390w@2x.c4aa067a.jpg 780w" sizes="(min-width: 1280px) 390px, (min-width: 768px) 344px, 136px" alt="pomarańczowy kwiatek"> <img class="blog-section__img no-visibility" src="/projekt-html-css-group-5/blog-flower-3-390w.d35cf000.jpg" srcset="/projekt-html-css-group-5/blog-flower-3-390w.d35cf000.jpg 390w, /projekt-html-css-group-5/blog-flower-3-390w@2x.8fb0d96c.jpg 780w" sizes="(min-width: 1280px) 390px, (min-width: 768px) 344px, 136px" alt="błękitny kwiatek"> </div> <div class="button-arrows"> <svg class="button-arrows__svg"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-left-arrow"></use> </svg> <svg class="button-arrows__svg"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-right-arrow"></use> </svg> </div> <div class="blog-section__button-box"> <p class="blog-section__title">Follow to our newsletter</p> <button type="button" class="blog-section__button" data-modal-open5>Subscribe</button> <div class="blog-section__backdrop is-hidden" data-modal5> <div class="blog-section__modal"> <button class="blog-section__modal-close"> <svg class="blog-section__modal-icon" data-modal-close5> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-close"></use> </svg> </button> <img src="/projekt-html-css-group-5/blog-modal-flower-272w.a02f92b9.jpg" srcset="/projekt-html-css-group-5/blog-modal-flower-588w.7f8bf286.jpg 566w" alt="bukiet"> <form class="blog-section__modal-news"> <h3 class="blog-section__modal-news-tittle">Follow to our newsletter</h3> <p class="blog-section__modal-news-text"> Be the first to get exclusive offers and the latest news on our product directly in your box. </p> <label class="blog-section__modal-form"> Email <input class="blog-section__modal-form-input" id="name-input" name="name-input" type="email" required placeholder="Your email"> </label> <button type="submit" class="blog-section__modal-button">Subscribe</button> </form> </div> </div> </div> </div> </section> <footer class="footer"> <div class="footer__container"> <a class="footer__logo-box" href="/projekt-html-css-group-5/index.html"> <svg class="footer__logo-icon"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-logo-tablet-desktop"></use> </svg> </a> <div class="footer__box"> <h3 class="footer__header">Navigation</h3> <ul> <li class="footer__text"><a href="/projekt-html-css-group-5/index.html">Anemone</a></li> <li class="footer__text"><a href>About us</a></li> <li class="footer__text"><a href>Store</a></li> <li class="footer__text"><a href>Delivery</a></li> </ul> </div> <div class="footer__box"> <h3 class="footer__header">Opening times</h3> <p class="footer__text footer__text--margin footer__text--nohover">Every day</p> <p class="footer__text footer__text--nohover">9:00 - 22:00</p> </div> <adress class="footer__box"> <h3 class="footer__header">Contacts</h3> <ul> <li class="footer__text"><a href="tel:+38 063 123 45 67">+38 063 123 45 67</a></li> <li class="footer__text footer__text--mobile"> <a href="mailto:anemonestudio@example.com">anemonestudio @example.com</a> </li> <li class="footer__text footer__text--tablet-desktop"> <a href="mailto:anemonestudio@example.com">anemonestudio@example.com</a> </li> <li class="footer__text"> <a href="https://www.google.com/maps/place/Reitarska+St,+11,+Kyiv,+Ukraina,+02000/@50.4512188,30.5126959,17z/data=!3m1!4b1!4m6!3m5!1s0x40d4ce5bde74d21f:0x3ddb1fc45e18228!8m2!3d50.4512188!4d30.5126959!16s%2Fg%2F11c5fhwzrb">Reitarska Street, 11 Kyiv, Ukraine</a> </li> </ul> </adress> <div class="footer__box-icon footer__box-icon--margin"> <a href class="footer__social-bg"> <svg class="footer__social-icon"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-facebook"></use> </svg> </a> <a href class="footer__social-bg"> <svg class="footer__social-icon footer__social-icon--instagram"> <use href="/projekt-html-css-group-5/icons.fad3a551.svg#icon-instagram"></use> </svg> </a> </div> </div> </footer> <script src="/projekt-html-css-group-5/index.7f9a1e82.js" type="module"></script> <script src="/projekt-html-css-group-5/index.b6d0cabe.js" type="module"></script> <script src="/projekt-html-css-group-5/index.cd0e660e.js" type="module"></script> <script src="/projekt-html-css-group-5/index.85ee5ad6.js" type="module"></script> <script src="/projekt-html-css-group-5/index.5db3e685.js" type="module"></script> <script src="/projekt-html-css-group-5/index.7cc35e4e.js" type="module"></script> </body></html>