Design a Contact us Page using HTML and CSS - GeeksforGeeks

21 Feb, 2022
In this article, we will see how to design a Contact us page using HTML and CSS. Creating an attractive page may seem to be difficult for, who don’t know HTML and CSS. If someone does not know using CSS, then they will not be able to make the page look better or attractive. So the main focus of this article will be on the implementation of CSS.
Creating structure:
In this section, we will create a simple structure of a web page by using some tags like <li> and <section>. So this will help us to create a simple web page which we can check by running the following code.
HTML
<!DOCTYPE html><html> <head>    <title>Contact Us page</title>      <link rel="stylesheet"          href="styles.css"></head> <body>    <nav class="navbar background">                 <!-- Creating the list of            items -->        <ul class="nav-list">            <li><a href="#Home">Home</a></li>            <li><a href="#Topics">Topics</a></li>            <li><a href="#ContactUs">Contact Us</a></li>            <li><a href="#AboutUs">About Us</a></li>        </ul>                 <!-- Create the search bar            and the button-->        <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">Contact Us</p>                 <p class="text-small">                    You can Contact Us if you face any problem                </p>                 <br>                <p class="center"                   style="text-decoration:none;                          color:white;">                    Click on the below options to Contact us                </p>             </div>        </div>    </section>    <section class="service">                 <!-- Heading-->        <h1 class="h-primary center"            style="margin-top:30px;">            Options to Contact        </h1>        <div id="service">            <div class="box">                <!-- Form -->                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20211220070335/color.png"                     alt= "color_image">                <br>                                 <!-- Displaying text at                    the center of the box-->                <p class="center">                    People can fill up the form and send us the problem                </p>             </div>            <div class="box">                                 <!-- Email -->                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20211220070335/color.png"                     alt= "color_image">                <br>                                     <!-- Displaying text at                    the center of the box-->                <p class="center">                    Use this Email to send us about the problem faced                </p>             </div>            <div class="box">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20211220070335/color.png"                     alt= "color_image">                <br>                                 <!-- Displaying text at                    the center of the box-->                <p class="center">                    Toll Free Number:+1800 200 300 400                </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;} 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-color: 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: 45px;    margin: 3px 6px;    border-radius: 28px;} #service .box img {    margin-top: 20px;    height: 100px;    margin: auto;    display: block;    border-radius: 200px;} #service .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: 30px 0;    font-family: "Ubuntu", sans-serif;    display: flex;    justify-content: center;}
Combining the above two sections of code to make a contact us page using HTML and CSS.
Output:
Homepage
Various available options to contact
Supported Browser to run the code:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
bhaskargeeksforgeeks
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)