How to make About us page with html css with source code | about us html template
Output
Watch
Watch Full tutorial On Youtube
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" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>About Us</title>
</head>
<body>
<div class="main-box">
<div class="img-box">
<img src="img.jpeg">
<br>
<center>
<p style="padding-top: 55px">
<h1>Hello, I'm Anna</h1>
<p style="text-align: center;padding: 2px 10px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</p>
</p>
<br>
<br>
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-linkedin"></i>
</center>
</div>
<div class="txt-box">
<h1 style="font-size: 4rem">About us</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<br>
<button id="btn">Contact Us</button>
</div>
</div>
</body>
</html>
CSS code
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main-box{
width: 90%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
column-gap: 100px;
border-left: 5px solid crimson;
border-right: 5px solid crimson;
border-radius: 25px;
box-shadow: 5px 5px 5px grey;
padding: 5px 15px;
}
.img-box{
width: 320px;
height: 500px;
background-color: rgb(0,202,202);
position: relative;
margin-top: 45px;
}
.img-box img{
width: 178px;
border-radius: 50%;
position: absolute;
height: 196px;
left: 70px;
top: -91px;
}
i {
font-size: 30px;
padding: 4px;
}
i:hover{
transition: 350ms ease-in-out;
transform: rotate(347deg);
box-shadow: 0 0 8px green;
font-size: 41px;
color:crimson;
cursor: pointer;
/*padding: 6px;*/
}
.txt-box{
width: 600px;
}
#btn{
border:none;
background-color: transparent;
font-size: 1.2rem;
padding: 5px 10px;
border-left: 2px solid crimson;
border-right: 2px solid crimson;
border-radius: 20px;
}
#btn:hover{
cursor: pointer;
border-left: 2px solid aqua;
border-right: 2px solid aqua;
transition: 200ms ease-in-out;
box-shadow: 5px 5px 5px grey;
transform: scale(1.1);
}