realaravinth
/
sai-balaji.in
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: init

This commit is contained in:
Aravinth Manivannan 2022-09-16 23:28:01 +05:30
commit 125ca12413
Signed by: realaravinth
GPG Key ID: AD9F0F08E855ED88
2 changed files with 243 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
index.html Normal file
View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sri Balaji Hostels</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<header>
<nav>
<p><a href="/">Sri Balaji Hostels</a></p>
<ul>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1 class="tagline">Hostels Facilities For Men and Women(separate)</h1>
<p>Safe and Comfortable Hostels For VIT AP Students</p>
<ul class="hero__features">
<li><b>Free WiFi</b> providing uninterrupted internet access</li>
<li><b>Transport to university</b> is optionally provided</li>
<li>
<b>Healthy, hygienic meals</b> prepared by our in-house kitchen
</li>
<li><b>Laundry service</b>: washing machines are available</li>
<li><b>Attached bathrooms</b> in all accommodation types</li>
<li><b>24/7 hot water</b> to all bathrooms</li>
<li>
<b>Located in Mandadam Center</b> bus stop, supermarket, bakeries
and restaurants in &lt; 1KM
</li>
</ul>
</section>
<section>
<h2>Contact</h2>
<p>For enquiries, please contact:</p>
<ol>
<a href="tel:+917569427495">Mr. Pavan Eshwar: 756 9427 495</a>
<a href="tel:+918143509134"
>Mr. Pavan Eshwar(Alternate): 814 3509 134</a
>
</ol>
</section>
<section class="location">
<h2>Location</h2>
<iframe
class="mens-hostel__iframe"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1912.5821640366648!2d80.52617926150562!3d16.51779955436927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a35ed273035429f%3A0x3e7154660c36b6af!2sSai%20Balaji%20Hostel%20-%20Boys!5e0!3m2!1sen!2sau!4v1663343662898!5m2!1sen!2sau"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</section>
<section class="photos">
<h2>Photos</h2>
<div class="gallery">
<img class="hostel__photo" src="/photos/IMG_20220908_090813.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_140552.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_140558.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_140902.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_140923.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141136.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141141.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141210.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141228.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141241.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141301.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141318.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141329.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141826.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141549.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141612.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141631.png" />
<img class="hostel__photo" src="/photos/IMG-20220731-WA0004.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141832.png" />
<img class="hostel__photo" src="/photos/IMG_20220913_141112.png" />
</div>
</section>
</main>
</body>
</html>

153
main.css Normal file
View File

@ -0,0 +1,153 @@
* {
margin: 0;
padding: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: auto;
text-align: center;
}
header {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 50px;
align-items: center;
}
nav > ul {
display: flex;
list-style: none;
}
nav > ul > li {
margin: 0 20px;
}
nav > p > a,
nav > p > a:hover,
nav > ul > li > a,
nav > ul > li > a:hover {
color: black;
text-decoration: none;
}
body {
display: flex;
flex-direction: column;
width: 100%;
}
section {
width: 70%;
margin: auto;
}
.hero {
margin: 20px 0;
width: 100%;
padding: 50px 10%;
}
.tagline {
text-align: left;
margin: auto;
font-size: 2rem;
font-weight: 600;
}
.attention {
font-size: 1.3rem;
}
.hero__features {
margin: auto;
margin-top: 10px;
margin-left: 14px;
}
ol {
display: flex;
flex-direction: column;
}
.mens-hostel__iframe {
margin-top: 30px;
}
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 50px;
width: 70%;
}
.hostel__photo {
width: 250px;
width: 250px;
}
@media (max-width: 1050px) {
html {
max-width: 100vw;
overflow-x: hidden;
}
* {
padding: 0;
margin: 0;
}
.gallery {
display: flex;
flex-direction: column;
}
section {
width: 95%;
margin: auto;
}
.hero {
width: 100%;
padding: 25px;
}
body {
align-items: center;
}
.gallery {
width: 100%;
}
.location {
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
width: 100%;
}
.hostel__photo {
margin: auto;
}
.hero {
padding: 0;
}
main {
padding: 10px;
}
}