Code
Uploaded by
90scartoonshowskidCode
Uploaded by
90scartoonshowskidCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kingster Kids Home</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="hero">
<h1>Kingster Kindergarten</h1>
<p>Take a tour in Kingster and you will find the best school in the state. The video will take you to every place in this
school.</p>
<button class="tour-btn">Take A Tour</button>
</div>
</main>
<section class="program-section">
<div class="program-card">
<img src="shutterstock_247514245-400x257.jpg" alt="Pre Kindergarten">
<h3>Pre Kindergarten</h3>
<p>Counting objects, inside and outside, longer and shorter, letter names, rhyming words, and more.</p>
<button class="learn-more">Learn More</button>
</div>
<div class="program-card">
<img src="kid.jpg" alt="Kindergarten">
<h3>Kindergarten</h3>
<p>Counting objects, inside and outside, longer and shorter, letter names, rhyming words, and more.</p>
<button class="learn-more">Learn More</button>
</div>
<div class="program-card">
<img src="elementary.jpg" alt="Elementary">
<h3>Elementary</h3>
<p>Counting objects, inside and outside, longer and shorter, letter names, rhyming words, and more.</p>
<button class="learn-more">Learn More</button>
</div>
</section>
<div class="container my-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="about-text text-center">
<h2 class="mb-4">About Our School</h2>
<p>We don't just give students an education and experiences that set them up for success in a career. We help them
succeed in their career—to discover a field they're passionate about and dare to lead it.</p>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with
my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so
happy, my dear friend, so absorbed in the exquisite sense of mere.</p>
</div>
</div>
</div>
</div>
<main>
<section class="news-updates">
<h2><i class="fa fa-newspaper-o"></i> News & Updates</h2>
<a href="#" class="read-all">Read All News</a>
<div class="news-items">
<div class="news-item">
<img src="annie-spratt-294450-unsplash.jpg" alt="Kids">
<h3>Professor Albert joint research on mobile money in Tanzania</h3>
<p class="news-meta">JUNE 6, 2016 / ADMISSION, STUDENT</p>
</div>
<div class="news-item">
<img src="mb.jpg" alt="MBA">
<h3>A Global MBA for the next generation of business leaders</h3>
<p class="news-meta">JUNE 6, 2016 / HOT UPDATES</p>
</div>
<div class="news-item">
<img src="mum.jpg" alt="Snacks">
<h3>Professor Tom Comments on voluntary recalls by snack brands</h3>
<p class="news-meta">JUNE 6, 2016 / ADMISSION, EVENT</p>
</div>
<div class="news-item">
<img src="school.jpg" alt="Twitter">
<h3>Professor Alexa is interviewed about Twitter's valuation</h3>
<p class="news-meta">JUNE 6, 2016 / ARTICLE, RESEARCH</p>
</div>
</div>
</section>
<section class="upcoming-events">
<h2><i class="fa fa-calendar"></i> Upcoming Events</h2>
<div class="event-item">
<h3>Reunion Event : Kingster's Alumni Golf Tour</h3>
<p><i class="fa fa-clock-o"></i> 7:00 am - 7:00 am</p>
<p><i class="fa fa-map-marker"></i> Kingster Hall</p>
</div>
<div class="event-item">
<h3>Kingster's Alumni Hot Air Ballon Trip in Turkey</h3>
<p><i class="fa fa-clock-o"></i> 10:00 am - 10:00 am</p>
<p><i class="fa fa-map-marker"></i> Kingster Hall</p>
</div>
<div class="event-item">
<h3>Fintech & Key Investment Conference</h3>
<p><i class="fa fa-clock-o"></i> 1:00 pm - 1:00 pm</p>
<p><i class="fa fa-map-marker"></i> Kingster Hall</p>
</div>
<a href="#" class="view-all">View All Events <i class="fa fa-angle-right"></i></a>
</section>
</main>
<h2 class="head">Our Classes</h2>
<main>
<div class="class-card">
<img src="annie-spratt-294450-unsplash.jpg" alt="Art Program for Kids">
<h2>Computer Classes</h2>
<p>Teacher: Prof. Ashish Awasthi</p>
<p>Grade: 3</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="class-card">
<img src="school.jpg" alt="Language">
<h2>Language Classes</h2>
<p>Teacher: Prof. Aditi Dubey</p>
<p>Grade: 2</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="class-card">
<img src="siniz-kim-566373-unsplash-700x450.jpg" alt="Music Program">
<h2>Music Program</h2>
<p>Teacher: Prof. Saima</p>
<p>Grade: 4</p>
<a href="#" class="read-more">Read More</a>
</div>
</main>
<footer>
<a href="#" class="view-all">View All Courses</a>
</footer>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js"></script>
<script src="script.js">
// You can add any interactivity or functionality here
const learnMoreButtons = document.querySelectorAll('.learn-more');
learnMoreButtons.forEach(button => {
button.addEventListener('click', () => {
// Add your desired functionality here, e.g., open a modal or navigate to a new page
console.log('Learn More button clicked');
});
});
</script>
</body>
</html>
HOME PAGE CSS
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.hero {
background-image: url(shutterstock_1188632551.jpg);
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 20px;
}
.hero h1 {
font-size: 36px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
}
.tour-btn {
background-color: #f97316;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.program-section {
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
background-color: #f7f7f7;
}
.program-card {
max-width: 300px;
margin: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.program-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.program-card h3 {
margin: 20px 0;
}
.program-card p {
padding: 0 20px;
margin-bottom: 20px;
}
.learn-more {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-bottom: 20px;
cursor: pointer;
border-radius: 5px;
}
.learn-more:hover {
background-color: #3e8e41;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
h2 i {
margin-right: 10px;
}
.news-updates {
background-color: #f4f8fb;
padding: 20px;
border-radius: 5px;
}
.read-all {
display: inline-block;
background-color: #337ab7;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
margin-bottom: 20px;
}
.news-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.news-item {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.news-item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.news-meta {
color: #777;
font-size: 14px;
margin-bottom: 5px;
}
.upcoming-events {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.event-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.event-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.event-item h3 {
color: #333;
font-size: 18px;
margin-bottom: 10px;
}
.event-item p {
color: #777;
font-size: 14px;
margin-bottom: 5px;
}
.event-item p i {
margin-right: 5px;
}
.view-all {
display: inline-block;
background-color: #337ab7;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
}
.view-all i {
margin-left: 5px;
}
.head{
background-color: #007bff;
color: #fff;
padding: 20px;
text-align: center;
}
main {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
padding: 20px;
}
.about-text {
background-color: #f5f5f5;
padding: 30px;
border-radius: 10px;
}
.class-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 20px;
padding: 20px;
text-align: center;
width: 300px;
}
.class-card img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.class-card h2 {
margin-top: 20px;
margin-bottom: 10px;
}
.class-card p {
margin-bottom: 5px;
}
.read-more {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
margin-top: 10px;
}
footer {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.view-all {
background-color: #28a745;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
}
Common Style For all Pages
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #e6f6ff;
padding: 10px;
}
.header-top {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 10px;
}
.header-top a {
color: #6b7280;
text-decoration: none;
margin-left: 20px;
}
.support-btn {
background-color: #f97316;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
.header-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #333;
text-decoration: none;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #6b7280;
text-decoration: none;
nav ul li a:hover {
color: #000;
}
}
.dropdown {
position: relative;
}
.dropdown-menu {
text-decoration: underline;
display: none;
position: absolute;
background-color: #e6f6ff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu a {
color: #6b7280;
padding: 12px 16px;
display: block;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu a:hover {
color: #1f50b3;
}
.header11 {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hero-image img {
max-width: 700px;
height: auto;
}
.contact-info {
text-align: right;
}
.Foot {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
padding: 40px;
}
.header11 h2{
text-decoration: underline coral;
margin-top: 0;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 10px;
}
li {
margin-bottom: 10px;
}
section {
margin-bottom: 10px;
}
Admission Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admission</title>
<link rel="stylesheet" href="admission.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="hero">
<h1>Kingster Kindergarten</h1>
<p>Take a admission in Kingster and you will find the best school in the state. This School helps your Child to learn easily
with fun. </p>
<button class="adm-btn">Admission Open</button>
</div>
</main>
<section class="wwe">
<h2>Kingster's History</h2>
<p>If you would like to study in the university in the heart of the city that focus on chaning the world for better to morrow, you're
choosin the right place. We do not use special formulas to select students. We look at every single applicant's application, academic
and personal, to select students who suit to our community with a full range of backgrounds. If you would like to study</p>
<p>If you would like to study in the university in the heart of the city that focus on chaning the world for better to morrow, you're
choosin the right place. We do not use special formulas to select students. We look at every single applicant's application, academic
and personal, to select students who suit to our community.</p>
</section>
<section class="seth">
<div>
<h3>Our Philosophy</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my
whole heart. I am alone, and feel the charm of existence.</p>
</div>
<div>
<h3>Kingster's Principle</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my
whole heart. I am alone, and feel the charm of existence.</p>
</div>
<div>
<h3>Key Of Success</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my
whole heart. I am alone, and feel the charm of existence.</p>
</div>
</section>
<section class="school-tour">
<div class="tour-info">
<h2>Special School Tour</h2>
<p>Campus on a tour designed for prospective graduate and professional students. You will see how our university like,
facilities, studenst and life in this university. Meet our graduate admissions representative to learn more about our graduate programs
and decide what it the best for you.</p>
</div>
<div class="tour-image">
<img src="group.png" alt="School Tour" height="400px" width="600px">
</div>
</section>
<section class="graduation">
<div class="image-container">
<img src="graduation.jpg.crdownload" alt="Graduation Photo" height="400px" width="600px">
</div>
<div class="content">
<h2>Graduation</h2>
<p>Campus on a tour designed for prospective graduate and professional students. You will see how our university like,
facilities, studenst and life in this university. Meet our graduate admissions representative to learn more about our graduate programs
and decide what it the best for you.</p>
</div>
</section>
<section>
<div class="left-section">
<h2>Things To Know First</h2>
<p>The Common Application is required for students applying to any or all of KU's three degree. You'll be able to choose your
campus and program s that you are interested.</p>
<p>You will need :</p>
<ul>
<li>Contact information for the counselor or other school representative who will complete your Common Application
School Report and submit your official high school transcript.</li>
<li>Contact information for one teacher (or two, maximum) who will complete the Teacher Evaluation form.</li>
<li>Nonrefundable $50 application fee. Students who are unable to pay the application fee can request a fee waiver.</li>
</ul>
</div>
<div class="right-section">
<h2>When To Apply?</h2>
<table>
<tr>
<th>Application Deadline</th>
<th>Decision</th>
</tr>
<tr>
<td>Early Decision 1</td>
<td>November 1</td>
<td>December 15</td>
</tr>
<tr>
<td>Early Decision 2</td>
<td>January 1</td>
<td>February 15</td>
</tr>
<tr>
<td>Regular Decision</td>
<td>January 1</td>
<td>April 1</td>
</tr>
</table>
<h3>Where to submit necessary documents?</h3>
<p>Documents not submitted through the online method can be mailed to:</p>
<p>Box 35300<br>1810 Campus Way NE<br>Bothell, WA 98011-8246 USA</p>
</div>
<div class="buttons">
<button id="requestTour">Request a campus tour</button>
<button id="requestInfo">Request information</button>
</div>
</section>
<br>
<hr>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
const requestTourBtn = document.getElementById('requestTour');
const requestInfoBtn = document.getElementById('requestInfo');
requestTourBtn.addEventListener('click', () => {
// Handle request campus tour functionality
console.log('Request campus tour button clicked');
});
requestInfoBtn.addEventListener('click', () => {
// Handle request information functionality
console.log('Request information button clicked');
});
</script>
</body>
</html>
Admission.css
.hero {
background-image: url(classroom.jpg);
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 20px;
}
.hero h1 {
font-size: 36px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
}
.adm-btn {
background-color: #f97316;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.left-section {
width: 45%;
}
.right-section {
width: 45%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.buttons {
width: 100%;
text-align: center;
margin-top: 20px;
}
button {
padding: 10px 20px;
margin: 0 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.wwe{
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e6f6ff;
padding: 50px;
}
.wwe h2{
font-size: xx-large;
font-weight: 700;
text-decoration: underline;
}
.seth{
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 40px;
display: flex;
justify-content: center;
text-align: center;
}
.school-tour {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px;
background-color: #f8f8f8;
}
.tour-info {
flex: 1;
padding-right: 40px;
}
.tour-info h2 {
font-size: 28px;
margin-bottom: 20px;
}
.tour-info p {
font-size: 16px;
line-height: 1.6;
color: #666;
}
.tour-image {
flex: 1;
text-align: right;
}
.school-image img {
max-width: 100%;
height: auto;
}
.graduation {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px;
background-color: #f8f8f8;
}
.image-container {
flex: 1;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
}
.content {
flex: 1;
padding-left: 40px;
}
.content h2 {
font-size: 28px;
margin-bottom: 20px;
}
.content p {
font-size: 16px;
line-height: 1.6;
color: #666;
}
Course page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses</title>
<link rel="stylesheet" href="course.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="hero">
<h1>Kingster Kindergarten</h1>
<p>Take a Course in Kingster for your Child and you will get a best results. This School helps your Child to learn easily with
fun. </p>
<button class="crs-btn">Choose Course</button>
</div>
</main>
<div class="courses">
<div class="course">
<img src="shutterstock_247514245-400x257.jpg" alt="Art Program For Kids">
<h3>Art Program For Kids</h3>
<p>Teacher: Carol Smith</p>
<p>Grade: 3</p>
<a href="#">Read More</a>
</div>
<div class="course">
<img src="school.jpg" alt="Language">
<h3>Language</h3>
<p>Teacher: Michael Johnson</p>
<p>Grade: 2</p>
<a href="#">Read More</a>
</div>
<div class="course">
<img src="siniz-kim-566373-unsplash-700x450.jpg" alt="Music Program">
<h3>Music Program</h3>
<p>Teacher: Sarah Smith</p>
<p>Grade: 4</p>
<a href="#">Read More</a>
</div>
</div>
<div class="courses">
<div class="course">
<img src="kid.jpg" alt="Library">
<h3>Library</h3>
<p>Teacher: John Doe</p>
<p>Grade: 4</p>
<a href="#">Read More</a>
</div>
<div class="course">
<img src="French Program.jpg" alt="French">
<h3>French</h3>
<p>Teacher: John Doe</p>
<p>Grade: 4</p>
<a href="#">Read More</a>
</div>
<div class="course">
<img src="group.png" alt="Math">
<h3>Math</h3>
<p>Teacher: Alan Smith</p>
<p>Grade: 3, 4</p>
<a href="#">Read More</a>
</div>
</div>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
COURSE.CSS
.hero {
background-image: url(play.png);
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 20px;
}
.hero h1 {
font-size: 36px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
}
.crs-btn {
background-color: #f97316;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
section {
margin-bottom: 10px;
}
.courses {
display: flex;
justify-content: center;
background-color: #f2f2f2;
padding: 20px;
}
.course {
background-color: white;
margin: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 300px;
}
.course img {
max-width: 100%;
height: auto;
}
.course h3 {
margin-top: 10px;
}
.course p {
margin: 5px 0;
}
.course a {
display: inline-block;
margin-top: 10px;
padding: 8px 16px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 4px;
}
RESULT PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Exam and Result Management</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mt-4">
<h1 style="text-align: center;text-decoration: underline;">School Exam and Result Management</h1>
<section class="mt-4">
<h2>Exam Schedule</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Subject</th>
<th>Date</th>
<th>Time</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mathematics</td>
<td>June 1, 2023</td>
<td>9:00 AM - 12:00 PM</td>
<td>Hall A</td>
</tr>
<tr>
<td>English</td>
<td>June 3, 2023</td>
<td>2:00 PM - 5:00 PM</td>
<td>Hall B</td>
</tr>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Exam Results</h2>
<form id="exam-results-form">
<div class="form-group">
<label for="roll-number">Roll Number:</label>
<input type="text" class="form-control" id="roll-number" placeholder="Enter your roll number" name="roll-number"
required>
</div>
<button type="submit" class="btn btn-primary">View Results</button>
</form>
<div id="exam-results-container" class="mt-3" style="display: none;">
<h4>Your Results</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>Subject</th>
<th>Marks Obtained</th>
<th>Total Marks</th>
<th>Grade</th>
</tr>
</thead>
<tbody id="exam-results-table-body">
<!-- Exam results rows will be dynamically added here -->
</tbody>
</table>
</div>
</section>
<section class="mt-4">
<h2>Previous Question Papers</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Mathematics - 2022</a>
<a href="#" class="list-group-item list-group-item-action">English - 2022</a>
<a href="#" class="list-group-item list-group-item-action">Science - 2021</a>
<a href="#" class="list-group-item list-group-item-action">History - 2021</a>
</div>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Get the exam results form
const examResultsForm = document.getElementById('exam-results-form');
// Get the exam results container
const examResultsContainer = document.getElementById('exam-results-container');
// Get the exam results table body
const examResultsTableBody = document.getElementById('exam-results-table-body');
// Function to add a new exam result row
function addExamResultRow(subject, marksObtained, totalMarks, grade) {
const newRow = document.createElement('tr');
const subjectCell = document.createElement('td');
const marksObtainedCell = document.createElement('td');
const totalMarksCell = document.createElement('td');
const gradeCell = document.createElement('td');
subjectCell.textContent = subject;
marksObtainedCell.textContent = marksObtained;
totalMarksCell.textContent = totalMarks;
gradeCell.textContent = grade;
newRow.appendChild(subjectCell);
newRow.appendChild(marksObtainedCell);
newRow.appendChild(totalMarksCell);
newRow.appendChild(gradeCell);
examResultsTableBody.appendChild(newRow);
}
// Add an event listener for form submission
examResultsForm.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// Get the roll number input value
const rollNumber = document.getElementById('roll-number').value;
// Perform exam result retrieval and display logic here
// For example, you can make an AJAX call to a server-side script to fetch the exam results
// Example: Display hard-coded exam results
examResultsContainer.style.display = 'block';
examResultsTableBody.innerHTML = '';
addExamResultRow('Mathematics', '85', '100', 'A');
addExamResultRow('English', '72', '100', 'B');
addExamResultRow('Science', '90', '100', 'A+');
});
</script>
</body>
</html>
ACADEMIC PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academic</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mt-4">
<h1 style="text-align: center;text-decoration: underline;">Academic</h1>
<section class="mt-4">
<h2>Courses</h2>
<div class="list-group" id="coursesList">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Mathematics</h5>
<small>Grade 10</small>
</div>
<p class="mb-1">Introduction to algebra, geometry, and trigonometry.</p>
<small>Instructor: John Doe</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">English Literature</h5>
<small>Grade 10</small>
</div>
<p class="mb-1">Study of classic literary works and writing skills.</p>
<small>Instructor: Jane Smith</small>
</a>
</div>
</section>
<section class="mt-4">
<h2>Timetable</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Day</th>
<th>9:00 AM - 10:00 AM</th>
<th>10:00 AM - 11:00 AM</th>
<th>11:00 AM - 12:00 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Mathematics</td>
<td>English</td>
<td>Biology</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Physics</td>
<td>Chemistry</td>
<td>History</td>
</tr>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Grades</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Subject</th>
<th>Marks Obtained</th>
<th>Total Marks</th>
<th>Grade</th>
</tr>
</thead>
<tbody id="gradesTableBody">
<tr>
<td>Mathematics</td>
<td>85</td>
<td>100</td>
<td>A</td>
</tr>
<tr>
<td>English</td>
<td>72</td>
<td>100</td>
<td>B</td>
</tr>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Transcripts</h2>
<div class="card">
<div class="card-header">
Academic Transcript
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<p class="card-text">Student ID: 12345</p>
<p class="card-text">Grade: 10th</p>
<a href="#" class="btn btn-primary">Download Transcript</a>
</div>
</div>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// Courses section
$('.list-group-item').click(function() {
var courseTitle = $(this).find('h5').text();
var courseGrade = $(this).find('small:first').text();
var courseDescription = $(this).find('p').text();
var courseInstructor = $(this).find('small:last').text();
alert('Course Details:\n\nTitle: ' + courseTitle + '\nGrade: ' + courseGrade + '\nDescription: ' + courseDescription + '\
nInstructor: ' + courseInstructor);
});
// Transcripts section
$('.btn-primary').click(function() {
var studentName = $(this).closest('.card-body').find('.card-title').text();
var studentId = $(this).closest('.card-body').find('.card-text:first').text().replace('Student ID: ', '');
var studentGrade = $(this).closest('.card-body').find('.card-text:last').text().replace('Grade: ', '');
alert('Student Transcript:\n\nName: ' + studentName + '\nStudent ID: ' + studentId + '\nGrade: ' + studentGrade);
});
// Add new course functionality
$('#coursesList').append(`
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Computer Science</h5>
<small>Grade 10</small>
</div>
<p class="mb-1">Introduction to programming concepts and algorithms.</p>
<small>Instructor: Alice Johnson</small>
</a>
`);
// Add new grade functionality
$('#gradesTableBody').append(`
<tr>
<td>Computer Science</td>
<td>92</td>
<td>100</td>
<td>A+</td>
</tr>
`);
});
</script>
</body>
</html>
ATTENDANCE PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mt-4">
<h1 style="text-align: center;text-decoration: underline;">Attendance Management</h1>
<section class="mt-4">
<h2>Attendance Records</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>April 1, 2023</td>
<td>Mathematics</td>
<td><span class="badge badge-success">Present</span></td>
</tr>
<tr>
<td>April 3, 2023</td>
<td>English</td>
<td><span class="badge badge-danger">Absent</span></td>
</tr>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Leave Applications</h2>
<form>
<div class="form-group">
<label for="leave-type">Leave Type:</label>
<select class="form-control" id="leave-type" name="leave-type">
<option value="sick">Sick Leave</option>
<option value="casual">Casual Leave</option>
<option value="emergency">Emergency Leave</option>
</select>
</div>
<div class="form-group">
<label for="start-date">Start Date:</label>
<input type="date" class="form-control" id="start-date" name="start-date">
</div>
<div class="form-group">
<label for="end-date">End Date:</label>
<input type="date" class="form-control" id="end-date" name="end-date">
</div>
<div class="form-group">
<label for="reason">Reason:</label>
<textarea class="form-control" id="reason" rows="3" name="reason"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit Application</button>
</form>
</section>
<section class="mt-4">
<h2>Leave Applications</h2>
<table class="table table-striped" id="leaveApplicationsTable">
<thead>
<tr>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault(); // Prevent form submission
// Get form data
var leaveType = $('#leave-type').val();
var startDate = $('#start-date').val();
var endDate = $('#end-date').val();
var reason = $('#reason').val();
// Add leave application to the table
$('#leaveApplicationsTable tbody').append(`
<tr>
<td>${leaveType}</td>
<td>${startDate}</td>
<td>${endDate}</td>
<td>${reason}</td>
</tr>
`);
// Reset form fields
$('#leave-type').val('sick');
$('#start-date').val('');
$('#end-date').val('');
$('#reason').val('');
});
});
</script>
</body>
</html>
LIBRARY PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mt-4">
<h1 style="text-align: center;text-decoration: underline;">Library Management</h1>
<section class="mt-4">
<h2>Catalog Search</h2>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search for books" aria-label="Search" aria-describedby="button-
addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="button-addon2">Search</button>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th>Available Copies</th>
</tr>
</thead>
<tbody>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>9780446310789</td>
<td>5</td>
</tr>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>9780743273565</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Book Reservations</h2>
<form>
<div class="form-group">
<label for="book-title">Book Title:</label>
<input type="text" class="form-control" id="book-title" placeholder="Enter book title" name="book-title">
</div>
<div class="form-group">
<label for="author">Author:</label>
<input type="text" class="form-control" id="author" placeholder="Enter author name" name="author">
</div>
<div class="form-group">
<label for="isbn">ISBN:</label>
<input type="text" class="form-control" id="isbn" placeholder="Enter ISBN" name="isbn">
</div>
<button type="submit" class="btn btn-primary">Reserve Book</button>
</form>
</section>
<section class="mt-4">
<h2>Reserved Books</h2>
<table class="table table-striped" id="reservedBooksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th>Student Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Library Policies</h2>
<ul>
<li>Books can be borrowed for a maximum of 14 days.</li>
<li>Late returns will incur a fine of $0.50 per day.</li>
<li>Damaged or lost books must be replaced or paid for.</li>
<li>Quiet and respectful behavior is expected in the library at all times.</li>
</ul>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// Catalog search functionality
$("#button-addon2").click(function() {
var searchQuery = $(".form-control").val();
console.log("Searching for: " + searchQuery);
});
// Book reservation form submission
$("form").submit(function(event) {
event.preventDefault();
var bookTitle = $("#book-title").val();
var author = $("#author").val();
var isbn = $("#isbn").val();
var studentName = prompt("Please enter your name:");
if (studentName) {
// Add reserved book to the table
$("#reservedBooksTable tbody").append(`
<tr>
<td>${bookTitle}</td>
<td>${author}</td>
<td>${isbn}</td>
<td>${studentName}</td>
</tr>
`);
// Reset form fields
$("#book-title").val("");
$("#author").val("");
$("#isbn").val("");
}
});
});
</script>
</body>
</html>
HOSTEL PAGE :
<!DOCTYPE html>
<html>
<head>
<title>School Hostel Management - Room Allocation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container my-5">
<h1 style="text-align: center;text-decoration: underline;">Hostel Management</h1>
<section id="room-allocation">
<h2>Room Allocation</h2>
<div class="content">
<table class="table table-striped">
<thead>
<tr>
<th>Room No.</th>
<th>Student Name</th>
<th>Grade</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="room-allocation-table-body">
<!-- Room allocation rows will be dynamically added here -->
</tbody>
</table>
<form id="room-allocation-form">
<div class="mb-3">
<label for="room-no" class="form-label">Room No.</label>
<input type="text" id="room-no" class="form-control" required>
</div>
<div class="mb-3">
<label for="student-name" class="form-label">Student Name</label>
<input type="text" id="student-name" class="form-control" required>
</div>
<div class="mb-3">
<label for="grade" class="form-label">Grade</label>
<input type="text" id="grade" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Allocate Room</button>
</form>
</div>
<div class="content">
<h3 class="mt-4">Hostel Facilities</h3>
<ul class="list-group">
<li class="list-group-item">Common Study Room</li>
<li class="list-group-item">Recreation Room</li>
<li class="list-group-item">Dining Hall</li>
<li class="list-group-item">Laundry Room</li>
</ul>
<h3 class="mt-4">Hostel Rules and Regulations</h3>
<ol class="list-group list-group-numbered">
<li class="list-group-item">Maintain silence in the study areas.</li>
<li class="list-group-item">Keep your room clean and tidy.</li>
<li class="list-group-item">Respect your fellow residents.</li>
<li class="list-group-item">Follow the hostel timings.</li>
</ol>
</div>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Get the room allocation table body
const roomAllocationTableBody = document.getElementById('room-allocation-table-body');
// Get the room allocation form
const roomAllocationForm = document.getElementById('room-allocation-form');
// Function to add a new room allocation row
function addRoomAllocationRow(roomNo, studentName, grade) {
const newRow = document.createElement('tr');
const roomNoCell = document.createElement('td');
const studentNameCell = document.createElement('td');
const gradeCell = document.createElement('td');
const actionsCell = document.createElement('td');
roomNoCell.textContent = roomNo;
studentNameCell.textContent = studentName;
gradeCell.textContent = grade;
const deleteButton = document.createElement('button');
deleteButton.classList.add('btn', 'btn-danger', 'btn-sm');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => {
newRow.remove();
});
actionsCell.appendChild(deleteButton);
newRow.appendChild(roomNoCell);
newRow.appendChild(studentNameCell);
newRow.appendChild(gradeCell);
newRow.appendChild(actionsCell);
roomAllocationTableBody.appendChild(newRow);
}
// Add event listener to the room allocation form
roomAllocationForm.addEventListener('submit', (event) => {
event.preventDefault();
const roomNo = document.getElementById('room-no').value;
const studentName = document.getElementById('student-name').value;
const grade = document.getElementById('grade').value;
addRoomAllocationRow(roomNo, studentName, grade);
// Clear the form inputs
document.getElementById('room-no').value = '';
document.getElementById('student-name').value = '';
document.getElementById('grade').value = '';
});
</script>
</body>
</html>
FEES SUBMISSION PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Fees Management</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mt-4">
<h1 style="text-align: center;text-decoration: underline;">School Fees Management</h1>
<section class="mt-4">
<h2>Fee Structure</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Grade</th>
<th>Tuition Fee</th>
<th>Other Fees</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>10th</td>
<td>$5,000</td>
<td>$1,000</td>
<td>$6,000</td>
</tr>
<tr>
<td>11th</td>
<td>$5,500</td>
<td>$1,200</td>
<td>$6,700</td>
</tr>
</tbody>
</table>
</section>
<section class="mt-4">
<h2>Submit Fees</h2>
<form id="fee-submission-form">
<div class="form-group">
<label for="student-name">Student Name:</label>
<input type="text" class="form-control" id="student-name" placeholder="Enter student name" name="student-name"
required>
</div>
<div class="form-group">
<label for="grade">Grade:</label>
<select class="form-control" id="grade" name="grade" required>
<option value="">Select grade</option>
<option value="10">10th</option>
<option value="11">11th</option>
<!-- Add more grades as needed -->
</select>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" class="form-control" id="amount" placeholder="Enter the amount to pay" name="amount" required>
</div>
<div class="form-group">
<label for="payment-method">Payment Method:</label>
<select class="form-control" id="payment-method" name="payment-method" required>
<option value="">Select payment method</option>
<option value="credit-card">Credit Card</option>
<option value="bank-transfer">Bank Transfer</option>
<option value="online-payment">Online Payment</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit Payment</button>
</form>
</section>
<section class="mt-4">
<h2>Fee Submissions</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Student Name</th>
<th>Grade</th>
<th>Amount</th>
<th>Payment Method</th>
</tr>
</thead>
<tbody id="fee-submissions-table-body">
<!-- Fee submission rows will be dynamically added here -->
</tbody>
</table>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Get the fee submission form
const feeSubmissionForm = document.getElementById('fee-submission-form');
// Get the fee submissions table body
const feeSubmissionsTableBody = document.getElementById('fee-submissions-table-body');
// Function to add a new fee submission row
function addFeeSubmissionRow(studentName, grade, amount, paymentMethod) {
const newRow = document.createElement('tr');
const studentNameCell = document.createElement('td');
const gradeCell = document.createElement('td');
const amountCell = document.createElement('td');
const paymentMethodCell = document.createElement('td');
studentNameCell.textContent = studentName;
gradeCell.textContent = grade;
amountCell.textContent = `$${amount}`;
paymentMethodCell.textContent = paymentMethod;
newRow.appendChild(studentNameCell);
newRow.appendChild(gradeCell);
newRow.appendChild(amountCell);
newRow.appendChild(paymentMethodCell);
feeSubmissionsTableBody.appendChild(newRow);
}
// Add an event listener for form submission
feeSubmissionForm.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// Get the form input values
const studentName = document.getElementById('student-name').value;
const grade = document.getElementById('grade').value;
const amount = document.getElementById('amount').value;
const paymentMethod = document.getElementById('payment-method').value;
// Perform fee submission validation and processing here
// For example, you can make an AJAX call to a server-side script to process the fee submission
// Example: Display a success message
alert(`Fee of $${amount} for ${studentName} (Grade ${grade}) has been submitted successfully via ${paymentMethod}.`);
// Add a new row to the fee submissions table
addFeeSubmissionRow(studentName, grade, amount, paymentMethod);
// Clear the form inputs
document.getElementById('student-name').value = '';
document.getElementById('grade').value = '';
document.getElementById('amount').value = '';
document.getElementById('payment-method').value = '';
});
</script>
</body>
</html>
TRANSPORTATION PAGE :
<!DOCTYPE html>
<html>
<head>
<title>School Management System - Transportation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="container my-5">
<section id="transportation">
<h2 style="text-align: center;text-decoration: underline;">Transportation Management</h2>
<div class="content">
<h3>Bus Routes</h3>
<ul class="list-group">
<li class="list-group-item">Route 1: [GOMTI NAGAR, LULU, TRANSPORT NAGAR, AIRPORT]</li>
<li class="list-group-item">Route 2: [CHARBAGH, BBD, CHINNHAT, ALAMBAGH]</li>
</ul>
<h3 class="mt-4">Bus Schedules</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Route</th>
<th>Morning Pickup</th>
<th>Afternoon Drop-off</th>
</tr>
</thead>
<tbody>
<tr>
<td>Route 1</td>
<td>7:00 AM</td>
<td>3:30 PM</td>
</tr>
<tr>
<td>Route 2</td>
<td>7:30 AM</td>
<td>4:00 PM</td>
</tr>
</tbody>
</table>
<h3 class="mt-4">Student Transportation</h3>
<form id="transportationForm">
<div class="mb-3">
<label for="student-name" class="form-label">Student Name:</label>
<input type="text" id="student-name" name="student-name" class="form-control" required>
</div>
<div class="mb-3">
<label for="route" class="form-label">Bus Route:</label>
<select id="route" name="route" class="form-select">
<option value="">Select a route</option>
<option value="route1">Route 1</option>
<option value="route2">Route 2</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<h3 class="mt-4">Student Transportation Records</h3>
<table class="table table-striped" id="transportationTable">
<thead>
<tr>
<th>Student Name</th>
<th>Bus Route</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</section>
</main>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('transportationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
const studentName = document.getElementById('student-name').value;
const route = document.getElementById('route').value;
if (studentName && route) {
// Add the student transportation record to the table
const transportationTable = document.getElementById('transportationTable').getElementsByTagName('tbody')[0];
const newRow = transportationTable.insertRow();
const studentNameCell = newRow.insertCell(0);
const routeCell = newRow.insertCell(1);
studentNameCell.textContent = studentName;
routeCell.textContent = route;
} else {
alert('Please enter both student name and bus route.');
}
// Reset the form
document.getElementById('transportationForm').reset();
});
</script>
</body>
</html>
SCHOOL_LIFE PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Life</title>
<link rel="stylesheet" href="school-life.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="hero-image">
<img src="elementary.jpg" alt="School Life">
</div>
<div class="hero-content">
<h2>School Life</h2>
<p>Campus on a tour designed for prospective graduate and professional students. You will see how our university like, facilities,
studenst and life in this university. Meet our graduate admissions representative to learn more about our graduate programs and decide
what it the best for you.</p>
</div>
</section>
</main>
<hr>
<div class="container">
<h1>Event and Traditions</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated
they live in</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden
flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly
into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
<div class="image-container">
<img src="bus.jpg" alt="School Bus" height="200px" width="500px">
</div>
<div class="transportation">
<h2>Transportations</h2>
<p>There are many options to travel in the campus.</p>
<p>There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A
small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic. It is a paradise matic
country, in which roasted parts of sentences fly into.</p>
<div class="icon">♫</div>
</div>
</div>
<hr>
<div class="container1">
<div class="facility">
<img src="annie-spratt-294450-unsplash.jpg" alt="Information Technology">
<h3>Information Technology</h3>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named
Dudenmouth.</p>
<a href="#">Read More</a>
</div>
<div class="facility">
<img src="play.png" alt="Safety and Security">
<h3>Safety and Security</h3>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named
Dudenmouth.</p>
<a href="#">Read More</a>
</div>
<div class="facility">
<img src="breakfast.jpg" alt="Health & Wellness">
<h3>Health & Wellness</h3>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named
Dudenmouth.</p>
<a href="#">Read More</a>
</div>
</div>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
SCHOOL_LIFE.CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
.hero {
display: flex;
align-items: center;
justify-content: center;
height: 40vh;
}
.hero-image img {
max-width: 100%;
max-height: 500px;
}
.hero-content {
max-width: 500px;
margin-left: 40px;
}
.hero-content h2 {
font-size: 36px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 16px;
line-height: 1.5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p{
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.image-container {
text-align: center;
margin-bottom: 20px;
}
.image-container img {
max-width: 100%;
height: auto;
}
.transportation {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
.transportation h2 {
font-size: 24px;
margin-bottom: 10px;
}
.transportation p {
margin-bottom: 10px;
}
.icon {
font-size: 48px;
text-align: center;
color: #007bff;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.facility {
max-width: 300px;
margin: 10px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 5px;
}
.facility img {
max-width: 100%;
height: auto;
}
.facility h3 {
margin-top: 20px;
margin-bottom: 10px;
}
.facility p {
margin-bottom: 20px;
}
.facility a {
display: inline-block;
background-color: #007bff;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
}
section {
margin-bottom: 10px;
}
CONTACT US Page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="contactus.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-top">
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+1-3435-2356-222">+1-3435-2356-222</a>
<a href="#" class="support-btn">Support KU</a>
</div>
<div class="header-bottom">
<a href="#" class="logo"><img src="logo-kindergarten.png"></a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Admission.html">Admissions</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="result.html">Results</a></li>
<li class="dropdown">
<a href="#">Resources</a>
<div class="dropdown-menu">
<a href="academics.html">Academics</a>
<a href="attendance.html">Attendance</a>
<a href="library.html">Library</a>
<a href="Hostel.html">Hostel</a>
<a href="info.html">Student Information</a>
<a href="bus.html">Bus Transportation</a>
<a href="Communication.html">Communication</a>
</div>
</li>
<li><a href="school-life.html">School Life</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="hero-content">
<h2>Contact US</h2>
<p>Get in Touch with our officials for updates.</p>
</div>
</section>
</main>
<div class="container">
<div class="item">
<span class="icon">☏</span>
<span class="title">Phone</span>
<p>A wonderful serenity has taken possession of my entire soul, like these.</p>
<p>+1-2345-2345</p>
</div>
<div class="item">
<span class="icon">✉</span>
<span class="title">Email</span>
<p>A wonderful serenity has taken possession of my entire soul, like these.</p>
<p>[email protected]</p>
</div>
<div class="item">
<span class="icon">⇧</span>
<span class="title">Location</span>
<p>4 apt, Flawing Street, The Grand Avenue. Liverpool, UK 33342</p>
<a href="#">View On Google Map</a>
</div>
</div>
<div class="container1">
<h1>LEAVE US YOUR INFO</h1>
<p>AND WE WILL GET BACK TO YOU.</p>
<form id="infoForm">
<input type="text" id="fullName" placeholder="Full Name*" required>
<input type="email" id="email" placeholder="Email*" required>
<input type="text" id="subject" placeholder="Subject*" required>
<textarea id="message" placeholder="Message*" required></textarea>
<button type="submit">SUBMIT NOW</button>
</form>
</div>
<footer class="header11">
<div class="hero-image">
<img src="logo-kindergarten.png" alt="Hero Image">
</div>
<div class="logo">
<h1>KingsterKids</h1>
</div>
<div class="contact-info">
<p>Box 35300</p>
<p>1810 Campus Way NE</p>
<p>Bothell, WA 98011-8246</p>
<p>+1-2534-4456-345</p>
<p>[email protected]</p>
</div>
<main class="Foot">
<section class="campus">
<h2>Our Campus</h2>
<ul>
<li>Academic</li>
<li>Planning & Administration</li>
<li>Campus Safety</li>
<li>Office of the Chancellor</li>
<li>Facility Services</li>
<li>Human Resources</li>
</ul>
</section>
<section class="campus-life">
<h2>Campus Life</h2>
<ul>
<li>Accessibility</li>
<li>Financial Aid</li>
<li>Food Services</li>
<li>Housing</li>
<li>Information Technologies</li>
<li>Student Life</li>
</ul>
</section>
<section class="academics">
<h2>Academics</h2>
<ul>
<li>Canvas</li>
<li>Catalyst</li>
<li>Library</li>
<li>Time Schedule</li>
<li>Apply For Admissions</li>
<li>Pay My Tuition</li>
</ul>
</section>
</main>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
const form = document.getElementById('infoForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting and reloading the page
const fullName = document.getElementById('fullName').value;
const email = document.getElementById('email').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
// Here, you can add your logic to handle the form submission
// For example, you can send the form data to a server using AJAX or display a success message
// Reset the form after submission
form.reset();
});
</script>
</body>
</html>
CONTACT US .CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
.hero {
background-image: url(cont.png);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
}
.hero-content {
max-width: 100%;
text-align: center;
}
.hero-content h2 {
font-size: 36px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 16px;
line-height: 1.5;
}
.container {
display: flex;
background-color: black;
color: white;
font-family: Arial, sans-serif;
padding: 20px;
}
.item {
flex: 1;
text-align: center;
padding: 20px;
}
.icon {
font-size: 24px;
}
.title {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
p{
margin: 5px 0;
}
a{
color: white;
text-decoration: underline;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container1 {
max-width: 600px;
margin: 50px auto;
padding: 30px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
font-size: 28px;
margin-bottom: 10px;
}
p{
font-size: 16px;
color: #666;
margin-bottom: 30px;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
textarea {
height: 150px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
You might also like
- Week 10 Empowerment Technologies (TVL Track)No ratings yetWeek 10 Empowerment Technologies (TVL Track)7 pages
- The Thesis Writing Survival Guide: Research and Write an Academic Thesis with Less StressFrom EverandThe Thesis Writing Survival Guide: Research and Write an Academic Thesis with Less Stress1/5 (1)
- Masters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaFrom EverandMasters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaNo ratings yet
- Deconstructing Conflict: Understanding Family Business, Shared Wealth and PowerFrom EverandDeconstructing Conflict: Understanding Family Business, Shared Wealth and Power1/5 (3)
- One Week to An MBA How to Get an Online Ivy League Education for Little or No CostFrom EverandOne Week to An MBA How to Get an Online Ivy League Education for Little or No CostNo ratings yet
- Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' HoodooFrom EverandStaubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo3/5 (5)
- A Teacher's Guide to Celebrating Positive Racial IdentityFrom EverandA Teacher's Guide to Celebrating Positive Racial IdentityNo ratings yet
- Nurture Parenting Magazine: Sibling RivalryFrom EverandNurture Parenting Magazine: Sibling RivalryYasmin EdwardsNo ratings yet
- Dairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesFrom EverandDairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesNo ratings yet
- Affirmed: 365 Days of Positive Thoughts and Actions to Start Your DayFrom EverandAffirmed: 365 Days of Positive Thoughts and Actions to Start Your DayNo ratings yet
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- Chasing Normal: My Peer Group Design for Living with BipolarFrom EverandChasing Normal: My Peer Group Design for Living with BipolarNo ratings yet
- Oopsie Daisy in Our Perfect Little Child: Our Perfect Little ChildFrom EverandOopsie Daisy in Our Perfect Little Child: Our Perfect Little ChildNo ratings yet
- Spirituality and Sexuality Within Marriage: A Bond Designed and Created by God!From EverandSpirituality and Sexuality Within Marriage: A Bond Designed and Created by God!No ratings yet
- On the Wallaby Track: Essential Australian Words and PhrasesFrom EverandOn the Wallaby Track: Essential Australian Words and PhrasesNo ratings yet
- Healthy Thinking: The Way to Healthier Thinking in the Demands on Modern ManFrom EverandHealthy Thinking: The Way to Healthier Thinking in the Demands on Modern ManNo ratings yet
- Electronic Cigarettes: All you need to know about E-Cigarettes and if you should switchFrom EverandElectronic Cigarettes: All you need to know about E-Cigarettes and if you should switchNo ratings yet
- Module 6 Lesson 1 Ce 104 Building Systems Design Converted - CompressNo ratings yetModule 6 Lesson 1 Ce 104 Building Systems Design Converted - Compress11 pages
- Gillian Rose - A Feminist Critique of The Space of Phallocentric Self-KnowledgeNo ratings yetGillian Rose - A Feminist Critique of The Space of Phallocentric Self-Knowledge21 pages
- Notes On Performance Management System PDF100% (1)Notes On Performance Management System PDF20 pages
- Absolute and Constitutional Monarchy PPTNo ratings yetAbsolute and Constitutional Monarchy PPT10 pages
- The Thesis Writing Survival Guide: Research and Write an Academic Thesis with Less StressFrom EverandThe Thesis Writing Survival Guide: Research and Write an Academic Thesis with Less Stress
- Masters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaFrom EverandMasters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
- Unicorns Are Real!: Kindergarten Level Reading BookFrom EverandUnicorns Are Real!: Kindergarten Level Reading Book
- Deconstructing Conflict: Understanding Family Business, Shared Wealth and PowerFrom EverandDeconstructing Conflict: Understanding Family Business, Shared Wealth and Power
- One Week to An MBA How to Get an Online Ivy League Education for Little or No CostFrom EverandOne Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
- Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' HoodooFrom EverandStaubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
- A Teacher's Guide to Celebrating Positive Racial IdentityFrom EverandA Teacher's Guide to Celebrating Positive Racial Identity
- Dairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesFrom EverandDairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free Recipes
- Affirmed: 365 Days of Positive Thoughts and Actions to Start Your DayFrom EverandAffirmed: 365 Days of Positive Thoughts and Actions to Start Your Day
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brand
- Chasing Normal: My Peer Group Design for Living with BipolarFrom EverandChasing Normal: My Peer Group Design for Living with Bipolar
- Oopsie Daisy in Our Perfect Little Child: Our Perfect Little ChildFrom EverandOopsie Daisy in Our Perfect Little Child: Our Perfect Little Child
- Spirituality and Sexuality Within Marriage: A Bond Designed and Created by God!From EverandSpirituality and Sexuality Within Marriage: A Bond Designed and Created by God!
- Help from Heaven: Miracles Happen When You BelieveFrom EverandHelp from Heaven: Miracles Happen When You Believe
- On the Wallaby Track: Essential Australian Words and PhrasesFrom EverandOn the Wallaby Track: Essential Australian Words and Phrases
- Healthy Thinking: The Way to Healthier Thinking in the Demands on Modern ManFrom EverandHealthy Thinking: The Way to Healthier Thinking in the Demands on Modern Man
- Tom Roberts "Go forward, dear": A horseman's life and legacyFrom EverandTom Roberts "Go forward, dear": A horseman's life and legacy
- Established: Growing In Your Walk With ChristFrom EverandEstablished: Growing In Your Walk With Christ
- Electronic Cigarettes: All you need to know about E-Cigarettes and if you should switchFrom EverandElectronic Cigarettes: All you need to know about E-Cigarettes and if you should switch
- Module 6 Lesson 1 Ce 104 Building Systems Design Converted - CompressModule 6 Lesson 1 Ce 104 Building Systems Design Converted - Compress
- Gillian Rose - A Feminist Critique of The Space of Phallocentric Self-KnowledgeGillian Rose - A Feminist Critique of The Space of Phallocentric Self-Knowledge