-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 7.08 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Insure landing page"><meta name="keywords" content="HTML, SCSS, CSS, Javascript, Frontend-Mentor"><meta name="author" content="Jose Angel Rey"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;700&display=swap" rel="stylesheet"> <script src="https://unpkg.com/scrollreveal"></script> <script src="./js/scroll-reveal.js" defer></script> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"><link rel="stylesheet" href="./css/main.css"><title>Insure landing page | Frontend Mentor</title></head><body><div class="main-container"> <nav class="navbar"><div class="navbar__container"> <img src="./images/logo.svg" alt="Insure logo" class="navbar__logo"> <img src="./images/icons/icon-hamburger.svg" alt="" class="navbar__hamburger-btn"><ul class="navbar__nav"><li class="navbar__nav-item"> <a href="#" class="navbar__nav-link">How we work</a></li><li class="navbar__nav-item"> <a href="#" class="navbar__nav-link">Blog</a></li><li class="navbar__nav-item"> <a href="#" class="navbar__nav-link">Account</a></li><li class="navbar__nav-item"> <a href="#" class="navbar__nav-link btn">View plans</a></li></ul></div> </nav> <header class="main-header"> <picture class="main-header__left-pattern-picture"> <source media="(min-width:768px)" srcset="./images/desktop-patterns/bg-pattern-intro-left-desktop.svg"> <img src="./images/mobile-patterns/bg-pattern-intro-left-mobile.svg" alt="" class="main-header__left-pattern"> </picture> <picture class="main-header__right-pattern-picture"> <source media="(min-width:768px)" srcset="./images/desktop-patterns/bg-pattern-intro-right-desktop.svg"> <img src="./images/mobile-patterns/bg-pattern-intro-right-mobile.svg" alt="" class="main-header__right-pattern"> </picture><div class="main-header__container"> <section class="main-header__content"><h1 class="main-header__title">Humanizing your insurance.</h1><p class="main-header__description"> Get your life insurance coverage easier and faster. We blend our expertise and technology to help you find the plan that’s right for you. Ensure you and your loved ones are protected.</p> <a href="#" class="btn">View plans</a> </section> <picture class="main-header__picture"> <source media="(min-width:768px)" srcset="./images/header/image-intro-desktop.jpg"> <img src="./images/header/image-intro-mobile.jpg" alt="Family playing" class="main-header__image"> </picture></div> </header> <main class="main-content"><div class="main-content__container"> <section class="we-are-different"><h2 class="we-are-different__title">We’re different</h2><div class="we-are-different__content"> <article class="we-are-different__article"> <img src="./images/icons/icon-snappy-process.svg" alt="Snappy process icon" class="we-are-different__article-icon"><h3 class="we-are-different__article-title">Snappy Process</h3><p class="we-are-different__article-description"> Our application process can be completed in minutes, not hours. Don’t get stuck filling in tedious forms.</p> </article> <article class="we-are-different__article"> <img src="./images/icons/icon-affordable-prices.svg" alt="Affordable prices icon" class="we-are-different__article-icon"><h3 class="we-are-different__article-title">Affordable Prices</h3><p class="we-are-different__article-description"> We don’t want you worrying about high monthly costs. Our prices may be low, but we still offer the best coverage possible.</p> </article> <article class="we-are-different__article"> <img src="./images/icons/icon-people-first.svg" alt="People first icon" class="we-are-different__article-icon"><h3 class="we-are-different__article-title">People First</h3><p class="we-are-different__article-description"> Our plans aren’t full of conditions and clauses to prevent payouts. We make sure you’re covered when you need it.</p> </article></div> </section></div> </main> <section class="cta"><div class="cta__container"><h3 class="cta__title">Find out more about how we work</h3> <a href="#" class="btn">How we work</a></div> </section> <footer class="main-footer"><div class="main-footer__container"> <section class="social-media"><h2 class="sr-only">Social media</h2> <img src="./images/logo.svg" alt="Insure logo" class="social-media__logo"><div class="social-media-icons"> <i class="fab fa-facebook-square"></i> <i class="fab fa-twitter"></i> <i class="fab fa-pinterest"></i> <i class="fab fa-instagram"></i></div> </section> <nav class="main-footer__navbar"><ul class="main-footer__nav"><li class="main-footer__nav-item"><h3 class="main-footer__nav-title">Our company</h3></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">How we work</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Why Insure?</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">View plans</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Reviews</a></li></ul> </nav> <nav class="main-footer__navbar"><ul class="main-footer__nav"><li class="main-footer__nav-item"><h3 class="main-footer__nav-title">Help me</h3></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">FAQ</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Terms of use</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Privacy policy</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Cookies</a></li></ul> </nav> <nav class="main-footer__navbar"><ul class="main-footer__nav"><li class="main-footer__nav-item"><h3 class="main-footer__nav-title">Contact</h3></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Sales</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Support</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Live chat</a></li></ul> </nav> <nav class="main-footer__navbar"><ul class="main-footer__nav"><li class="main-footer__nav-item"><h3 class="main-footer__nav-title">Others</h3></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Careers</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Press</a></li><li class="main-footer__nav-item"> <a href="#" class="main-footer__nav-link">Licenses</a></li></ul> </nav></div> </footer><div class="attribution"><p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noreferrer noopener">Frontend Mentor</a>.</p><p>Coded by <a href="https://github.com/Jose-Angel-Rey" target="_blank" rel="noreferrer noopener">Jose Angel Rey</a></p></div></div> <script src="./js/app.js"></script> </body></html>