How To Create A Musician Website

 <nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#"></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 active">
        <a class="nav-link" href="/index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/product.html">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about.html">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>


<!-- Add main content -->
<div class="container mt-5">
    <div class="title-container">
        <h1 class="text-center mb-4">Your Cart</h1>
        </div>
    <div class="row">
      <!-- Add product card -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <img src="/images/lead.jpg" alt="Product" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">Learn Lead Guitar</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h6 class="card-subtitle mb-2 text-muted">$99.99</h6>
            <a href="#" class="btn btn-primary">Remove from Cart</a>
          </div>
        </div>
      </div>
      <!-- Add more product cards as needed -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <img src="/images/piano.png" alt="Product" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">Learn Lead Piano</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h6 class="card-subtitle mb-2 text-muted">$99.99</h6>
            <a href="#" class="btn btn-primary">Remove from Cart</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="card">
          <img src="/images/bass.jpg" alt="Product" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">Learn Bass Guitar</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h6 class="card-subtitle mb-2 text-muted">$99.99</h6>
            <a href="#" class="btn btn-primary">Remove from Cart</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Add total and checkout buttons -->
    <div class="row mt-4">
      <div class="col-md-6 offset-md-6 text-right">
        <h4>Total: $99.99</h4>
        <a href="/checkout.html" class="btn btn-primary">Checkout</a>
      </div>
    </div>
  </div>
     

.navbar {
    background-color: blue;
  }


.navbar-light .navbar-brand {
    color: rgb(255, 255, 255)!important;
}


.navbar-brand {
  position: relative;
  background: url(../images/BS.png);
  width: 100px;
  left: -25px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 42px;
}


  .nav-link {
    color: white!important;
  }
 
  .navbar a:hover {
    color: rgba(233, 223, 216, 0.981);
    transition: color 0.3s ease;
  }


  .navbar-toggler {
    border: 1px solid #f8f9fa;
  }


  .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.5)!important;
}


h1 {
  text-align: center;
  color: #000;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 2rem;
}


.title-container {
  position: relative;
  bottom: 25px;
  padding: 1rem 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}


h1 {
  font-family: 'Lobster', cursive;
}


.card {
  margin-bottom: 1rem;
}


.card-img-top {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}


@media (max-width: 576px) {
  .title-container h1 {
    font-size: 1.5rem;
  }
}


/* footer */


footer {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  margin-top: 20px;
 
}


footer a {
  color: #fff;
  font-size: 1.5rem;
  margin-right: 0.5rem;
}


footer a:hover {
  color: #eee;
}


  /* Fade in/out */
  i {
    transition: all 0.2s ease;
  }


  /* Fade in/out */
  i {
    transition: all 0.2s ease;
  }


  /* Slide in/out */
  i {
    transition: all 0.2s ease;
    transform: translateX(-50%);
  }


  i:hover {
    transform: translateX(0);
  }


  /* Rotate */
  i {
    transition: all 0.2s ease;
    transform: rotate(0deg);
  }


  i:hover {
    transform: rotate(45deg);
  }


  .quick-links {
    list-style: none;
  }
 
  /* Animations */


  .title-container {
    /* Initial state: hidden */
    opacity: 0;
 
    /* Animate to visible state */
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
  }
 


  .card {
    /* Initial state: hidden */
    opacity: 0;
 
    /* Animate to visible state */
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
  }
 
 
@media (max-width: 576px) {
  footer p {
    text-align: center;
  }
}


/* Contact Page */


form {
  /* Add some padding to the form */
  padding: 2rem;


  /* Add a background color to the form */
  background-color: #f5f5f5;


  /* Add some border radius to the form */
  border-radius: 1rem;
}


form label {
  /* Add some color to the labels */
  color: #333;


  /* Make the labels bold */
  font-weight: bold;
}


form input[type="text"],
form input[type="email"],
form textarea {
  /* Add some padding to the input fields */
  padding: 0.75rem 1rem;


  /* Add a border and some border radius to the input fields */
  border: 1px solid #ddd;
  border-radius: 0.25rem;


  /* Add some margin to the bottom of the input fields */
  margin-bottom: 1rem;


  /* Make the input fields wider */
  width: 100%;
}


form textarea {
  /* Make the textarea element taller */
  height: 10rem;


  /* Add some vertical padding to the textarea element */
  padding: 1rem;
}


form button[type="submit"] {
  /* Add some padding to the submit button */
  padding: 0.75rem 1.5rem;


  /* Add some color to the submit button */
  color: #fff;
  background-color: #333;


  /* Add some border radius to the submit button */
  border-radius: 0.25rem;


  /* Make the submit button wider */
  width: 100%;
}


/* About Page */


.container {
  font-family: Arial, sans-serif;
}


h2 {
  font-size: 1.75rem;
  color: #333;
  margin-bottom: 1rem;
}


.img-fluid {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}


img:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}



/* Cart Page */


.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}


.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}


.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
}


.card-body {
  padding: 20px;
}


.card-title {
  font-size: 22px;
  font-weight: bold;
}


.card-subtitle {
  font-size: 18px;
  color: #6c757d;
}


.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 20px;
}


.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

document.addEventListener('DOMContentLoaded', function() {


  // Select the title container
  const titleContainer = document.querySelector('.title-container');


  // Add the 'show' class to the title container
  titleContainer.classList.add('show');
 
  // Select all cards
  const cards = document.querySelectorAll('.card');


  // Add the 'show' class to each card
  cards.forEach(function(card) {
    card.classList.add('show');
  });
});