#31 Edit index.html and css file

practice/practice-01/src/index.html

@@ -15,19 +15,17 @@
           <img src="./assets/images/logo.svg" alt="" class="logo" />
           <nav>
             <ul class="nav__lists">
-              <li class="nav_items">
-                <a href="javascrip:void(0)" class="nav__items-link">Home</a>
+              <li class="nav_item">
+                <a href="javascript:void(0)" class="nav__item-link">Home</a>
               </li>
-              <li class="nav_items">
-                <a href="javascrip:void(0)" class="nav__items-link"
-                  >Portfolio</a
-                >
+              <li class="nav_item">
+                <a href="javascript:void(0)" class="nav__item-link">Portfolio</a>
               </li>
-              <li class="nav_items">
-                <a href="javascrip:void(0)" class="nav__items-link">Services</a>
+              <li class="nav_item">
+                <a href="javascript:void(0)" class="nav__item-link">Services</a>
               </li>
-              <li class="nav_items">
-                <a href="javascrip:void(0)" class="nav__items-link">Contact</a>
+              <li class="nav_item">
+                <a href="javascript:void(0)" class="nav__item-link">Contact</a>
               </li>
             </ul>
           </nav>
@@ -36,18 +34,20 @@
 
       <section class="welcome__container">
         <div class="welcome__content">
-          <p>Welcome</p>
-          <h1>Lorem ipsum dolor sit amet consectetur</h1>
+          <span class="welcome__title">Welcome</span>
+          <h1 class="welcome__heading">
+            Lorem ipsum dolor sit amet consectetur
+          </h1>
           <p class="welcome__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>
+          <a href="javascript:void(0)" class="btn">Explore</a>
         </div>
         <img
           src="./assets/images/header-image.png"
-          alt=""
+          alt="header-image"
           class="welcome__image"
         />
       </section>

practice/practice-01/src/style/abstracts/variables.css

@@ -3,6 +3,7 @@
   --text-dark: #d6d6d6;
   --white: #ffffff;
   --black: #000000;
+  --font-size-20: 20px;
   --ff-crimsontext-regular: CrimsonText-Regular;
   --ff-crimsontext-700: CrimsonText-700;
   --ff-worksans-500: WorkSans-500;

practice/practice-01/src/style/base/typo.css

@@ -1,24 +1,25 @@
 @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);
-  }
+  font-family: CrimsonText-Regular;
+  src: url(../../font/CrimsonText-Regular.ttf);
+}
+
+@font-face {
+  font-family: CrimsonText-700;
+  src: url(../../font/CrimsonText-700.ttf);
+  font-weight: 700;
+}
+
+@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);
+}

practice/practice-01/src/style/main.css

@@ -15,7 +15,7 @@
   margin: auto;
   color: var(--white);
   font-family: var(--ff-worksans-regular);
-  font-size: 20px;
+  font-size: var(--font-size-20);
 }
 
 .logo {
@@ -29,13 +29,13 @@
   gap: 30px;
 }
 
-.nav__items-link {
+.nav__item-link {
   text-decoration: none;
   color: var(--white);
   transition: 0.3s;
 }
 
-.nav__items-link:hover {
+.nav__item-link:hover {
   color: var(--text-dark);
 }
 
@@ -48,29 +48,33 @@
   align-items: center;
 }
 
+.welcome__content {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
 .welcome__image {
   width: 644.279px;
   height: 378.13px;
 }
 
-.welcome__content > p {
+.welcome__title {
   font-size: 16px;
   font-family: var(--ff-worksans-700);
   letter-spacing: 5px;
   text-transform: uppercase;
   color: var(--white);
-  margin-bottom: 15px;
 }
 
-.welcome__content h1 {
+.welcome__heading {
   font-size: 40px;
   font-family: var(--ff-crimsontext-700);
   line-height: 125%;
   color: var(--white);
-  margin-bottom: 15px;
 }
 
-.welcome__content .welcome__description {
+.welcome__description {
   text-transform: none;
   font-size: 15px;
   letter-spacing: 0px;
@@ -93,7 +97,7 @@
   cursor: pointer;
   transition: 0.2s;
   text-decoration: none;
-  font-size: 20px;
+  font-size: var(--font-size-20);
   font-family: Work Sans;
   line-height: 125%;
   font-family: var(--ff-worksans-regular);