How to Create About Us Page with
HTML & CSS
When somebody visits your site and knows nothing about you or your business, where do you suppose they go? Conceivably the About Us Page, this is perhaps of the main page on your site. On the off chance that you are searching for a simple and speedy method for making an About Us Page then this blog is composed for you.
An about us page's genuine object is to illuminate the peruser about the business and its cycles. Building entrust with your crowd is made more straightforward with a very much planned About Us page. Have a brief glance at the given picture of my About Us page. As you can on this About Us Page there is one picture, the fundamental portrayal some text our story, our mission , our team.
Create About Us Page with HTML and CSS | Video Tutorial
The entirety of the HTML and CSS code that I used to make this About Us segment is given. Rather than copying the code or downloading the source code document, I unequivocally encourage you to watch the full video clarification of this About Us Page. By watching the video instructional exercise, you can make this About Us Page.
you can make this About Us area utilizing HTML and CSS. The source codes for the entirety of the HTML and CSS that I used to foster this About Us page are given underneath.
About Us Page with HTML and CSS [Source Codes]
To create About Us Page with HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>About Us Page</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <section class="about-us">
- <div class="about">
- <img src="girl.jpg" class="pic">
- <div class="text">
- <h2>About Us</h2>
- <h5>Our Story</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur dui vel nisi gravida, eget venenatis dui ultrices. Nulla facilisi. Sed elementum sem vitae nunc efficitur, a convallis lacus efficitur. Praesent laoreet ante in purus feugiat, vel fermentum est vestibulum.</p>
- <h5>Our Mission</h5>
- <p>Nulla at libero quam. Vestibulum laoreet risus vitae varius efficitur. In et sollicitudin sapien. Aenean nec felis nec dolor mollis facilisis. Fusce ultrices quam vitae mi efficitur, nec commodo nunc dapibus. Phasellus et eros sed lacus cursus ultrices eget vel leo. </p>
- <h5>Our Team</h5>
- <p>Meet our dedicated team that strives to deliver excellence:</p>
- <ul>
- <li>John Doe - CEO</li>
- <li>Jane Smith - CTO</li>
- <li>Michael Johnson - CFO</li>
- </ul>
- </div>
- </div>
- </section>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- body {
- font-family: Arial, sans-serif;
- background-color: #f4f4f4;
- margin: 0;
- padding: 0;
- color: #333;
- display: flex;
- align-items: center;
- height: 100vh;
- width: 100%;
- .pic {
- height: auto;
- width: 400px;
- border-radius: 12px;
- }
- .about {
- width: 1130px;
- max-width: 85%;
- margin: 0 auto;
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
- .text {
- width: 540px;
- }
- .text h2 {
- color: #333;
-
- font-size: 2em;
- font-weight: 600;
- margin-bottom: 10px;
- }
- .text h5 {
- color: #303030;
- margin-bottom: 10px;
- margin-top: 0;
- font-size: 22px;
- font-weight: 700;
- }
-
- .text p {
- color: #606060;
- font-size: 18px;
- line-height: 1;
- letter-spacing: 1px;
- }
- .data {
- margin-top: 30px;
- }
- .hire {
- font-size: 18px;
- background: #4070f4;
- color: #fff;
- text-decoration: none;
- border: none;
- padding: 12px 25px;
- border-radius: 6px;
- transition: 0.5s;
- }
- .hire:hover {
- background: #000;
- }
-
If you face any difficulties while creating your About Us Page or your code is not working as expected, you can download the source code files for this About Us Page free by clicking on the download button.