diff --git a/css/media.css b/css/media.css
index 50be35d..cfdf70b 100644
--- a/css/media.css
+++ b/css/media.css
@@ -433,6 +433,13 @@
left: 15.8px; /*31.8 for 20rem width*/
}
+ #contact .table .table-r .container .card .swap-button {
+ bottom: 1.2rem;
+ right: 1rem;
+ font-size: 1rem;
+ padding: .5rem .6rem;
+ }
+
#contact .table .table-r .container .card.one .content .block-top {
flex-direction: column;
justify-content: center;
diff --git a/css/style.css b/css/style.css
index 633744b..a2c7067 100644
--- a/css/style.css
+++ b/css/style.css
@@ -341,7 +341,7 @@ nav .nav-overlay .container .nav-link {
text-decoration: none;
display: grid;
grid-template-columns: 2rem auto;
- gap: 1rem;
+ gap: .8rem;
margin: 2.5rem 0;
}
@@ -850,6 +850,19 @@ nav .nav-overlay .container .nav-link .text {
pointer-events: none;
}
+#contact .table .table-r .container .card .swap-button {
+ position: absolute;
+ bottom: 1.5rem;
+ right: 1.25rem;
+ font-size: 1.1rem;
+ color: var(--gold);
+ background: transparent;
+ padding: .55rem .7rem;
+ border: 1px solid rgba(255, 255, 255, .24);
+ border-radius: 12px;
+ backdrop-filter: blur(24px);
+}
+
#contact .table .table-r .container .card.one .content i {
padding-right: .5rem;
}
diff --git a/index.html b/index.html
index 95cf4ef..4a1dc58 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
+
Nitin Soni's Digital Space
@@ -194,12 +195,14 @@ Nitin Soni
+
+
diff --git a/js/index.js b/js/index.js
index 65c5c80..39af09a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -94,6 +94,12 @@ function swapCards(selectedCard) {
frontCard = selectedCard;
}
+// Swap cards when user click swap-card button
+function swapButton() {
+ event.stopPropagation();
+ swapCards(frontCard === cardOne ? cardTwo : cardOne);
+}
+
// Swap cards when user horizontal swipe on front card
let touchStartX = 0;
let touchEndX = 0;
