API tools faq
paste
Advertisement
victorumeh

web design

victorumeh
Feb 14th, 2022
150
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.  
  9.     <link rel="preconnect" href="https://fonts.googleapis.com" />
  10.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  11.     <link
  12.      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
  13.      rel="stylesheet"
  14.    />
  15.     <link rel="stylesheet" href="css/style.css" />
  16.   </head>
  17.   <body>
  18.     <div class="hero-img"></div>
  19.     <div class="container">
  20.       <header>
  21.         <a href="#" class="logo">Shoe<span>Brand</span></a>
  22.  
  23.         <nav>
  24.           <svg
  25.            class="close"
  26.            viewBox="0 0 33 33"
  27.            fill="none"
  28.            xmlns="http://www.w3.org/2000/svg"
  29.          >
  30.             <path
  31.              d="M16.5 0.25C13.2861 0.25 10.1443 1.20305 7.47199 2.98862C4.79969 4.77419 2.71689 7.31209 1.48697 10.2814C0.257041 13.2507 -0.0647633 16.518 0.562247 19.6702C1.18926 22.8224 2.73692 25.7179 5.00952 27.9905C7.28213 30.2631 10.1776 31.8108 13.3298 32.4378C16.482 33.0648 19.7493 32.743 22.7186 31.513C25.6879 30.2831 28.2258 28.2003 30.0114 25.528C31.797 22.8557 32.75 19.7139 32.75 16.5C32.75 14.366 32.3297 12.2529 31.5131 10.2814C30.6964 8.30985 29.4994 6.51847 27.9905 5.00952C26.4815 3.50056 24.6902 2.3036 22.7186 1.48696C20.7471 0.670319 18.634 0.25 16.5 0.25ZM20.9038 18.5963C21.0561 18.7473 21.177 18.927 21.2595 19.1251C21.342 19.3231 21.3844 19.5355 21.3844 19.75C21.3844 19.9645 21.342 20.1769 21.2595 20.3749C21.177 20.573 21.0561 20.7527 20.9038 20.9038C20.7527 21.0561 20.573 21.177 20.3749 21.2594C20.1769 21.3419 19.9645 21.3844 19.75 21.3844C19.5355 21.3844 19.3231 21.3419 19.1251 21.2594C18.927 21.177 18.7473 21.0561 18.5963 20.9038L16.5 18.7913L14.4038 20.9038C14.2527 21.0561 14.073 21.177 13.8749 21.2594C13.6769 21.3419 13.4645 21.3844 13.25 21.3844C13.0355 21.3844 12.8231 21.3419 12.6251 21.2594C12.427 21.177 12.2473 21.0561 12.0963 20.9038C11.9439 20.7527 11.8231 20.573 11.7406 20.3749C11.6581 20.1769 11.6156 19.9645 11.6156 19.75C11.6156 19.5355 11.6581 19.3231 11.7406 19.1251C11.8231 18.927 11.9439 18.7473 12.0963 18.5963L14.2088 16.5L12.0963 14.4038C11.7903 14.0978 11.6184 13.6827 11.6184 13.25C11.6184 12.8173 11.7903 12.4022 12.0963 12.0963C12.4023 11.7903 12.8173 11.6184 13.25 11.6184C13.6827 11.6184 14.0978 11.7903 14.4038 12.0963L16.5 14.2088L18.5963 12.0963C18.9023 11.7903 19.3173 11.6184 19.75 11.6184C20.1827 11.6184 20.5978 11.7903 20.9038 12.0963C21.2098 12.4022 21.3817 12.8173 21.3817 13.25C21.3817 13.6827 21.2098 14.0978 20.9038 14.4038L18.7913 16.5L20.9038 18.5963Z"
  32.              fill="black"
  33.            />
  34.           </svg>
  35.           <ul>
  36.             <li><a href="#">Home</a></li>
  37.             <li><a href="#">Sneakers</a></li>
  38.             <li><a href="#">Players</a></li>
  39.           </ul>
  40.         </nav>
  41.  
  42.         <svg
  43.          class="menu"
  44.          viewBox="0 0 48 32"
  45.          fill="none"
  46.          xmlns="http://www.w3.org/2000/svg"
  47.        >
  48.           <path
  49.            d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z"
  50.            fill="white"
  51.          />
  52.         </svg>
  53.       </header>
  54.       <section class="hero">
  55.         <h1>Regain your confidence on the court.</h1>
  56.         <p class="subhead">
  57.           A shoe built with purpose and to your game to the next level.
  58.         </p>
  59.  
  60.         <svg
  61.          class="down-arrow"
  62.          viewBox="0 0 16 132"
  63.          fill="none"
  64.          xmlns="http://www.w3.org/2000/svg"
  65.        >
  66.           <path
  67.            d="M7.29289 131.707C7.68341 132.098 8.31658 132.098 8.7071 131.707L15.0711 125.343C15.4616 124.953 15.4616 124.319 15.0711 123.929C14.6805 123.538 14.0474 123.538 13.6568 123.929L7.99999 129.586L2.34314 123.929C1.95262 123.538 1.31945 123.538 0.928927 123.929C0.538402 124.319 0.538402 124.953 0.928927 125.343L7.29289 131.707ZM7 -4.37114e-08L6.99999 131L8.99999 131L9 4.37114e-08L7 -4.37114e-08Z"
  68.            fill="black"
  69.          />
  70.         </svg>
  71.       </section>
  72.       <section class="more-info">
  73.         <div class="feature">
  74.           <div class="content">
  75.             <p class="title">Lightweight</p>
  76.             <p class="desc">
  77.               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  78.               Quisquam, sit nam natus rerum error dolorem.
  79.             </p>
  80.           </div>
  81.           <img src="images/shoe2.jpg" alt="another beautiful shoe" />
  82.         </div>
  83.         <div class="feature left">
  84.           <div class="content">
  85.             <p class="title">Lightweight</p>
  86.             <p class="desc">
  87.               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  88.               Quisquam, sit nam natus rerum error dolorem.
  89.             </p>
  90.           </div>
  91.           <img src="images/shoe4.jpg" alt="another beautiful shoe" />
  92.         </div>
  93.         <div class="feature">
  94.           <div class="content">
  95.             <p class="title">Lightweight</p>
  96.             <p class="desc">
  97.               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  98.               Quisquam, sit nam natus rerum error dolorem.
  99.             </p>
  100.           </div>
  101.           <img src="images/shoe3.jpg" alt="another beautiful shoe" />
  102.         </div>
  103.       </section>
  104.     </div>
  105.     <script>
  106.       const menu = document.querySelector(".menu");
  107.       const close = document.querySelector(".close");
  108.       const nav = document.querySelector("nav");
  109.  
  110.       menu.addEventListener("click", () => {
  111.         nav.classList.add("open-nav");
  112.       });
  113.  
  114.       close.addEventListener("click", () => {
  115.         nav.classList.remove("open-nav");
  116.       });
  117.     </script>
  118.   </body>
  119. </html>
  120.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!