organize css

Author: carlosjorger

index.html

@@ -58,6 +58,9 @@ <h2 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer<
   <section>
     <article id="work">
       <h2 class="subtitle reveal">These are my github repositories:</h2>
+      <div class="card-project">
+
+      </div>
       <ul>
         <li class="reveal">
           <p><a class="work-link" href="https://github.com/CarlosJorgeR/openEcommerce" target="_blank"
@@ -77,10 +80,10 @@ <h2 class="subtitle reveal">These are my github repositories:</h2>
       <div id="contact" class="contacts reveal">
         <h1 class="subtitle contacts-item">Contact</h1>
         <div class="contacts-item">
-          <a href="mailto:rodriguezcuelloc@gmail.com"><i class="fab fa-google fa-2xl"></i></a>
-          <a href="https://github.com/CarlosJorgeR"><i class="fab fa-github fa-2xl"></i></a>
-          <a href="https://www.linkedin.com/in/cjrcuello/"><i class="fab fa-linkedin fa-2xl"></i></a>
-          <a href="https://twitter.com/CarlosJorgeRod3"><i class="fab fa-twitter fa-2xl"></i></a>
+          <a class="icon-link" href="mailto:rodriguezcuelloc@gmail.com"><i class="fab fa-google fa-2xl"></i></a>
+          <a class="icon-link" href="https://github.com/CarlosJorgeR"><i class="fab fa-github fa-2xl"></i></a>
+          <a class="icon-link" href="https://www.linkedin.com/in/cjrcuello/"><i class="fab fa-linkedin fa-2xl"></i></a>
+          <a class="icon-link" href="https://twitter.com/CarlosJorgeRod3"><i class="fab fa-twitter fa-2xl"></i></a>
         </div>
       </div>
     </article>

styles.css

@@ -6,6 +6,7 @@
   scroll-behavior: smooth;
 }
 
+/* || GENERAL STYLES */
 body {
   margin: 0;
 }
@@ -54,20 +55,6 @@ article {
   padding: 2.5em;
 }
 
-.footer {
-  color: var(--default-font-color);
-  font-family: var(--default-font-family);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-}
-
-.footer-item {
-  margin: 0 auto;
-  text-align: center;
-}
-
 ul {
   list-style-type: circle;
 }
@@ -84,6 +71,49 @@ i {
   color: aqua;
 }
 
+nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  background-color: rgba(9, 3, 15, 0.9);
+
+}
+
+/* || UTILITIES */
+
+.reveal {
+  opacity: 0;
+  transition: all 1s ease-in;
+  transform: translate(0vh, 3vh);
+}
+
+.reveal.active {
+  opacity: 1;
+  transform: translate(0vh, 0vh);
+}
+
+.br-show {
+  display: none;
+}
+
+
+/* || SITEWIDE */
+
+.footer {
+  color: var(--default-font-color);
+  font-family: var(--default-font-family);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+.footer-item {
+  margin: 0 auto;
+  text-align: center;
+}
+
 /* Classes */
 .presentation {
   color: rgb(148, 112, 220);
@@ -110,17 +140,7 @@ i {
   text-align: center;
 }
 
-.reveal {
-  opacity: 0;
-  transition: all 1s ease-in;
-  transform: translate(0vh, 3vh);
-}
 
-.reveal.active {
-  opacity: 1;
-  transform: translate(0vh, 0vh);
-
-}
 
 /* Ids */
 #presentation-title {
@@ -194,34 +214,20 @@ i {
 }
 
 /* selected link */
-a:link:has(i) {
+.icon-link{
   background-image: none;
 }
 
-a:link>i {
+.icon-link:link>i {
   background-size: 100% 100%;
   transition: all 0.5s ease-in-out;
-
 }
 
-a:hover>i {
+.icon-link:hover>i {
   color: black;
   text-shadow: 0px 0px 15px aqua;
 }
 
-.br-show {
-  display: none;
-}
-
-nav {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9999;
-  background-color: rgba(9, 3, 15, 0.9);
-
-}
-
 .menu {
   padding: 0.5em;
   display: flex;
@@ -253,9 +259,11 @@ nav {
   text-decoration: none;
   background-image: none;
 }
-.menu{
+
+.menu {
   margin: 0;
 }
+
 .menu>li {
   align-self: center;
 }