Creating a Hero Section with contact form Using HTML CSS.

0





Hello developers, In this article, we'll explore how to create a hero section with two containers using HTML and CSS. A hero section is typically the first section of a webpage and serves to grab the user's attention and introduce the website's purpose or main message. The first step is to create a section element with a class of "hero". We'll use Flexbox to position the two containers side by side. We can set the display property to "flex" and the justify-content property to "space-between" to ensure that the two containers are evenly spaced. Inside the hero section, we'll create two div elements with classes of "container left" and "container right". The left container will contain an h2 header, a paragraph, and a button. The right container will contain a contact form. We can style the containers using CSS by setting their width, padding, and background color. We can also add some border-radius to give them rounded corners. We can then style the h2 header and paragraph to make them stand out and grab the user's attention. We can also style the button to make it look like a call-to-action. For the contact form, we can use a form element and add labels and inputs for the user to fill in their name, email, and message. We can also style the form elements to make them look nice and user-friendly. Overall, the hero section with two containers is a great way to grab the user's attention and introduce the website's purpose or main message. By using HTML and CSS, we can create a visually appealing and user-friendly hero section that will make a great first impression.

Creating a Hero Section with contact form Using HTML CSS.[Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Creating a Hero Section with contact form</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section class="hero"> <div class="container left"> <img src="https://cdn.pixabay.com/photo/2016/03/31/18/26/angry-1294363__480.png"> <h2>Welcome to our website</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper nisl et eleifend ultrices. Suspendisse auctor nulla eu pharetra lobortis. Donec eget vestibulum augue, eget sagittis mi.</p> <button>Learn More</button> <button>Get Started</button> </div> <div class="container right"> <form action="#" method="post"> <h3>Contact Us</h3> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <input type="submit" value="Submit"> </form> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </section> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body{
  background: #0F2027;
  font-family: Arial, sans-serif;
}

html, body {
  height: 100%;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  padding: 50px;
  height:90vh;
  background: #F2994A;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.container {
  width: 45%;
  padding: 20px;
  border-radius: 5px;
}

.container h2 {
  font-size: 46px;
  margin-bottom: 20px;
  font-family: 'Ubuntu', sans-serif;
}

.container p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.left img{
width:200px;
height:200px;
margin:0px 30%;
}
.right{
  background-color:#000;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
.container button {
  display:inline-block;
  padding: 10px 20px;
  background: #000000;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #434343, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

.container button:hover {
  background-color: #0069d9;
}

.container form {
  display: flex;
  flex-direction: column;
}

.container h3 {
  font-size: 44px;
  margin-bottom: 20px;
  color: #F2994A;
  text-align: center;
}

.container label {
  font-size: 18px;
  margin-bottom: 10px;
  color: #F2994A;
}

.container input,
.container textarea {
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  background-color: #F2C94C;
}

.container input:focus,
.container textarea:focus {
  border: 1px solid #007bff;
  outline: none;
}

.container input[type="submit"] {
  background: #000000;
  background: -webkit-linear-gradient(to right, #434343, #000000); 
  background: linear-gradient(to right, #434343, #000000);  
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.container input[type="submit"]:hover {
  background-color: #0069d9;
}

.credit a {
  text-decoration: none;
  color: #F2C94C;
  font-weight: 800;
}

.credit {
    color: #fff;
  text-align: center;
  margin-top: 10px;
  font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Creating a Hero Section with contact form Using HTML CSS.

Thank you for reading our blog. If you face any problem in Creating a Hero Section with contact form Using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome