From 2b188e8ec7aadccece2f75b82bc09efc6979e94d Mon Sep 17 00:00:00 2001 From: Himanshu7980-code Date: Mon, 21 Oct 2024 19:12:38 +0530 Subject: [PATCH] Changed the css for better look --- styles.css | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/styles.css b/styles.css index 5179299..03d53e4 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Prociono&display=swap'); + /* Reset styles */ * { @@ -128,6 +130,8 @@ body { height: calc(100vh - 60px); } + + .badge img { width: 250px; height: 210px; /* reduce the height of badge image for better user experience */ @@ -172,7 +176,6 @@ header { } nav { - font-size: 18px; display: flex; align-items: center; } @@ -186,7 +189,8 @@ nav { } .nav-links ul li { - margin-left: 20px; + margin-left: 25px; + font-family: "Prociono"; } ul li a { @@ -196,7 +200,7 @@ nav { align-items: center; text-decoration: none; color: #dfe1e5; - font-size: 18px; + font-size: 22px; transition: color 0.3s ease; } @@ -268,6 +272,7 @@ nav { .badge-details { text-align: center; margin-top: 15px; /* Adjust spacing */ + font-family: "Prociono"; } .badge-details h2 { @@ -523,12 +528,9 @@ footer a { background: linear-gradient(135deg, #1c1f24, #2d3b45, #000000); } -.badges-container { - display: grid; - grid-template-columns: repeat(3,1fr); /* Three equal-width columns */ - gap: 30px; /* Space between cards */ - justify-items: center; - align-items: center; +.badge-container:hover { + box-shadow: 0px 0px 30px beige; + transition: all 0.2s; } .badge-card {