Added navigation bar functionality
This commit is contained in:
parent
2831b13598
commit
5cd0c9f6b3
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 532 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-briefcase" viewBox="0 0 16 16">
|
||||
<path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 538 B |
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-bus-front" viewBox="0 0 16 16">
|
||||
<path d="M5 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm8 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-6-1a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2H7Zm1-6c-1.876 0-3.426.109-4.552.226A.5.5 0 0 0 3 4.723v3.554a.5.5 0 0 0 .448.497C4.574 8.891 6.124 9 8 9c1.876 0 3.426-.109 4.552-.226A.5.5 0 0 0 13 8.277V4.723a.5.5 0 0 0-.448-.497A44.303 44.303 0 0 0 8 4Zm0-1c-1.837 0-3.353.107-4.448.22a.5.5 0 1 1-.104-.994A44.304 44.304 0 0 1 8 2c1.876 0 3.426.109 4.552.226a.5.5 0 1 1-.104.994A43.306 43.306 0 0 0 8 3Z"/>
|
||||
<path d="M15 8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1V2.64c0-1.188-.845-2.232-2.064-2.372A43.61 43.61 0 0 0 8 0C5.9 0 4.208.136 3.064.268 1.845.408 1 1.452 1 2.64V4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v3.5c0 .818.393 1.544 1 2v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5V14h6v1.5a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2c.607-.456 1-1.182 1-2V8ZM8 1c2.056 0 3.71.134 4.822.261.676.078 1.178.66 1.178 1.379v8.86a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 11.5V2.64c0-.72.502-1.301 1.178-1.379A42.611 42.611 0 0 1 8 1Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chat-square-heart" viewBox="0 0 16 16">
|
||||
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"/>
|
||||
<path d="M8 3.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 505 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 291 B |
BIN
Visual Studio Code Projects/11.2 Bootstrap Components/couple.jpg
Normal file
BIN
Visual Studio Code Projects/11.2 Bootstrap Components/couple.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
BIN
Visual Studio Code Projects/11.2 Bootstrap Components/dog.jpg
Normal file
BIN
Visual Studio Code Projects/11.2 Bootstrap Components/dog.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
Visual Studio Code Projects/11.2 Bootstrap Components/family.jpg
Normal file
BIN
Visual Studio Code Projects/11.2 Bootstrap Components/family.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bootstrap Components</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bootstrap Components</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
|
||||
<style>
|
||||
.feature-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#"><img src="./box-seam.svg" alt="moveit brand icon" height="30"> Move It</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="#">About</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Services
|
||||
</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>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Postcode" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Check</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="px-4 pt-5 my-5 text-center border-bottom">
|
||||
<h1 class="display-4 fw-bold text-body-emphasis">Move With Joy</h1>
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<p class="lead mb-4">Welcome to our website, where we are on a mission to provide exceptional moving services to
|
||||
customers in the US. As a
|
||||
startup, we believe that moving doesn't have to be stressful or complicated, and we are passionate about making
|
||||
the
|
||||
process as seamless and enjoyable as possible.
|
||||
</p>
|
||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Get a Quote</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Contact Us</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden" style="max-height: 30vh;">
|
||||
<div class="container px-5">
|
||||
<img src="./moving-van.jpg" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700"
|
||||
height="500" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom">Why Move With Us?</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<div class="feature col">
|
||||
<div
|
||||
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<img src="./briefcase.svg" alt="briefcase" height="30">
|
||||
</div>
|
||||
<h3 class="fs-2">Professional</h3>
|
||||
<p>Our team of professional movers are trained to prioritize efficiency, organization, and attention to detail.
|
||||
We
|
||||
understand that your possessions are more than just objects - they are a reflection of your life, memories,
|
||||
and
|
||||
experiences. That's why we take extra care to ensure that everything is packed and transported with the utmost
|
||||
care and
|
||||
attention.</p>
|
||||
<a href="#" class="icon-link">
|
||||
Get a quote
|
||||
<img src="./chevron-right.svg" alt="chevron-right">
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div
|
||||
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<img src="./bus-front.svg" alt="bus-front" height="30">
|
||||
</div>
|
||||
<h3 class="fs-2">Countrywide</h3>
|
||||
<p>We offer a range of services to suit your individual needs, whether you're moving locally or across the
|
||||
country. Our
|
||||
team can handle everything from packing and loading to unloading and unpacking, so you can focus on settling
|
||||
into your
|
||||
new home. And with our transparent pricing and no hidden fees, you can trust that you're getting a fair and
|
||||
competitive
|
||||
rate for our services.</p>
|
||||
<a href="#" class="icon-link">
|
||||
Get a quote
|
||||
<img src="./chevron-right.svg" alt="chevron-right">
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div
|
||||
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<img src="./chat-square-heart.svg" alt="chat-square-heart" height="30">
|
||||
</div>
|
||||
<h3 class="fs-2">Personal Touch</h3>
|
||||
<p>At our core, we believe that moving should be an exciting and positive experience, not a stressful one. By
|
||||
providing
|
||||
exceptional moving services in the US, we hope to revolutionize the way people think about moving and provide
|
||||
a better,
|
||||
more personalized experience for our customers. Contact us today to learn more about how we can help you with
|
||||
your next
|
||||
move.</p>
|
||||
<a href="#" class="icon-link">
|
||||
Get a quote
|
||||
<img src="./chevron-right.svg" alt="chevron-right">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="carouselExampleIndicators" class="carousel slide">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
|
||||
aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
|
||||
aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="./couple.jpg" class="d-block w-100" alt="couple">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="./dog.jpg" class="d-block w-100" alt="dog">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="./family.jpg" class="d-block w-100" alt="family">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
|
||||
<div class="col mb-3">
|
||||
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<p class="text-body-secondary">© 2023</p>
|
||||
</div>
|
||||
|
||||
<div class="col mb-3">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
Nav:
|
||||
|
||||
Move It
|
||||
Home
|
||||
About
|
||||
Services
|
||||
Postcode
|
||||
Check
|
||||
|
||||
Hero:
|
||||
|
||||
Move With Joy
|
||||
Welcome to our website, where we are on a mission to provide exceptional moving services to customers in the US. As a startup, we believe that moving doesn't have to be stressful or complicated, and we are passionate about making the process as seamless and enjoyable as possible.
|
||||
Get a Quote
|
||||
Contact US
|
||||
|
||||
Features:
|
||||
|
||||
Why Move With Us?
|
||||
|
||||
Professional
|
||||
Our team of professional movers are trained to prioritize efficiency, organization, and attention to detail. We understand that your possessions are more than just objects - they are a reflection of your life, memories, and experiences. That's why we take extra care to ensure that everything is packed and transported with the utmost care and attention.
|
||||
Get a quote
|
||||
|
||||
Countrywide
|
||||
We offer a range of services to suit your individual needs, whether you're moving locally or across the country. Our team can handle everything from packing and loading to unloading and unpacking, so you can focus on settling into your new home. And with our transparent pricing and no hidden fees, you can trust that you're getting a fair and competitive rate for our services.
|
||||
Get a quote
|
||||
|
||||
Personal Touch
|
||||
At our core, we believe that moving should be an exciting and positive experience, not a stressful one. By providing exceptional moving services in the US, we hope to revolutionize the way people think about moving and provide a better, more personalized experience for our customers. Contact us today to learn more about how we can help you with your next move.
|
||||
Get a quote
|
||||
|
||||
Loading…
Reference in New Issue
Block a user