CODEWITHSUNDEEP
htmlcssz-indexpositioningvisual-web-developer
thang truong
thang truong

Reputation: 25

Z-index does not work properly even when setting position elements and z-index?

I have added position like relative and absolute to the elements in my css but it does not work properly.

This is my HTML Code for the title and features section of my website. I want to make the image of the dog appears behind the feature section. I have added the z-index for the feature section as 1 but it doesn't appear in front of the image.

        <!-- Title -->
    <div class="row">
      <div class="col-lg-6">
        <h1>Meet new and interesting dogs nearby.</h1>

        <button type="button" class="btn btn-dark btn-lg download-button">
          <i class="fab fa-apple"></i> Download
        </button>

        <button
          type="button"
          class="btn btn-outline-light btn-lg download-button"
        >
          <i class="fab fa-google-play"></i> Download
        </button>
      </div>

      <div class="iphone-container col-lg-6">
        <img class="iphone" src="images/iphone6.png" alt="iphone-mockup" />
      </div>
    </div>
  </div>
</section>

<!-- Features -->

<section id="features">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <i class="far fa-check-circle fa-4x feature-img"></i>
        <h3>Easy to use.</h3>
        <p class="sub-text">So easy to use, even your dog could do it.</p>
      </div>

      <div class="col-lg-4">
        <i class="fas fa-bullseye fa-4x feature-img"></i>
        <h3>Elite Clientele</h3>
        <p class="sub-text">We have all the dogs, the greatest dogs.</p>
      </div>

      <div class="col-lg-4">
        <i class="fas fa-heart fa-4x feature-img"></i>
        <h3>Guaranteed to work.</h3>
        <p class="sub-text">
          Find the love of your dog's life or your money back.
        </p>
      </div>
    </div>
  </div>
</section>

This is my CSS code

.iphone{
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
 }

.iphone-container {
 position: relative;
 }

/* Features */

#features {
 padding: 10% 15%;
 position: relative;
 text-align: center;
 z-index: 1;
 }

Image to the problem with my website enter image description here

Image of my desired outcome enter image description here

Upvotes: 1

Views: 996

Answers (2)

TOSIF ik
TOSIF ik

Reputation: 1

I Tried this code where some properties in css marked as "/Edited/" are important and hope they will work. NOTE: I ADDED CODE SNIPPET TWO TIME BY MISTAKE AND DON'T KNOW HOW TO DELETE.

body{
  font-family: "Montserrat";
}
#title{
  background-color: #FF4C68;  /* use # to target id */
  color: #fff;

}
.container-fluid{
  padding: 3% 15%;
}
h1{
  font-family: "Montserrat-Black",sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
}
h2{
  font-family: "Montserrat-Bold",sans-serif;
  font-weight: bold;
  /* width: 80%; */
  font-size: 3rem;
  line-height: 1.5;
  margin: 0 30px;
}
h3{
  font-family: "Montserrat-bold",sans-serif;
  font-weight: bold;
}
p{
   color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand{
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}
.navbar{
    padding:0 0 4.5rem;
}
.nav-item{
  padding: 0 18px;
}
.nav-link{
  font-size: 1.2rem;
  font-family: "Montserrat-Light",sans-serif;
}

/* Download buttons */
.download-button{
  margin: 5% 3% 5% 0;
}
/* Tittle image */
.title-image{
  width: 20%;
  transform: rotate(25deg);
  /* position: relative;
  left: 60px; */
  position: absolute;                        /*Edited*/
  right: 355px;                              /*Edited*/
}
/* Feature section */
#features{
  padding: 7% 15%;
  background-color: #fff;
  /* position: relative;
  bottom: 235px; */
  position: relative;                         /*Edited*/
}
.feature-box{
  text-align: center;
  padding: 5%;
}
.icon {
  color: #ef8172;
  /* margin-bottom: 1rem; */
  padding-bottom: 15px;
}
.icon:hover{
  color: #FF4C68;
}

/* Testimonials section */
#testimonials{
  text-align: center;
  background-color: #ef8172;
  color: #fff;
  /* position: relative;
  bottom: 235px; */
}
.testimonial-image{
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}
.carousel-item{
  padding: 7% 15%;
}

#press{
  background-color: #ef8172;
  text-align: center;
  padding-bottom: 3%;
  /* position: relative;
  bottom: 230px; */
}
.press-logo{
  width: 15%;
  margin: 20px 20px 50px;
}

