About us page design in HTML and CSS with source code
So start Creating With A HTML File
1. Open Your Code Editor ( I personal use VS Code You Can Also Download VS Code From https://code.visualstudio.com/download )
2. Write Basic HTML BASE as written down here
<!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></title>
</head>
<body>
</body>
</html>
Or You Are Using VS CODE LikE ME SO Use Boilerplate Template by clicking shift + "1" ( ! ) and click tab so your Boilerplate Template will apply.
3. Put The Title Between "<title>"here"</title>" For Example -> <title>About Us</title
4. Copy The Code Bellow And Paste it between "<body>" "</body>"
About us page design in html and css with source code html
Copy This Code From <div class="abo... to </a> </h3> just Before Body tags
Keep in mind that don't paste the body tag twice or <body> </body> elements twice that will make an error
<body>
<div class="about-section back1">
<h1>About Us Page by Your Code</h1>
<p>Some Of Your text about Your Self</p>
<p>This is a responsive site so It can run on Any Device</p>
</div>
<h2 style="text-align:center">About Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="https://thdcihet.ac.in/extra-images/defaultpic.jpg" alt="Your Img here" style="width:100%">
<div class="container">
<h2>Your Title Here</h2>
<p class="title">RANK HERE EX- CEO</p>
<p>Some text that describes HIM/HER</p>
<p>his/her@gmail.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://thdcihet.ac.in/extra-images/defaultpic.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>person 2 name</h2>
<p class="title">person 2 rank</p>
<p>Some text that describes person 2.</p>
<p>person2@email.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://thdcihet.ac.in/extra-images/defaultpic.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>person 2 name</h2>
<p class="title">person 2 rank</p>
<p>Some text that describes person 2.</p>
<p>person2@email.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://thdcihet.ac.in/extra-images/defaultpic.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>person 2 name</h2>
<p class="title">person 2 rank</p>
<p>Some text that describes person 2.</p>
<p>person2@email.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://thdcihet.ac.in/extra-images/defaultpic.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>person 2 name</h2>
<p class="title">person 2 rank</p>
<p>Some text that describes person 2.</p>
<p>person2@email.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://thdcihet.ac.in/extra-images/defaultpic.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>person 2 name</h2>
<p class="title">person 2 rank</p>
<p>Some text that describes person 2.</p>
<p>person2@email.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
<h3>
©Copyrighted Under <a href="https://theyourcode.blogspot.com/">TheYourCode</a>
</h3>
</body>
So you Have to edit this code with Your Own To Fits Content
Now its time for CSS code So You Can Make a Separate file named "style.css" or You can add that in HTML by adding <style> tags. I explained both methods separately.
About us html and css code in case of style.css
1. Create A File named Style.css as showing in img
2. link a CSS file with HTML ( be sure that Your HTML AND CSS FILE ARE IN ONE FOLDER) you can link CSS file with HTML by pasteing these codes just above the </head> tag
<link rel="stylesheet" href="style.css">
3. Now Paste this Whole code from top to bottom in the style.css file
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
background: #121211;
color: #fff;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}
.card:hover {
box-shadow: 0 0 1rem 0.1rem #fff;
margin: 0.8rem;
transition: 1s;
}
.about-section {
padding: 50px;
text-align: center;
color: white;
}
.container {
padding: 0 16px;
}
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #556;
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.back1
{
background-image: url(https://cutewallpaper.org/21/hd-background-gif/-in-2019-Dark-blue-background-.gif);
background-repeat: repeat;
background-size: cover;
transition: 1s;
}
Now You Are Done Enjoy Your About Us Page And For Those People who don't want to make Style.css file
They have to follow below steps
About us html and css code Without Style.css
1. You Have To write a tag Named Style as shown below
<style>
</style>
2. follow the same step as style.css users do but You have To paste that code between the Style tags as shown below
<style>
write provied code here
</style>
now You are Also Done
If you want to download these files You can get it by clicking on Downlaod Button below
keywords covered in the Blog-
main-
about us page design in html and css with source code
other -
about us page design in html and css with source code codepen
about us page design in html and css with source code free download
about us html and css code
about us page design in html and css
about us page design in html and css with source code
about us page design in html and css with source code behind
about us page design in html and css with source code examples
about us page design in html and css with source code free download
about us page design in html and css with source code generator
about us page design in html and css with source code html
about us page design in html and css with source code html and css
about us page design in html and css with source code kit
Post a Comment