Final HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton+SC&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="rounded-circle" src="bstrap/rockyStream.jpg" alt="Rocky Stream" height="24"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<h1>The Mountains of North Carolina</h1>
<div class="row">
<div class="col-sm-4 mar-bottom">
<img src="bstrap/mountains.jpg" alt="mountains during the day" class="img-fluid rounded-circle">
</div>
<div class="col-sm-8">
<p>The North Carolina mountains are a breathtaking region known for their scenic beauty, rich biodiversity, and outdoor adventure. Nestled in the Appalachian range, including the Blue Ridge and Great Smoky Mountains, they offer stunning landscapes of rolling hills, dense forests, and cascading waterfalls. With charming small towns, vibrant fall foliage, and opportunities for hiking, camping, and wildlife viewing, the North Carolina mountains are a haven for nature lovers and explorers seeking tranquility and natural splendor year-round.</p> </div>
</div>
<div class="row">
<div class="col-sm-8 order-2 order-sm-1">
<p>The North Carolina mountains are a breathtaking region known for their scenic beauty, rich biodiversity, and outdoor adventure. Nestled in the Appalachian range, including the Blue Ridge and Great Smoky Mountains, they offer stunning landscapes of rolling hills, dense forests, and cascading waterfalls. With charming small towns, vibrant fall foliage, and opportunities for hiking, camping, and wildlife viewing, the North Carolina mountains are a haven for nature lovers and explorers seeking tranquility and natural splendor year-round.</p> </div>
<div class="col-sm-4 mar-bottom">
<img src="bstrap/rockyStream.jpg" alt="mountains during the day" class="img-fluid rounded-circle">
</div>
</div>
<div class="row">
<div class="col-sm-8 offset-sm-2">
<p> This is an example of an offset column. </p>
</div>
</div>
</main>
</body>
</html>
Final Custom CSS
h1 {
font-family: "Anton SC", sans-serif;
}
p {
font-size: 1.2rem;
}
.btn-outline-success {
color: #ffdd5c;
border-color: #ffdd5c;
}
.btn-outline-success:hover {
color: #0d6efd;
background-color: #ffdd5c;
border-color: #ffdd5c;
}
.row {
margin-bottom: 2rem;
}
@media (max-width: 575.98px) {
p {
font-size: 1rem;
}
.mar-bottom {
margin-bottom: 1.5rem;
}
}
Pages: 1 2