How to About Us Page Section Using HTML & CSS
How to About Us Page Section Using HTML & CSS
HTML :
<!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">
<script src="https://kit.fontawesome.com/2f934aa499.js"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>About Us</title>
</head>
<body>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1>About Us</h1>
</div>
<div class="content">
<h3>The Intelligent Youtube Channel</h3>
<p>This channel is web devlopment topics and
language like HTML, CSS, JAVA script to
releted video upload.
<br> and my shopping website is available</p>
<div class="button">
<a href="#">Read More</a>
</div>
</div>
<div class="social">
<a href="#" onclick="location.href=''">
<i class="fa-brands fa-instagram"></i></a>
<a href="#" onclick="location.href=''">
<i class="fa-brands fa-facebook"></i></a>
<a href="#" onclick="location.href=''">
<i class="fa-brands fa-twitter"></i></a>
<a href="#" onclick="location.href=''">
<i class="fa-brands fa-blogger"></i></a>
<a href="#" onclick="location.href=''">
<i class="fa-brands fa-youtube"></i></a>
<a href="#" onclick="location.href=''">
<i class="fa-solid fa-shop"></i></a>
</div>
</div>
<div class="image-section">
<img src="img one.png">
</div>
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=
Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,100&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container{
width: 80%;
display: block;
margin: auto;
padding-top: 100px;
}
.content-section{
float: left;
width: 55%;
}
.image-section{
float: right;
width: 40%;
}
.image-section img{
width: 80%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color: #5d5d5d;
font-size: 23px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
}
.content-section .content .button{
margin-top: 30px;
}
.content-section .content .button a{
background-color: #3d3d3d;
padding: 12px 40px;
text-decoration: none;
color: #fff;
font-size: 25px;
border-radius: 50px;
letter-spacing: 1.5px;
transition: 0.5s ease;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color: #fff;
}
.content-section .social{
margin-top: 40px;
}
.content-section .social i{
color: #a52a2a;
font-size: 30px;
padding: 0px 10px;
transition: 0.5s ease;
}
.content-section .social i:hover{
color: #000;
}
plz watch a full video:
Comments
Post a Comment