-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaboutus.html
134 lines (121 loc) · 4.04 KB
/
aboutus.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SARD</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Times New Roman', Times, serif;
background-image: url('image.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
font-family: Arial, sans-serif;
background-color: rgba(255, 255, 255, 0.5);
color: #fff;
margin-top: 20px;
padding: 30px;
border-radius: 10px;
display: flex;/*flexible gap between text*/
justify-content: space-between;
align-items: center;
}
header:hover
{
background-color: #000000;
}
header:hover .nav-link,header:hover #contact,header:hover #support,header:hover span
{
color: rgba(255, 255, 255, 0.75);
}
.logo {
margin-right: auto;
}
nav {
display: flex;
gap: 50px; /*gap between text*/
}
.nav-link {
text-decoration: none;
color: #000000;
transition: color 0.2s;
}
.nav-link:hover {
color: #090081; /* Change text color on hover */
}
#contact, #support {
background-color: #007bff;
color: #fff;
border: none;
margin-left: 30px;
padding: 15px 20px;
border-radius: 5px;
cursor: pointer;
}
main {
margin-top: 100px;
padding-left: 200px; /*padding for the gap */
text-align: left;
}
p{
color: #000000;
text-align: center;
}
.about-box {
background-color: rgba(255, 255, 255, 0.5); /* Transparent white background */
padding: 20px;
border-radius: 25px; /* Rounded corners */
margin-right:125px;
width: 1200px;
}
.about-box h1
{
text-align: center;
}
</style>
</head>
<body>
<header class="mx-4">
<div class="logo">
<img src="logo.png" alt="Logo" width="50">
</div>
<nav>
<a href="index.html" class="nav-link" >Home</a>
<a href="responsive_booking.html" class="nav-link" >Products</a>
<a href="aboutus.html" class="nav-link" >About Us</a>
</nav>
<div class="col text-right">
<button id="contact">Contact Us</button>
<button id="support">Get Support</button>
</div>
<div id="globe">
<img src="globe.png" alt="Globe" width="20">
<span>India</span>
</div>
</header>
<main>
<div class="about-box">
<h1><b>ABOUT US</b></h1>
<hr>
<p>
Welcome to the website of SARD,
a non-profit organization dedicated to utilizing drone technology for search and rescue operations in the wake of disasters.<br>
We believe that every second counts when lives are on the line, and our mission is to leverage the power of drones to expedite rescue efforts and save precious lives.<br>
Disasters often strike across vast and challenging terrains, making traditional search and rescue efforts arduous and time-consuming. <br>
Our drones provide an aerial perspective, allowing us to cover large areas quickly and efficiently, significantly increasing the chances of locating survivors in critical timeframes.<br>
Our drones are equipped with advanced automation features, including thermal imaging and object recognition capabilities.<br>
These features allow them to autonomously search for survivors, reducing human error and fatigue while maximizing search efficiency, especially in hazardous environments.<br>
Our drones are equipped with real-time tracking systems, enabling us to monitor their location and progress remotely.<br>
This allows for coordinated search efforts and ensures that rescue teams can be efficiently directed towards identified survivors.<br>
Explore our website to learn more about our work, our impact, and how you can get involved.
<br>
</p>
</div>
</main>
</body>
</html>