mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 13:21:54 +01:00
177 lines
7.8 KiB
HTML
177 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Website Template</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Your Brand</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#about">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#services">Services</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#portfolio">Portfolio</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="home" class="py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto text-center">
|
|
<h1 class="text-4xl font-bold mb-4">Welcome to Your Website</h1>
|
|
<p class="text-gray-600 mb-4">A clean, modern template for your next project</p>
|
|
<button class="btn btn-primary me-2">Get Started</button>
|
|
<button class="btn btn-outline-secondary">Learn More</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-5 bg-white">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-5">About Us</h2>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p class="text-gray-600">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-5">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-5">Our Services</h2>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="bg-white rounded-lg shadow-md p-4">
|
|
<h3 class="text-xl font-bold mb-3">Service 1</h3>
|
|
<p class="text-gray-600">Description of your first service goes here.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="bg-white rounded-lg shadow-md p-4">
|
|
<h3 class="text-xl font-bold mb-3">Service 2</h3>
|
|
<p class="text-gray-600">Description of your second service goes here.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="bg-white rounded-lg shadow-md p-4">
|
|
<h3 class="text-xl font-bold mb-3">Service 3</h3>
|
|
<p class="text-gray-600">Description of your third service goes here.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="py-5 bg-white">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-5">Portfolio</h2>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="bg-gray-100 rounded-lg p-4">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
|
|
<h3 class="text-xl font-bold mb-2">Project 1</h3>
|
|
<p class="text-gray-600">Brief description of your first project.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="bg-gray-100 rounded-lg p-4">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
|
|
<h3 class="text-xl font-bold mb-2">Project 2</h3>
|
|
<p class="text-gray-600">Brief description of your second project.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="bg-gray-100 rounded-lg p-4">
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
|
|
<h3 class="text-xl font-bold mb-2">Project 3</h3>
|
|
<p class="text-gray-600">Brief description of your third project.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-5">
|
|
<div class="container">
|
|
<h2 class="text-3xl font-bold text-center mb-5">Contact Us</h2>
|
|
<div class="row">
|
|
<div class="col-md-6 mx-auto">
|
|
<form class="bg-white rounded-lg shadow-md p-6">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" placeholder="Your name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" placeholder="Your email">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" id="message" rows="4" placeholder="Your message"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-dark text-white py-4">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p>© 2024 Your Brand. All rights reserved.</p>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<a href="#" class="text-white me-3">Privacy Policy</a>
|
|
<a href="#" class="text-white me-3">Terms of Service</a>
|
|
<a href="#" class="text-white">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JavaScript -->
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |