Scribd
Upload
14 views

!doctype HTML

Uploaded by

paariarjun7
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
14 views

!doctype HTML

Uploaded by

paariarjun7
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/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Sample Website</title>
<style>
/* Basic reset and styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
header h1 {
font-size: 2.5em;
}
nav {
text-align: center;
padding: 10px;
background-color: #444;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
color: #444;
margin-bottom: 10px;
}
section {
margin: 20px 0;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form input, .contact-form textarea {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
}
.contact-form button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}
.contact-form button:hover {
background-color: #555;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
margin-top: 20px;
}
</style>
</head>
<body>

<!-- Header -->


<header>
<h1>Welcome to My Sample Website</h1>
</header>

<!-- Navigation -->


<nav>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>

<!-- Main Container -->


<div class="container">

<!-- About Section -->


<section id="about">
<h2>About Us</h2>
<p>We are a sample company dedicated to providing excellent services
for all your needs. Our team of professionals is here to help you succeed.</p>
</section>

<!-- Services Section -->


<section id="services">
<h2>Our Services</h2>
<ul>
<li>Consulting</li>
<li>Web Design</li>
<li>Development</li>
<li>Marketing</li>
</ul>
</section>
<!-- Contact Form Section -->
<section id="contact">
<h2>Contact Us</h2>
<form class="contact-form">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="4" placeholder="Your Message"
required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</div>

<!-- Footer -->


<footer>
<p>&copy; 2024 My Sample Website. All Rights Reserved.</p>
</footer>

</body>
</html>

You might also like