added class to all the tags

sohan9819 · sohan9819 · commit cdd803cd3e47 · 2022-01-08T18:13:13.000+05:30
Applied css to classes of tags instead of applying direct to tag names
diff --git a/Navbars/Fullscreen_Overlay_Navigation/code/css/style.css b/Navbars/Fullscreen_Overlay_Navigation/code/css/style.css
@@ -11,11 +11,11 @@ body {
   background: #fdfdea;
   transition: all 2s ease;
 }
-h1 {
+.main--heading {
   font-size: 4rem;
   font-weight: 400;
 }
-h3 {
+.author--name {
   font-size: 1.5em;
 }
 .container .nav--container {
@@ -38,7 +38,7 @@ h3 {
   opacity: 0;
   transition: all 0.5s 1s ease;
 }
-.container .nav--container nav ul {
+.container .nav--container nav .nav--links--container {
   height: 100%;
   width: 100%;
   position: relative;
@@ -50,7 +50,7 @@ h3 {
   margin: auto;
   padding: 0;
 }
-.container .nav--container nav ul li {
+.container .nav--container nav .nav--links--container .nav--links {
   color: #fefefe;
   font-size: 2em;
   font-weight: 600;
@@ -60,7 +60,7 @@ h3 {
   overflow: hidden;
   opacity: 0;
 }
-.container .nav--container nav ul li::after {
+.container .nav--container nav .nav--links--container .nav--links::after {
   content: '';
   position: absolute;
   inset: 0 0 0 0;
@@ -71,37 +71,69 @@ h3 {
   height: 100%;
   background: #fdfdea;
 }
-.container .nav--container nav ul li:nth-child(1):hover {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(1):hover {
   color: #7c9c7a;
 }
-.container .nav--container nav ul li:nth-child(1):hover::after {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(1):hover::after {
   content: 'Home';
   width: 100%;
   left: 0;
   animation: afterAnime 0.3s forwards;
 }
-.container .nav--container nav ul li:nth-child(2):hover {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(2):hover {
   color: #7c9c7a;
 }
-.container .nav--container nav ul li:nth-child(2):hover::after {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(2):hover::after {
   content: 'Projects';
   width: 100%;
   transform: translateX(0%);
   animation: afterAnime 0.3s forwards;
 }
-.container .nav--container nav ul li:nth-child(3):hover {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(3):hover {
   color: #7c9c7a;
 }
-.container .nav--container nav ul li:nth-child(3):hover::after {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(3):hover::after {
   content: 'About';
   width: 100%;
   transform: translateX(0%);
   animation: afterAnime 0.3s forwards;
 }
-.container .nav--container nav ul li:nth-child(4):hover {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(4):hover {
   color: #7c9c7a;
 }
-.container .nav--container nav ul li:nth-child(4):hover::after {
+.container
+  .nav--container
+  nav
+  .nav--links--container
+  .nav--links:nth-child(4):hover::after {
   content: 'Contacts';
   width: 100%;
   transform: translateX(-100%);
@@ -227,16 +259,16 @@ h3 {
 .active .nav--container nav {
   opacity: 1;
 }
-.active .nav--container nav ul li:nth-child(1) {
+.active .nav--container nav .nav--links--container .nav--links:nth-child(1) {
   animation: opacityMove 0.5s 1.3s forwards;
 }
-.active .nav--container nav ul li:nth-child(2) {
+.active .nav--container nav .nav--links--container .nav--links:nth-child(2) {
   animation: opacityMove 0.5s 1.4s forwards;
 }
-.active .nav--container nav ul li:nth-child(3) {
+.active .nav--container nav .nav--links--container .nav--links:nth-child(3) {
   animation: opacityMove 0.5s 1.5s forwards;
 }
-.active .nav--container nav ul li:nth-child(4) {
+.active .nav--container nav .nav--links--container .nav--links:nth-child(4) {
   animation: opacityMove 0.5s 1.6s forwards;
 }
 @keyframes navAnimation {
diff --git a/Navbars/Fullscreen_Overlay_Navigation/code/index.html b/Navbars/Fullscreen_Overlay_Navigation/code/index.html
@@ -18,19 +18,19 @@
 
       <div class="nav--container">
         <nav id="nav">
-          <ul>
-            <li>Home</li>
-            <li>Projects</li>
-            <li>About</li>
-            <li>Contacts</li>
+          <ul class="nav--links--container">
+            <li class="nav--links">Home</li>
+            <li class="nav--links">Projects</li>
+            <li class="nav--links">About</li>
+            <li class="nav--links">Contacts</li>
           </ul>
         </nav>
       </div>
 
       <section class="content--container">
         <header>
-          <h1>This is an Article About Something</h1>
-          <h3>by Lorem Ipsum</h3>
+          <h1 class="main--heading">This is an Article About Something</h1>
+          <h3 class="author--name">by Lorem Ipsum</h3>
         </header>
 
         <article>
