Hello Readers!, The given code is an HTML document for an E-Learning landing page. It includes a head section with meta tags and a title, and a link to a stylesheet and a font-awesome library. The body of the document includes a section element that contains a div with a class of “bg” and three span elements. This div and span elements are used for styling the background.
The main element contains a nav element which has a logo and a menu. The menu contains an unordered list of links for home, about, timing, and courses. There is also a search box with an input field and a magnifying glass icon.
The content div contains two other divs, one for text and the other for an image. The text div includes a heading, a subheading, a paragraph, two buttons and a group of social media icons. The image div includes an image, a rectangle, and a chat icon.
The document also includes a div with a class of “triangle” and an SVG triangle shape which is used for styling.
Overall, this code creates a visually appealing and interactive E-Learning landing page with a navigation menu, a search box, a main content area, and social media icons. The use of CSS styles and a font-awesome library enhances the design and functionality of the page.Regenerate response
Video Tutorial of E-Learning Landing Website
To see a live demonstration of the E-Learning Website, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
E-Learning Website
HTML Part:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!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">
<title>E-Learning Landing Page</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section>
<div class="bg">
<span></span>
<span></span>
<span></span>
</div>
<main>
<nav>
<div class="logoBx">
<img src="./logo.png" alt="logo">
</div>
<div class="menu">
<ul>
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">timing</a>
</li>
<li>
<a href="#">cources</a>
</li>
</ul>
<div class="searchBx">
<input type="text" placeholder="Search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</nav>
<div class="content">
<div class="text">
<h5>lets</h5>
<h2>E-learning<br><span>at your home</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo earum laboriosam enim accusamus eveniet temporibus officiis?</p>
<div class="btnBx">
<button>Apply now</button>
<button>Read More</button>
</div>
<div class="iconBx">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-whatsapp"></i></a>
</div>
</div>
<div class="imgBx">
<div class="img">
<img src="./img.png" alt="img">
</div>
<div class="rec">
<span style="--clr:#6060d8; --widHei:15px"></span>
<span style="--clr:#8f94ef; --widHei:10px"></span>
<span style="--clr:#8f94ef; --widHei:10px"></span>
<span style="--clr:#8f94ef; --widHei:10px"></span>
</div>
<div class="chatBx">
<a href="#"><i class="fa-regular fa-comment-dots"></i></a>
</div>
</div>
</div>
<div class="triangle">
<span>
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200" />
</svg>
</span>
<span>
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200" />
</svg>
</span>
<span>
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200" />
</svg>
</span>
<span>
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200" />
</svg>
</span>
<span>
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200" />
</svg>
</span>
</div>
</main>
</section>
</body>
</html>
This code is for an e-learning landing page. The page starts off with a <!DOCTYPE html> tag and the basic structure of an HTML document, including the head and body. In the head, there is a title for the page, “E-Learning Landing Page”, as well as a link to a stylesheet and a link to a font-awesome library for icons.
In the body of the page, there is a section element that contains a background with three spans, and a main element that contains the navigation and content of the page. The navigation includes a logo, menu links and a search bar.
The content of the page is divided into two parts, the left part contains a text which is an E-learning heading, a paragraph and two buttons, one for “Apply now” and the other for “Read More”. The right part of the content contains an image of a person and a chat icon.
In the last part of the code, there is a triangle shape which is created using an SVG element.
CSS Part:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Baloo Paaji 2";
}
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
section .bg{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8eff7, #dadceb);
z-index: 4;
filter: blur(10px);
}
section .bg span{
position: absolute;
border-radius: 50%;
z-index: 4;
}
section .bg span:nth-child(1){
top: 50%;
left: 70%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: #fadcde;
}
section .bg span:nth-child(2){
top: 40%;
left: 60%;
transform: translate(-50%, -50%);
width: 350px;
height: 350px;
background: #c0d3fe;
}
section .bg span:nth-child(3){
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
background: #d7f0db;
}
section main{
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: blur(100px);
z-index: 11;
}
section main nav{
position: relative;
top: 40px;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
z-index: 100;
}
section main nav .logoBx{
position: relative;
width: calc(100% - 65%);
height: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
}
section main nav .logoBx img{
position: absolute;
left: 70px;
width: 70px;
height: auto;
object-fit: cover;
cursor: pointer;
}
section main nav .menu{
position: relative;
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg, #6060d8, #777ae3, #8f94ef);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
overflow: hidden;
}
section main nav .menu ul{
position: relative;
width: calc(100% - 30%);
display: flex;
justify-content: flex-start;
align-items: center;
}
section main nav .menu ul li{
position: relative;
left: 50px;
width: calc(100% / 4);
display: flex;
justify-content: flex-start;
align-items: center;
list-style: none;
}
section main nav .menu ul li a{
position: relative;
height: 70px;
text-decoration: none;
color: #e8eff7;
font-size: 1.5em;
text-transform: capitalize;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
section main nav .menu ul li:nth-child(1) a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #e8eff7;
border-radius: 10px;
}
section main nav .menu .searchBx{
position: relative;
width: calc(100% - 70%);
height: 70px;
display: flex;
justify-content: flex-start;
align-items: center;
}
section main nav .menu .searchBx input{
position: absolute;
width: 90%;
height: 40px;
border: none;
outline: none;
background: #e8eff7;
border-radius: 15px;
padding-left: 10px;
padding-right: 45px;
font-size: 1.2em;
color: #555;
}
section main nav .menu .searchBx i{
position: absolute;
top: 22px;
right: 50px;
font-size: 1.5em;
color: #8f94ef;
cursor: pointer;
}
section main .content{
position: relative;
top: 40px;
left: 75px;
width: 100%;
height: calc(100% - 120px);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
section main .content .text{
position: relative;
width: calc(100% - 40%);
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
section main .content .text h5{
font-size: 3em;
color: #464646;
text-transform: capitalize;
line-height: 65px;
font-weight: 500;
}
section main .content .text h2{
font-size: 5.5em;
line-height: 60px;
color: #6060d8;
}
section main .content .text h2 span{
color: #464646;
font-size: 0.75em;
}
section main .content .text p{
width: 500px;
margin-top: 20px;
color: #555;
font-size: 1.1em;
line-height: 25px;
}
section main .content .text .btnBx{
position: relative;
width: 400px;
height: 45px;
display: flex;
gap: 20px;
margin-top: 25px;
}
section main .content .text .btnBx button{
position: relative;
width: calc(100% / 2);
background: linear-gradient(45deg, #6060d8, #777ae3);
outline: none;
border: none;
border-radius: 25px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
font-size: 1.3em;
color: #dadceb;
font-weight: 500;
cursor: pointer;
transition: .3s ease;
}
section main .content .text .btnBx button:nth-child(2){
color: #555;
z-index: 1;
}
section main .content .text .btnBx button:nth-child(2)::before{
content: '';
position: absolute;
inset: 3px;
background: #dadceb;
border-radius: 25px;
z-index: -1;
}
section main .content .text .btnBx button:active{
transform: scale(0.9);
}
section main .content .iconBx{
position: absolute;
bottom: 6%;
display: flex;
}
section main .content .iconBx a{
position: relative;
width: 30px;
height: 30px;
border: 2px solid #6060d8;
text-decoration: none;
margin-right: 20px;
border-radius: 50%;
color: #6060d8;
display: flex;
justify-content: center;
align-items: center;
}
section main .content .imgBx{
position: relative;
width: calc(100% - 75px);
height: 100%;
padding-right: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
section main .content .imgBx .img{
position: relative;
width: 600px;
height: 600px;
}
section main .content .imgBx .img img{
position: absolute;
left: -100px;
width: 100%;
height: 100%;
object-fit: cover;
}
section main .content .imgBx .rec{
position: absolute;
right: 10%;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
section main .content .imgBx .rec span{
position: relative;
width: var(--widHei);
height: var(--widHei);
background: var(--clr);
}
section main .content .imgBx .chatBx{
position: absolute;
bottom: 6%;
right: 12%;
width: 60px;
height: 60px;
background: #777ae3;
border-radius: 50%;
overflow: hidden;
}
section main .content .imgBx .chatBx::before{
content: '';
position: absolute;
right: 0;
width: 50%;
height: 100%;
background: #6060d8;
}
section main .content .imgBx .chatBx a{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
section main .content .imgBx .chatBx a i{
font-size: 2.2em;
color: #e8eff7;
}
section main .triangle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
section main .triangle span{
position: absolute;
stroke-width: 60;
z-index: 10;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, .2));
}
section main .triangle span:nth-child(1){
top: -18%;
left: 9%;
fill: #c0d3fe;
stroke: #c0d3fe;
transform: rotate(10deg) scale(0.5);
}
section main .triangle span:nth-child(2){
bottom: -17%;
left: 25%;
fill: #fadcde;
stroke: #fadcde;
transform: rotate(10deg) scale(0.5);
}
section main .triangle span:nth-child(3){
bottom: 17%;
left: 35%;
fill: #d7f0db;
stroke: #d7f0db;
transform: rotate(55deg) scale(0.3);
}
section main .triangle span:nth-child(4){
bottom: -20%;
right: 0;
fill: #ccdcfd;
stroke: #ccdcfd;
transform: rotate(-15deg) scale(1);
}
section main .triangle span:nth-child(5){
bottom: 0;
top: 38%;
right: 24%;
fill: #e4f4e9;
stroke: #e4f4e9;
transform: rotate(20deg) scale(1.5);
}
This code is for a website’s layout and design, specifically for the header section. It uses HTML and CSS to create the structure and styling. It starts with a ‘section’ element which takes up 100% of the viewport height and width. Inside of this section, there is a ‘bg’ class that creates a linear gradient background with a blur effect, and three ‘span’ elements that create circles with different colors and sizes. The main content of the header is containe within a ‘main’ element, which includes a navigation bar and a search bar.
The navigation bar is create using a ‘nav’ element, which includes a logo and four links for the menu. The links are containe within an unordered list (‘ul’) and each list item (‘li’) is style to take up 25% of the width of the navigation bar. The search bar is containe within a ‘searchBx’ class and uses Font Awesome icons for the search icon. The code also contains several other CSS styling for different elements such as text, buttons and icons. Overall, this code helps to create a visually appealing and user-friendly header for the website.
This CSS code is setting up some basic styles for a webpage:
*sets default margin and padding to 0 and sets box-sizing to border-box.sectionsets position to relative, width and height to 100%, and overflow to hidden.section .bgsets position to absolute, width and height to 100%, background to linear gradient, z-index to 4, and filter to blur(10px).section .bg spansets position to absolute, border-radius to 50%, and z-index to 4.section .bg span:nth-child(1)sets top and left to 50%, transform to translate(-50%, -50%), width and height to 500px, and background to #fadcde.section mainsets position to absolute, width and height to 100%, backdrop-filter to blur(100px), and z-index to 11.section main navsets position to relative, top to 40px, width and height to 80px, display to flex, justify-content and align-items to center, overflow to hidden, and z-index to 100.section main nav .logoBxsets position to relative, width to calc(100% – 65%), height to 50px, display to flex, justify-content and align-items to flex-start.section main nav .logoBx imgsets position to absolute, left to 70px, width and height to 70px, object-fit to cover, and cursor to pointer.section main nav .menusets position to relative, width to 100%, height to 70px, display to flex, justify-content and align-items to center, background to linear gradient, box-shadow, border-radius and overflow to hidden.section main nav .menu ulsets position to relative, width to calc(100% – 30%), display to flex, justify-content and align-items to flex-start.section main nav .menu ul lisets position to relative, left to 50px, width to calc(100% / 4), display to flex, justify-content and align-items to center, list-style to none.section main nav .menu ul li asets position to relative, height to 70px, text-decoration to none, color to #e8eff7, font-size to 1.5em, text-transform to capitalize, display to flex, justify-content and align-items to center, cursor to pointer.section main nav .menu ul li:nth-child(1) a::beforesets content to ”, position to absolute, top and left to 0, width to 100%, height to 4px, background to #e8eff7, and border-radius to 10px.
Summary:
This code is an HTML document for an e-learning landing page. It includes a section with a background image, a main navigation menu with a logo and menu items, a search bar, and a content section with text and images. The text section includes a title, a subtitle, a short paragraph, and two buttons. The image section includes an image and a chat icon. The code also includes a link to a CSS stylesheet and a link to an external font library for icons. The page also includes a triangle shape made by svg.
