Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
13 views7 pages

Index - HTML-WPS Offi

The document is an HTML template for the homepage of 'Our Great School', featuring a header with navigation links, a hero section welcoming visitors, and sections highlighting the school's features and latest news. It includes contact information, calls to action, and a footer with additional links and social media icons. The layout is designed to provide essential information about the school and encourage engagement from prospective students and parents.

Uploaded by

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

Index - HTML-WPS Offi

The document is an HTML template for the homepage of 'Our Great School', featuring a header with navigation links, a hero section welcoming visitors, and sections highlighting the school's features and latest news. It includes contact information, calls to action, and a footer with additional links and social media icons. The layout is designed to provide essential information about the school and encourage engagement from prospective students and parents.

Uploaded by

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

Index.

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Our Great School - Home</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header class="main-header">

<div class="header-top">

<div class="container">

<a href="index.html" class="logo-link">

<img src="images/school-logo.png" alt="School Name Logo" class="school-logo">

<span class="school-name">Our Great School</span>

</a>

<div class="header-contact">

<span>Call Us: (123) 456-7890</span>

<a href="mailto:[email protected]">[email protected]</a>

</div>

</div>

</div>
<div class="header-main">

<div class="container">

<nav class="main-nav">

<button class="mobile-nav-toggle" aria-label="Toggle navigation">

<span class="hamburger"></span>

<span class="hamburger"></span>

<span class="hamburger"></span>

</button>

<ul class="nav-menu">

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li class="has-submenu">

<a href="#">Academics</a>

<ul class="submenu">

<li><a href="#">Curriculum</a></li>

<li><a href="#">Departments</a></li>

<li><a href="#">Faculty</a></li>

</ul>

</li>

<li><a href="#">Admissions</a></li>

<li><a href="#">Student Life</a></li>

<li><a href="#">News & Events</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>
</nav>

<div class="header-actions">

<div class="search-box">

<input type="text" placeholder="Search..." class="search-input">

<button class="search-button" aria-label="Search">🔍</button>

</div>

<a href="#" class="cta-button">Apply Now</a>

<a href="#" class="cta-button parent-portal">Parent Portal</a>

</div>

</div>

</div>

</header>

<main>

<section class="hero-section">

<div class="container">

<h1>Welcome to Our Great School</h1>

<p>Nurturing minds, building futures.</p>

<a href="about.html" class="cta-button primary">Learn More About Us</a>

</div>

</section>

<section class="features-section">

<div class="container">
<h2>Why Choose Us?</h2>

<div class="feature-grid">

<div class="feature-item">

<h3>Excellent Academics</h3>

<p>Our rigorous curriculum challenges students to achieve their full potential.</p>

</div>

<div class="feature-item">

<h3>Vibrant Community</h3>

<p>We foster a supportive and inclusive environment for all students.</p>

</div>

<div class="feature-item">

<h3>Dedicated Staff</h3>

<p>Experienced educators committed to student success and well-being.</p>

</div>

</div>

</div>

</section>

<section class="news-events-preview">

<div class="container">

<h2>Latest News & Events</h2>

<div class="news-event-grid">

<article class="news-card">

<h3><a href="#">Annual Science Fair Success!</a></h3>

<p class="date">May 20, 2025</p>


<p>Our students showcased incredible innovation at this year's fair...</p>

</article>

<article class="news-card">

<h3><a href="#">Enrollment for 2026 Now Open</a></h3>

<p class="date">May 15, 2025</p>

<p>Secure your child's spot for the upcoming academic year.</p>

</article>

<article class="news-card">

<h3><a href="#">Sports Day Highlights</a></h3>

<p class="date">May 10, 2025</p>

<p>A fantastic day of athleticism and camaraderie!</p>

</article>

</div>

<div class="text-center">

<a href="#" class="cta-button secondary">View All News & Events</a>

</div>

</div>

</section>

</main>

<footer class="main-footer">

<div class="container">

<div class="footer-column">

<h3>Our School</h3>

<ul>
<li><a href="about.html">About Us</a></li>

<li><a href="#">Academics</a></li>

<li><a href="#">Admissions</a></li>

<li><a href="#">Student Life</a></li>

</ul>

</div>

<div class="footer-column">

<h3>Quick Links</h3>

<ul>

<li><a href="#">Parent Portal</a></li>

<li><a href="#">Staff Directory</a></li>

<li><a href="#">Calendar</a></li>

<li><a href="#">Careers</a></li>

</ul>

</div>

<div class="footer-column">

<h3>Contact Us</h3>

<p>123 School Lane, City, State, ZIP</p>

<p>Phone: (123) 456-7890</p>

<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>

<div class="social-links">

<a href="#" aria-label="Facebook"><img


src="https://img.icons8.com/ios-filled/24/000000/facebook-new.png" alt="Facebook"></a>

<a href="#" aria-label="Twitter"><img


src="https://img.icons8.com/ios-filled/24/000000/twitter--v1.png" alt="Twitter"></a>

<a href="#" aria-label="Instagram"><img


src="https://img.icons8.com/ios-filled/24/000000/instagram-new--v1.png" alt="Instagram"></a>
</div>

</div>

</div>

<div class="footer-bottom">

<div class="container">

<p>&copy; 2025 Our Great School. All rights reserved.</p>

</div>

</div>

</footer>

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

</body>

</html>

You might also like