Skip to content

Commit c4e3409

Browse files
aryan29guptaaryan29gupta
committed
{changes saved}
1 parent 2bbc586 commit c4e3409

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

‎frontend/alert.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* styles.css */
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
font-family: Arial, sans-serif;
6+
background-color: #d3d3d3;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
}
12+
13+
.container {
14+
text-align: center;
15+
background-color: #f4f4f4;
16+
padding: 2rem;
17+
border-radius: 10px;
18+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
19+
max-width: 1000px;
20+
width: 100%;
21+
height: 550px;
22+
}
23+
24+
h1 {
25+
font-size: 3.2rem;
26+
margin-bottom: 1.3rem;
27+
color: #000;
28+
font-family: "Poppins", serif;
29+
}
30+
31+
.features {
32+
list-style: none;
33+
padding: 0;
34+
margin: 1rem 0 2rem 0;
35+
text-align: left;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: space-between;
39+
height: 150px;
40+
color:rgba(0, 0, 0,0.2);
41+
}
42+
43+
.features li {
44+
font-size: 1rem;
45+
color: #555;
46+
margin-bottom: 0.5rem;
47+
position: relative;
48+
}
49+
50+
.features li::before {
51+
content: "●";
52+
color: #000;
53+
margin-right: 0.5rem;
54+
font-size: 1rem;
55+
}
56+
57+
.input-section {
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
margin: 2rem 0;
62+
margin-top: 5rem;
63+
}
64+
65+
.input-section input {
66+
padding: 0.5rem;
67+
font-size: 1rem;
68+
border: 1px solid #ccc;
69+
border-radius: 5px 0 0 5px;
70+
flex: 1;
71+
}
72+
73+
.input-section button {
74+
padding: 0.5rem 1rem;
75+
font-size: 1rem;
76+
border: none;
77+
background-color: #000;
78+
color: #fff;
79+
cursor: pointer;
80+
border-radius: 0 5px 5px 0;
81+
}
82+
83+
.input-section button:hover {
84+
background-color: #444;
85+
}
86+
87+
.footer {
88+
font-size: 0.9rem;
89+
color: #555;
90+
margin-top: 1rem;
91+
margin-bottom: 2rem;
92+
}
93+
94+
95+
.extra{
96+
display:flex;
97+
justify-content: left;
98+
margin-top: 40px;
99+
}
100+
101+
102+
.features{
103+
margin-top: 20px;
104+
}
105+
106+
#red{
107+
color:red;
108+
}
109+
110+
#yellow{
111+
color:rgb(226, 226, 20);
112+
}
113+
114+
#green{
115+
color:green;
116+
}
117+

‎frontend/alert.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Zone Alert</title>
7+
<link rel="stylesheet" href="alert.css" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
12+
rel="stylesheet"
13+
/>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<h1>Zone Alert</h1>
18+
<h3>
19+
Enter the area you want to search for, zone alert informs you about the
20+
Pandemic situation, moreover, it provides you with relevant precautions.
21+
</h3>
22+
<div class="extra">
23+
<ul class="features">
24+
<li id="red">Red Zone: High Danger Zone</li>
25+
<li id="yellow">Yellow Zone: Danger Zone</li>
26+
<li id="green">Green Zone: High Alert Zone</li>
27+
</ul>
28+
</div>
29+
<div class="input-section">
30+
<input type="text" placeholder="Enter your area..." />
31+
<button>Search</button>
32+
</div>
33+
</div>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)