Design a School Website in HTML CSS and JavaScript

A School Website developed using HTML, CSS, and JavaScript is an interactive platform that provides information about the school, its faculty, courses, events, and other relevant details. It incorporates responsive design principles to ensure compatibility across various devices, offering an engaging user experience for students, parents, and staff.

Approach

First, create an HTML structure, design, and code for the header section with the school logo and navigation menu.
Then divide the main content into sections such as vision, notice board, about us, campus map, admission form, etc.
And then put the necessary content for those sections. Create the "About Us" section with relevant content about the school or organization.
Use the "iframe" tag to enable a Google Map to show the school on the page.

Example: This example shows the implementation of the School Website in HTML CSS and JavaScript.

HTML

<!DOCTYPE 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://media.geeksforgeeks.org/gfg-gg-logo.svg" 
               alt="Brand logo"> 
                  <span class="brand-logo-name">
                  GFG 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://coworkingers.com/wp-content/uploads/2023/08/IMG_20210718_095744_524-min.jpg"
                     alt="school img" class="school-img">
                <h1 class="img-title">
                  Welcome to Geeksforgeeks School
                  </h1>
            </div>
        </div>

        <section id="vision">
            <h2 class="vision-heading">Our Vision</h2>
            <p>At gfg, 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 1, 2023:</i>
                                      Inauguration ceremony for 
                                      the new academic year.
                                      <span class="new-text">New</span>
                            </li>
                            <li>
                                <i>April 15, 2023:</i> 
                                      Science fair showcasing 
                                      innovative student projects. 
                                      <span class="new-text">New</span>
                            </li>
                            <li>
                                <i>April 30, 2023:</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>Event Name 1</h3>
                            <p>Date: April 15, 2024</p>
                            <p>Time: 9:00 AM - 12:00 PM</p>
                            <p>Location: School Auditorium</p>
                            <p>
                              <strong>Description:</strong> 
                              Quiz competition.
                              </p>
                        </div>
                        <div class="event">
                            <h3>Event Name 2</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> 
                                  Cricket tournament.
                              </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>
                    GeeksforGeeks is a leading platform that 
                      provides computer science resources and 
                      coding challenges for programmers and 
                      technology enthusiasts, along with interview
                      and exam preparations for upcoming aspirants.
                    With a strong emphasis on enhancing coding 
                      skills and knowledge, it has become a trusted
                      destination for over 12 million plus registered 
                      users worldwide.
                </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!1d47169.795533326396!2d77.38522794611738!3d28.51217402233223!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2sGeeksforGeeks%20%7C%20Coding%20Classes!5e0!3m2!1sen!2sin!4v1712429105950!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>

    <footer>
        <p>&copy; 2024 My School. All rights reserved.</p>
    </footer>

    <script src="index.js"></script>

</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

:root {
    --primary-color: #8490ff;
    --secondary-color: #212121;
    --bg: #fff;
    --text-color: #333;
    --bg-gray: #f2f2f2;
    --header-green-color: #36ed22;
}

body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}

.brand-logo-name {
    text-decoration: none;
    color: #fff;
    font-size: 1.75rem;
    padding: 5px;
}

a {
    text-decoration: none;
    color: #8490ff;
    transition: color 0.3s ease;
}

a:hover {
    color: #212121;
}

.header {
    padding: 1.6rem 4.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #36ed22;
    box-shadow: 0px 0px 20px 0px rgba(132, 144, 255, 0.2);
    width: 100%;
    height: 10vh;
}

.header img {
    height: 30px;
    padding-top: 8px;
}

