How to create About page using html and CSS, JS
how to Create About page using html and CSS ,JS
👇ஃ Create a About us page with source codeஃ
Source Code
<!DOCTYPE html>
<html>
<head>
<!-- Basic -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<!-- Mobile Metas -->
<meta name="viewport"
content="width=device-width,
initial-scale=1, shrink-to-fit=no" />
<!-- Site Metas -->
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon"
href="images/favicon.png" type="image/x-icon">
<title>
About Me
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="css/style.css">
<link rel="stylesheet" type="text/css"
href="https://
cdnjs.cloudflare.com/ajax/libs/font-awesome
/5.15.1/css/all.min.css">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<!-- slider stylesheet -->
<link rel="stylesheet" type="text/css"
href="https://
cdnjs.cloudflare.com/ajax/libs/OwlCarousel2
/2.3.4/assets/owl.carousel.min.css" />
<!-- bootstrap core css -->
<link rel="stylesheet" type="text/css"
href="css/bootstrap.css" />
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet"/>
<!-- responsive style -->
<link href="css/responsive.css"
rel="stylesheet" />
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img\backgroundimagejpg2.jpg"
style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img\anarkali salwar
suitbackground.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img\backgroundimg1.jpg"
style="width:100%">
</div>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.
getElementsByClassName("mySlides");
let dots = document
.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length)
{slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].
className.replace(" active", "");
}
slides[slideIndex-1].style.display =
"block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); //
Change image every 2 seconds
}
</script>
<div class="hero_area">
</div>
<section class="contact_section
layout_padding">
<div class="container container-bg">
<div class="row">
<div class=" col-md-3 px-0">
</div>
<div class="col-md-9 px-0 p-3">
<center ><b><h1>ABOUT US
</h1></b></center>
<p><center><b>
Shree Saree shop this product
at home with the help of different type of
saree. we are able to view unique and
attractive design.
The owner of the macarme product 2years
experience for created the Shree
saree shop product but she as working on this
</center></b>
</p><br>
<div>
<center><b><h1>My Vision :
</h1></b> </center>
<p><center><b>
Shree saree shop product
is made creative and innovative way
fulfillment of customer orders
</center></b>
</p>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.4.1.min.js">
</script>
<script src="js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/
ajax/libs/OwlCarousel2/2.3.4/
owl.carousel.min.js">
</script>
<script src="js/custom.js"></script>
</body>
</html>
how to make About page using html and CSS,JS
Output :-
