E-Learning Website Using HTML CSS With Free Source Code
Introduction
Hello developers, Welcome to another new project. As you can see that our today’s project is about the E-learning website. In this project we’ll learn that how to create this type of project using HTML and CSS. In this project we’ve only used HTML and CSS. Our E-learning website is based on a online education platform.
This E-learning website is build to provide education online and provide some education stuff to students. This is gonna help help student to learn and they can study from their home. E-learning platform provides online education to every part of the world so that student or aspirant can learn from the best and they can save time and money both.
Our E-learning project is build using two frontend technologies which are HTML and CSS. We’ve used HTML which is known as Hyper Text Markup Language, to create structure of our website. After creating structure of our website , we move to CSS. By applying CSS we’ve styled all of our website’s components.
Let’s see and understand our code.
index.html
Document Type and HTML Structure
First, it starts with a document type declaration that declares this to be an HTML5 document. Following this, it proceeds to declare the core structure of HTML with the language set as English.
Head Section
The <head> section is important because it holds metadata and links to external resources that improve the functionality and appearance of a website. This is comprised by the character set, needed in displaying text; the settings for the viewport, used for responsiveness; the title of the webpage; and links to stylesheets which include custom fonts and icons that enhance the visual appeal of the site.
Body Section
- Navigation Bar : It starts with a navigation bar, then an easy way to get to sections like Home, About, Services, and Courses, plus, of course, a big call-to-action button.
- Hero Section : This section is outstanding with compelling text, key listed points, action buttons, and an attractive image which captures user attention and conveys the mission of the website.
- Trust Section : Following this section comes the trust section which aims at establishing credibility with user ratings and user reviews with a money-back guarantee, thus giving assurance to visitors of the reliability of the site.
- Course Section : It contains course details of what it comprises and who it is suited for, represented with icons, descriptions, etc., thereby empowering its users to make informed decisions.
- Course Catalog : Course catalog in overview enables courses to have an individual section consisting of an image, title, a brief description, and the booking buttons, making it easy for a user to browse when looking to join a course.
- About Section : The about section provides an inside view into the mission and values of the organization, with a clear outline of benefits, further calls to action to engage the user.
- App Section : The app section encourages the availability of the mobile app, complete with download links and user ratings, provokes the visitor to log in to educational content on their devices.
Footer Section :
Finally, the footer summarizes everything with the most relevant information and links, like contact details, social media icons, and legal information—everything within one’s hand.
that’s all about our HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/08/post7-768x417.png 768w, https://developergoutam.com/wp-content/uploads/2024/08/post7-300x163.png 300w, https://developergoutam.com/wp-content/uploads/2024/08/post7-1024x556.png 1024w, https://developergoutam.com/wp-content/uploads/2024/08/post7-150x81.png 150w, https://developergoutam.com/wp-content/uploads/2024/08/post7-450x244.png 450w, https://developergoutam.com/wp-content/uploads/2024/08/post7-1200x652.png 1200w, https://developergoutam.com/wp-content/uploads/2024/08/post7.png 1381w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="nav">
<div class="logo">
<h1>ELearning</h1>
</div>
<div class="menuitem">
<a href="#">Home</a>
<a href="/">About</a>
<a href="/">Service</a>
<a href="/">Course</a>
</div>
<div class="btn">
<button>Get Started</button>
</div>
</div>
<div class="herosec">
<div class="left">
<p class="heading">We are dedicated team <br> of educators who are <br> <span>passionate learning</span>
<br> experience
</p>
<div class="point">
<ul>
<li>Camprehensive course catalog</li>
<li>Our experienced teachers are passionate about helping student</li>
<li>Course are designed to meet the learning needs</li>
</ul>
</div>
<div class="btn">
<input class="btn1" type="button" value="Get Started">
<input class="btn2" type="button" value="Free Course">
</div>
</div>
<div class="right">
<img decoding="async" src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="">
</div>
</div>
<div class="trust">
<div class="left">
<p><i class="fa-solid fa-star"></i> Trustpilot</p>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="review"><span>TrustScore</span> 4.5 | 1500 reviews</p>
</div>
<div class="right">
<i class="fa-solid fa-certificate"></i>
<p>15 Days Money Back Guarantee</p>
</div>
</div>
<div class="coursesec">
<div class="mainbox">
<div class="left">
<h1>What's included in this <br> course</h1>
</div>
<div class="right">
<div class="one">
<i class="fa-solid fa-video"></i>
<p>Interactive Learning Tools</p>
</div>
<div class="one">
<i class="fa-solid fa-bahai"></i>
<p>Suitable for beginners and advanced users</p>
</div>
<div class="one">
<i class="fa-solid fa-certificate"></i>
<p>Comprehesive Course Catalog</p>
</div>
<div class="one">
<i class="fa-regular fa-circle-play"></i>
<p>Experienced Teachers</p>
</div>
<div class="one">
<i class="fa-brands fa-leanpub"></i>
<p>Multiple video lessons</p>
</div>
</div>
</div>
<div class="twobox">
<div class="left2">
<i class="fa-solid fa-circle-check"></i>
<p>The program is for you who want to archieve long-term financial <br> freedom.</p>
</div>
<div class="right2">
<i class="fa-solid fa-circle-xmark"></i>
<p>Program not for you looking for quick and easy money.</p>
</div>
</div>
</div>
<div class="course-catalog">
<div class="heading">
<h1>Comprehensive Course Catalog</h1>
<p>Our Website offers a wide range of course in various subjects <br> form basic skills to advanced levels
</p>
</div>
<div class="course-box">
<div class="box">
<img decoding="async" src="https://cdn.pixabay.com/photo/2018/07/10/10/29/girl-3528292_640.jpg" alt="">
<div class="text">
<h3>Supportive online learning community</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>Book Now</button>
</div>
</div>
<div class="box">
<img decoding="async" src="https://cdn.pixabay.com/photo/2020/11/10/21/00/boy-5731001_640.jpg" alt="">
<div class="text">
<h3>Supportive online learning community</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>Book Now</button>
</div>
</div>
<div class="box">
<img decoding="async" src="https://cdn.pixabay.com/photo/2019/03/10/03/36/reading-4045414_640.jpg" alt="">
<div class="text">
<h3>Supportive online learning community</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>Book Now</button>
</div>
</div>
<div class="box">
<img decoding="async" src="https://cdn.pixabay.com/photo/2018/03/01/07/22/education-3189934_640.jpg" alt="">
<div class="text">
<h3>Supportive online learning community</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>Book Now</button>
</div>
</div>
</div>
<div class="slide">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="about">
<div class="right">
<img decoding="async" src="https://cdn.pixabay.com/photo/2017/05/31/06/49/model-2359322_640.jpg" alt="">
</div>
<div class="left">
<p class="heading">About Us</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis, praesentium ea eveniet alias saepe
voluptatibus! Pariatur vero explicabo natus et, earum, impedit error quae distinctio quaerat incidunt
vitae beatae? Odio tempora aperiam sint eligendi nesciunt beatae minima quos blanditiis eius.</p>
<div class="point">
<ul>
<li>Camprehensive course catalog</li>
<li>Our experienced teachers are passionate about helping student</li>
<li>Course are designed to meet the learning needs</li>
</ul>
</div>
<div class="btn">
<input class="btn1" type="button" value="Get Started">
<input class="btn2" type="button" value="Free Course">
</div>
</div>
</div>
<section class="app-sec">
<div class="txt">
<p class="head">App on Google Play or App Store</p>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum hic, aperiam suscipit ab
eligendi
perspiciatis voluptas. Adipisci vero ab magni!</p>
</div>
<div class="btn">
<a href="/" tabIndex="0"><img decoding="async" class="bn45"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png"
alt="bn45" /></a>
<a href="/" tabIndex="0"><img decoding="async" class="bn46"
src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
alt="bn45" /></a>
</div>
<div class="rat">
<p>Excellent <span>4.9</span></p>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</section>
<footer class="foot-sec">
<div class="main-box">
<div class="box1">
<h1>DeveloperGTM</h1>
<div class="social">
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div class="box2">
<h1>Quick Link</h1>
<div class="btn">
<a class="home-btn" href="/">Home</a>
<a href="/">Service</a>
<a href="/">Course</a>
<a href="/">Affiliate</a>
</div>
</div>
<div class="box2">
<h1>Quick Link</h1>
<div class="btn">
<a class="home-btn" href="/">Home</a>
<a href="/">About</a>
<a href="/">Privacy Policy</a>
<a href="/">Contact Us</a>
</div>
</div>
<div class="box4">
<h1>Contact Us</h1>
<div class="add">
<p>Demo24@gmail.com</p>
<p>+9999-9999-99</p>
</div>
</div>
</div>
<div class="copy">
<p>Copyright © 2024 Design By <span>DeveloperGTM</span></p>
</div>
</footer>
</body>
</html>
style.css
The reset universal selector eliminates the default margins and paddings and, therefore, sets everything fresh for user styles.
Navigation Bar
The navigation bar utilizes flex boxes for item alignment and space distribution. It has a background color, padding, height, and font family to style it into one from the set. For the logo, a special cursive font is added. The menu items are widely spread with a good clear definite font size. The links have no underline style, and on hover, they change their text-decoration. Therefore very interactive. The button inside the navigation bar has padding, rounded corners, no border, a defined padding, and a clear background color and lastly smooth transition effects on hover making it very attractive and interactive.
Hero Section
Uses the flexbox to align the content and distribute space. This one has some padding, a background-color, and a font-family set. So, the left part will have text elements—most column-aligned, though, and there is some space between them. The main heading of that will be large and bold, though some text in it is emphasized. The other text points have some padding and really quite a specific line height and color. On the right, an image with a specific size, box shadow, and rounded corners, making it conspicuous. Hero Section Buttons look repetitive due to same padding, rounded corners, and the background color. Also, there are hover effects added.
Trust Section
Used flex box for the alignment of this section. Added background color and font family. Applied Styles: Left part are elements with grouped columns and star ratings and reviews with specific colors. Right part is grouped elements with background color, padding, and rounded corners. It will look more interesting visually.
The course section is a block flex container, with color background, and padding, it takes the specific font family. It has the main box, which is in a row with the justify-content distribute elements, and so, it added padding for easy identification. The right side has columns with aligned elements, icon elements, and the description. The other course details are obtained and displayed in the main boxes that are distributed within the lines with padding, background color, and border radius.
Course Catalog
The course catalog section applies appropriate padding and a font family and uses flexbox. Its heading is centred and course boxes are flex containers with shadows and rounded corners. Inside, both images and text have been sized and styled. The buttons have been padded out, applied to rounded corners and background color, with transition effects on hover.
About Section
App About section – applied flex box to align and distribute the space of the content with some padding, specified background with a color code, font family, text elements in column with space, large headings out color, and some text highlighted on the left side and image on the right side is box shadowed and rounded corner, fixed width – and buttons are styled consistently and moderate transition defined on hover
All the app part items are flexbox-centered, include padding, and have specific font-family classes applied. The text is aligned in a column with spaces applied. Headings and button text are centered. The paragraph has a specified color. Buttons are displayed with spacing added and sizing. Ratings are aligned with icons and text with defined colors provided.
Footer Section
The content in the footer section is centered and is given padding, height, and font family using flex. The main box has distributed elements with definite colors, padding, and rounded border configurations aligned in columns. The social icons and all elements have no color. The copyright section has color-aligned text and is centered. This makes every information adopted to be useful and very easy to read.
* {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background: #388359;
padding: 0 69px;
height: 70px;
font-family: "Roboto", sans-serif;
}
.nav .logo {
font-family: cursive;
}
.nav .menuitem {
column-gap: 10px;
font-size: 18px;
display: flex;
align-items: center;
}
.nav .menuitem a {
text-decoration: none;
color: white;
padding: 10px 30px;
}
.nav .menuitem a:hover {
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.nav .btn button {
padding: 17px 30px;
border-radius: 7px;
border: none;
background: greenyellow;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.nav .btn button:hover {
box-shadow: greenyellow 0px 7px 20px 0px;
}
.herosec {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 69px;
background-color: #388359;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: "Roboto", sans-serif;
}
.herosec .left {
display: flex;
flex-direction: column;
row-gap: 20px;
justify-content: flex-start;
align-items: flex-start;
}
.herosec .left .heading {
font-size: 2.5rem;
font-weight: 500;
color: white;
}
.herosec .left .point {
padding-left: 20px;
display: flex;
line-height: 25px;
color: #c9c1c1;
}
.herosec .left .heading span {
color: greenyellow;
}
.herosec .right img {
height: 430px;
width: 430px;
box-shadow: 12px 15px 3px 4px #264e38;
border-radius: 15px;
}
.herosec .left .btn {
display: flex;
column-gap: 15px;
}
.herosec .left .btn .btn1 {
padding: 17px 30px;
border-radius: 7px;
border: none;
background: greenyellow;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.herosec .left .btn .btn2 {
padding: 17px 30px;
border-radius: 7px;
border: none;
background: white;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.herosec .left .btn .btn1:hover {
box-shadow: greenyellow 0px 7px 20px 0px;
}
.herosec .left .btn .btn2:hover {
box-shadow: white 0px 7px 20px 0px;
}
.trust {
display: flex;
height: 110px;
justify-content: space-between;
padding: 0 69px;
background-color: #264e38;
align-items: center;
font-family: "Roboto", sans-serif;
}
.trust .left {
display: flex;
flex-direction: column;
row-gap: 10px;
}
.trust .left .star i {
background: #32d379;
padding: 10px;
}
.trust .left p {
color: #c9c1c1;
font-size: 13px;
}
.trust .left .review span {
color: #c9c1c1;
}
.trust .left .review {
color: white;
}
.trust .left p i {
color: #32d379;
}
.trust .right {
display: flex;
column-gap: 10px;
align-items: center;
background: #a3a1a147;
padding: 20px 50px;
border-radius: 3px;
}
.trust .right i {
color: yellow;
}
.trust .right p {
color: white;
}
.coursesec {
display: flex;
flex-direction: column;
background: whitesmoke;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: "Roboto", sans-serif;
}
.coursesec .mainbox {
display: flex;
justify-content: space-between;
padding: 0 69px;
padding-right: 117px;
}
.coursesec .right {
row-gap: 10px;
display: flex;
flex-direction: column;
align-items: baseline;
width: 500px;
}
.coursesec .right .one {
display: flex;
column-gap: 14px;
align-items: center;
justify-content: center;
}
.coursesec .right .one i {
background: #32d379;
padding: 10px;
border-radius: 30px;
font-size: 13px;
}
.coursesec .twobox {
display: flex;
justify-content: space-between;
padding: 0 69px;
margin-top: 50px;
}
.coursesec .left2 {
background: white;
display: flex;
align-items: center;
padding: 15px 65px;
column-gap: 13px;
border-radius: 6px;
}
.coursesec .left2 i {
color: green;
}
.coursesec .right2 {
background: white;
display: flex;
align-items: center;
padding: 15px 65px;
column-gap: 13px;
border-radius: 6px;
}
.coursesec .right2 i {
color: red;
}
.course-catalog {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 50px;
padding-bottom: 50px;
font-family: "Roboto", sans-serif;
}
.course-catalog .heading {
text-align: center;
display: flex;
flex-direction: column;
row-gap: 10px;
}
.course-catalog .course-box {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.course-catalog .course-box .box {
width: 310px;
background: white;
width: 310px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
display: flex;
flex-direction: column;
text-align: center;
margin: 10px;
}
.course-catalog .course-box .box img {
width: 310px;
border-radius: 10px;
}
.course-catalog .course-box .box .text{
padding: 20px;
display: flex;
flex-direction: column;
row-gap: 10px;
justify-content: center;
align-items: center;
}
.course-catalog .course-box .box .text button{
padding: 13px 30px;
border-radius: 7px;
border: none;
background: greenyellow;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.course-catalog .course-box .box .text button:hover{
box-shadow: greenyellow 0px 7px 20px 0px;
}
.course-catalog .slide{
display: flex;
column-gap: 5px;
justify-content: center;
align-items: center;
padding-top: 30px;
}
.course-catalog .slide div{
background-color: darkgray;
height: 3px;
width: 30px;
cursor: pointer;
}
.about {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 69px;
background-color: whitesmoke;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: "Roboto", sans-serif;
}
.about .left {
display: flex;
flex-direction: column;
row-gap: 20px;
justify-content: flex-start;
width: 520px;
align-items: flex-start;
}
.about .left .heading {
font-size: 2.5rem;
font-weight: 500;
color: black;
}
.about .left .point {
padding-left: 20px;
display: flex;
line-height: 25px;
color: black;
}
.about .left .heading span {
color: greenyellow;
}
.about .right img {
height: 430px;
width: 430px;
box-shadow: -14px -15px 3px 4px #a3a1a147;
border-radius: 15px;
}
.about .left .btn {
display: flex;
column-gap: 15px;
}
.about .left .btn .btn1 {
padding: 17px 30px;
border-radius: 7px;
border: none;
background: #5c5c5c;
color: gold;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.about .left .btn .btn2 {
padding: 17px 30px;
border-radius: 7px;
border: none;
background: white;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.about .left .btn .btn1:hover {
box-shadow: #5c5c5c 0px 7px 20px 0px;
}
.about .left .btn .btn2:hover {
box-shadow: white 0px 7px 20px 0px;
}
.app-sec {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px;
height: 350px;
background-color: white;
font-family: "Roboto", sans-serif;
}
.app-sec .txt {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
text-align: center;
}
.app-sec .txt .head {
font-size: 3rem;
color: black;
font-weight: 700;
}
.app-sec .txt .para {
width: 52%;
color: rgb(133, 124, 124);
}
.app-sec .btn {
display: flex;
column-gap: 25px;
margin-top: 20px;
}
.bn45 {
width: 170px;
height: 50px;
}
.bn46 {
width: 150px;
height: 50px;
}
.app-sec .rat {
display: flex;
align-items: center;
column-gap: 10px;
margin-top: 20px;
}
.app-sec .rat i {
color: rgb(255, 166, 0);
}
.app-sec .rat p {
font-size: 20px;
color: black;
}
.app-sec .rat p span {
color: rgba(50, 255, 60, 0.904);
}
.foot-sec {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px;
height: 300px;
background-color: black;
font-family: "Roboto", sans-serif;
}
.foot-sec .main-box {
display: flex;
column-gap: 130px;
align-items: baseline;
justify-content: center;
}
.foot-sec .main-box .box1 h1 {
color: white;
}
.foot-sec .main-box .box1 .social {
display: flex;
column-gap: 20px;
}
.foot-sec .main-box .box1 i {
color: black;
font-size: 20px;
background: greenyellow;
cursor: pointer;
padding: 10px;
border-radius: 30px;
}
.foot-sec .main-box .box2 h1 {
color: white;
}
.foot-sec .main-box .box2 i {
color: white;
}
.foot-sec .main-box .box1 {
display: flex;
flex-direction: column;
row-gap: 24px;
justify-content: center;
align-items: center;
}
.foot-sec .main-box .box2 .btn {
display: flex;
flex-direction: column;
row-gap: 15px;
padding-top: 20px;
}
.foot-sec .main-box .box2 .btn a {
text-decoration: none;
color: rgb(141, 137, 137);
}
.foot-sec .main-box .box4 {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.foot-sec .main-box .box4 .add {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.foot-sec .main-box .box4 h1 {
color: white;
}
.foot-sec .main-box .box4 .add p {
color: rgb(141, 137, 137);
}
.foot-sec .copy {
margin-top: 57px;
/* background: red; */
width: 100%;
padding: 20px;
justify-content: center;
align-items: center;
display: flex;
margin-bottom: -30px;
}
.foot-sec .copy p{
color: white;
}
.foot-sec .copy p span{
color: greenyellow;
}