#30 Edit index.html and main.css file

practice/practice-01/src/index.html

@@ -11,22 +11,34 @@
     <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>
+        <div class="container">
+          <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>
+              <li class="nav_items">
+                <a href="javascrip:void(0)" class="nav__items-link"
+                  >Portfolio</a
+                >
+              </li>
+              <li class="nav_items">
+                <a href="javascrip:void(0)" class="nav__items-link">Services</a>
+              </li>
+              <li class="nav_items">
+                <a href="javascrip:void(0)" class="nav__items-link">Contact</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
       </header>
 
       <section class="welcome__container">
         <div class="welcome__content">
           <p>Welcome</p>
           <h1>Lorem ipsum dolor sit amet consectetur</h1>
-          <p class="text__description">
+          <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?

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

@@ -0,0 +1,24 @@
+@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);
+  }

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

@@ -1,35 +1,11 @@
 @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);
-}
+@import url("./base/typo.css");
 
 .header__background {
   background-color: var(--primary-color);
 }
 
-header {
+.container {
   display: flex;
   width: 1175px;
   align-items: center;
@@ -38,30 +14,31 @@ header {
   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 {
+.nav__lists {
   list-style: none;
   display: flex;
   justify-content: space-between;
   gap: 30px;
 }
 
+.nav__items-link {
+  text-decoration: none;
+  color: var(--white);
+  transition: 0.3s;
+}
+
+.nav__items-link:hover {
+  color: var(--text-dark);
+}
+
 .welcome__container {
   margin: auto;
   width: 1180px;
@@ -76,7 +53,7 @@ header {
   height: 378.13px;
 }
 
-.welcome__content > p:first-child {
+.welcome__content > p {
   font-size: 16px;
   font-family: var(--ff-worksans-700);
   letter-spacing: 5px;
@@ -93,8 +70,10 @@ header {
   margin-bottom: 15px;
 }
 
-.welcome__content .text__description {
+.welcome__content .welcome__description {
+  text-transform: none;
   font-size: 15px;
+  letter-spacing: 0px;
   font-family: var(--ff-worksans-regular);
   line-height: 125%;
   color: var(--white);