/* Pricing section */
#pricing{
  padding: 100px;

}
.pricing-column{
  padding: 3% 2%;
}
@media only screen and (max-width:1028px) {          /*Edited*/
  #title{
    text-align: center;
  }
  .title-image{
    width: 60%;
    position: static;
    transform: rotate(0);
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <!-- 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:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css">

  <!-- font awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">

  </script>
</head>

<body>

  <section id="title">
    <div class="container-fluid">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">tindog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="row">
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <i class="icon fas fa-check-circle fa-4x"></i>
        <h3>Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>
      </div>
      <div class="feature-box col-lg-4">
        <i class="icon fas fa-bullseye fa-4x"></i>
        <h3>Elite Clientele</h3>
        <p>We have all the dogs, the greatest dogs.</p>
      </div>
      <div class="feature-box col-lg-4">
        <i class="icon fas fa-heart fa-4x"></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" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
          <em>Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
          <em>Beverly, Illinois</em>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </section>


  <!-- Press -->

  <section id="press">
    <img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
    <img class="press-logo" src="images/tnw.png" alt="tnw-logo">
    <img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
    <img class="press-logo" 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>

    <!-- <div class="card-deck"> -->
    <!-- card-deck is not woriking in bootstrap 5  -->
      <!-- <div class="card-group">   so we can use "card-group"  -->
      <div class="row">
        <div class="pricing-column col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button" href="" class="btn w-100 btn-lg btn-outline-dark">Sign Up</button>
            </div>
          </div>
        </div>
        <div class="pricing-column col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button>   <!--here we have used w-100 that will take 100% width of the block>
              button type="button" href="" class="btn btn-block btn-lg btn-outline-primary">Sign Up</button> -->
            </div>
          </div>
        </div>
        <div class="pricing-column col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button>
            </div>
          </div>
        </div>
      </div>



    <!-- </div> -->
  </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>

I was facing the same problem to use z-index, so i edited css file, added some properties as i marked as "/Edited/" in css section. the code snippet here will not execute properly but it will properly execute in Atom or may be in other editors,I hope. I don't think this solution may or may not work for other problems related to z-index problem, but for this "tindog" project from udemy will work.

body{
  font-family: "Montserrat";
}
#title{
  background-color: #FF4C68;  /* use # to target id */
  color: #fff;

}
.container-fluid{
  padding: 3% 15%;
}
h1{
  font-family: "Montserrat-Black",sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
}
h2{
  font-family: "Montserrat-Bold",sans-serif;
  font-weight: bold;
  /* width: 80%; */
  font-size: 3rem;
  line-height: 1.5;
  margin: 0 30px;
}
h3{
  font-family: "Montserrat-bold",sans-serif;
  font-weight: bold;
}
p{
   color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand{
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}
.navbar{
    padding:0 0 4.5rem;
}
.nav-item{
  padding: 0 18px;
}
.nav-link{
  font-size: 1.2rem;
  font-family: "Montserrat-Light",sans-serif;
}

/* Download buttons */
.download-button{
  margin: 5% 3% 5% 0;
}
/* Tittle image */
.title-image{
  width: 20%;
  transform: rotate(25deg);
  /* position: relative;
  left: 60px; */
  position: absolute;                        /*Edited*/
  right: 355px;                              /*Edited*/
}
/* Feature section */
#features{
  padding: 7% 15%;
  background-color: #fff;
  /* position: relative;
  bottom: 235px; */
  position: relative;                         /*Edited*/
}
.feature-box{
  text-align: center;
  padding: 5%;
}
.icon {
  color: #ef8172;
  /* margin-bottom: 1rem; */
  padding-bottom: 15px;
}
.icon:hover{
  color: #FF4C68;
}

/* Testimonials section */
#testimonials{
  text-align: center;
  background-color: #ef8172;
  color: #fff;
  /* position: relative;
  bottom: 235px; */
}
.testimonial-image{
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}
.carousel-item{
  padding: 7% 15%;
}

#press{
  background-color: #ef8172;
  text-align: center;
  padding-bottom: 3%;
  /* position: relative;
  bottom: 230px; */
}
.press-logo{
  width: 15%;
  margin: 20px 20px 50px;
}

/* Pricing section */
#pricing{
  padding: 100px;

}
.pricing-column{
  padding: 3% 2%;
}
@media only screen and (max-width:1028px) {          /*Edited*/
  #title{
    text-align: center;
  }
  .title-image{
    width: 60%;
    position: static;
    transform: rotate(0);
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <!-- 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:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css">

  <!-- font awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">

  </script>
</head>

<body>

  <section id="title">
    <div class="container-fluid">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">tindog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="row">
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <i class="icon fas fa-check-circle fa-4x"></i>
        <h3>Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>
      </div>
      <div class="feature-box col-lg-4">
        <i class="icon fas fa-bullseye fa-4x"></i>
        <h3>Elite Clientele</h3>
        <p>We have all the dogs, the greatest dogs.</p>
      </div>
      <div class="feature-box col-lg-4">
        <i class="icon fas fa-heart fa-4x"></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" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
          <em>Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
          <em>Beverly, Illinois</em>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </section>


  <!-- Press -->

  <section id="press">
    <img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
    <img class="press-logo" src="images/tnw.png" alt="tnw-logo">
    <img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
    <img class="press-logo" 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>

    <!-- <div class="card-deck"> -->
    <!-- card-deck is not woriking in bootstrap 5  -->
      <!-- <div class="card-group">   so we can use "card-group"  -->
      <div class="row">
        <div class="pricing-column col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button" href="" class="btn w-100 btn-lg btn-outline-dark">Sign Up</button>
            </div>
          </div>
        </div>
        <div class="pricing-column col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button>   <!--here we have used w-100 that will take 100% width of the block>
              button type="button" href="" class="btn btn-block btn-lg btn-outline-primary">Sign Up</button> -->
            </div>
          </div>
        </div>
        <div class="pricing-column col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button>
            </div>
          </div>
        </div>
      </div>



    <!-- </div> -->
  </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>

strong text

Upvotes: 0

Kameron
Kameron

Reputation: 10846

Please see the CSS changes I made at the bottom under /* additions */. For the #features section, it has a white background by default, and you actually have to declare background-color: white; so that CSS knows to put the white background front of section#title

body {
  font-family: "Montserrat";
}

#title {
  background-color: #000b49;
  color: white;
}

