Swap-Nova / TinDog_Tinder

A fully responsive website built using HTML, CSS & Bootstrap V4.0

TinDog_Tinder

❄ Practiced a new approach of styling using Bootstrap v4.0

Bootstrap is the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

Also used previous components of CSS in the website that includes:

(i) Box-Property

(ii) Flexible Box Layout

(iii) Animations & Transitions...and many more

🚀 Through Bootstrap we have used several components like:

(i) Button

Using Bootstrap custom button styles for actions in form, dialogs, and more with support for multiple sizes, states and more.

<button type="button" class="btn btn-success">Success</button>

(ii) Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</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>
  </div>

(iii) Carousel

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

<div id="carouselExampleIndicators" 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>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
 </div>

(iv) Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

(v) Navbar

Includes support for branding, navigation, and more, including support for our collapse plugin.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

⌛ Reference from: Bootstrap v4.0 Documentation: https://getbootstrap.com/docs/4.0/getting-started/introduction/