Scribd
Upload
5 views3 pages

Print 4

The document is an HTML template for a contact page featuring a header with navigation links and a contact form. It includes CSS styles for layout, responsiveness, and visual effects such as hover states. The contact form allows users to input their name, email, phone number, and a message, with a button to send the information.

Uploaded by

tripathitrisha1001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views3 pages

Print 4

The document is an HTML template for a contact page featuring a header with navigation links and a contact form. It includes CSS styles for layout, responsiveness, and visual effects such as hover states. The contact form allows users to input their name, email, phone number, and a message, with a button to send the information.

Uploaded by

tripathitrisha1001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
header{
background-i4age:linear-
gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.5)),url(building.jpg);
height:750px;
width: 100%;
background-position:center;
background-size:cover;
}
.container{
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 100px;
}
.container:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
filter: blur(0px);
z-index: -1;
}
.contact-box{
max-width: 850px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background-color:transparent;
box-shadow: 0px 0px 20px 5px rgb(255, 255, 255);
}
.left{
background: url("map.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
color: #fff;
}
h2:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 2px;
background-color: powderblue;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color:transparent;
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: .3s;
}
.field:hover{
background-color: rgba(54, 158, 153, 0.1);
}
::placeholder{
color: lightsteelblue;
}
textarea{
min-height: 150px;
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: cornflowerblue;
color: #fff;
font-size: 1.2rem;
border: none;
outline: none;
cursor: pointer;
transition: .3s;
}
.btn:hover{
background-color: steelblue;
}
.field:focus{
border: 2px solid rgba(30,85,250,0.47);
background-color:transparent;
}
:placeholder-shown{
color: blue;
}
input.placeholder{
color: rgb(255, 81, 0);
}

@media screen and (max-width: 880px){


.contact-box{
grid-template-columns: 1fr;
}
.left{
height: 200px;
}
}

</style>
<body>
<header>
<div class="main">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="logo"><img src="logo500x500.png" height="100px"
width="250px"></div>
<div class="container">
<div class="contact-box">
<div class="left"></div>
<div class="rightc">
<h2>Contact Us</h2>
<input type="text" class="field" placeholder="Your Name"
style="color:skyblue;">
<input type="text" class="field" placeholder="Your Email"
style="color:skyblue;">
<input type="text" class="field" placeholder="Phone"
style="color:skyblue;">
<textarea placeholder="Message" class="field"
style="color:skyblue;"></textarea>
<button class="btn">Send</button>
</div>
</div>
</div>
</header>
</body>
</html>

You might also like