index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HomeKEA</title>
    <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/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="./index.html">HomeKEA</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">
            <li class="nav-item active">
              <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./products.html">Shop</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./about.html">About us</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <main>
      <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>
          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.homefurniturestjacobs.ca/files/home-furniture-st-jacobs-title-styles.jpg" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="https://images.ctfassets.net/afluk6wxa60f/4gq20eza3CAuemgCiWqOqC/aa168314d9caa1c71a45083872e8fe1d/fantastic-furniture-1600x300-evergreen.jpg" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="https://assets.tramontina.com.br/upload/category_home/1601405061_1541702266_topo_moveis3.jpg" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="https://cms.pm/uploads/tkupholstery.seesite.biz_--_128754081.jpg" class="d-block w-100">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div class="jumbotron bg-warning">
        <h1 class="display-4">Welcome to HomeKEA</h1>
        <p class="lead">A world of inspiration for your home</p>
        <hr class="my-4">
        <p>To offer a wide range of well-designed, functional home furnishing products at prices so low, that as many people as possible will be able to afford them.</p>
        <a class="btn btn-primary btn-lg bg-primary" href="./products.html" role="button">Go shopping </a>
      </div>
      <div class="container marketing mt-5 mb-3">
        <!-- START THE FEATURETTES -->
        <div class="row featurette">
          <div class="col-md-7">
            <h2 class="featurette-heading">Living rooms<br><span class="text-muted">This season comes in pastels.</span></h2>
            <p class="lead">Give the living room a spring makeover! Combine a pastel color palette with statement pieces like cushions with artistic patterns and a multi-striped rug and feel the energy you get from just some well-chosen additions.</p>
          </div>
          <div class="col-md-5">
            <figure class="figure">
              <img src="https://www.sico.ca/cms/getmedia/41bae5f2-52c2-4581-bb9a-0f6a8daaccd4/living-room-paint-colors.jpg?width=500&height=500&ext=.jpg" class="figure-img img-fluid rounded" alt="...">
            </figure>
          </div>
        </div>
    
        <hr class="featurette-divider">
    
        <div class="row featurette">
          <div class="col-md-7 order-md-2">
            <h2 class="featurette-heading">Dining rooms <br><span class="text-muted">Dining chairs that set the mood of your space.</span></h2>
            <p class="lead">Notice that these two completely different spaces have the same dining table, just with different chairs. Cheerful yellow chairs with sleek lines create a light and airy impression, while dark colored chairs in a traditional style help set a more dramatic atmosphere.</p>
          </div>
          <div class="col-md-5 order-md-1">
            <figure class="figure">
              <img src="https://www.ikea.cn/images/7f/01/7f01398baa4983b4110bc7397909549d.jpg?f=xs" class="figure-img img-fluid rounded" alt="...">
            </figure>
          </div>
        </div>
    
        <hr class="featurette-divider">
    
        <div class="row featurette">
          <div class="col-md-7">
            <h2 class="featurette-heading">Bedrooms <br> <span class="text-muted">Hidden storage that helps you relax</span></h2>
            <p class="lead">Need more space to store things? With under bed storage boxes, you can turn an unused area into a home for bedding, seasonal clothes and more... And a bedroom with a place for everything is a calmer, more relaxing place for you.</p>
          </div>
          <div class="col-md-5">
            <figure class="figure">
              <img src="https://events.ikea.com/in/en/event_images/2021-11-24T14:28:15.825Z-PH182867.jpg?f=xs" class="figure-img img-fluid rounded" alt="...">
            </figure>
          </div>
        </div>
        <!-- /END THE FEATURETTES -->
      </div>
    </main>

    <footer class="bg-dark text-center text-white">
      <!-- Grid container -->
      <div class="container p-4 pb-0">
        <!-- Section: Social media -->
        <section class="mb-4">
          <!-- Facebook -->
          <a class="btn btn-outline-light btn-floating m-1" href="#" role="button"
            ><i class="fab fa-facebook-f"></i
          ></a>
    
          <!-- Twitter -->
          <a class="btn btn-outline-light btn-floating m-1" href="#" role="button"
            ><i class="fab fa-twitter"></i
          ></a>
    
          <!-- Google -->
          <a class="btn btn-outline-light btn-floating m-1" href="#" role="button"
            ><i class="fab fa-google"></i
          ></a>
    
          <!-- Instagram -->
          <a class="btn btn-outline-light btn-floating m-1" href="#" role="button"
            ><i class="fab fa-instagram"></i
          ></a>
        </section>
        <!-- Section: Social media -->
      </div>
      <!-- Grid container -->
    
      <!-- Copyright -->
      <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
        Copyright &copy; 2021
        <a class="text-white" href="#">HomeKEA</a>
      </div>
      <!-- Copyright -->
    </footer>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <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>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
  </body>
</html>