.navbar-lists {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar-lists li {
    margin-right: 20px;
}

.navbar-lists li:last-child {
    margin-right: 0;
}

.navbar-link {
    color: #fff;
    padding: 10px;
    transition: background-color 0.3s;
}

.icon {
    display: none;
}

.navbar-lists li:nth-child(1) i {
    color: rgb(221, 228, 215);
}

.navbar-lists li:nth-child(2) i {
    color: rgb(240, 237, 64);
}

.navbar-lists li:nth-child(3) i {
    color: rgb(11, 12, 11);
}

.navbar-lists li:nth-child(4) i {
    color: orange;
}

.navbar-lists li:nth-child(5) i {
    color: rgb(33, 105, 239);
}

@media screen and (max-width: 768px) {
    .icon {
        display: flex;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 999;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        flex-direction: row-reverse;
    }

    .navbar-lists {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #3beb2b;
        width: 100%;
        padding-top: 10px;
        z-index: 998;
    }

    .navbar-lists.responsive {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar-lists.responsive li {
        margin: 10px 0;
    }

    .navbar-link {
        padding: 10px 20px;
    }

    .navbar-link i {
        display: none;
    }
}

.school-img {
    width: 100%;
    height: 75vh;
    object-fit: cover;
}

.img-container {
    position: relative;
}

.img-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #1bf346;
    padding: 1rem 2rem;
    text-align: center;
    border-radius: 0.5rem;
    animation: img-blink 2s infinite alternate;
}

@keyframes img-blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

#vision {
    padding: 4rem 0;
    background-color: rgb(28, 225, 97);
}

#vision h2 {
    text-align: center;
    color: var(--bg);
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

#vision p {
    text-align: center;
    color: var(--secondary-color);
    font-size: 1.125rem;
}

.main-notice-section {
    background-color: var(--bg);
    padding: 4rem 0;
    margin-left: 3rem;
    overflow: auto;
}

.notice-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.notice-bord,
.event-card {
    width: 50%;
    margin-bottom: 2rem;
}

.notice-bord {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.notice-bord h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    margin-left: 5rem;
}

.notice-bord li {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    list-style: none;
    cursor: pointer;
}

.notice-bord li img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.notice-bord li p {
    margin: 0;
    color: var(--text-color);
}

.event-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.event-card .event-heading {
    color: var(--header-green-color);
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    text-align: center;
}

.event-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event {
    width: 50%;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease forwards;
    transition: transform 0.3s ease, 
                  box-shadow 0.3s ease, 
                  background-color 0.3s ease;
    cursor: pointer;
}

.event:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #1bf346;
    color: #fff;
}

.event h3 {
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.event p {
    margin-bottom: 0.5rem;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {
    .notice-container {
        flex-direction: column;
    }

    .notice-bord,
    .event-card {
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
    }

    .event-card {
        margin-top: 2rem;
    }
}

footer {
    text-align: center;
    padding: 2rem 0;
    background-color: var(--secondary-color);
    color: #fff;
    height: 10vh;
}

.contact-form-heading {
    color: #007bff;
}

#contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#contact-form h2 {
    text-align: center;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

textarea {
    height: 100px;
}

button[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

.aboutus-heading {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #fff;
}

.subheading {
    color: #000;
}


#about-us-section {
    background: rgb(28, 225, 97);
    text-align: center;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3rem;
    padding-bottom: 20px;
    border: 3px solid rgb(28, 225, 97);
    border-radius: 5px;
}

.about-us-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.subheading {
    color: #000;
}

.about-us-container p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: black;
    text-align: left;
}

.about-us-container p:first-of-type {
    margin-top: 0;
}

.about-us-container p:last-of-type {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .aboutus-heading {
        font-size: 2rem;
    }

    .about-us-container p {
        font-size: 1rem;
    }
}

.our-school-map {
    text-align: center;
}


.location-heading {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    .location-heading {
        font-size: 2rem;
    }

    .our-school-map iframe {
        width: 90%;
        max-width: 100%;
        height: 300px;
        margin: 0 auto;
    }
}

.new-text {
    color: red;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

JavaScript

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.');
        }
    });
});

Output:

Output

Article Tags :

CSS

HTML

JavaScript

Project

Web Technologies

JavaScript-Projects