This is an assignment for school and I have been trying to figure this out for days.
The goal of this assignment is: Replace CSS Grid with Bootstrap 5. Every part of the layout needs to use the Bootstrap responsive grid.
Honestly, I have a lot of issues so far with my website but here is what my website looks like right now:
Nature Website - Version 1
And this is what the website is supposed to look like:
Nature Website - Final Outcome
Right now, I'm just focused on fixing the "Outdoor Adventure" part. None of the images that I have are showing up inside of the columns and are only showing the text that goes along with the image.
I've been following so many tutorials, reading the bootstrap docs, and even just messing around with things myself to see what certain attributes did. This could just be an easy fix, but I think I need another pair of eyes to look at this for me; I'm really stuck.
Here is my HTML and CSS code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>WEB 210: Bootstrap 5 Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/7c3070b180.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main6.css" />
</head>
<body>
<div class="container-xl">
<!-- navbar -->
<header id="masthead">
<div class="container flex">
<h1>Exploring Nature</h1>
<nav aria-label="Primary website navigation">
<ul class="flex">
<li><a href="#">Book Now!</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
<a href="#" id="navMenuTrigger" class="fas fa-bars fa-2x"></a>
</nav>
</div>
</header>
<!-- main and featured tour -->
<main>
<section id="pageContent" aria-labelledby="contentHdr">
<div class="container grid homeFeatureGrid">
<div>
<h2 id="contentHdr">Featured Tour (VT2DAY)</h2>
<h3>Vermont in the Fall</h3>
<p>Join our experienced tour guides on a 2-day excursion into beautiful Vermont in late September.</p>
<p><strong>Activity Level:</strong> Moderate<br />
<strong>Duration:</strong> Short<br>
<strong>Price:</strong> $750</p>
<p><a href="#" class="actionBtn">Book Now!</a></p>
</div>
<div id="homeFeatureHolder">
<div id="homeFeature"></div>
</div>
</div>
</section>
<!-- tour gallery -->
<section id="tourGallery" aria-labelledby="galleryHdr">
<div class="container">
<h2 id="galleryHdr">Find Your Perfect Outdoor Adventure</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="col">
<a href="#" class="tour" id="fallTour">
<span>Fall</span>
<em>Image of trees in the fall, as their leaves change color</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="winterTour">
<span>Winter</span>
<em>Image of a snow-covered river bank</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="springTour">
<span>Spring</span>
<em>Image of flowers blooming</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="summerTour">
<span>Summer</span>
<em>Image of a sunset, with the light showing through palm trees</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="forestTour">
<span>Forest</span>
<em>Image of a forest glade, with sunlight streaming through the leafy canopy</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="mountainTour">
<span>Mountain</span>
<em>Image of a mountain</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="islandTour">
<span>Island</span>
<em>Image of a sandy beach and looking out on the ocean</em>
</a>
</div>
<div class="col">
<a href="#" class="tour" id="streamTour">
<span>Stream</span>
<em>Image of water flowing through rocks</em>
</a>
</div>
</div>
</div>
</section>
<!-- services -->
<section id="services" aria-labelledby="servicesHdr">
<div class="container">
<h2 id="servicesHdr">We Offer the Complete Package</h2>
<div class="grid serviceGrid">
<a href="#" class="service">
<i class="fa-solid fa-diamond-turn-right fa-2x"></i>
Tour Guides
</a>
<a href="#" class="service">
<i class="fa-solid fa-user-group fa-2x"></i>
Small Groups
</a>
<a href="#" class="service">
<i class="fa-solid fa-plane fa-2x"></i>
Air Travel
</a>
<a href="#" class="service">
<i class="fa-solid fa-car fa-2x"></i>
Car Rental
</a>
<a href="#" class="service">
<i class="fa-solid fa-bed fa-2x"></i>
Accommodations
</a>
<a href="#" class="service">
<i class="fa-solid fa-child-reaching fa-2x"></i>
Childcare
</a>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer>
All content © Exploring Nature. All Rights Reserved.
</footer>
</div>
<!-- We are not using any JavaScript in this layout, so these are not needed in this case.
They are just being included because you might use this example as a starting template. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
@media all {
:root {
--primary-bg-color: #2a2a2a;
--primary-txt-color: #fff;
--secondary-bg-color: #fff;
--secondary-txt-color: #000;
--primary-fonts: 'Roboto', sans-serif;
--secondary-fonts: 'Noto Serif', serif;
}
header, footer, nav, aside, article, section {display: block;}
body {margin: 0; padding: 0;}
#masthead h1 {margin: 0; font: 700 34px var(--secondary-fonts);}
}
@media screen {
body {font: 400 100%/1.4 var(--primary-fonts);}
h2 {font: 400 180%/1.4 var(--primary-fonts);}
h3 {font: 700 140%/1.4 var(--primary-fonts);}
footer {font-size: 90%; text-align: center; background: var(--primary-bg-color); color: var(--primary-txt-color); padding: 15px 0;}
.container {width: 1170px; margin: 0 auto;}
.flex {display: flex; justify-content: space-between;}
.wrap {flex-wrap: wrap;}
.grid {display: grid;}
.homeFeatureGrid {grid-template-columns: 60% 40%;}
.serviceGrid {grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 15px 30px;}
/* masthead and top of content area */
#masthead {padding: 30px 0; background: var(--primary-bg-color); color: var(--primary-txt-color); border-bottom: 1px solid #aaa;}
#masthead nav ul {list-style: none; margin: 0; padding: 0;}
#masthead nav li {margin-left: 10px;}
#masthead nav ul a, #pageContent .actionBtn {margin-top: 7px; color: var(--primary-txt-color); font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 12px;}
#pageContent .actionBtn {background: #ccc; color: var(--secondary-txt-color); padding: 12px 20px; font-size: 120%;}
#masthead nav ul a:hover, #masthead nav ul a:focus, #pageContent .actionBtn:hover, #pageContent .actionBtn:focus {background: var(--secondary-bg-color); color: var(--secondary-txt-color);}
#pageContent {padding: 30px 0; background: var(--primary-bg-color); color: var(--primary-txt-color); overflow: auto;}
#homeFeature {border: 7px solid #6b6b6b; border-radius: 50%; width: 375px; height: 375px; background: url(./i/maple-leaves-background.webp) no-repeat center; background-size: cover;}
#homeFeatureHolder {justify-self: end;}
#navMenuTrigger {display: none; margin-top: 7px; color: var(--primary-txt-color); text-decoration: none;}
/* tours */
#galleryHdr {text-align: center;}
#tourGallery {background: #ccc; overflow: auto; padding: 30px 0 50px;}
.tour {position: relative; top: 0; left: 0; border: 5px solid var(--primary-txt-color); box-sizing: border-box; background-size: cover;}
.tour span {position: absolute; bottom: 0; width: 100%; padding: 5px 0; background: rgba(0,0,0,0.6); color: var(--primary-txt-color); text-align: center;}
.tour em {font-size: 0px; width: 0; height: 0;}
#fallTour {background: url(./i/fall-tour.webp) top left no-repeat;}
#winterTour {background: url(./i/winter-tour.webp) top left no-repeat;}
#springTour {background: url(./i/spring-tour.webp) center no-repeat;}
#summerTour {background: url(./i/summer-tour.webp) center no-repeat;}
#forestTour {background: url(./i/forest-tour.webp) center no-repeat;}
#mountainTour {background: url(./i/mountain-tour.webp) center no-repeat;}
#islandTour {background: url(./i/island-tour.webp) bottom center no-repeat;}
#streamTour {background: url(./i/stream-tour.webp) center no-repeat;}
/* services */
#services {text-align: center; padding: 30px 0 50px;}
.service {text-decoration: none; background: var(--primary-bg-color); color: var(--primary-txt-color); border: 5px solid var(--primary-bg-color); padding: 20px;}
.service .fa-solid {display: block; height: 50px;}
.service:hover, .service:focus {background: var(--primary-txt-color); color: var(--primary-bg-color);}
}
@media screen and (max-width: 1190px) {
.container {width: auto; padding: 0 20px;}
.adventureGrid, .serviceGrid {grid-template-columns: repeat(3, 1fr);}
.serviceGrid {gap: 15px;}
}
@media screen and (max-width: 1070px) {
.homeFeatureGrid {grid-template-columns: 50% 50%;}
}
@media screen and (max-width: 800px) {
.adventureGrid, .serviceGrid {grid-template-columns: repeat(2, 1fr);}
#pageContent > div.grid {display: block;}
#homeFeature {width: 300px; height: 300px; margin: 50px auto 20px;}
#navMenuTrigger {display: inline-block;}
header nav li {display: none;}
}
@media screen and (max-width: 500px) {
#masthead h1 {font-size: 25px;}
.adventureGrid, .serviceGrid {grid-template-columns: 1fr;}
}
@media print {
body {font: 400 14pt/1.4 var(--secondary-fonts); color: var(--secondary-txt-color);}
h2 {font: 400 20pt/1.4 var(--secondary-fonts);}
h3 {font: 400 17pt/1.4 var(--secondary-fonts);}
#masthead nav, .tour em {display: none;}
#masthead h1 {font-size: 24pt;}
footer {font-size: 11pt; margin-top: 30pt;}
#pageContent {margin: 30pt 0;}
.tour, .service {display: block; margin: 10pt 0;}
a {color: var(--secondary-txt-color);}
}
