How to create an about / about us page for website with CSS?

The about page of a website has the team details including the name, designation, contact details, contact button, etc. First, a container is set for the about page. Withing that, set the child containers for the column, card, person profile, etc. The profile includes the name, designation and a button to contact. Let us see how to create an about us page for website with HTML and CSS.

Create a div container

The container is set for the team details of the about page. The team card in the container includes other child containerd −

<div class="teamColumn">
   <div class="teamCard">
      <img
         src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
      />
      <div class="personContainer">
         <h3>Jane Doe</h3>
         <p class="Designation">CTO</p>
         <p><button class="contact">Contact</button></p>
      </div>
   </div>
</div>

Create a child container for profile

Withing the parent div, we will create a child div for the person details −

<div class="personContainer">
   <h3>Jane Doe</h3>
   <p class="Designation">CTO</p>
   <p><button class="contact">Contact</button></p>
</div>

Columns for the team members

We have created three columns for the details of the three members of the team −

.teamColumn {
   display: inline-block;
   width: 300px;
   height: 400px;
   margin-bottom: 16px;
   padding: 0 8px;
}

The team card

The team card is styled like this −

.teamCard {
   background-color: rgb(162, 162, 255);
   text-align: center;
   font-size: 20px;
}

The profile details with person container

Within the team card div, we have the person container. The designation for the team members is also styled here −

.personContainer {
   padding: 0 16px;
}
.Designation {
   color: rgb(15, 0, 100);
   font-weight: bolder;
   font-size: 20px;
}

Contact button

The button to contact the team member is styled here. The cursor property is set to pointer to make the button look like clickable −

.contact {
   border: none;
   outline: 0;
   display: inline-block;
   padding: 12px;
   color: white;
   font-weight: bolder;
   background-color: rgb(78, 0, 102);
   text-align: center;
   cursor: pointer;
   width: 100%;
}

Example

To create an about page, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      html {
         box-sizing: border-box;
      }
      body {
         font-family: monospace, serif, sans-serif;
         margin: 0px;
         padding: 0px;
      }
      h1 {
         text-align: center;
         background-color: rgb(108, 18, 131);
         color: white;
         padding-top: 40px;
         padding-bottom: 40px;
         margin-top: 0px;
      }
      .teamContainer {
         margin-left: 10%;
      }
      img {
         width: 100%;
         height: 200px;
      }
      *,
      *:before,
      *:after {
         box-sizing: inherit;
      }
      .teamColumn {
         display: inline-block;
         width: 300px;
         height: 400px;
         margin-bottom: 16px;
         padding: 0 8px;
      }
      @media screen and (max-width: 650px) {
         .teamColumn {
            display: block;
         }
      }
      .teamCard {
         background-color: rgb(162, 162, 255);
         text-align: center;
         font-size: 20px;
      }
      .personContainer {
         padding: 0 16px;
      }
      .personContainer::after,
      .teamContainer::after {
         content: "";
         clear: both;
         display: table;
      }
      .Designation {
         color: rgb(15, 0, 100);
         font-weight: bolder;
         font-size: 20px;
      }
      .contact {
         border: none;
         outline: 0;
         display: inline-block;
         padding: 12px;
         color: white;
         font-weight: bolder;
         background-color: rgb(78, 0, 102);
         text-align: center;
         cursor: pointer;
         width: 100%;
      }
      .contact:hover {
         background-color: #555;
      }
   </style>
</head>
<body>
   <h1>About Us</h1>
   <div class="teamContainer">
      <div class="teamColumn">
         <div class="teamCard">
            <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
            <div class="personContainer">
               <h3>Jane Doe</h3>
               <p class="Designation">CTO</p>
               <p><button class="contact">Contact</button></p>
            </div>
         </div>
      </div>
      <div class="teamColumn">
         <div class="teamCard">
            <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
            <div class="personContainer">
               <h3>Mike Ross</h3>
               <p class="Designation">Front End Developer</p>
               <p><button class="contact">Contact</button></p>
            </div>
         </div>
      </div>
      <div class="teamColumn">
         <div class="teamCard">
            <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
            <div class="personContainer">
               <h3>John Doe</h3>
               <p class="Designation">FullStack Developer</p>
               <p><button class="contact">Contact</button></p>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
Updated on: 2023-12-14T14:59:06+05:30

894 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements