From f58ba0075d1ea8eb141d0d4b9dc90e3f99a8a618 Mon Sep 17 00:00:00 2001 From: 992manav Date: Tue, 3 Sep 2024 11:38:38 +0530 Subject: [PATCH] Implement responsive design --- style/style.css | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/style/style.css b/style/style.css index a77be19..5442a10 100644 --- a/style/style.css +++ b/style/style.css @@ -64,7 +64,7 @@ section { flex-direction: row; align-items: center; justify-content: space-between; - text-decoration:none; + text-decoration: none; } #navbar-link-list-container { @@ -104,7 +104,7 @@ section { transition: color 0.3s ease; } .navbar a::after { - content: ''; + content: ""; position: absolute; width: 100%; height: 2px; @@ -200,7 +200,7 @@ section { top: -75px; transition: transform 0.2s; background-color: #fff; - opacity:98%; + opacity: 98%; } /*Banner section styling*/ @@ -406,12 +406,12 @@ section { box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.088); width: 325px; text-align: center; - margin: 50px 20px; - padding: 20px; + margin: 25px 10px; + padding: 10px; border-radius: 25px; background-color: #fff; - height: 400px; - transition: all 0.5s ease; + min-height: 400px; + transition: all 0.4s ease; position: relative; } @@ -427,27 +427,29 @@ section { .card-details h1 { font-family: "Space Mono", cursive; text-transform: capitalize; + font-size: 2rem; } .card-details h5 { - font-size: 15px; + font-size: 1rem; + font-weight: 500; } .card-details p { font-family: "Space Mono", cursive; - font-size: 15px; } .card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); - scale:1.05; + scale: 1.05; transition: 1s ease !important ; background: linear-gradient(145deg, #f0f0f0, #ffffff); } -.card::before, .card::after { - content: ''; - position: absolute; +.card::before, +.card::after { + content: ""; + position: relative; width: 0; height: 0; border: 2px solid transparent; @@ -469,13 +471,14 @@ section { border-right-color: #c87cee; } -.card:hover::before, .card:hover::after { +.card:hover::before, +.card:hover::after { width: 100%; height: 100%; } .social-icon a { - font-size: 1.5rem; + font-size: 1rem; width: 3rem; height: 3rem; color: rgb(10, 3, 50); @@ -555,14 +558,14 @@ section { } /*help section style*/ .contribute { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .contribute-container { padding: 50px; - margin-bottom: 40PX; + margin-bottom: 40px; width: 800px; text-align: center; align-items: center;