Bootstrap carousel & Google Font Issues-CodePudding

I know this has been asked many times, but I still cannot seem to fix my code. As you can see, I am copied the code directly from bootstrap, and I was able to get my buttons to appear, but they are not activating. Also, google fonts was directly imported, but it too is not changing my fonts as it should. It is remaining as default.

#title {
  background-color: #FF4C68;
  color: WHITE;
}
.container-fluid{
  padding: 3% 15%;
}
/* H1 FONT FAMILY NOT WORKING */
h1 {
  font-family: "Montserrat-Black";
  font-size: 3.5rem;
  line-height: 1.5;
}
h2 {
  font-family: "Montserrat-Bold";
  font-size: 3rem;
  line-height: 1.5;
}
h3{
  font-family: "Montserrat-Bold";
  font-size: 1.5rem;
}
p{
  color: #8F8F8F;
}
body {
  font-family: "Montserrat";
}
/* NAVIGATION BAR */

.navbar {
  padding-bottom: 4.5rem;
}

.navbar-brand {
  font-family: 'Ubuntu';
  font-size: 2.5rem;
  font-weight: bold;
  color: yellow;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-size: 1.2rem;
  font-family: "Montserrat-Light";
}

/* DOWNLOAD BUTTONS */
.download-button {
  margin: 5% 3% 5%;
}

/* TITLE IMAGE */
.title-image {
  width: 60%;
  transform: rotate(45deg);
}

/* FEATURES SECTION */
#features {
  padding: 7% 15%;
  text-align: center;
  padding: 5%;
}
/* CHANGE PADDING ABOVE IF FIRST BODY ISNT LOOKING RIGHT */

.icon{
  color: #ef8172;
  margin-bottom: 1rem;
}
.icon:hover{
  color: #ff4c68;
}

/* TESTIMONIAL SECTION */
#testimonials {
  text-align: center;
  background-color: #ef8172;
  color: #fff;
}
.testimonial-img{
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}
#press {
  background-color: #ef8172;
  text-align: center;
  padding-bottom: 3%;
}
.press-logo {
  width: 15%;
  margin: 20px 20px 50px;
}
.carousel-item {
  padding: 7% 15%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>

  <!-- BOOTSTRAP SCRIPTS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


  <!-- Google Fonts -->
  <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=Montserrat:wght@100;400;900&family=Ubuntu&display=swap" rel="stylesheet">


  <!-- CSS STYLESHEETS -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">

  <!-- C:\Users\dparr\Downloads\TinDog-Start-master\TinDog-Start-master\css\styles.css -->

  <!-- FONT AWESOME -->
  <script src="https://kit.fontawesome.com/849c3de797.js" crossorigin="anonymous"></script>


</head>

<body>

  <section id="title">
    <div >


      <!-- Nav Bar -->
      <nav >
        <a  href="">Tindog</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  href="">Contact</a>
            </li>
            <li >
              <a  href="">Pricing</a>
            </li>
            <li >
              <a  href="">Download</a>
            </li>
          </ul>
        </div>

      </nav>


      <!-- Title -->

      <div >
        <div >
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button" ><i ></i> Download</button>
          <button type="button" ><i ></i> Download</button>
        </div>

        <div >
          <img  src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
  </section>


  <!-- Features -->

  <section id="features">

    <div >
      <div >
        <i ></i>
        <h3>Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>
      </div>

      <div >
        <i ></i>
        <h3>Elite Clientele</h3>
        <p>We have all the dogs, the greatest dogs.</p>
      </div>

      <div >
        <i ></i>
        <h3>Guaranteed to work.</h3>
        <p>Find the love of your dog's life or your money back.</p>
      </div>
    </div>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <div id="#testimonial-carousel"  data-bs-ride="false" data-pause="hover">
      <div >
        <div >
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img  src="images/dog-img.jpg" alt="dog-profile">
          <em>Pebbles, New York</em>
        </div>
        <div >
          <h2 >My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img  src="images/lady-img.jpg" alt="lady-profile">
          <em>Beverly, Illinois</em>
        </div>
      </div>
      <button  type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
      </button>
      <button  type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
      </button>
    </div>







  </section>


  <!-- Press -->

  <section id="press">
    <img  src="images/techcrunch.png" alt="tc-logo">
    <img  src="images/tnw.png" alt="tnw-logo">
    <img  src="images/bizinsider.png" alt="biz-insider-logo">
    <img  src="images/mashable.png" alt="mashable-logo">

  </section>


  <!-- Pricing -->

  <section id="pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Labrador</h3>
    <h2>$49 / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2>$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id="cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type="button">Download</button>
    <button type="button">Download</button>

  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright TinDog</p>

  </footer>


</body>

</html>

CodePudding user response：

Remove # in the carousel ID id="testimonial-carousel" and everything will work Also set the font style like this font-family: 'Montserrat', sans-serif;

/* TESTIMONIAL SECTION */
#testimonials {
  text-align: center;
  background-color: #ef8172;
  color: #fff;
}
.testimonial-img{
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}
#press {
  background-color: #ef8172;
  text-align: center;
  padding-bottom: 3%;
}
.press-logo {
  width: 15%;
  margin: 20px 20px 50px;
}
.carousel-item {
  padding: 7% 15%;
}

<!DOCTYPE html>
<html>

<head>
  <!-- BOOTSTRAP SCRIPTS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

  <!-- FONT AWESOME -->
  <script src="https://kit.fontawesome.com/849c3de797.js" crossorigin="anonymous"></script>


</head>

<body>

  <!-- Testimonials -->

  <section id="testimonials">

    <div id="testimonial-carousel"  data-bs-ride="false" data-pause="hover">
      <div >
        <div >
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img  src="images/dog-img.jpg" alt="dog-profile">
          <em>Pebbles, New York</em>
        </div>
        <div >
          <h2 >My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img  src="images/lady-img.jpg" alt="lady-profile">
          <em>Beverly, Illinois</em>
        </div>
      </div>
      <button  type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
      </button>
      <button  type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
      </button>
    </div>

  </section>

</body>

</html>

CodePudding user response：

1. What exactly is wrong with the buttons? Carousel

Read how to connect the 5 Budstrap correctly

The scripts should be plugged at the very bottom, before </body>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

2. Connecting fonts

html:

<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=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

css:

font-family: 'Montserrat', sans-serif;
font-weight: 900;