Scribd
Upload
4 views

html

The document is an HTML template for a 'Contact Us' page featuring a header with navigation links and a contact section. It includes contact information such as phone number, email, location, and working hours, as well as a form for users to submit their inquiries. The page is styled with CSS for a visually appealing layout and user-friendly interface.

Uploaded by

patrinamiels
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
4 views

html

The document is an HTML template for a 'Contact Us' page featuring a header with navigation links and a contact section. It includes contact information such as phone number, email, location, and working hours, as well as a form for users to submit their inquiries. The page is styled with CSS for a visually appealing layout and user-friendly interface.

Uploaded by

patrinamiels
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/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
@font-face {
font-family: 'CustomFont';
src: url('myfont.ttf.otf') format('opentype');
}

@font-face {
font-family: 'LessonFont';
src: url('duck.ttf.ttf') format('truetype');
}

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

body {
font-family: Arial, Helvetica, sans-serif;
background: #760504;
color: white;
}

.header {
overflow: hidden;
background-image: linear-gradient(to left, #fbdc6a, maroon);
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: 5px;
margin: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.header a {
color: black;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}

.header a:hover {
transform: scale(1.2);
}

.header a.logo {
font-size: 50px;
font-weight: bold;
font-family: impact;
color: white;
margin-left: 20px;
background-color: transparent;
pointer-events: none;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.header a:not(.logo):hover {
color: white;
font-family: impact;
font-size: 20px;
transition: transform 0.1s;
}

.header-right {
display: flex;
gap: 30px;
margin-right: 20px;
padding: 5px, 5px;
border: 2px solid white;
border-radius: 15px;
background-color: transparent;
align-items: center;
}

.header-right a {
color: white;
padding: 8px 40px;
border-radius: 10px;
}
nav {
text-align: center;
padding: 10px;
background: #303f9f;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.contact-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px;
gap: 20px;
}
.contact-info, .contact-form {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}
.contact-info {
width: 40%;
}
.contact-form {
width: 50%;
}
.info-box {
margin: 15px 0;
}
.info-box p {
margin: 0;
}
form {
display: flex;
flex-direction: column;
}
.form-group {
display: flex;
gap: 10px;
}
.form-group input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
resize: none;
}
.captcha-box {
margin: 10px 0;
}
.submit-btn {
background: #1a237e;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.submit-btn:hover {
background: #303f9f;
}
</style>
</head>
<body>

<header class="header">
<a href="#default" class="logo">ARALING PANLIPUNAN</a>
<div class="header-right">
<a href="HOME PAGE.html">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="news.html">News</a>
</div>
</header>

<div class="contact-container">
<div class="contact-info">
<h2>Get In Touch With Us Now!</h2>
<div class="info-box">
<p><strong>Phone Number</strong><br>+91 80004 36640</p>
</div>
<div class="info-box">
<p><strong>Email</strong><br>@gmail.com</p>
</div>
<div class="info-box">
<p><strong>Location</strong><br>pinagtipunankinamenasdkuahd</p>
</div>
<div class="info-box">
<p><strong>Working Hours</strong><br>Monday to Saturday<br>09:00 AM
to 06:00 PM</p>
</div>
</div>

<div class="contact-form">
<h2>Contact Us</h2>
<form>
<div class="form-group">
<input type="text" name="first-name" placeholder="First Name *"
required>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="form-group">
<input type="text" name="mobile" placeholder="Mobile No *"
required>
<input type="email" name="email" placeholder="Email ID *"
required>
</div>
<textarea name="message" placeholder="Message"></textarea>
<div class="captcha-box">
<label>Please type the characters *</label>
<input type="text" name="captcha" required>
</div>
<button type="submit" class="submit-btn">Submit</button>
</form>
</div>
</div>
</body>
</html>

You might also like