How make a about us page using HTML AND CSS
Here is the code of this video you can copy and paste it on your code editor or notepad.
Here Is The Code
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">
<title>About Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="about-section">
<div class="inner-container">
<h1>About Us</h1>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia perferendis recusandae commodi! Repellat doloribus sunt itaque repudiandae repellendus officia hic tempore ex, amet culpa aliquid totam nostrum dolorum incidunt esse!
</p>
<div class="skills">
<span>Web Design</span>
<span>Photoshop</span>
<span>Coding</span>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
body {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
}
.about-section {
background: url(images/pic.jpg) no-repeat left;
background-size: 55%;
background-color: #fdfdfd;
overflow: hidden;
padding: 100px 0;
}
.inner-container {
width: 55%;
float: right;
background-color: #fdfdfd;
padding: 150px;
}
.inner-container h1 {
margin-bottom: 30px;
font-size: 30px;
font-weight: 900;
}
.text {
font-size: 13px;
color: #545454;
line-height: 30px;
text-align: justify;
margin-bottom: 40px;
}
.skills {
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 13px;
}
@media screen and (max-width: 1200px) {
.inner-container {
padding: 80px;
}
}
@media screen and (max-width: 1000px){
.about-section {
background-size: 100%;
padding: 100px 40px;
}
.inner-container {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.about-section {
padding: 0;
}
.inner-container {
padding: 60px;
}
}
0 Comments:
Post a Comment