spaceshiptrip
commented
1 month ago Here’s a complete HTML file incorporating Bootstrap along with separate CSS and JavaScript files. Bootstrap simplifies much of the layout, responsiveness, and component functionality, so we’ll only need minimal custom CSS and JavaScript to handle specific behavior.
HTML (index.html)
This HTML file includes a Bootstrap carousel for the “Happenings” section, information cards for hikes, and modals for viewing detailed hike information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiking Adventures</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Persistent Navbar with Brand and Menu Links -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">NADABARKADA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#happenings">Happenings</a></li>
<li class="nav-item"><a class="nav-link" href="#hiking">Hiking</a></li>
</ul>
</div>
</nav>
<!-- Main Content Container -->
<div class="container mt-5 pt-5">
<!-- Happenings Carousel Section -->
<section id="happenings" class="carousel-section mt-4">
<h2>Happenings</h2>
<div id="happeningsCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- First Slide -->
<div class="carousel-item active">
<img src="assets/happenings1.jpg" class="d-block w-100" alt="Happening 1">
<div class="carousel-caption d-none d-md-block">
<h3>Exciting Hike at XYZ Park</h3>
<p>Join us for a scenic adventure through the XYZ trails.</p>
</div>
</div>
<!-- Second Slide -->
<div class="carousel-item">
<img src="assets/happenings2.jpg" class="d-block w-100" alt="Happening 2">
<div class="carousel-caption d-none d-md-block">
<h3>Sunset Trekking</h3>
<p>Catch a breathtaking sunset view on our evening hike.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#happeningsCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#happeningsCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Hiking Information Cards Section -->
<section id="hiking" class="hiking-section mt-5">
<h2>Hiking Events</h2>
<div class="row">
<!-- Hiking Card Example -->
<div class="col-md-4 mb-4">
<div class="card hike-card" onclick="openModal('hikeModal1')">
<img src="assets/hike1.jpg" class="card-img-top" alt="Hike Image 1">
<div class="card-img-overlay">
<small class="date-label">2024-Nov-02</small>
</div>
<div class="card-body">
<h5 class="card-title">Deukmejian Loop</h5>
<p class="card-text">Experience the scenic trails of Deukmejian.</p>
</div>
</div>
</div>
<!-- Add more cards as needed -->
</div>
</section>
</div>
<!-- Hiking Details Modal Template (Dynamically Populated) -->
<div class="modal fade" id="hikeModal1" tabindex="-1" aria-labelledby="hikeModal1Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="hikeModal1Label">Deukmejian Loop - Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Detailed information for this hike goes here -->
<p>Location: Deukmejian State Park, Glendale, CA</p>
<p>Date: 2024-Nov-02</p>
<img src="assets/hike1.jpg" class="img-fluid" alt="Hike Detail Image">
<p>Details: Enjoy a beautiful loop with scenic views and challenging trails.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap and Custom JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>Custom CSS (styles.css)
This file adds custom styles to enhance Bootstrap’s default look and tailor it to your theme.
/* Offset container to avoid navbar overlap */
.container {
margin-top: 80px;
}
/* Date label overlay on cards */
.date-label {
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
color: white;
padding: 5px;
position: absolute;
top: 10px;
left: 10px;
font-size: 0.9rem;
border-radius: 4px;
}
/* Centered card text */
.hike-card .card-body {
text-align: center;
}
/* Hiking event section style */
.hiking-section h2 {
text-align: center;
margin-bottom: 20px;
}
/* Modal styling adjustments */
.modal-body img {
margin-bottom: 15px;
}JavaScript for Modal Control (script.js)
This file controls the modal opening behavior when a card is clicked. Bootstrap handles most modal functionality.
// Function to open a modal by ID
function openModal(modalId) {
$('#' + modalId).modal('show');
}Summary
With these files:
- HTML implements Bootstrap-based layout, carousel, and modal.
- CSS customizes Bootstrap elements with card overlays, carousel adjustments, and modal styles.
- JavaScript provides a utility for opening modals dynamically.
Using Bootstrap’s classes and components handles much of the responsiveness and design for a polished, cross-browser-compatible experience.
Have a carousel of information with calendar events below it in it's own card