Design an About us Page using HTML and CSS
An “About” page is a section on a website that gives you information about the people or company behind the site. It’s a great way to get to know the people you’re interacting with online and to learn more about their stories and what they stand for. In this article, we are going to make an About page by using HTML and CSS.
Preview :
Approach:
- We will first make the basic structure using HTML, it will include a header, a About us section, a footer, and our team section.
- Our team section has 3 cards where each card has team member detail, we will style describe the basic HTML structure and then style it using CSS property.
- We will use CSS to design the simple interface page.
- Now comes the interesting part for creating this page is using the same background for the navbar and the background of the web page. In the footer also, we will use the same background by using the same class.
Example:
HTML
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "style.css" > < title >About Us</ title > </ head > < body > < header > < nav > < div class = "logo" > w3wiki </ div > < ul class = "nav-links" > < li >< a href = "#" > Home</ a > </ li > < li >< a href = "#" > About</ a > </ li > < li >< a href = "#" > Services</ a > </ li > < li >< a href = "#" > Contact</ a > </ li > </ ul > </ nav > </ header > < section class = "about" > < h1 >About Us</ h1 > < p style = "font-weight: bold" > w3wiki is a leading platform... </ p > < div class = "about-info" > < div class = "about-img" > < img src= "https://media.w3wiki.net/wp-content/uploads/20230824153359/ 371ba38b-8a03-4bff-916c-c3fa5396ceda.jfif" alt = "w3wiki" > </ div > < div > < p > w3wiki is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts,along with interview and exam preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge,it has become a trusted destination for over 12 million plus registered users worldwide. </ p > < button >Read More...</ button > </ div > </ div > </ section > < section class = "team" > < h1 >Meet Our Team</ h1 > < div class = "team-cards" > <!-- Cards here --> <!-- Card 1 --> < div class = "card" > < div class = "card-img" > < img src= "https://media.w3wiki.net/wp-content/uploads/20230824122630/ business-office-business-woman-professional.jpg" alt = "User 1" > </ div > < div class = "card-info" > < h2 class = "card-name" >Jane</ h2 > < p class = "card-role" >CEO and Founder</ p > < p class = "card-email" >jane@example.com</ p > < p >< button class = "button" >Contact</ button ></ p > </ div > </ div > <!-- Card 2 --> < div class = "card" > < div class = "card-img" > < img src= "https://media.w3wiki.net/wp-content/uploads/20230822183347/ man-portrait-businessman-male.jpg" alt = "User 2" > </ div > < div class = "card-info" > < h2 class = "card-name" >Miller</ h2 > < p class = "card-role" >Co-Founder</ p > < p class = "card-email" >Miller@example.com</ p > < p >< button class = "button" >Contact</ button ></ p > </ div > </ div > <!-- Card 3 --> < div class = "card" > < div class = "card-img" > < img src= "https://media.w3wiki.net/wp-content/uploads/20230824122630/ business-office-business-woman-professional.jpg" alt = "User 3" > </ div > < div class = "card-info" > < h2 class = "card-name" >Joe</ h2 > < p class = "card-role" >Co-Founder</ p > < p class = "card-email" >Joe@example.com</ p > < p >< button class = "button" >Contact</ button ></ p > </ div > </ div > </ div > </ section > < footer > < p >© 2023 w3wiki. All Rights Reserved.</ p > </ footer > </ body > </ html > |
CSS
* { margin : 0 ; padding : 0 ; box-sizing: border-box; } /* Global Styles */ body { font-family : Arial , sans-serif ; } /* Header */ header { background-color : white ; color : rgb ( 0 , 0 , 0 ); padding : 10px 0 ; position : fixed ; width : 100% ; z-index : 100 ; box-shadow: 0 2px 2px rgba( 0 , 0 , 0 , 0.2 ); } nav { display : flex; justify- content : space-between; align-items: center ; margin : 5px auto ; padding : 0 20px ; } .logo { font-size : 1.5 rem; font-weight : bold ; color : #40b736 ; } .nav-links { list-style : none ; display : flex; } .nav-links li { margin-right : 20px ; } .nav-links a { color : rgb ( 0 , 0 , 0 ); padding : 10px ; font-weight : bold ; text-decoration : none ; } .nav-links a:hover { background-color : #40b736 ; border-radius: 4px ; color : white ; } /* About Section */ .about { background : rgb ( 224 , 251 , 222 ); background : linear-gradient( 360 deg, rgb ( 245 , 255 , 245 ) 0% , rgb ( 173 , 252 , 163 ) 100% ); padding : 100px 0 20px 0 ; text-align : center ; } .about h 1 { font-size : 2.5 rem; margin-bottom : 20px ; } .about p { font-size : 1 rem; color : #323030 ; max-width : 800px ; margin : 0 auto ; } .about-info { margin : 2 rem 2 rem; display : flex; align-items: center ; justify- content : center ; text-align : left ; } .about-img { width : 20 rem; height : 20 rem; } .about-img img { width : 100% ; height : 100% ; border-radius: 5px ; object-fit: contain; } .about-info p { font-size : 1.3 rem; margin : 0 2 rem; text-align : justify ; } button { border : none ; outline : 0 ; padding : 10px ; margin : 2 rem; font-size : 1 rem; color : white ; background-color : #40b736 ; text-align : center ; cursor : pointer ; width : 15 rem; border-radius: 4px ; } button:hover { background-color : #1f9405 ; } /* Team Section */ .team { padding : 30px 0 ; text-align : center ; } .team h 1 { font-size : 2.5 rem; margin-bottom : 20px ; } .team-cards { display : flex; flex-wrap: wrap; justify- content : center ; gap: 15px ; margin-top : 20px ; } .card { background-color : white ; border-radius: 6px ; box-shadow: 0 4px 6px rgba( 0 , 0 , 0 , 0.5 ); overflow : hidden ; transition: transform 0.2 s, box-shadow 0.2 s; width : 18 rem; height : 25 rem; margin-top : 10px ; } .card:hover { transform: translateY( -5px ); box-shadow: 0 8px 12px rgba( 0 , 0 , 0 , 0.5 ); } .card-img { width : 18 rem; height : 12 rem; } .card-img img { width : 100% ; height : 100% ; object-fit: fill; } .card-info button { margin : 2 rem 1 rem; } .card-name { font-size : 2 rem; margin : 10px 0 ; } .card-role { font-size : 1 rem; color : #888 ; margin : 5px 0 ; } .card-email { font-size : 1 rem; color : #555 ; } /* Footer */ footer { background-color : #222 ; color : white ; text-align : center ; padding : 20px 0 ; } @media ( max-width : 768px ) { nav { display : block ; } .logo { text-align : center ; } .nav-links { margin-top : 1 rem; justify- content : space-between; } .nav-links li { margin-right : 0 ; } .about h 1 { font-size : 2 rem; } .about p { font-size : 0.9 rem; } .about-info { flex- direction : column; text-align : center ; } .about-img { width : 60% ; height : 60% ; margin-bottom : 1 rem; } .about-info p { margin : 1 rem 2 rem; } .about-info button { margin : 1 rem 2 rem; width : 10 rem; } .team { margin : 0 1 rem; } } |
Contact Us