From adae2a7fd77c171653a44fe3e8fdf640a8adc1a1 Mon Sep 17 00:00:00 2001 From: Aniket Date: Fri, 20 Oct 2023 11:45:51 +0530 Subject: [PATCH] improved the card and added more styles --- index.html | 230 ++++++++++++++++++++++++++--------------------------- style.css | 56 ++++++++----- 2 files changed, 152 insertions(+), 134 deletions(-) diff --git a/index.html b/index.html index e0b1c53..791a7a9 100644 --- a/index.html +++ b/index.html @@ -1,173 +1,173 @@ - - Add your Card - - - - - - -
-

Add Your Card

-
-
-
-

Aparna Dubey

+ + Add your Card + + + + + + + + +
+

Add Your Card

+
+
+
+
+

Aparna Dubey

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
-
-

Umar Farouk

+
+
+
+

Umar Farouk

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
-
-

Mahaprasad Prusty

+
+
+
+

Mahaprasad Prusty

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
- -
-
-

Vaishnavi Gupta

+
+
+

Vaishnavi Gupta

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
-
-

Nishant Jadhav

+
+
+
+

Nishant Jadhav

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
-
-

Niraj Kumar

+
+
+
+

Niraj Kumar

+
+
- GitHub Proflie + + GitHub Proflie
- Project Repo + + Project Repo
- -
-
-

Atharva Sonawane

+
+
+

Atharva Sonawane

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
-
-

Aditi Bansal

+
+
+
+

Aditi Bansal

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
-
-

Nishant Dubey

+
+
+
+

Nishant Dubey

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
- -
-
-

Saqib Patel

+
+
+

Saqib Patel

+
+
- GitHub Profile + + GitHub Profile
- Project Repo + + Project Repo
- - +
+ + \ No newline at end of file diff --git a/style.css b/style.css index 6fa7dbe..57ffc6c 100644 --- a/style.css +++ b/style.css @@ -1,34 +1,43 @@ +@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@400;600&display=swap'); + body { background: rgb(90, 2, 93); background: linear-gradient(0deg, rgba(90, 2, 93, 1) 9%, rgba(13, 1, 32, 1) 90%, rgba(3, 1, 25, 1) 100%); - font-family: 'Roboto Slab', serif; } .main { - font-family: 'EB Garamond', serif; font-size: larger; font-weight: bolder; color: aliceblue; display: flex; align-items: center; justify-content: center; + font-family: 'Playpen Sans', cursive; } .main h1 { animation: color-animation 5s infinite; - + font-family: 'Playpen Sans', cursive; } .cardholder { + width: 100%; + height: 100%; display: flex; - justify-content: space-between; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; } .card { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: column; width: 250px; - height: 200px; + height: 300px; padding: 20px; margin: 20px; border: 6px solid rgb(58, 33, 33); @@ -48,15 +57,23 @@ body { } .name { - font-family: 'Libre Baskerville', serif; + min-height: 5rem; + font-family: 'Playpen Sans', cursive; padding: 15px; } +i { + font-size: 25px; + margin-bottom: 1rem; +} + a { text-decoration: none; color: #090101; font-weight: bolder; font-size: large; + font-family: 'Playpen Sans', cursive; + } .prof { @@ -66,7 +83,7 @@ a { .prof:hover { text-shadow: 0.5px 0.5px 0.2px rgb(91, 1, 225); transform: scale(1.05); - color: #FF4500; + color: #7300ff; } .repo { @@ -79,57 +96,58 @@ a { .repo:hover { text-shadow: 0.5px 0.5px 0.2px rgb(91, 1, 225); transform: scale(1.05); - color: #FF6347; + color: #7300ff; } .links { padding-top: 5px; + height: 25%; } @keyframes border-animation { 0% { - border-color: rgb(160, 140, 212); + border-color: rgb(160, 140, 212); } 20% { - border-color: rgb(114, 94, 163); + border-color: rgb(114, 94, 163); } 40% { - border-color: rgb(83, 67, 113); + border-color: rgb(83, 67, 113); } 60% { - border-color: rgb(139, 107, 180); + border-color: rgb(139, 107, 180); } 80% { - border-color: rgb(255, 255, 255); + border-color: rgb(255, 255, 255); } 100% { - border-color: rgb(182, 146, 227); + border-color: rgb(182, 146, 227); } } @keyframes color-animation { 0% { - color: rgb(215, 192, 217); + color: rgb(215, 192, 217); } 25% { - color: rgb(230, 171, 244); + color: rgb(230, 171, 244); } 50% { - color: rgb(205, 140, 235); + color: rgb(205, 140, 235); } 75% { - color: rgb(110, 82, 171); + color: rgb(110, 82, 171); } 100% { - color: rgb(218, 160, 247); + color: rgb(218, 160, 247); } } \ No newline at end of file