html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Learning World</title>
</head>
<body>
<nav class="navbar background h-nav-resp">
<ul class="nav-list v-class-resp">
<div class="logo"><img src="images/logo.jpeg" alt="logo"></div>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
<div class="rightNav v-class-resp">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<section class="background firstSection">
<div class="box-main">
<div class="firstHalf">
<p class="text-big">The Future of Education is here</p>
<p class="text-small">In this world of 7 billion people we need to educate all of them. This is the
future of an educated world and we are proud to say that the Future of Education is here</p>
<div class="buttons">
<button class="btn">Subscribe</button>
<button class="btn">Watch Video</button>
</div>
</div>
<div class="secondHalf">
<img src="images/logo.jpeg" alt="Laptop Image">
</div>
</div>
</section>
<section class="section">
<div class="paras">
<p class="sectionTag text-big">The end of your search is here</p>
<p class="sectionSubTag text-small">ducation is the process of facilitating learning, or the acquisition of
knowledge, skills, values, beliefs, and habits.
Educational methods include teaching, training, storytelling, discussion and directed research.
Education frequently
takes place under the guidance of educators, however learners can also educate themselves.[1] Education
can take place
in formal or informal settings and any experience that has a formative effect on the way one thinks,
feels, or acts may
be considered educational. The methodology of teaching is called pedagogy.education in zambia </p>
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/900x900/?coding,apple" alt="laptop image" class="imgFluid">
</div>
</section>
<section class="section section-left" id="about">
<div class="paras">
<p class="sectionTag text-big">Transforming Education in Pakistan</p>
<p class="sectionSubTag text-small">Many public schools provide a free education through the government.
Parents may send their own children to a private
schools, but they must pay for it. In some poorer places, some children cannot go to school, because
their countries do
not make education available in their countries, or because their families do not have enough money, or
because the
children have to work for money, or because the society have negative prejudice on education for
girls.The city of Alexandria in
Egypt, established in 330 BCE, became the successor to Athens as the intellectual cradle of Ancient
Greece. There, the
great Library of Alexandria was built in the 3rd century BCE. European civilizations suffered a collapse
of literacy and
organization following the fall of Rome in CE 476.</p>
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/900x900/?coding,apple,html" alt="laptop image" class="imgFluid">
</div>
</section>
<section class="section" id="services">
<div class="paras">
<p class="sectionTag text-big">Lets Grow Together</p>
<p class="sectionSubTag text-small">Education began in prehistory, as adults trained the young in the
knowledge and skills deemed necessary in their
society. In pre-literate societies, this was achieved orally and through imitation. Story-telling passed
knowledge,
values, and skills from one generation to the next. As cultures began to extend their knowledge beyond
skills that could
be readily learned through imitation, formal education developed. Schools existed in Egypt at the time
of the Middle
Kingdom.</p>
<p class="sectionSubTag text-small">
Matteo Ricci (left) and Xu Guangqi (right) in the Chinese edition of Euclid's Elements published in 1607
Plato founded the Academy in Athens, the first institution of higher learning in Europe.
</p>
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/900x900/?javascript,apple, nature, happy" alt="laptop image"
class="imgFluid">
</div>
</section>
<section class="contact" id="contact">
<h1 class="text-center">Contact Us</h1>
<div class="form">
<input class="form-input" type="text" name="name" id="name" placeholder="Enter Your name">
<input class="form-input" type="text" name="phone" id="phone" placeholder="Enter Your Phone">
<input class="form-input" type="email" name="email" id="email" placeholder="Enter Your email">
<textarea class="form-input" name="text" id="text" cols="30" rows="10"
placeholder="Ellaborate your concern"></textarea>
<button class="btn btn-sm btn-dark">Submit</button>
</div>
</section>
<footer class="background">
<p class="text-footer">
Copyright © 2027 - www.iEducate.com - All rights reserved
</p>
</footer>
</body>
</html>
Css code
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
*{
margin: 0;
padding:0;
}
html{
scroll-behavior: smooth;
}
.logo{
width:20%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img{
width: 26%;
border: 3px solid white;
border-radius: 50px;
margin: 5px;
}
.navbar{
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top:0;
cursor: pointer;
}
.nav-list{
width: 70%;
display: flex;
align-items: center;
}
.nav-list li{
list-style: none;
padding: 26px 30px;
}
.nav-list li a{
text-decoration: none;
color: white;
font-size: 20px;
font-family: 'Ubuntu', sans-serif;
}
.nav-list li a:hover{
color: rgb(197, 194, 194);
}
.rightNav{
width: 30%;
text-align: right;
padding: 0 23px;
}
#search{
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background{
background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
background-size: cover;
background-blend-mode: darken;
}
.firstSection{
height: 100vh;
}
.box-main{
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 50%;
margin: auto;
height: 80%;
}
.firstHalf{
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.secondHalf{
width: 30%;
}
.secondHalf img{
width: 70%;
border: 4px solid white;
border-radius: 150px;
display: block;
margin: auto;
}
.text-big{
font-size: 41px;
}
.text-small{
font-size: 18px;
}
.btn{
padding: 8px 20px;
margin: 7px 3px;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
}
.btn-sm{
padding: 6px 10px;
vertical-align: middle;
font-size: 16px;
}
.btn-dark{
color: black;
border: 2px solid grey;
}
.section{
display: flex;
align-items: center;
justify-content: space-evenly;
max-width: 80%;
margin: auto;
font-family: 'Ubuntu', sans-serif;
padding: 10px;
}
.section-left{
flex-direction: row-reverse;
}
.paras{
padding: 0px 65px;
}
.sectionTag{
padding: 16px 0;
}
.sectionSubTag{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.thumbnail img{
width: 250px;
border: 2px solid black;
border-radius: 26px;
margin-top: 19px;
}
.contact{
background-color: #f6f5f4;
height: 833px;
}
.text-center{
text-align: center;
padding-top: 30px;
font-family: 'Ubuntu', sans-serif;
font-size: 35px;
}
.form{
max-width: 62%;
margin: 25px auto;
}
.form-input{
margin: 14px 0;
padding: 5px 13px;
width: 100%;
font-size: 19px;
border: 2px solid grey;
border-radius: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.text-footer{
text-align: center;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
color: white;
}
.burger{
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top:15px;
}
.line{
width: 33px;
background-color: white;
height: 4px;
margin: 5px 3px;
}
0 Comments