awesomekimn/index.html Secret

## index.html
<!DOCTYPE html>
<html>

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

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">

  <!-- CSS stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/1e2d3fa1e2.js" crossorigin="anonymous"></script>
</head>

<body>

  <section class="colored-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="#footer">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#cta">Download</a>
            </li>
          </ul>
        </div>
      </nav>

      <!-- Title -->
      <div class="row">
        <div class="col-lg-6">
          <h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands 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 class="white-section" id="features">
    <div class="container-fluid">


      <div class="row">
        <div class="feature-box col-lg-4">
          <i class="fa-solid fa-circle-check fa-4x icon"></i>
          <h3 class="feature-title">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="fa-solid fa-bullseye fa-4x icon"></i>
          <h3 class="feature-title">Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>

        <div class="feature-box col-lg-4">
          <i class="fa-solid fa-heart fa-4x icon"></i>
          <h3 class="feature-title">Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>

  </section>


  <!-- Testimonials -->

  <section class="colored-section" id="testimonials">

    <div id="testimonial-carousel" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active container-fluid">
          <h2 class="testimonial-text">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 container-fluid">
          <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="#testimonial-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="#testimonial-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 class="colored-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 class="white-section" id="pricing">

    <h2 class="section-heading">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-column col-lg-4 col-md-6">
        <div class="card">
          <div class="card-header">
            <h3>Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2 class="price-text">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-lg btn-outline-dark btn-block">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 class="price-text">$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="btn btn-lg btn-dark btn-block">Sign Up</button>
          </div>
        </div>
      </div>

      <div class="pricing-column col-lg-4">
        <div class="card">
          <div class="card-header">
            <h3>Mastiff</h3>
          </div>
          <div class="card-body">
            <h2 class="price-text">$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-lg btn-dark btn-block">Sign Up</button>
          </div>
        </div>
      </div>

    </div>

  </section>


  <!-- Call to Action -->

  <section class="colored-section" id="cta">
    <div class="container-fluid">

      <h3 class="big-heading">Find the True Love of Your Dog's Life Today.</h3>
      <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
      <button type="button" class="btn btn-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>

    </div>
  </section>


  <!-- Footer -->

  <footer class="white-section" id="footer">
    <div class="container-fluid">

      <i class="fa-brands fa-twitter social-icon"></i>
      <i class="fa-brands fa-facebook-f social-icon"></i>
      <i class="fa-brands fa-instagram social-icon"></i>
      <i class="fa-solid fa-envelope social-icon"></i>
      <p>© Copyright 2018 TinDog</p>
    </div>
  </footer>

  <!-- Bootstrap Scripts -->
  <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


</body>

</html>

## styles.css
body {
  font-family: "Montserrat";
  text-align: center;
}

h1, h2, h3, h4, h6 {
  font-family: "Montserrat";
  font-weight: bold;
}

p {
  color: #8f8f8f;
}

/* Heading */

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

.section-heading {
  font-size: 3rem;
  line-height: 1.5;
}

/* Containers */

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

/* Sections */

.colored-section {
  background-color: #ff4c68;
  color: #fff;
}

.white-section {
  background-color: #fff;
}

/* Navigation Bar */

.navbar {
  padding: 0 0 4.5rem;
}

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

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

.nav-link {
  font-size: 1.2rem;
  font-weight: 300;
}

/* Title Section */

#title .container-fluid {
  padding: 3% 15% 7%;
  text-align: left;
}

/* Download Button */

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

/* Title Image */

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

/* Features Section */

#features {
  padding: 7% 15%;
  position: relative;
  z-index: 1;  /* without this z-index will work same*/
}

.feature-title {
  font-size: 1.5rem;
}

.feature-box {
  padding: 5%;
}

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

.icon:hover {
  color: #ff4c68
}

/* Testimonial Section */

#testimonials {
  background-color: #ef8172;
}

.testimonial-text {
  font-size: 3rem;
  line-height: 1.5;
}

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

#press {
  background-color: #ef8172;
  padding-bottom: 3%;
}

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

/* Pricing Section */

#pricing {
  padding: 100px;
}

.price-text {
  font-size: 3rem;
  line-height: 1.5;
}

.pricing-column {
  padding: 3% 2%;
}

@media (max-width: 1028px) {

  #title {
    text-align: center;
  }

  .title-image {
    position: static;
    transform: rotate(0);
  }
}

/* CTA Section */

/* Footer Section */

