Init code header UI

2026-09-22 20:01:33 +00:00 · 2023-06-28 15:54:01 +07:00
parent 4f08d1e560
commit a4a91fad04
6 changed files with 188 additions and 0 deletions
@@ -0,0 +1,7 @@
+<svg width="187" height="50" viewBox="0 0 187 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.7719 12.3454C40.9881 11.1262 41.7406 9.44383 41.7406 7.5851C41.7406 3.86264 38.7226 0.844696 35.0001 0.844696C32.6467 0.844696 30.5777 2.05287 29.372 3.88062C29.0517 4.2014 2.21949 37.2729 1.96866 37.6531C0.752489 38.8723 0 40.5551 0 42.4129C0 46.1358 3.01794 49.1538 6.7404 49.1538C9.0938 49.1538 11.1629 47.9461 12.3686 46.1178C12.6889 45.7971 39.5211 12.7251 39.7719 12.3454Z" fill="white"/>
+<path d="M55.2974 28.0393C56.5171 26.8192 57.271 25.1348 57.271 23.2736C57.271 19.5511 54.2531 16.5332 50.5306 16.5332C48.1762 16.5332 46.1061 17.7423 44.9005 19.5716C44.5777 19.8949 30.4848 37.2665 30.2325 37.6493C29.0128 38.8695 28.2588 40.5538 28.2588 42.4145C28.2588 46.1375 31.2767 49.1555 34.9992 49.1555C37.3536 49.1555 39.4237 47.9463 40.6289 46.117C40.9517 45.7942 55.0451 28.4221 55.2974 28.0393Z" fill="white"/>
+<path d="M70.0002 7.5851C70.0002 11.3081 66.9822 14.3255 63.2598 14.3255C59.5368 14.3255 56.5193 11.3081 56.5193 7.5851C56.5193 3.86264 59.5368 0.844696 63.2598 0.844696C66.9822 0.844696 70.0002 3.86264 70.0002 7.5851Z" fill="white"/>
+<path d="M13.4808 7.5851C13.4808 11.3081 10.4629 14.3255 6.7404 14.3255C3.01794 14.3255 0 11.3081 0 7.5851C0 3.86264 3.01794 0.844696 6.7404 0.844696C10.4629 0.844696 13.4808 3.86264 13.4808 7.5851Z" fill="white"/>
+<path d="M100.92 12.2C103.293 12.2 105.347 12.6533 107.08 13.56C108.813 14.44 110.28 15.7467 111.48 17.48L108.6 20.24C107.587 18.6933 106.44 17.5867 105.16 16.92C103.907 16.2267 102.413 15.88 100.68 15.88C99.4001 15.88 98.3468 16.0533 97.5201 16.4C96.6935 16.7467 96.0801 17.2133 95.6801 17.8C95.3068 18.36 95.1201 19 95.1201 19.72C95.1201 20.5467 95.4001 21.2667 95.9601 21.88C96.5468 22.4933 97.6268 22.9733 99.2001 23.32L104.56 24.52C107.12 25.08 108.933 25.9333 110 27.08C111.067 28.2267 111.6 29.68 111.6 31.44C111.6 33.0667 111.16 34.48 110.28 35.68C109.4 36.88 108.173 37.8 106.6 38.44C105.053 39.08 103.227 39.4 101.12 39.4C99.2535 39.4 97.5735 39.16 96.0801 38.68C94.5868 38.2 93.2801 37.5467 92.1601 36.72C91.0401 35.8933 90.1201 34.9467 89.4001 33.88L92.3601 30.92C92.9201 31.8533 93.6268 32.6933 94.4801 33.44C95.3335 34.16 96.3201 34.72 97.4401 35.12C98.5868 35.52 99.8535 35.72 101.24 35.72C102.467 35.72 103.52 35.5733 104.4 35.28C105.307 34.9867 105.987 34.56 106.44 34C106.92 33.4133 107.16 32.72 107.16 31.92C107.16 31.1467 106.893 30.4667 106.36 29.88C105.853 29.2933 104.893 28.84 103.48 28.52L97.6801 27.2C96.0801 26.8533 94.7601 26.36 93.7201 25.72C92.6801 25.08 91.9068 24.3067 91.4001 23.4C90.8935 22.4667 90.6401 21.4267 90.6401 20.28C90.6401 18.7867 91.0401 17.44 91.8401 16.24C92.6668 15.0133 93.8535 14.04 95.4001 13.32C96.9468 12.5733 98.7868 12.2 100.92 12.2ZM122.824 13.12V33C122.824 33.9867 123.078 34.7067 123.584 35.16C124.118 35.6133 124.824 35.84 125.704 35.84C126.424 35.84 127.051 35.7333 127.584 35.52C128.118 35.28 128.611 34.96 129.064 34.56L130.024 37.68C129.411 38.2133 128.651 38.64 127.744 38.96C126.864 39.2533 125.878 39.4 124.784 39.4C123.638 39.4 122.584 39.2133 121.624 38.84C120.664 38.4667 119.918 37.8667 119.384 37.04C118.851 36.1867 118.571 35.08 118.544 33.72V14.32L122.824 13.12ZM129.704 19V22.36H114.704V19H129.704ZM145.614 26.16C145.614 24.8267 145.241 23.8 144.494 23.08C143.774 22.3333 142.774 21.96 141.494 21.96C140.294 21.96 139.268 22.24 138.414 22.8C137.561 23.36 136.934 24.2667 136.534 25.52L132.934 24C133.441 22.3733 134.428 21.0667 135.894 20.08C137.388 19.0933 139.308 18.6 141.654 18.6C143.254 18.6 144.668 18.8667 145.894 19.4C147.121 19.9067 148.081 20.68 148.774 21.72C149.494 22.76 149.854 24.0933 149.854 25.72V34.64C149.854 35.6267 150.348 36.12 151.334 36.12C151.814 36.12 152.281 36.0533 152.734 35.92L152.494 38.88C151.881 39.1733 151.108 39.32 150.174 39.32C149.321 39.32 148.548 39.1733 147.854 38.88C147.188 38.56 146.654 38.0933 146.254 37.48C145.881 36.84 145.694 36.0533 145.694 35.12V34.84L146.574 34.8C146.334 35.84 145.841 36.7067 145.094 37.4C144.348 38.0667 143.481 38.5733 142.494 38.92C141.508 39.24 140.508 39.4 139.494 39.4C138.241 39.4 137.108 39.2 136.094 38.8C135.108 38.4 134.321 37.8 133.734 37C133.174 36.1733 132.894 35.16 132.894 33.96C132.894 32.4667 133.374 31.24 134.334 30.28C135.321 29.32 136.708 28.6667 138.494 28.32L146.254 26.8L146.214 29.8L140.574 30.96C139.454 31.1733 138.614 31.48 138.054 31.88C137.494 32.28 137.214 32.8667 137.214 33.64C137.214 34.3867 137.494 34.9867 138.054 35.44C138.641 35.8667 139.414 36.08 140.374 36.08C141.041 36.08 141.681 36 142.294 35.84C142.934 35.68 143.508 35.4267 144.014 35.08C144.521 34.7067 144.908 34.24 145.174 33.68C145.468 33.0933 145.614 32.4 145.614 31.6V26.16ZM156.867 39V19H160.507L160.907 22.6C161.44 21.2933 162.227 20.3067 163.267 19.64C164.334 18.9467 165.64 18.6 167.187 18.6C167.587 18.6 167.987 18.64 168.387 18.72C168.787 18.7733 169.12 18.8667 169.387 19L168.787 22.76C168.494 22.6533 168.16 22.5733 167.787 22.52C167.44 22.44 166.96 22.4 166.347 22.4C165.52 22.4 164.707 22.6267 163.907 23.08C163.107 23.5067 162.44 24.16 161.907 25.04C161.4 25.92 161.147 27.04 161.147 28.4V39H156.867ZM178.293 13.12V33C178.293 33.9867 178.546 34.7067 179.053 35.16C179.586 35.6133 180.293 35.84 181.173 35.84C181.893 35.84 182.52 35.7333 183.053 35.52C183.586 35.28 184.08 34.96 184.533 34.56L185.493 37.68C184.88 38.2133 184.12 38.64 183.213 38.96C182.333 39.2533 181.346 39.4 180.253 39.4C179.106 39.4 178.053 39.2133 177.093 38.84C176.133 38.4667 175.386 37.8667 174.853 37.04C174.32 36.1867 174.04 35.08 174.013 33.72V14.32L178.293 13.12ZM185.173 19V22.36H170.173V19H185.173Z" fill="white"/>
+</svg>
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Practice 01</title>
+    <link rel="stylesheet" href="./style/base/reset.css" />
+    <link rel="stylesheet" href="./style/main.css" />
+  </head>
+  <body>
+    <div class="header__background">
+      <!-- Header -->
+      <header>
+        <img src="./assets/images/logo.svg" alt="" class="logo" />
+        <nav>
+          <ul class="nav__links">
+            <li class="link">Home</li>
+            <li class="link">Portfolio</li>
+            <li class="link">Services</li>
+            <li class="link">Contact</li>
+          </ul>
+        </nav>
+      </header>
+
+      <section class="welcome__container">
+        <div class="welcome__content">
+          <p>Welcome</p>
+          <h1>Lorem ipsum dolor sit amet consectetur</h1>
+          <p class="text__description">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit
+            nemo hic quos, ab, dolor aperiam nobis cum est eos error ipsum,
+            voluptate culpa nesciunt delectus iste?
+          </p>
+          <a href="#" class="btn">Explore</a>
+        </div>
+        <img
+          src="./assets/images/header-image.png"
+          alt=""
+          class="welcome__image"
+        />
+      </section>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,11 @@
+:root {
+  --primary-color: #74c69d;
+  --text-dark: #d6d6d6;
+  --white: #ffffff;
+  --black: #000000;
+  --ff-crimsontext-regular: CrimsonText-Regular;
+  --ff-crimsontext-700: CrimsonText-700;
+  --ff-worksans-500: WorkSans-500;
+  --ff-worksans-700: WorkSans-700;
+  --ff-worksans-regular: WorkSans-Regular;
+}
@@ -0,0 +1,126 @@
+@import url("./abstracts/variables.css");
+
+@font-face {
+  font-family: CrimsonText-Regular;
+  src: url(../font/CrimsonText-Regular.ttf);
+}
+
+@font-face {
+  font-family: CrimsonText-700;
+  src: url(../font/CrimsonText-700.ttf);
+}
+
+@font-face {
+  font-family: WorkSans-500;
+  src: url(../font/WorkSans-500.ttf);
+}
+
+@font-face {
+  font-family: WorkSans-700;
+  src: url(../font/WorkSans-700.ttf);
+}
+
+@font-face {
+  font-family: WorkSans-Regular;
+  src: url(../font/WorkSans-Regular.ttf);
+}
+
+.header__background {
+  background-color: var(--primary-color);
+}
+
+header {
+  display: flex;
+  width: 1175px;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 35px;
+  padding-bottom: 40px;
+  margin: auto;
+  color: var(--white);
+  cursor: pointer;
+  font-family: var(--ff-worksans-regular);
+  font-size: 20px;
+}
+
+.link {
+  transition: 0.3s;
+}
+
+.link:hover {
+  color: var(--text-dark);
+}
+
+.logo {
+  cursor: pointer;
+}
+
+.nav__links {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  gap: 30px;
+}
+
+.welcome__container {
+  margin: auto;
+  width: 1180px;
+  display: flex;
+  gap: 120px;
+  padding-bottom: 82.87px;
+  align-items: center;
+}
+
+.welcome__image {
+  width: 644.279px;
+  height: 378.13px;
+}
+
+.welcome__content > p:first-child {
+  font-size: 16px;
+  font-family: var(--ff-worksans-700);
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  color: var(--white);
+  margin-bottom: 15px;
+}
+
+.welcome__content h1 {
+  font-size: 40px;
+  font-family: var(--ff-crimsontext-700);
+  line-height: 125%;
+  color: var(--white);
+  margin-bottom: 15px;
+}
+
+.welcome__content .text__description {
+  font-size: 15px;
+  font-family: var(--ff-worksans-regular);
+  line-height: 125%;
+  color: var(--white);
+  margin-bottom: 25px;
+}
+
+.btn {
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 170px;
+  height: 48px;
+  border: none;
+  color: var(--black);
+  background-color: var(--white);
+  cursor: pointer;
+  transition: 0.2s;
+  text-decoration: none;
+  font-size: 20px;
+  font-family: Work Sans;
+  line-height: 125%;
+  font-family: var(--ff-worksans-regular);
+}
+
+.btn:hover {
+  background-color: var(--black);
+  color: var(--white);
+}