<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" href="/landing.css">
</head>
<body>
<!-- Strart Header -->
<!-- Strart Header -->
<header>
<div class="container">
<h1> Landing Page</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- End Header -->
<!-- start Hero -->
<!-- End Hero -->
<section class="hero" id="home">
<div class="container">
<h2>Welcome to Our Service</h2>
<p>We provide the best solutions for your business needs. Join us today and take your business to the next level.</p>
<a href="#features" class="btn">Learn More</a>
</div>
</section>
<!-- End Hero -->
<!-- Start Features -->
<!-- End Features -->
<section class="features" id="features">
<div class="container">
<h2>Features</h2>
<div class="feature">
<h3>Feature One</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!
Explore more at CodeZillaYE and transform your coding skills! </p>
</div>
<div class="feature">
<h3>Feature Two</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!
Explore more at CodeZillaYE and transform your coding skills! .</p>
</div>
<div class="feature">
<h3>Feature Three</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!
Explore more at CodeZillaYE and transform your coding skills! .</p>
</div>
</div>
</section>
<!-- End Features -->
<!-- Start Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>About Us</h3>
<p>We are dedicated to providing the best services to help your business grow and succeed.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>website : codezillaye.com</p>
<p>Phone: (123) 456-7890</p>
</div>
</div>
<p>© 2024 CodeZillaYE. All Rights Reserved.</p>
</div>
</footer>
<!-- End Footer -->
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
line-height: 1.6;
background-color: #4e342eb8;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #69c4bcb3;
color:#f84032;
padding: 1rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
margin: 0;
}
header nav ul {
list-style: none;
display: flex;
}
header nav ul li {
margin-left: 1rem;
}
header nav ul li a {
color: #222;
text-decoration: none;
}
.hero {
background: url('https://codezillaye.com/wp-content/uploads/2024/06/web.jpg') no-repeat center center/cover;
color:#ffeb3b;
padding: 4rem 0;
text-align: center;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h2 {
margin-bottom: 1rem;
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.hero .btn {
background: #f44336;
color: #333;
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
font-size: 1rem;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.hero .btn:hover {
background: #555;
}
.features {
padding: 2rem 0;
text-align: center;
}
.features h2 {
margin-bottom: 2rem;
font-size: 2rem;
color: #f84032;
}
.features h3 {
margin-bottom: 2rem;
background-color: #222;
font-size: 2rem;
color: #e3837a;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.features p {
background-color: #009688;
color: #ffeb3b;
}
.feature {
margin-bottom: 1.5rem;
}
footer {
background: #009688;
color: #333;
text-align: center;
padding: 2rem 0;
margin-top: 2rem;
}
.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.footer-section {
width: 30%;
}
.footer-section h3 {
margin-bottom: 1rem;
}
.footer-section p,
.footer-section ul {
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #fff;
text-decoration: none;
}
.footer-section ul li a:hover {
text-decoration: underline;
}