Design a Contact us Page using HTML and CSS
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= 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= 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= 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
.png)
