-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
102 lines (96 loc) · 5.8 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HostelIssues.com</title>
<link rel="icon" href="homepage-image.png">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<nav class="navbar">
<div class="logo"><img src="logo bg.png" alt="logo" class="logo-img"></div>
<ul class="navlist">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<section class="homepage" id="home">
<div class="homepage-total">
<div class="homepage-content">
<span class="Got-Issues">Got Issues?</span>
<span class="Noone-to-help">No one to help?</span>
<span class="Dont-you-worry-we-got-you-covered">Dont you worry we got you covered!</span>
</div>
<div class="homepage-image"><img src="homepage-image.png" alt="" class="homepage-img"> </div>
</div>
</section>
<hr size="2" no shade class="hr1">
<section class="about-us" id="about">
<div class="about-us-total">
<div class="about-us-content">
<p>Welcome to Mavericks - An web app which acts as a communication channel between students residing in hostels and the caretaker.In this web application you can file the hardware and software issues through online mode and the message will pop to the care taker or the necessary executive body or the one who solves the problem. Note our web app does not promise to solve those problems listed down it just creates an instant communication channel between the students and the necessary problem solving bodies !</p>
</div>
<div class="about-us-image"><img src="About Us.png" alt="" class="about-us-img"></div>
</div>
</section>
<hr size="2" no shade class="hr1">
<div class="container_sv" id="services">
<div class="container-row">
<div class="box">
<img src="electrical.jpg" alt="" class="box-image">
<a href="electrical.html" target="_blank">Electrical Issues</a>
</div>
<div class="box">
<img src="carpentry.jpg" alt="" class="box-image">
<a href="carpentry.html" target="_blank">Carpentry Issues</a>
</div>
<div class="box">
<img src="other.jpg" alt="" class="box-image">
<a href="page3.html" target="_blank">Other</a>
</div>
</div>
</div>
<footer>
<section class="contact-footer" id="contact">
<di class="footer">
<div class="left-footer">
<h1 id="heading-footer">Send Us a Message</h1>
<p class="text-footer">If you have any types of queries you can send us message from here. It's our pleasure to help you.</p>
<div class="form-footer">
<input class="form-input" type="text" name="name" id="name" placeholder="Enter your name.">
<input class="form-input" type="text" name="email" id="email" placeholder="Enter your email.">
<textarea class="form-input" name="text" id="text" cols="9" rows="7" placeholder="Type your query."></textarea>
<button class="btn-footer">Send Now</button>
<h3 id="follow-us">Follow Us</h3>
<div class="social-media-icon-footer">
<li class="sm-i-footer" ><a href="......." target="_blank"><i class="fab fa-facebook-f fa-xl "></i></a></li>
<li class="sm-i-footer" ><a href=".........." target="_blank"><i class="fab fa-instagram fa-xl"></i></a></li>
<li class="sm-i-footer" ><a href="https://github.com/Mahapasad" target="_blank"><i class="fab fa-github fa-xl"></i></a></li>
<li class="sm-i-footer" ><a href=".........." target="_blank"><i class="fab fa-youtube fa-xl"></i></a></li>
<li class="sm-i-footer" ><a href="........." target="_blank"><i class="fab fa-twitter fa-xl"></i></a></li>
</div>
</div>
</div>
<div class="vl"></div>
<div class="right-footer">
<!-- <div class="contact-details">
<div class="contact-details1"> <p><li> <u> Phone </u> </li>
<li>000000000</li>
<li>000000000</li></p></div>
<br> <br> <br><br>
<div class="contact-details2"><p><li> <u> Email </u> </li>
<li> <a href=".....">[email protected]</a> </li>
<li> <a href="....">[email protected]</a> </li></p></div>
</div> -->
<div class="map"><h3 id="Address">Address</h3><iframe class="google-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3692.657622430909!2d84.89879211487629!3d22.253065585348118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a201f72bbd561c3%3A0xab5c70e76a7b5a!2sNational%20Institute%20of%20Technology%2C%20Rourkela!5e0!3m2!1sen!2sin!4v1656930459382!5m2!1sen!2sin" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
</div>
</div>
</section>
</footer>
<script src="https://kit.fontawesome.com/43e159b8dc.js" crossorigin="anonymous"></script>
</body>
</html>