index.html
<!DOCTYPE html>
<html>
<head>
<title>Hancie e-Learning Studio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/
v5.10.0/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/
bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="section">
<div class="container">
<div class="content-section">
<div class="title">
<h1 class="text-center">About Me</h1>
</div>
<div class="content">
<h3 class="text-danger text-center">SOFTWARE ENGINEER</h3>
<p>Hello! My name is Hancie Phago. Currently studying software
engineering at PCP College which is located at Kupondole, Lailitpur.
You can contact me directly through this website if you'd like to get in
touch with me.</p>
<div class="button">
<a href="mailto:hanciephago@gmail.com">CONTACT ME</a>
</div>
</div>
<div class="social">
<a href="https://www.facebook.com/hanciephago720/"><i class="fab fa-
facebook-f"></i></a>
<a href="https://twitter.com/hancie_phago"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/hancie720/"><i class="fab fa-
instagram"></i></a>
</div>
</div>
<div class="image-section">
<img src="Hancie-Phago.jpg">
</div>
</div>
</div>
</body>
</html>
css.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:
wght@200;300;400&display=swap');
*{
margin:0px;
padding:0px;
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: 100%;
height: auto;
}
.content-section .title{
text-transform: uppercase;
font-size: 28px;
}
.content-section .content h3{
margin-top: 20px;
color:#5d5d5d;
font-size: 21px;
}
.content-section .content p{
margin-top: 10px;
font-family: sans-serif;
font-size: 18px;
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;
letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
background-color: #a52a2a;
color:#fff;
}
.content-section .social{
margin: 40px 40px;
}
.content-section .social i{
color:#a52a2a;
font-size: 30px;
padding:0px 10px;
}
.content-section .social i:hover{
color:#3d3d3d;
}
@media screen and (max-width: 768px){
.container{
width: 80%;
display: block;
margin:auto;
padding-top:50px;
}
.content-section{
float:none;
width:100%;
display: block;
margin:auto;
}
.image-section{
float:none;
width:100%;
}
.image-section img{
width: 100%;
height: auto;
display: block;
margin:auto;
}
.content-section .title{
text-align: center;
font-size: 19px;
}
.content-section .content .button{
text-align: center;
}
.content-section .content .button a{
padding:9px 30px;
}
.content-section .social{
text-align: center;
}
}
