Skip to content

Commit 893653b

Browse files
SayedRaziburSayedRazibur
authored
First commit
0 parents commit 893653b

File tree

1 file changed

+339
-0
lines changed

1 file changed

+339
-0
lines changed

‎style.css‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
/* Reset CSS */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Be Vietnam Pro", sans-serif;
7+
transition: all 0.2s ease-in-out; /* Smooth transition for all elements */
8+
}
9+
10+
html:focus-within {
11+
scroll-behavior: smooth;
12+
}
13+
14+
html,
15+
body {
16+
height: 100%;
17+
min-height: 100%;
18+
overflow-x: hidden;
19+
}
20+
21+
body {
22+
line-height: 1.5;
23+
text-rendering: optimizeSpeed;
24+
}
25+
26+
img,
27+
picture,
28+
video,
29+
canvas,
30+
svg {
31+
display: block;
32+
max-width: 100%;
33+
}
34+
35+
input,
36+
button,
37+
textarea,
38+
select {
39+
font: inherit;
40+
}
41+
42+
a {
43+
text-decoration: none;
44+
color: inherit;
45+
}
46+
47+
p,
48+
h1,
49+
h2,
50+
h3,
51+
h4,
52+
h5,
53+
h6 {
54+
overflow-wrap: break-word;
55+
}
56+
57+
ul,
58+
ol {
59+
list-style: none;
60+
}
61+
62+
table {
63+
border-collapse: collapse;
64+
border-spacing: 0;
65+
}
66+
67+
:root {
68+
/* Color Variables */
69+
--clr-primary: hsl(12, 88%, 59%);
70+
--clr-primary-light: hsl(12, 88%, 70%);
71+
--clr-background: hsl(0, 0%, 15%);
72+
--clr-text-dark: hsl(0, 48%, 37%);
73+
--clr-text-light: hsl(0, 0%, 100%);
74+
--clr-accent: hsl(228, 60%, 24%);
75+
76+
/* Font Families */
77+
--ff-primary: "Be Vietnam Pro", sans-serif;
78+
--ff-body: var(--ff-primary);
79+
--ff-heading: var(--ff-primary);
80+
81+
/* Font Weights */
82+
--fw-regular: 400;
83+
--fw-semi-bold: 500;
84+
--fw-bold: 700;
85+
86+
/* Font Sizes */
87+
--fs-300: 0.8125rem;
88+
--fs-400: 0.875rem;
89+
--fs-500: 0.9375rem;
90+
--fs-600: 1rem;
91+
--fs-700: 1.875rem;
92+
--fs-800: 2.5rem;
93+
--fs-900: 3rem;
94+
95+
--fs-button: var(--fs-300);
96+
--fs-body: var(--fs-400);
97+
--fs-nav: var(--fs-500);
98+
--fs-secondary-heading: var(--fs-700);
99+
--fs-primary-heading: var(--fs-900);
100+
}
101+
102+
/* Utility Classes */
103+
104+
/* Color Utilities */
105+
.clr-primary {
106+
color: var(--clr-primary);
107+
}
108+
.clr-background {
109+
color: var(--clr-background);
110+
}
111+
.clr-text-dark {
112+
color: var(--clr-text-dark);
113+
}
114+
.clr-text-light {
115+
color: var(--clr-text-light);
116+
}
117+
.clr-accent {
118+
color: var(--clr-accent);
119+
}
120+
121+
/* Font Weight Utilities */
122+
.fw-bold {
123+
font-weight: var(--fw-bold);
124+
}
125+
.fw-semi-bold {
126+
font-weight: var(--fw-semi-bold);
127+
}
128+
.fw-regular {
129+
font-weight: var(--fw-regular);
130+
}
131+
132+
/* Font Size Utilities */
133+
.fs-primary-heading {
134+
font-size: var(--fs-primary-heading);
135+
line-height: 1.1em;
136+
}
137+
.fs-secondary-heading {
138+
font-size: var(--fs-secondary-heading);
139+
line-height: 1.1em;
140+
}
141+
142+
.fs-300 {
143+
font-size: var(--fs-300);
144+
}
145+
.fs-400 {
146+
font-size: var(--fs-400);
147+
}
148+
.fs-500 {
149+
font-size: var(--fs-500);
150+
}
151+
.fs-600 {
152+
font-size: var(--fs-600);
153+
}
154+
155+
/* Container Utility */
156+
.container {
157+
width: 100%;
158+
padding-inline: 1.5rem;
159+
margin-inline: auto;
160+
}
161+
162+
@media (min-width: 640px) {
163+
.container {
164+
max-width: 64rem; /* 640px */
165+
}
166+
}
167+
@media (min-width: 768px) {
168+
.container {
169+
max-width: 76.8rem; /* 768px */
170+
}
171+
}
172+
@media (min-width: 1024px) {
173+
.container {
174+
max-width: 102.4rem; /* 1024px */
175+
}
176+
}
177+
@media (min-width: 1280px) {
178+
.container {
179+
max-width: 128rem; /* 1280px */
180+
}
181+
}
182+
@media (min-width: 1536px) {
183+
.container {
184+
max-width: 153.6rem; /* 1536px */
185+
}
186+
}
187+
188+
/* Grid Utility Classes */
189+
/* Default: 1-Column Grid for Small Screens */
190+
.grid-2,
191+
.grid-3,
192+
.grid-4,
193+
.grid-5,
194+
.grid-6 {
195+
display: grid;
196+
grid-template-columns: 1fr; /* 1 column for mobile */
197+
gap: 1.5rem;
198+
}
199+
200+
/* 2, 3 Columns for Medium Screens (768px) */
201+
@media (min-width: 768px) {
202+
.grid-2 {
203+
grid-template-columns: repeat(2, 1fr);
204+
}
205+
.grid-3 {
206+
grid-template-columns: repeat(3, 1fr);
207+
}
208+
.grid-4 {
209+
grid-template-columns: repeat(
210+
3,
211+
1fr
212+
); /* Adjust to 3 columns on medium screens */
213+
}
214+
.grid-5 {
215+
grid-template-columns: repeat(
216+
3,
217+
1fr
218+
); /* Adjust to 3 columns on medium screens */
219+
}
220+
.grid-6 {
221+
grid-template-columns: repeat(
222+
3,
223+
1fr
224+
); /* Adjust to 3 columns on medium screens */
225+
}
226+
}
227+
228+
/* 3, 4, 5, or 6 Columns for Larger Screens */
229+
@media (min-width: 1024px) {
230+
.grid-4 {
231+
grid-template-columns: repeat(4, 1fr);
232+
}
233+
.grid-5 {
234+
grid-template-columns: repeat(5, 1fr);
235+
}
236+
.grid-6 {
237+
grid-template-columns: repeat(6, 1fr);
238+
}
239+
}
240+
241+
/* Button Utility Class */
242+
.btn {
243+
display: inline-block;
244+
padding: 0.8rem 1.6rem;
245+
font-size: 1.4rem;
246+
font-weight: var(--fw-semi-bold);
247+
font-family: var(--ff-primary);
248+
color: var(--clr-background);
249+
background-color: var(--clr-primary);
250+
border: none;
251+
border-radius: 0.4rem;
252+
cursor: pointer;
253+
text-align: center;
254+
text-decoration: none;
255+
transition: background-color 0.3s ease, transform 0.3s ease;
256+
}
257+
258+
.btn:hover {
259+
background-color: var(--clr-primary-light);
260+
}
261+
262+
.btn:active {
263+
background-color: var(--clr-primary);
264+
transform: scale(0.98);
265+
}
266+
267+
.btn:disabled {
268+
background-color: var(--clr-text-light);
269+
cursor: not-allowed;
270+
opacity: 0.7;
271+
}
272+
273+
.btn:focus {
274+
outline: 2px solid var(--clr-primary-light);
275+
outline-offset: 2px;
276+
}
277+
278+
/* Base Font Size for Small Screens */
279+
html {
280+
font-size: 62.5%; /* 62.5% = 10px (1rem = 10px) */
281+
}
282+
283+
/* Media Queries */
284+
285+
/* Small screens: 640px */
286+
@media (min-width: 640px) {
287+
.btn {
288+
padding: 0.9rem 1.7rem;
289+
font-size: 1.5rem;
290+
}
291+
}
292+
293+
/* Medium screens: 768px */
294+
@media (min-width: 768px) {
295+
html {
296+
font-size: 68.75%; /* 68.75% = 11px */
297+
}
298+
299+
.btn {
300+
padding: 1rem 1.8rem;
301+
font-size: 1.6rem;
302+
}
303+
}
304+
305+
/* Large screens: 1024px */
306+
@media (min-width: 1024px) {
307+
html {
308+
font-size: 75%; /* 75% = 12px */
309+
}
310+
311+
.btn {
312+
padding: 1.1rem 2rem;
313+
font-size: 1.7rem;
314+
}
315+
}
316+
317+
/* Extra-large screens: 1280px */
318+
@media (min-width: 1280px) {
319+
html {
320+
font-size: 81.25%; /* 81.25% = 13px */
321+
}
322+
323+
.btn {
324+
padding: 1.2rem 2.1rem;
325+
font-size: 1.8rem;
326+
}
327+
}
328+
329+
/* 2XL screens: 1536px */
330+
@media (min-width: 1536px) {
331+
html {
332+
font-size: 87.5%; /* 87.5% = 14px */
333+
}
334+
335+
.btn {
336+
padding: 1.3rem 2.2rem;
337+
font-size: 1.9rem;
338+
}
339+
}

0 commit comments

Comments
 (0)