.social-icon {
  margin: 20px 10px;
}
	<!DOCTYPE html>
	<html>

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

	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">

	<!-- CSS stylesheets -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<link rel="stylesheet" href="css/styles.css">

	<!-- Font Awesome -->
	<script src="https://kit.fontawesome.com/1e2d3fa1e2.js" crossorigin="anonymous"></script>
	</head>

	<body>

	<section class="colored-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="#footer">Contact</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#pricing">Pricing</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#cta">Download</a>
	</li>
	</ul>
	</div>
	</nav>

	<!-- Title -->
	<div class="row">
	<div class="col-lg-6">
	<h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
	<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
	<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands 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 class="white-section" id="features">
	<div class="container-fluid">


	<div class="row">
	<div class="feature-box col-lg-4">
	<i class="fa-solid fa-circle-check fa-4x icon"></i>
	<h3 class="feature-title">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="fa-solid fa-bullseye fa-4x icon"></i>
	<h3 class="feature-title">Elite Clientele</h3>
	<p>We have all the dogs, the greatest dogs.</p>
	</div>

	<div class="feature-box col-lg-4">
	<i class="fa-solid fa-heart fa-4x icon"></i>
	<h3 class="feature-title">Guaranteed to work.</h3>
	<p>Find the love of your dog's life or your money back.</p>
	</div>
	</div>
	</div>

	</section>


	<!-- Testimonials -->

	<section class="colored-section" id="testimonials">

	<div id="testimonial-carousel" class="carousel slide" data-ride="false">
	<div class="carousel-inner">
	<div class="carousel-item active container-fluid">
	<h2 class="testimonial-text">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 container-fluid">
	<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="#testimonial-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="#testimonial-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 class="colored-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 class="white-section" id="pricing">

	<h2 class="section-heading">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-column col-lg-4 col-md-6">
	<div class="card">
	<div class="card-header">
	<h3>Chihuahua</h3>
	</div>
	<div class="card-body">
	<h2 class="price-text">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-lg btn-outline-dark btn-block">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 class="price-text">$49 / mo</h2>
	<p>Unlimited Matches</p>
	<p>Unlimited Messages</p>
	<p>Unlimited App Usage</p>
	<button type="button" class="btn btn-lg btn-dark btn-block">Sign Up</button>
	</div>
	</div>
	</div>

	<div class="pricing-column col-lg-4">
	<div class="card">
	<div class="card-header">
	<h3>Mastiff</h3>
	</div>
	<div class="card-body">
	<h2 class="price-text">$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-lg btn-dark btn-block">Sign Up</button>
	</div>
	</div>
	</div>

	</div>

	</section>


	<!-- Call to Action -->

	<section class="colored-section" id="cta">
	<div class="container-fluid">

	<h3 class="big-heading">Find the True Love of Your Dog's Life Today.</h3>
	<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
	<button type="button" class="btn btn-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>

	</div>
	</section>


	<!-- Footer -->

	<footer class="white-section" id="footer">
	<div class="container-fluid">

	<i class="fa-brands fa-twitter social-icon"></i>
	<i class="fa-brands fa-facebook-f social-icon"></i>
	<i class="fa-brands fa-instagram social-icon"></i>
	<i class="fa-solid fa-envelope social-icon"></i>
	<p>© Copyright 2018 TinDog</p>
	</div>
	</footer>

	<!-- Bootstrap Scripts -->
	<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


	</body>

	</html>
	body {
	font-family: "Montserrat";
	text-align: center;
	}

	h1, h2, h3, h4, h6 {
	font-family: "Montserrat";
	font-weight: bold;
	}

	p {
	color: #8f8f8f;
	}

	/* Heading */

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

	.section-heading {
	font-size: 3rem;
	line-height: 1.5;
	}

	/* Containers */

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

	/* Sections */

	.colored-section {
	background-color: #ff4c68;
	color: #fff;
	}

	.white-section {
	background-color: #fff;
	}

	/* Navigation Bar */

	.navbar {
	padding: 0 0 4.5rem;
	}

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

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

	.nav-link {
	font-size: 1.2rem;
	font-weight: 300;
	}

	/* Title Section */

	#title .container-fluid {
	padding: 3% 15% 7%;
	text-align: left;
	}

	/* Download Button */

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

	/* Title Image */

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

	/* Features Section */

	#features {
	padding: 7% 15%;
	position: relative;
	z-index: 1; /* without this z-index will work same*/
	}

	.feature-title {
	font-size: 1.5rem;
	}

	.feature-box {
	padding: 5%;
	}

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

	.icon:hover {
	color: #ff4c68
	}

	/* Testimonial Section */

	#testimonials {
	background-color: #ef8172;
	}

	.testimonial-text {
	font-size: 3rem;
	line-height: 1.5;
	}

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

	#press {
	background-color: #ef8172;
	padding-bottom: 3%;
	}

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

	/* Pricing Section */

	#pricing {
	padding: 100px;
	}

	.price-text {
	font-size: 3rem;
	line-height: 1.5;
	}

	.pricing-column {
	padding: 3% 2%;
	}

	@media (max-width: 1028px) {

	#title {
	text-align: center;
	}

	.title-image {
	position: static;
	transform: rotate(0);
	}
	}

	/* CTA Section */

	/* Footer Section */

	.social-icon {
	margin: 20px 10px;
	}