Skip to content

Commit 647ac2f

Browse files
namitha2526namitha2526
authored
Refactor CSS styles for consistency and clarity
1 parent 43ad7c3 commit 647ac2f

File tree

1 file changed

+201
-43
lines changed

1 file changed

+201
-43
lines changed

‎frontend/style.css‎

Lines changed: 201 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,220 @@
1-
body {
2-
margin: 0;
3-
font-family: Arial, sans-serif;
4-
background: #f5f7fa;
1+
*{
2+
margin:0;
3+
padding:0;
4+
box-sizing:border-box;
5+
font-family:'Poppins', sans-serif;
56
}
67

7-
.navbar {
8-
background: #111;
9-
color: white;
10-
padding: 15px 30px;
11-
display: flex;
12-
justify-content: space-between;
13-
align-items: center;
8+
body{
9+
background:#f5f7fb;
10+
color:#333;
1411
}
1512

16-
.navbar a {
17-
color: white;
18-
margin-left: 15px;
19-
text-decoration: none;
13+
/* NAVBAR */
14+
15+
.navbar{
16+
display:flex;
17+
justify-content:space-between;
18+
align-items:center;
19+
padding:18px 60px;
20+
background:white;
21+
box-shadow:0 2px 8px rgba(0,0,0,0.05);
22+
}
23+
24+
.logo{
25+
font-size:22px;
26+
font-weight:600;
27+
color:#4f46e5;
28+
}
29+
30+
.navbar nav a{
31+
margin:0 15px;
32+
text-decoration:none;
33+
color:#555;
34+
font-weight:500;
35+
}
36+
37+
.navbar nav a:hover{
38+
color:#4f46e5;
39+
}
40+
41+
.nav-actions button{
42+
margin-left:10px;
43+
padding:8px 16px;
44+
border:none;
45+
border-radius:6px;
46+
cursor:pointer;
47+
}
48+
49+
.login{
50+
background:#eee;
51+
}
52+
53+
.submit-btn{
54+
background:#4f46e5;
55+
color:white;
56+
}
57+
58+
/* HERO */
59+
60+
.hero{
61+
height:420px;
62+
display:flex;
63+
align-items:center;
64+
justify-content:center;
65+
text-align:center;
66+
background:linear-gradient(120deg,#6366f1,#4f46e5);
67+
color:white;
68+
}
69+
70+
.hero h1{
71+
font-size:40px;
72+
margin-bottom:15px;
73+
}
74+
75+
.hero p{
76+
max-width:600px;
77+
margin:auto;
78+
margin-bottom:20px;
79+
opacity:0.9;
80+
}
81+
82+
.hero-actions button{
83+
padding:12px 22px;
84+
border:none;
85+
border-radius:8px;
86+
margin:5px;
87+
cursor:pointer;
88+
font-weight:500;
89+
}
90+
91+
.primary{
92+
background:white;
93+
color:#4f46e5;
2094
}
2195

22-
.hero {
23-
padding: 60px;
24-
background: linear-gradient(to right, #4facfe, #00f2fe);
25-
color: white;
96+
.secondary{
97+
background:transparent;
98+
border:1px solid white;
99+
color:white;
26100
}
27101

28-
.hero button {
29-
padding: 10px 20px;
30-
border: none;
31-
background: black;
32-
color: white;
33-
cursor: pointer;
102+
/* SEARCH */
103+
104+
.search-section{
105+
display:flex;
106+
justify-content:center;
107+
gap:10px;
108+
padding:40px;
109+
}
110+
111+
.search-section input,
112+
.search-section select{
113+
padding:10px;
114+
border-radius:6px;
115+
border:1px solid #ddd;
116+
width:200px;
117+
}
118+
119+
/* ROADMAPS */
120+
121+
.roadmaps{
122+
padding:40px 80px;
123+
}
124+
125+
.roadmaps h2{
126+
margin-bottom:25px;
127+
}
128+
129+
.roadmap-grid{
130+
display:grid;
131+
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
132+
gap:20px;
133+
}
134+
135+
.card{
136+
background:white;
137+
padding:20px;
138+
border-radius:10px;
139+
box-shadow:0 3px 10px rgba(0,0,0,0.05);
140+
transition:0.3s;
34141
}
35142

36-
.section {
37-
padding: 40px;
143+
.card:hover{
144+
transform:translateY(-5px);
38145
}
39146

40-
.cards {
41-
display: grid;
42-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
43-
gap: 20px;
147+
.card h3{
148+
margin-bottom:10px;
44149
}
45150

46-
.card {
47-
background: white;
48-
padding: 20px;
49-
border-radius: 10px;
50-
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
151+
.tag{
152+
display:inline-block;
153+
background:#eef2ff;
154+
color:#4f46e5;
155+
padding:4px 8px;
156+
border-radius:5px;
157+
font-size:12px;
158+
margin-bottom:8px;
51159
}
52160

53-
input, textarea {
54-
width: 100%;
55-
padding: 10px;
56-
margin: 10px 0;
161+
/* MODAL */
162+
163+
.modal{
164+
display:none;
165+
position:fixed;
166+
top:0;
167+
left:0;
168+
width:100%;
169+
height:100%;
170+
background:rgba(0,0,0,0.4);
171+
justify-content:center;
172+
align-items:center;
173+
}
174+
175+
.modal-content{
176+
background:white;
177+
padding:30px;
178+
border-radius:10px;
179+
width:400px;
180+
}
181+
182+
.modal-content input,
183+
.modal-content textarea,
184+
.modal-content select{
185+
width:100%;
186+
margin-bottom:10px;
187+
padding:10px;
188+
border-radius:6px;
189+
border:1px solid #ddd;
190+
}
191+
192+
.modal-content button{
193+
width:100%;
194+
padding:10px;
195+
background:#4f46e5;
196+
color:white;
197+
border:none;
198+
border-radius:6px;
199+
}
200+
201+
.close{
202+
float:right;
203+
font-size:22px;
204+
cursor:pointer;
205+
}
206+
207+
/* FOOTER */
208+
209+
footer{
210+
margin-top:40px;
211+
text-align:center;
212+
padding:20px;
213+
background:white;
57214
}
58215

59-
button {
60-
padding: 10px 16px;
61-
cursor: pointer;
216+
.footer-links a{
217+
margin:0 10px;
218+
color:#555;
219+
text-decoration:none;
62220
}

0 commit comments

Comments
 (0)