CTA buttons

laistdomiciano · Jul 9, 2024 · 90d5276 · 90d5276
1 parent 88cd4ed
commit 90d5276
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 5 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/portfolio.iml b/.idea/portfolio.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/assets/CV.pdf b/assets/CV.pdf
diff --git a/assets/profile.png b/assets/profile.png
diff --git a/index.html b/index.html
@@ -117,7 +117,7 @@ <h2 class="section-title">About Me</h2>
           <div class="about-wrapper__image">
             <img
               class="img-fluid"
-              src="./assets/profile.jpeg"
+              src="./assets/profile.png"
               alt="Profile Image"
               width="450"
               height="350"
@@ -141,10 +141,8 @@ <h2 class="section-title">About Me</h2>
                 I am eager to apply my skills to innovative software solutions.
               </p>
             <span class="about-wrapper__cta">
-              <a href="https://github.com/laistdomiciano" class="cta-btn cta-btn--resume">View My GitHub</a>
-            </span>
-            <span class="about-wrapper__cta">
-              <a href="assets/CV" class="cta-btn cta-btn--resume">Download My CV</a>
+            <a href="https://github.com/laistdomiciano" class="cta-btn cta-btn--resume">View My GitHub</a>
+            <a href="/assets/CV.pdf" class="cta-btn cta-btn--resume" download>Download My CV</a>
             </span>
           </div>
         </div>

diff --git a/style/sections/_about.scss b/style/sections/_about.scss
@@ -23,6 +23,31 @@
       grid-template-columns: 1fr;
     }
 
+    .about-wrapper__cta a {
+  display: inline-block;
+  width: 200px; /* Set a fixed width for the buttons */
+  text-align: center; /* Center the text inside the buttons */
+  padding: 10px; /* Adjust padding as needed */
+  margin-right: 10px; /* Adjust spacing between buttons */
+  border: 2px solid white; /* Ensure borders are consistent */
+}
+
+    .about-wrapper__cta a:last-child {
+  margin-right: 0;
+}
+
+    .cta-btn--resume {
+  background-color: #fff; /* Set the background color */
+  color: #000; /* Set the text color */
+  border-radius: 5px; /* Add border radius for rounded corners */
+  text-decoration: none; /* Remove underline from links */
+}
+
+    .cta-btn--resume:hover {
+  background-color: #000; /* Set hover background color */
+  color: #fff; /* Set hover text color */
+}
+
     &__image {
       display: flex;
       height: 100%;