A partial stylesheet has been created for independent components.

Author: Dyrits

index.html

@@ -27,7 +27,9 @@ <h1>Hi, I'm <span>Solano Milan Diaz</span>, a Web Developer.</h1>
                     I'm a Web Developer, I love to create beautiful and functional websites. <br>
                     [This part can be filled with additional information.]
                 </p>
-                <a href="#" id="cv-link" target="_blank"><span id="cv-link-text">Download CV</span><span id="cv-link-icon"><i class="fas fa-download"></i></span></a>
+                <div class="cv">
+                    <a href="#" class="cv-link" target="_blank"><span class="cv-link-text">Download CV</span><span class="cv-link-icon"><i class="fas fa-download"></i></span></a>
+                </div>
             </article>
         </section>
     </header>
@@ -48,10 +50,10 @@ <h4>Information About me</h4>
                         Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                         Harum non necessitatibus deleniti eum soluta.
                     </p>
-                    <div class="btn-con">
-                        <a href="#" class="main-btn">
-                            <span class="btn-text">Download CV</span>
-                            <span class="btn-icon"><i class="fas fa-download"></i></span>
+                    <div class="cv">
+                        <a href="#" class="cv-link">
+                            <span class="cv-link-text">Download CV</span>
+                            <span class="cv-link-icon"><i class="fas fa-download"></i></span>
                         </a>
                     </div>
                 </div>

styles/_components.scss

@@ -0,0 +1,37 @@
+.cv {
+  display: flex;
+  align-self: flex-start;
+  &-link {
+    border-radius: 30px;
+    color: inherit;
+    font-weight: 600;
+    border: 1px solid var(--color-secondary);
+    display: flex;
+    align-self: flex-start;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    &-text { padding: 0 2rem; }
+    &-icon {
+      background-color: var(--color-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      padding: 1rem;
+    }
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      transform: translateX(100%);
+      transition: var(--transition);
+      background-color: var(--color-secondary);
+      z-index: -5;
+    }
+    &:hover:before { transform: translateX(0); }
+  }
+}

styles/_header.scss

@@ -49,38 +49,4 @@
       line-height: 2rem;
     }
   }
-}
-
-#cv-link {
-  border-radius: 30px;
-  color: inherit;
-  font-weight: 600;
-  border: 1px solid var(--color-secondary);
-  display: flex;
-  align-self: flex-start;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  &-text { padding: 0 2rem; }
-  &-icon {
-    background-color: var(--color-secondary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    padding: 1rem;
-  }
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    transform: translateX(100%);
-    transition: var(--transition);
-    background-color: var(--color-secondary);
-    z-index: -5;
-  }
-  &:hover:before { transform: translateX(0); }
-}
+}

styles/styles.css

@@ -57,6 +57,7 @@ section.container {
 
 @import './controls';
 @import './header';
+@import './components';
 
 /*About*/
 .about-container {