.png)
Creating a simple contact us page with HTML, CSS, and hover properties is a great way to provide visitors with an easy way to get in touch with you. In this tutorial, we will walk you through how to create a simple contact us page with HTML, CSS, and hover properties.
Step 1: Set Up the HTML
The first step in creating a contact us page is to set up the HTML code for the page. This can be done by creating a container element for the contact form and then creating individual form elements for each input field. Here is an example of the HTML code for a simple contact us page:
In this code, we have created a section element with an id of contact to identify the contact section. Inside the section, we have created a div element with a class of container to contain the contact form. We have added a h2 element with the text "Contact Us" to provide a heading for the contact form. The contact form itself is represented by a form element with individual label and input elements for each input field. We have also added a textarea element for the message input field and a button element for submitting the form.
Step 2: Style the Contact Us Page with CSS
The next step is to style the contact us page using CSS. This can be done by targeting the section, container, form, label, input, textarea, and button elements and applying styling properties such as background color, font size, and margin. Here is an example of the CSS code for a simple contact us page:
HTML CODE
<div class="main">
<div class="main_in_div main_in_div1">
<h2>Contact with Us:-</h2><br>
<h1>We are Here to Help you</h1>
<div class="icon_div">
<ul>
<li><a href="#" class="facebook"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href="#" class="instagram"><ion-icon name="logo-instagram"></ion-icon></a></li>
<li><a href="#" class="twitter"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href="#" class="youtube"><ion-icon name="logo-youtube"></ion-icon></a></li>
<li><a href="#" class="google"><ion-icon name="logo-google"></ion-icon></a></li>
</ul>
</div>
<h3>Office Timings:</h3>
<h4>8:00 AM - 6:00 PM</h4>
</div>
<div class="main_in_div main_in_div2">
<form>
<input type="text" id="fname" placeholder="NAME">
<input type="text" id="lname" placeholder="EMAIL"><br>
<input type="text" id="fname" placeholder="PHONE">
<input type="text" id="lname" placeholder="SUBJECT"><br>
</form>
<button>Submit</button>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
* {
margin: 0;
padding: 0;
font-family: arial;
}
body {
background-image: url(https://images.pexels.com/photos/3178786/pexels-photo-3178786
.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.main {
width: 1300px;
height: 600px;
/*background-color: dimgray;*/
margin: auto;
position: relative;
top: 15px;
}
.main_in_div {
width: 40%;
height: 100%;
/*background-color: #7895B2;*/
float: left;
}
.main_in_div2 {
width: 55%;
margin-left: 45px;
position: relative;
top: 80px;
}
.main_in_div h2 {
font-size: 55px;
text-align: center;
color: white;
margin-top: 70px;
}
.main_in_div h1 {
font-size: 30px;
text-align: center;
color: white;
margin-top: 10px;
}
.icon_div ul li {
display: inline-block;
margin-top: 50px;
}
.icon_div ul li a {
font-size: 30px;
color: #fff;
margin: 0px 10px;
display: inline-block;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background: #222;
transition: all .6s;
}
.icon_div ul li:hover a {
border-radius: 50%;
background: white;
color: black;
transform: rotate(360deg);
}
.icon_div ul li .facebook {
background: #3B5998;
}
.icon_div ul li .instagram {
background: #ce4188;
}
.icon_div ul li .twitter {
background: #55ACEE;
}
.icon_div ul li .youtube {
background: #bb0000;
}
.icon_div ul li .google {
background: #3f7ee8;
}
.main_in_div1 h3 {
font-size: 30px;
color: white;
margin-top: 100px;
}
.main_in_div1 h4 {
font-size: 30px;
color: yellow;
margin-top: 10px;
}
.main_in_div2 input {
width: 320px;
height: 60px;
font-size: 20px;
margin: 5px;
border-radius: 10px;
background-color: #585469;
color: white;
padding-left: 20px;
margin-top: 10px;
border: none;
}
.main_in_div2 textarea {
width: 94.5%;
height: 150px;
font-size: 20px;
margin-left: 5px;
border-radius: 10px;
background-color: #585469;
color: white;
padding-left: 20px;
padding-top: 20px;
margin-top: 10px;
border: none;
}
.main_in_div2 button {
width: 250px;
height: 60px;
background-color: #fcb900;
border-radius: 50px;
border: none;
font-size: 30px;
margin-top: 40px;
color: white;
text-align: center;
}
.main_in_div2 button:hover {
background-color: #cf2e2e;
}
Comments
Post a Comment