Hello everyone, in this session we are going to learn how to develop an about us page using Html and CSS. In the last post, we have gone through how to create an About us page design in Html. Today’s topic is to create an about us page for our website using Html and CSS.
About us page:
It is mainly used by those websites which are selling their services like amazon, Fiverr, Upwork, or any other private company. By looking at the capability and features of the website one have to decide what to do and what not to do.
Then at the center of the page, it has a heading “About Us”. On the left side of the page, it has a description related to the website.
Then it has a button read more. This button has round corners and solid background. When you point at the button then it hovers and changes its color. It is possible using the property of CSS. On the right side of the page, it has shown a graph which is showing the experty level of the developer in different skills. Web design knowledge is 90%, UI design knowledge is 70 and UX design knowledge level is 50%.
You might like it:
How to create an about us page?
Our main purpose for writing this article is to teach how to create a beautiful about us page for a website in HTML and CSS languages. Here we have added a heading, underline, vertical borders, paragraph, and progress bar as well. For the development of all these design elements we will be using CSS and CSS properties will be applied to the Html body. Follow the below steps to create this design effectively and source code will also be provided for each section. For the development of the about us page, we have followed some steps and which are given below.
Download an IDE:
VS CODE is a well-known code editor for Html, CSS, JS, and PHP languages. You can use it.
Source code of Html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-sclae=1.0"> </head> <body> <div class="about-section"> <div class="inner-width"> <h1>About Us</h1> <div class="border"></div> <div class="about-section-row"> <div class="about-section-col"> <div class="about"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga provident ea hic, neque amet sequi temporibus iure aliquid placeat inventore. Quae dolores dolore, cum nulla quas ipsum facere maxime, necessitatibus! </p> <a href="#">Read More</a> </div> </div> <div class="about-section-col"> <div class="skills"> <div class="skill"> <div class="title">Web Develpor</div> <div class="progress"> <div class="progress-bar p1"><span>90%</span></div> </div> </div> <div class="skill"> <div class="title">UI Design</div> <div class="progress"> <div class="progress-bar p2"><span>70%</span></div> </div> </div> <div class="skill"> <div class="title">UX Design</div> <div class="progress"> <div class="progress-bar p3"><span>50%</span></div> </div> </div> </div> </div> </div> </div> </div> </body> </html> |
Source code of CSS:
We will use CSS to design our about us page and make it responsive across all the devices.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
body{ margin: 0; padding: 0; font-family: "open sans",sans-serif; background: #F4F4F4; background-size: cover; height: 100%; } .about-section{ width: 70%; background:#fff; padding: 40px 0; margin-left: auto; margin-right:auto; margin-top: 170px; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; border-radius: 30px; border-left: 50px solid #3CEDA7; border-right: 50px solid #3CEDA7; } .inner-width{ max-width: 1000px; overflow: hidden; padding: 0 20px; margin: auto; } .about-section h1{ text-align: center; } .border{ width: 100px; height: 3px; background: #3CEDA7; margin: 40px auto; } .about-section-row{ display: flex; flex-wrap: wrap; } .about-section-col{ flex: 50%; } .about{ padding-right: 30px; } .about p{ text-align: justify; margin-bottom: 20px; color: #7E7C7A; font-size: 17px; } .about a{ display: inline-block; color: #7E7C7A; text-decoration: none; border: 2px solid #3CEDA7; border-radius: 24px; padding: 8px 40px; transition: 0.4s linear; } .about a:hover{ color: #fff; background: #3CEDA7; } .skills{ padding-left: 30px; } .skill{ margin-bottom: 10px; } .title{ color: #7E7C7A } .progress{ width: 100%; height: 12px; background: #ddd; border-radius: 12px; } .progress-bar{ height: 12px; background: #3CEDA7; border-radius: 12px; } .p1{ width: 90%; } .p2{ width: 70%; } .p3{ width: 50%; } .progress-bar span{ float: right; margin-right: 6px; line-height: 13px; color: #fff; font-size: 12px; } @media screen and (max-width:700px) { .about-section-col{ flex: 100%; margin: 10px 0; } .about,.skills{ padding: 0; } .about{ text-align: center; } } |
Download source code:
Many times new developers are unable to copy-paste or link the files with each other. For those, we have created a .zip file and it is downloadable for everyone for free.
Task:
The about us page shows information about a person or company or business. We have applied the same concept to individuals. It is showing the information of an individual person. With the help of div, all the information is shown on this about us page. It needs some modification. There is a line for showing the percentage of the skills. Add a round circle at the end of these moving lines. So, that it can highlight the skills of the users.
I hope you like the post and it must be a helpful post for you to design a beautiful about us section for your website using Html and CSS.
Thanks for reading this article.
