Skip to content
Related Articles

Related Articles

Design an About us Page using HTML and CSS

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 13 Jul, 2022
Improve Article
Save Article

Creating structure:This article will help you create a simple structure of a web page by using some basic tags like <li> and <section>.A little knowledge of css adds significant visual weight to the website.

Here is an example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>About us Page</title>
</head>
<body>
    <nav class="navbar background">
        <ul class="nav-list">
            <div class="logo"><img src=""></div>
            <li><a href="#Home">Home</a></li>
            <li><a href="#Food">Food</a></li>
            <li><a href="#AboutUs">AboutUs</a></li>
            <li><a href="#ContactUs">Contact Us</a></li>
        </ul>
        <div class="rightNav">
            <input type="text" name="search" id="search">
            <button class="btn btn-sm">Search</button>
        </div>
    </nav>
    <section class="background firstsection">
        <div class="box-main">
            <div class="firstHalf">
                <p class="text-big">About US</p>
                  
                <p class="text-small">
                    Here you will get to know the team
                    members of our company
                </p>
                <br>
                <p class="center"><a href="#Order" 
                   style="text-decoration:none;color:white;">
                        Below are the people who
                        works in our company</a>
                </p>
            </div>
        </div>
    </section>
    <section class="service">
        <h1 class="h-primary center" style="margin-top:30px;text-align:center;">
            Our Team
        </h1>
    <div id="services">
            <div class="box">
                <img src=
                    alt="picture goes here">
              
                <p class="center">
                    <a href="#xyz" style="text-decoration:none;color:black;
        font-weight:bold;font-family: 'Langar', cursive;">
                        xyz
                    </a>
                </p>
                <p style="font-family: sans-serif">CEO and the Founder</p>
            </div>
            <div class="box">
                <img src=
                    alt="picture goes here">
                  
                <p class="center">
                    <a href="#abc" style="text-decoration:none;color:black;
        font-weight:bold;font-family: 'Langar', cursive;">
                        abc
                    </a>
                </p>
                  
                <p style="font-family: sans-serif ">co-founder</p>
                <p style="font-family: sans-serif ">Foodscalablility@gmail.com</p>
            </div>
            <div class="box">
                <img src=
                    alt="picture goes here">
                <br>
                <p class="center">
                    <a href="#xyz" style="text-decoration:none;color:black;
           font-weight:bold;font-family: 'Langar', cursive;">
                        asw
                    </a>
                </p>
                <p style="font-family: sans-serif ">Food Manager of the company </p>
  
            </div>
        </div>
      
    </section>
  
    <footer class="background">
        <p class="text-footer">
            Copyright ©-All rights are reserved
        </p>
  
    </footer>
</body>
  
</html>

CSS Design: We will use CSS to design the simple interface page. Here 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 class that we have used for giving background images to the webpage and navbar. Another interesting of the webpage is that the navbar is fixed at one point, so when the user will scroll the webpage they will find the navbar to be fixed in one place.

CSS




* {
            margin:0;
            padding:0;
            overflow-x: hidden;
        }
  
        html {
            scroll-behaviour: smooth;
        }
  
        :root {
            --navbar-height: 59px;
        }
        .logo {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
  
        .logo img {
            width: 33%;
            border: 2px solid white;
            border-radius: 50px;
        }
  
        .navbar {
            display: flex;
            align-items: center;
            justify-content: center;
            position: sticky;
            top: 0;
            cursor: pointer;
        }
  
        .nav-list {
            width: 70%;
            display: flex; 
        }
  
        .nav-list li {
  
            list-style: none;
            padding: 2px 6px;
        }
  
        .nav-list li a {
  
            text-decoration: none;
            color: white;
        }
  
        .nav-list li a:hover {
            color: grey;
        }
  
        .rightNav {
            width: 50;
            text-align: right;
        }
  
        #search {
            padding: 5px;
            font-size: 17px;
            border: 2px solid grey;
            border-radius: 9px;
        }
  
        .background {
            background: grey;
            background-blend-mode: darken;
            background-size: cover;
        }
  
        .firstsection {
            height: 100vh;
        }
  
        .box-main {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            max-width: 50%;
            margin: auto;
            height: 80%;
        }
  
        .firstHalf {
            width: 75%;
            display: flex;
            flex-direction: column; 
            justify-content: center
        }
  
        .firstHalf img {
            display: flex;
            border-radius: 9050px;
        }
  
        .text-big {
            font-family: 'Piazzolla', serif;
            font-weight: bold;
            font-size: 41px;
            text-align: center;
        }
  
        .text-small {
            font-family: 'Sansita Swashed', cursive;
            font-size: 18px;
            text-align: center;
        }
  
        #service {
            margin: 34px;
            display: flex;
        }
  
        #service .box {
            padding: 100px;
            margin: 3px 6px;
            border-radius: 28px;
        }
  
        #service .box img {
            margin-top: 10px;
            height: 150px;
            margin: auto;
            display: block;
            border-radius: 200px;
        }
  
        #service .box p {
  
            font-family: sans-serif;
            text-align: center;
        }
  
        #services {
            margin: 34px;
            display: flex;
        }
  
        #services .box {
  
            padding: 100px;
            margin: 3px 6px;
            border-radius: 28px;
        }
  
        #services .box img {
            margin-top: 10px;
            height: 150px;
            margin: auto;
            display: block;
            border-radius: 100px;
        }
  
        #services .box p {
  
            font-family: sans-serif;
            text-align: center;
        }
  
        .btn {
            padding: 8px 20px;
            margin: 7px 0;
            border: 2px solid white;
            border-radius: 8px;
            background: none;
            color: white;
            cursor: pointer;
        }
  
        .btn-sm {
            padding: 6px 10px;
            vertical-align: middle;
        }
  
        .center {
            text-align: center;
        }
  
        .text-footer {
            text-align: center;
            padding: 10px 0;
            font-family: 'Ubuntu', sans-serif;
            display: flex;
            justify-content: center;
        }
        @media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

After combining the above two sections of code, it creates the About us page.

Output:





My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!