fixed before pseudo class and paragraph margin in section Team

kandyy9 · Mar 17, 2024 · e7765b6 · e7765b6
1 parent 2fbd481
commit e7765b6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -100,11 +100,11 @@ img{
     padding: 24px 0;
     font-weight: 500;
     position: relative;
-    color: var(--pressed-state-color);
+    color: var(--dark-color);
     transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1)
 }   
 
-.link:after{
+.current:after{
     content: "";
     width: 100%;
     height: 4px;
@@ -247,9 +247,9 @@ img{
     color: var(--dark-color);
     font-weight: 500;
     letter-spacing: 0.02em;
-    margin: 8px 0;
 }
 .section-paragraph{
+    margin-bottom: 8px;
     font-size: 16px;
 }
 
@@ -267,6 +267,10 @@ img{
     margin-bottom: 72px;
 }
 
+.portfolio-paragraph{
+    margin: 0;
+}
+
 .team-list{
     display: flex;
     gap: 24px;

diff --git a/index.html b/index.html
@@ -29,7 +29,7 @@
             Web<span class="logo-separation">Studio</span>
           </a>
           <ul class="navigation-list">
-            <li><a class="link" href="./index.html">Studio</a></li>
+            <li><a class="link current" href="./index.html">Studio</a></li>
             <li><a class="link" href="">Portfolio</a></li>
             <li><a class="link" href="">Contacts</a></li>
           </ul>
@@ -310,7 +310,7 @@ <h2 class="section-title">Our Portfolio</h2>
               </div>
               <div class="application-info">
                 <h3 class="section-item-title">Banking App</h3>
-                <p class="section-paragraph">App</p>
+                <p class="portfolio-paragraph">App</p>
               </div>
             </li>
             <li class="portfolio-card">
@@ -330,7 +330,7 @@ <h3 class="section-item-title">Banking App</h3>
               </div>
               <div class="application-info">
                 <h3 class="section-item-title">Cashless Payment</h3>
-                <p class="section-paragraph">Marketing</p>
+                <p class="portfolio-paragraph">Marketing</p>
               </div>
             </li>
             <li class="portfolio-card">
@@ -350,7 +350,7 @@ <h3 class="section-item-title">Cashless Payment</h3>
               </div>
               <div class="application-info">
                 <h3 class="section-item-title">Meditation App</h3>
-                <p class="section-paragraph">App</p>
+                <p class="portfolio-paragraph">App</p>
               </div>
             </li>
             <li class="portfolio-card">
@@ -370,7 +370,7 @@ <h3 class="section-item-title">Meditation App</h3>
               </div>
               <div class="application-info">
                 <h3 class="section-item-title">Taxi Service</h3>
-                <p class="section-paragraph">Marketing</p>
+                <p class="portfolio-paragraph">Marketing</p>
               </div>
             </li>
             <li class="portfolio-card">
@@ -390,7 +390,7 @@ <h3 class="section-item-title">Taxi Service</h3>
               </div>
               <div class="application-info">
                 <h3 class="section-item-title">Screen Illustrations</h3>
-                <p class="section-paragraph">Design</p>
+                <p class="portfolio-paragraph">Design</p>
               </div>
             </li>
             <li class="portfolio-card">
@@ -410,7 +410,7 @@ <h3 class="section-item-title">Screen Illustrations</h3>
               </div>
               <div class="application-info">
                 <h3 class="section-item-title">Online Courses</h3>
-                <p class="section-paragraph">Marketing</p>
+                <p class="portfolio-paragraph">Marketing</p>
               </div>
             </li>
           </ul>