Contact Us Page Design | Html, Css And Gsap
Contact Us Page Design Using Html and Css is a website design tutorial that helps you to create an awesome contact page for your website. The contact us page is a crucial part of any website. It is the first thing that visitors see when they visit your site. And it is the last thing that they see before leaving. So it’s important to make sure that you have a good contact us page design and layout on the website.
A contact page of your website should be simple and easy to use . It is where visitors come to find out how they can get in touch with you or the company. There are many different ways to design a Contact Us Page, but it’s important to make sure that it’s easy for people to find what they’re looking for and that they are able to use the form easily. we will show you one of the easiest and simple methods.
The first step to designing a contact us page for your website is to decide what type of content you want on the page. What kind of information do you want to take from users like email, phone number etc? So start this article without any further ado. If want to read more articles related to web development you can visit this playlist. For more gsap animations you can follow the gsap playlist.
Html Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Contact Us Page In Html Css | Rustcode</title>
</head>
<body>
<div class="contact-container">
<div class="contact-inner-container">
<div class="contact-info-container">
<h1 class="contact-heading">Say Hello!</h1>
<p class="contact-description">
We're open for any suggestion or just to have a chat.
</p>
<div class="line"></div>
<div class="contact-details">
<h3><i class="fa fa-map-maker"></i> Address</h3>
<p>198 Balistreri Extension Apt. 678, New Jersey, USA-328135</p>
</div>
<hr />
<div class="contact-details">
<h3><i class="fa fa-envelope"></i> Email</h3>
<p>contactus@mail.com</p>
</div>
<hr />
<div class="contact-details">
<h3><i class="fa fa-phone"></i> Lets Talk</h3>
<p>+91 9876543210</p>
</div>
<hr />
<div class="social-link-container">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
<div class="contact-form">
<form class="form">
<div class="form-group">
<input type="text" name="name" class="input-field form-input" placeholder="Name" >
</div>
<div class="form-group">
<input type="email" name="email" class="input-field form-input" placeholder="Email" >
</div>
<div class="form-group">
<textarea name="message" rows="5" class="input-field form-input" placeholder="Message"></textarea>
</div>
<div class="form-group">
<input type="submit" class="input-field submit-btn" value="Submit" >
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Output: Contact Form final output after applying css and gsap.
Originally published at https://www.rustcodeweb.com on December 22, 2022.