h1 {
  font-family: "Montserrat";
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
}

h2 {
  font-family: "Montserrat";
  font-size: 2.5rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
}

.container-fluid {
  padding: 3% 15%;
}

/* Navigation_bar */

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

.navbar {
  padding: 0 0 4.5rem;
}

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

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

.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */

.iphone {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}

.iphone-container {
  position: relative;
}

/* Features */

#features {
  padding: 10% 15%;
  position: relative;
  text-align: center;
  z-index: 1;
}

.feature-img {
  color: #35589a;
  padding-bottom: 15%;
}

.feature-img:hover {
  color: #c84b31;
}

.sub-text {
  color: #8f8f8f;
}

/* Testimonials */

#testimonials {
  text-align: center;
  background-color: #0f4d92;
  color: white;
}

.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}

#press {
  background-color: #0f4d92;
  text-align: center;
  padding: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 15px;
}

.carousel-item {
  padding: 7% 15%;
}

/* Pricing section */

#pricing {
  padding: 100px;
}

.pricing-col {
  padding: 3% 2%;
  text-align: center;
}

/* additions */

section#features {
  position: relative;
  background-color: white;
  z-index: 1;
}

section#title {
  position: relative;
  z-index: 0;
}


img.iphone {
  height: 400px;
  width: 200px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vietalk</title>

    <!-- Bootstrap  -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>

    <!-- CSS Style Sheets -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- 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:ital,wght@0,700;0,900;1,400;1,500&family=Ubuntu:ital,wght@0,400;0,700;1,300&display=swap"
      rel="stylesheet"
    />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <section id="title">
      <div class="container-fluid">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="">tindog</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-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 ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Download</a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- Title -->
        <div class="row">
          <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>

            <button type="button" class="btn btn-dark btn-lg download-button">
              <i class="fab fa-apple"></i> Download
            </button>

            <button
              type="button"
              class="btn btn-outline-light btn-lg download-button"
            >
              <i class="fab fa-google-play"></i> Download
            </button>
          </div>

          <div class="iphone-container col-lg-6">
            <img class="iphone" src="https://raw.githubusercontent.com/BrianTruong23/tindog/main/TinDog%20Start%20Here/images/iphone6.png" alt="iphone-mockup" />
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->

    <section id="features">
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <i class="far fa-check-circle fa-4x feature-img"></i>
            <h3>Easy to use.</h3>
            <p class="sub-text">So easy to use, even your dog could do it.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-bullseye fa-4x feature-img"></i>
            <h3>Elite Clientele</h3>
            <p class="sub-text">We have all the dogs, the greatest dogs.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-heart fa-4x feature-img"></i>
            <h3>Guaranteed to work.</h3>
            <p class="sub-text">
              Find the love of your dog's life or your money back.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials -->

    <section id="testimonials">
      <div
        id="testimonials-carousel"
        class="carousel slide"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>

        <div class="carousel-inner">
          <div class="carousel-item active">
            <h2>
              I no longer have to sniff other dogs for love. I've found the
              hottest Corgi on TinDog. Woof.
            </h2>
            <img
              class="testimonial-image"
              src="images/dog-img.jpg"
              alt="dog-profile"
            />
            <em>Pebbles, New York</em>
          </div>
          <div class="carousel-item">
            <h2 class="testimonial-text">
              My dog used to be so lonely, but with TinDog's help, they've found
              the love of their life. I think.
            </h2>
            <img
              class="testimonial-image"
              src="images/lady-img.jpg"
              alt="lady-profile"
            />
            <em>Beverly, Illinois</em>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#testimonials-carousel"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#testimonials-carousel"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>

    <!-- Press -->

    <section id="press">
      <img class="press-logo" src="images/techcrunch.png" alt="tc-logo" />
      <img class="press-logo" src="images/tnw.png" alt="tnw-logo" />
      <img class="press-logo" src="images/vn-logo.png" alt="biz-insider-logo" />
      <img class="press-logo" 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>

      <div class="row">
        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-12">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-outline-dark btn-lg">
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </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 2021 TinDog</p>
    </footer>
  </body>
</html>

Upvotes: 2

Related Questions