<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Beacon Home Tutoring Academy</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
header {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
text-align: center;
.logo {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
nav {
background-color: #34495e;
padding: 0.5rem 0;
nav ul {
display: flex;
justify-content: center;
list-style: none;
nav ul li {
margin: 0 1rem;
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
.hero {
background-image: linear-gradient(rgba(0,0,0,0.5),
rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1523050854058-
8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 0 1rem;
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
.hero p {
font-size: 1.2rem;
max-width: 800px;
margin-bottom: 2rem;
.btn {
display: inline-block;
background-color: #e74c3c;
color: white;
padding: 0.8rem 1.5rem;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
.btn:hover {
background-color: #c0392b;
.services {
padding: 3rem 1rem;
text-align: center;
.services h2 {
margin-bottom: 2rem;
font-size: 2rem;
color: #2c3e50;
.service-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.service-card {
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
padding: 1.5rem;
width: 300px;
transition: transform 0.3s;
.service-card:hover {
transform: translateY(-10px);
.service-card h3 {
color: #e74c3c;
margin-bottom: 1rem;
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 1rem;
.contact-info {
margin-bottom: 1rem;
}
.contact-info p {
margin: 0.5rem 0;
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
nav ul li {
margin: 0.5rem 0;
.hero h1 {
font-size: 2rem;
</style>
</head>
<body>
<header>
<div class="logo">Beacon Home Tutoring Academy</div>
<p>Illuminating the path to academic success</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
<section class="hero">
<h1>Personalized Education for Your Child's Success</h1>
<p>We provide one-on-one tutoring services tailored to your child's
unique learning needs, helping them reach their full academic
potential.</p>
<a href="about.html" class="btn">Learn More</a>
</section>
<section class="services">
<h2>Our Services</h2>
<div class="service-container">
<div class="service-card">
<h3>Individualized Tutoring</h3>
<p>One-on-one sessions focused on your child's specific needs
and learning style, covering all subjects and grade levels.</p>
</div>
<div class="service-card">
<h3>Exam Preparation</h3>
<p>Specialized coaching for school exams, standardized tests,
and college entrance examinations with proven strategies.</p>
</div>
<div class="service-card">
<h3>Homework Help</h3>
<p>Daily assistance with homework assignments and projects
to reinforce classroom learning and improve grades.</p>
</div>
</div>
</section>
<footer>
<div class="contact-info">
<p>Email: Beaconhometutoringacademy@gmail.com</p>
<p>Phone: +92 349 1015668</p>
</div>
<p>© 2023 Beacon Home Tutoring Academy. All rights
reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>About Us - Beacon Home Tutoring Academy</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
header {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
text-align: center;
.logo {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
nav {
background-color: #34495e;
padding: 0.5rem 0;
nav ul {
display: flex;
justify-content: center;
list-style: none;
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
.about {
padding: 3rem 1rem;
max-width: 1000px;
margin: 0 auto;
.about h1 {
text-align: center;
margin-bottom: 2rem;
color: #2c3e50;
font-size: 2.5rem;
.about-content {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 3rem;
.about-text {
flex: 1;
min-width: 300px;
.about-text h2 {
color: #e74c3c;
margin-bottom: 1rem;
.about-text p {
margin-bottom: 1rem;
.about-image {
flex: 1;
min-width: 300px;
.about-image img {
width: 100%;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
.team {
text-align: center;
margin-top: 3rem;
}
.team h2 {
color: #2c3e50;
margin-bottom: 2rem;
font-size: 2rem;
.team-members {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
.team-member {
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
padding: 1.5rem;
width: 250px;
.team-member img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
.team-member h3 {
color: #e74c3c;
margin-bottom: 0.5rem;
.team-member p {
color: #7f8c8d;
font-style: italic;
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 1rem;
margin-top: 3rem;
.contact-info {
margin-bottom: 1rem;
.contact-info p {
margin: 0.5rem 0;
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
nav ul li {
margin: 0.5rem 0;
</style>
</head>
<body>
<header>
<div class="logo">Beacon Home Tutoring Academy</div>
<p>Illuminating the path to academic success</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
<section class="about">
<h1>About Beacon Home Tutoring Academy</h1>
<div class="about-content">
<div class="about-text">
<h2>Our Mission</h2>
<p>At Beacon Home Tutoring Academy, we believe every
student deserves personalized attention to unlock their full academic
potential. Our mission is to provide high-quality, individualized tutoring
that addresses each student's unique learning needs and helps them
achieve their educational goals.</p>
<h2>Our Approach</h2>
<p>We take a holistic approach to tutoring, focusing not just on
academic content but also on developing effective study skills, building
confidence, and fostering a love for learning. Our tutors work closely with
students to identify their strengths and areas for improvement, creating
customized learning plans that deliver results.</p>
<h2>Why Choose Us?</h2>
<p>With years of experience in education, our team of qualified
tutors is dedicated to helping students succeed. We offer flexible
scheduling, competitive rates, and a proven track record of improving
grades and test scores. Our in-home tutoring service provides a
comfortable learning environment where students can thrive.</p>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1588072432836-
e10032774350?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="Tutoring session">
</div>
</div>
<div class="team">
<h2>Meet Our Team</h2>
<div class="team-members">
<div class="team-member">
<img
src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah
Johnson">
<h3>Sarah Johnson</h3>
<p>Founder & Math Tutor</p>
</div>
<div class="team-member">
<img src="https://randomuser.me/api/portraits/men/32.jpg"
alt="David Chen">
<h3>David Chen</h3>
<p>Science Tutor</p>
</div>
<div class="team-member">
<img
src="https://randomuser.me/api/portraits/women/68.jpg" alt="Amina
Khan">
<h3>Amina Khan</h3>
<p>English Tutor</p>
</div>
</div>
</div>
</section>
<footer>
<div class="contact-info">
<p>Email: Beaconhometutoringacademy@gmail.com</p>
<p>Phone: +92 349 1015668</p>
</div>
<p>© 2023 Beacon Home Tutoring Academy. All rights
reserved.</p>
</footer>
</body>
</html>
