2025-06-04 09:34:13 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2025-06-04 09:46:25 +02:00
< title > Website Template< / title >
2025-06-04 09:38:33 +02:00
<!-- 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" >
2025-06-04 09:34:13 +02:00
< / head >
2025-06-04 09:38:33 +02:00
< body class = "bg-gray-100" >
2025-06-04 09:46:25 +02:00
<!-- Navigation -->
2025-06-04 09:38:33 +02:00
< nav class = "navbar navbar-expand-lg navbar-dark bg-dark" >
< div class = "container" >
2025-06-04 09:46:25 +02:00
< a class = "navbar-brand" href = "#" > Your Brand< / a >
2025-06-04 09:38:33 +02:00
< 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" >
2025-06-04 09:46:25 +02:00
< a class = "nav-link active" href = "#home" > Home< / a >
2025-06-04 09:38:33 +02:00
< / li >
< li class = "nav-item" >
2025-06-04 09:46:25 +02:00
< a class = "nav-link" href = "#about" > About< / a >
2025-06-04 09:38:33 +02:00
< / li >
< li class = "nav-item" >
2025-06-04 09:46:25 +02:00
< 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 >
2025-06-04 09:38:33 +02:00
< / li >
< / ul >
< / div >
< / div >
< / nav >
2025-06-04 09:46:25 +02:00
<!-- 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 >
2025-06-04 09:38:33 +02:00
< / div >
< / div >
< / div >
2025-06-04 09:46:25 +02:00
< / footer >
2025-06-04 09:38:33 +02:00
<!-- 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 >
2025-06-04 09:34:13 +02:00
< / body >
< / html >
