alvin/challenge-11
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/challenge-11.git synced 2026-03-06 13:21:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revamp index.html with Bootstrap and Tailwind CSS integration, add navigation and main content structure, and implement JavaScript for interactivity. Remove unused style.css file.

Browse Source
This commit is contained in:
Alvin
2025-06-04 09:38:33 +02:00
parent e745cc340c
commit f0a1a657a3
4 changed files with 252 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@@ -3,9 +3,52 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>My Website</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>
<body class="bg-gray-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Website</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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container py-8">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="bg-white rounded-lg shadow-md p-6">
<h1 class="text-3xl font-bold mb-4">Welcome to My Website</h1>
<p class="text-gray-600">This is a basic website using both Bootstrap and Tailwind CSS for styling.</p>
<button class="btn btn-primary mt-4">Learn More</button>
</div>
</div>
</div>
</main>
<!-- 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>