Scribd
Upload
18 views5 pages

1238

The document is an HTML page for a contact us form. It contains sections for the header, banner, contact form, contact information and footer. The contact form allows users to enter their name, email, phone and message. It also displays the company's contact details.

Uploaded by

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

1238

The document is an HTML page for a contact us form. It contains sections for the header, banner, contact form, contact information and footer. The contact form allows users to enter their name, email, phone and message. It also displays the company's contact details.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="style.css">
<title>Contact us Page</title>
</head>

<body>
<!-- Header section -->
<header>
<button class="hamburger" id="hamburger-icon">
<span onclick="openNavbar()"> ☰</span>
</button>
<div class="logo">Your Logo</div>
<nav id="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">professional</a></li>
<li><a href="#">media</a></li>
<li><a href="#">quotaion</a></li>
<li><a href="#">koradraw</a></li>
<li><a href="#">contactus</a></li>
<li><a href="#">aboutus</a></li>
</ul>
</nav>
<button class="reachUs-button">Call us</button>
</header>

<!-- banner section -->


<section class="banner">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230822131732/images.png"
alt="Welcome to our Contact Us page">
<h1>Get in Touch With Us</h1>
<p>
We're here to answer any questions you may have.
</p>
</section>

<!-- Contact form -->


<section class="contact-form">
<div class="form-container">
<h2>Your Details</h2>
<form action="#" method="POST">

<label for="name">Name: </label>


<input type="text" id="name" name="name" required>

<label for="email">Email: </label>


<input type="email" id="email" name="email" required>

<label for="phone">Phone: </label>


<input type="tel" id="phone" name="phone">
<label for="message">Message: </label>
<textarea id="message" name="message" rows="4"
required></textarea>

<button type="submit" class="submit-button">Submit</button>


</form>
</div>
</section>

<section class="contact-info">
<h2>Contact Information</h2>
<address>
A-Eye<br>
Benha<br>
Bfcai<br>
Phone: <a href="tel:1234567890">123-456-7890</a><br>
Email: <a href="mailto:[email protected]">[email protected]</a>
</address>
</section>

<!-- Footer section -->


<footer>
<p>
© 2024 A-Eye. All rights reserved.
</p>
</footer>
<script src="script.js"></script>
</body>

</html>

00000000000000000000000000000000000000000000000
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

/* Header styles */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: white;
height: 4rem;
}

.logo {
font-size: 2rem;
}

nav {
width: 30rem;
}

nav ul {
list-style: none;
display: flex;
justify-content: space-between;
}

nav ul li a {
font-size: 1.2rem;
padding: 1rem;
text-decoration: none;
color: white;
}

nav ul li a:hover {
background-color: #0dac30;
border: none;
border-radius: 4px;
cursor: pointer;
}
.reachUs-button {
padding: 1rem;
background-color: #0dac30;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
.reachUs-button:hover{
background-color: #1ac840;
}

/* banner section styles */


.banner {
text-align: center;
background-color: #ffffff;
margin: 0 auto;
}

.banner img {
max-width: 100%;
height: auto;
}
/* Contact form styles */
.contact-form {
padding: 40px 0;
margin: 0 10px;
}

.form-container {
max-width: 40%;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.contact-form h2 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 20px;
}

.form-container label {
display:block;
font-weight: bold;
}
.form-container input, textarea{
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 1rem;
resize: vertical;
}
.submit-button {
padding: 10px 20px;
background-color: #0dac30;
border: none;
color: white;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}

/* Contact info styles */


.contact-info {
text-align: center;
padding: 50px 0;
background-color: #f7f7f7;
}

.contact-info h2 {
margin-bottom: 20px;
}

/* Footer styles */
footer {
padding: 20px;
text-align: center;
background-color: #333;
color: white;
}
/* Hamburger styles */
.hamburger {
display: none;
color: rgb(0, 0, 0);
font-size: 1.5rem;
cursor: pointer;
}

/* Media queries for responsiveness */


@media only screen and (max-width: 768px) {
.logo {
display: none;
}

.hamburger {
display: flex;
}

#nav-menu {
position: absolute;
top: 4rem;
left: 0;
background-color: #333;
width: 100%;
display: none;
}

#nav-menu.active {
display: block;
flex-direction: row;
padding: 1rem;
}
}

You might also like