Scribd
Upload
4 views

HTML Source Code

Uploaded by

yadavkrishna41433
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML Source Code

Uploaded by

yadavkrishna41433
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

SOURCE CODE:

<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<a href="/">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTFWT4e9c0vp8AgtqoTy36iCEkidhkSQZqwZ8iMOz8DRaZ7CpvxpKd
cnYhSIgs52_8-_UE&usqp=CAU"
alt="Brand logo">
<span class="brand-logo-name">
LFS School
</span>
</a>
<nav class="navbar">
<ul class="navbar-lists" id="myTopnav">
<li>
<i class="fas fa-home"></i>
<a class="navbar-link home-link" href="#">
Home</a>
</li>
<li>
<i class="fas fa-user"></i>
<a class="navbar-link about-link"
href="#about-us-section">
About Us
</a>
</li>
<li>
<i class="fas fa-envelope"></i>
<a class="navbar-link contact-link"
href="#contact-form">
Contact Us
</a>
</li>
<li>
<i class="fas fa-bullhorn"></i>
<a class="navbar-link service-link"
href="#notice-bord-sction">
Notice Board
</a>
</li>
<li><i class="fas fa-map-marked-alt"></i>
<a class="navbar-link contact-link"
href="#campus-on-map">
Our Campus
</a>
</li>
</ul>
<a href="javascript:void(0);"
class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</nav>
</header>
<main>
<div class="school-img-container">
<div class="img-container">
<img src=
"https://www.littleflowersahodaya.com/home/images/schools/lfs_gida.jpg"
alt="school img" class="school-img">
<h1 class="img-title">
Welcome to Little Flower School
</h1>
</div>
</div>
<section id="vision">
<h2 class="vision-heading">Our Vision</h2>
<p>At Little flower school, gida, we envision a learning community
where every
student is inspired to reach their full potential. We
strive to cultivate a nurturing environment that fosters
curiosity, creativity, and critical thinking skills.
Our aim is to empower students to become lifelong learners,
compassionate leaders, and responsible global citizens.
Through innovative teaching methods, personalized support,
and a diverse range of opportunities
</p>
</section>
<div class="main-notice-section"
id="notice-bord-sction">
<div class="notice-container">
<div class="notice-bord">
<h2 class="notice-bord-heading">
Campus Notice Board
</h2>
<div>
<ul>
<li>
<i>April 3, 2024:</i>
Inauguration ceremony for
the new academic year.
<span class="new-text">New</span>
</li>
<li>
<i>April 15, 2024:</i>
Cooking competition showcasing
students talent.
<span class="new-text">New</span>
</li>
<li>
<i>April 30, 2024:</i>
Cultural extravaganza featuring
dance, music, and drama performances.
<span class="new-text">New</span>
</li>
</ul>
</div>
</div>
<!-- Events Section -->
<div class="event-card">
<h2 class="event-heading">Upcoming Events</h2>
<div class="event-details">
<div class="event">
<h3>Football tournament</h3>
<p>Date: April 20, 2024</p>
<p>Time: 2:00 PM - 5:00 PM</p>
<p>Location: Sports Ground</p>
<p>
<strong>Description:</strong>
Football tournament.
</p>
</div>
<div class="event">
<h3>Quiz Competition</h3>
<p>Date: July 15, 2024</p>
<p>Time: 9:00 AM - 12:00 PM</p>
<p>Location: Assembly ground</p>
<p>
<strong>Description:</strong>
Quiz competition.
</p>
</div>
</div>
</div>
</div>
</div>
<section id="about-us-section">
<div class="about-us-container">
<h2 class="aboutus-heading">About Us</h2>
<p>
<strong class="subheading">
Company Profile and Brand:
</strong>
Little Flower School GIDA, Gorakhpur is a private unaided Catholic
Christian
Minority co-educational English Medium School established and
governed by the
Catholic Diocese of Gorakhpur Education Society under the Article
30(1) of the Indian
Constitution. It is reached upto Senior Secondary and affiliated to the
Central Board of
Secondary Education, New Delhi (affiliation no. 2131370). It was
founded on 7th July 2003. It runs classes
from Lower Kinder-Garten (LKG) to Class XII. Being governed by the
Catholic Church, a minority
community, the school has the primary objective of educating children
of the community. However,
we shall not spare any effort in rendering our services to all people,
irrespective of religion,
caste and creed and gender, so as to conserve their identity, language
and culture.
</p>
</div>
</section>
<section class="our-school-map" id="campus-on-map">
<h2 class="location-heading">
Find Our Location On Map
</h2>
<iframe src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3563.0608763042205!2d83.26756147526551!3d26.742433376749084!2m3!
1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x399147486e8815a1%3A0x29ffd6b415503b8d!2sLittle%20Flower%20School
%2C%20GIDA!5e0!3m2!1sen!2sin!4v1717739689263!5m2!1sen!2sin"
width="100%" height="450"
style="border:0;"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</section>
<section id="contact-form">
<h2 class="contact-form-heading">
Contact Us Form
</h2>
<div class="container">
<form id="contactForm">
<div class="form-group">
<label for="fullName">
Full Name
</label>
<input type="text" id="fullName"
name="fullName" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email"
name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone"
name="phone" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message"
required>
</textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</section>
</main>
<div id="datetime"></div>

<script>
// JavaScript code for dynamic date and time
function updateTime() {
const now = new Date();
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
'Saturday'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'];
const dayOfWeek = days[now.getDay()];
const month = months[now.getMonth()];
const dayOfMonth = now.getDate();
const year = now.getFullYear();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();

// Add leading zero if single digit


hours = (hours < 10) ? '0' + hours : hours;
minutes = (minutes < 10) ? '0' + minutes : minutes;
seconds = (seconds < 10) ? '0' + seconds : seconds;

const datetimeString = `${dayOfWeek}, ${month} ${dayOfMonth}, ${year}


${hours}:${minutes}:${seconds}`;
document.getElementById('datetime').textContent = datetimeString;
}

// Call updateTime every second to update the time


setInterval(updateTime, 1000);
// Call updateTime once immediately to initialize the time
updateTime();
</script>
<footer>
<p>©️2024 My School. All rights reserved.</p>
</footer>
<script src="index.js"></script>
</body>
</html>

JS Code:

function myFunction() {
let x = document.getElementById("myTopnav");
if (x.className === "navbar-lists") {
x.className += " responsive";
} else {
x.className = "navbar-lists";
}
}
const scrollLinks = document.querySelectorAll('
.navbar-link');
scrollLinks.forEach(link => {
link.addEventListener('click',
function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId) {
const targetElement =
document.getElementById(targetId
.substring(1));
if (targetElement) {
const offsetTop = targetElement.offsetTop;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
} else {
console.error(`Element with id
'${targetId.substring(1)}'
not found.`);
}
} else {
console.error('No href attribute found.');
}
});
});

You might also like