Hello Dosto, आज की इस Blog में मैं आप लोगों को बताऊंगा कि हम HTML and CSS का use करके Attractive and responsive about us पेज कैसे बनाए तो चलिए दोस्तों इसके लिए आपको नीचे दिए हुए Steps को Follow करना पड़ेगा

Step -1 :

Create a index.html file and the extension of this file is .html and paste this code 👇👇👇

Index.html

<!DOCTYPE html>
<html>
<head>
   <title>About Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="about">
<br>
<h1> <u>About me</u> </h1>
<br>
<div class="about-img" >
<img src="image.jpg">
</div>
<br>
<p> My name is ABC and I <br> am a web developer <br> and develop a website.</p>
<br><br><a href="https://drive.google.com/file/d/10fbw_ZYIdVFo28wkXyeVLODTCKyOM8xi/view?usp=drivesdk" downloaded>Download CV </a>
<br><br><br><p><b>Get in touch&nbsp;</b></p> <br>
<div class="social">
<a href="#"><i class="fab fa-linkedin" style="background :#fff; color: #3b5998;"> </i></a>
<a href="#"><i class="fab fa-youtube"style="color: #c4302b;"  ></i></a>
<a href="#"><i class="fab fa-instagram" style="color: #E4405F, rgb(228, 64, 95);" ></i></a>
<a href="#"><i class="fab fa-facebook"  style="background:white;color:#3b5998;border-radius :50%" ></i></a>
</div>
</div>
</body>
</html>

Step-2 :

Create an style.css file and the extension of this file is .css and paste this code 👇👇👇

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');
*{
margin:0;
padding:0;
text-decoration :none; 
}

#about {
background :#111;
color:#fff;
width:100%;
height :700px; 
text-align :center; 
}
#about h1{
font-size :37px; 
}
#about img {
width:250px;
height :250px; 
border-radius :50%; 
}
#about p{
font-size :25px; 

}
#about a{
background :crimson;
color:#fff;  
border:2px solid #fff; 
border-radius :5px;
padding :7px; 
margin:0; 
}
#about .social a{
background : transparent ; 
margin:0 0 0 10px; 
border:none;
}