From d003a1bbf47ff57278a3470752fe105631c1a530 Mon Sep 17 00:00:00 2001 From: Jasleen1210 <05kaur.j@gmail.com> Date: Tue, 9 Jul 2024 20:12:42 +0530 Subject: [PATCH 1/2] Issue #990 Redesgining wrapper section -> shortened counter time -> improved the font sizes color and background of the section --- counter.css | 48 ++++++++++++++++++++++++++---------------------- index.html | 24 ++++++++++++++---------- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/counter.css b/counter.css index c1fab7fd..699a388e 100644 --- a/counter.css +++ b/counter.css @@ -1,70 +1,74 @@ - - - /* counter */ + /* counter */ .wrapper { - - width: 80%; - + background-image: url('./img/img1.jpeg'); + /* background: no-repeat fill; */ + width: 100vw; margin-left: auto; margin-right: auto; align-items: center; display: flex; - justify-content: space-between; + justify-content: space-evenly; } .countitem { width: 28vmin; - height: 28vmin; + height: 33vmin; display: flex; flex-direction: column; justify-content: space-around; padding: 1em 0; font-size: 16px; border-width: 0.5px ; - border-color: solid purple; - border-radius: 0.5em; - background: linear-gradient(white,rgb(153, 139, 251)); - border-bottom: 10px solid #40349c; + /* border-color: solid purple; */ + /* border-radius: 0.5em; */ + /* background: linear-gradient(white,rgb(153, 139, 251)); */ + /* border-bottom: 10px solid #40349c; */ } .countitem i { - color: #06006e; + color: #052905; font-size: 2.5em; text-align: center; } span.num { - color: #32316a; + color: #052905; display: grid; place-items: center; font-weight: 600; font-size: 3em; } span.text { - color: #6c2121; - font-size: 1.2em; + font-weight: bold; + color: #0f0f0f; + font-size: 1.5rem; text-align: center; padding: 0em 00em; font-weight: 400; margin-bottom: 1em; line-height: 0; } + @media screen and (max-width: 1024px) { - .wrapper { + /* .wrapper { width: 85vw; - } + } */ .countitem{ height: 26vmin; width: 26vmin; font-size: 12px; } } - @media screen and (max-width: 768px) { + @media screen and (max-width: 900px) { .wrapper { - width: 90vw; + /* width: 90vw; */ + background-image: none; + flex-direction: column; flex-wrap: wrap; - gap: 30px; + gap: 10px; } .countitem { + background-color: antiquewhite; width: calc(50% - 40px); + margin: 3px; height: 30vmin; font-size: 14px; } @@ -74,7 +78,7 @@ gap: 15px; } .countitem { - width: 100%; + width: 90%; height: 25vmin; font-size: 8px; } diff --git a/index.html b/index.html index e614c993..3688d159 100644 --- a/index.html +++ b/index.html @@ -427,17 +427,17 @@