updated card in contact section

nitinsooni · Oct 4, 2024 · 3db596b · 3db596b
1 parent b7da576
commit 3db596b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/css/media.css b/css/media.css
@@ -413,12 +413,13 @@
     }
 
     #contact .table .table-r .container .card.one .content .block-bottom .social-block {
-        padding: 2.2rem 0;
+        padding-top: 1.75rem;
+        grid-row-gap: 1.4rem;
     }
 
     #contact .table .table-r .container .card.one .content .block-bottom .social-block a {
         font-size: 1.1rem;
-        padding: .25rem .5rem;
+        padding: .5rem;
     }
 
     #contact .table .table-r .container .card.two p {
@@ -496,11 +497,11 @@
     }
 
     #contact .table .table-r .container .card.one .content .block-top .text a:hover {
-        text-decoration: underline;
+        color: white;
     }
 
     #contact .table .table-r .container .card.one .content .block-bottom a:hover {
-        text-decoration: underline;
+        color: white;
     }
 
     #contact .table .table-r .container .card:not(.front):hover {

diff --git a/css/style.css b/css/style.css
@@ -226,7 +226,7 @@ nav .nav-r a {
     font-size: 1rem;
     font-weight: 500;
     color: var(--gold);
-    background: rgba(0, 0, 0, 0);
+    background: transparent;
     padding: .75rem 1.5rem;
     border: 1px solid rgba(255, 255, 255, .24);
     border-radius: 12px;
@@ -394,7 +394,7 @@ nav .nav-r a {
     right: 2.5rem;
     font-size: 1.25rem;
     color: var(--gold);
-    background: rgba(0, 0, 0, 0);
+    background: transparent;
     padding: .7rem .85rem;
     border: 1px solid rgba(255, 255, 255, .24);
     border-radius: 12px;
@@ -608,7 +608,7 @@ nav .nav-r a {
     font-size: 1rem;
     font-weight: 500;
     color: var(--gold);
-    background: rgba(0, 0, 0, 0);
+    background: transparent;
     padding: .75rem 1.5rem;
     border: 1px solid rgba(255, 255, 255, .24);
     border-radius: 12px;
@@ -704,7 +704,7 @@ nav .nav-r a {
     font-size: 1rem;
     font-weight: 500;
     color: var(--gold);
-    background: rgba(0, 0, 0, 0);
+    background: transparent;
     padding: .75rem 1.5rem;
     border: 1px solid rgba(255, 255, 255, .24);
     border-radius: 12px;
@@ -749,7 +749,7 @@ nav .nav-r a {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 2.2rem 1.8rem;
+    padding: 2.25rem 1.8rem;
 }
 
 #contact .table .table-r .container .card.one .content .block-top img {
@@ -781,6 +781,7 @@ nav .nav-r a {
     line-height: 1.5;
     color: var(--text);
     text-decoration: none;
+    transition: color .3s;
 }
 
 #contact .table .table-r .container .card.one .content .block-bottom {
@@ -794,6 +795,7 @@ nav .nav-r a {
     line-height: 2;
     color: var(--text);
     text-decoration: none;
+    transition: color .3s;
 }
 
 #contact .table .table-r .container .card.one .content .block-bottom p {
@@ -805,16 +807,18 @@ nav .nav-r a {
 }
 
 #contact .table .table-r .container .card.one .content .block-bottom .social-block {
-    display: flex;
-    justify-content: space-around;
-    padding: 2rem .5rem;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    padding-top: 2rem;
+    grid-row-gap: 1.5rem;
 }
 
 #contact .table .table-r .container .card.one .content .block-bottom .social-block a {
     font-size: 1.25rem;
-    font-weight: 300;
     color: var(--text);
     padding: .75rem;
+    margin: auto;
     line-height: 0;
 }
 

diff --git a/index.html b/index.html
@@ -176,6 +176,7 @@ <h3>Nitin Soni</h3>
                                             <a href="https://www.linkedin.com/in/nitinsooni" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
                                             <a href="https://www.instagram.com/nitinsooni" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                                             <a href="https://github.com/nitinsooni" target="_blank"><i class="fa-brands fa-github"></i></a>
+                                            <a href="https://open.spotify.com/user/nenowwq76dkddt356pb6k8of9" target="_blank"><i class="fa-brands fa-spotify"></i></a>
                                         </div>
                                     </div>
                                 </div>