Develop a responsive landing page using HTML, CSS, and vanilla JavaScript. The page should have a header with a navigation menu, a hero section, a features section, a call-to-action section, and a footer. Ensure the layout and design are responsive to different screen sizes, and incorporate basic interactivity, such as a hamburger menu for mobile devices or smooth scrolling between sections. Finally, share the full code having combined all files in the html file.
Sure! Below is a complete HTML file that includes a responsive landing page with a header, hero section, features section, call-to-action section, and footer. It also includes a hamburger menu for mobile devices and smooth scrolling between sections. The CSS and JavaScript are embedded within the HTML file for simplicity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Landing Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
header {
background: #333;
color: white;
padding: 10px 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav ul {
list-style: none;
padding: 0;
display: flex;
}
.nav ul li {
margin: 0 15px;
}
.nav ul li a {
color: white;
text-decoration: none;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger div {
width: 25px;
height: 3px;
background: white;
margin: 4px 0;
}
.hero {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
color: white;
text-align: center;
padding-top: 60px; /* To avoid overlap with fixed header */
}
.features, .cta {
padding: 60px 20px;
text-align: center;
}
.features {
background: #f4f4f4;
}
.feature {
margin: 20px 0;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
.nav ul {
display: none;
flex-direction: column;
position: absolute;
background: #333;
top: 60px;
right: 0;
width: 200px;
}
.nav ul.active {
display: flex;
}
.hamburger {
display: flex;
}
}
</style>
</head>
<body>
<header>
<div class="nav">
<div class="logo">My Website</div>
<div class="hamburger" id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<ul id="nav-links">
<li><a href="#hero">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#cta">Contact</a></li>
</ul>
</div>
</header>
<section id="hero" class="hero">
<h1>Welcome to Our Landing Page</h1>
<p>Your success starts here.</p>
</section>
<section id="features" class="features">
<h2>Features</h2>
<div class="feature">Feature 1: Amazing Quality</div>
<div class="feature">Feature 2: User Friendly</div>
<div class="feature">Feature 3: 24/7 Support</div>
</section>
<section id="cta" class="cta">
<h2>Get Started Today!</h2>
<p>Join us and take your first step towards success.</p>
<button onclick="alert('Thank you for your interest!')">Sign Up</button>
</section>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
<script>
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
</script>
</body>
</html>
<style> tag. The layout is responsive, with media queries to adjust the navigation for smaller screens.scroll-behavior: smooth; property in the CSS allows for smooth scrolling between sections when links are clicked.You can copy and paste this code into an HTML file and open it in a web browser to see the responsive landing page in action!