Answer to Question #244205 in HTML/JavaScript Web Application for IBI

Question

You are part of the Web development Team, currently designing a Web site for A company called Nkwali Yenkosi that designs and sells leather clothing and accessories. The Web site is made up of 5 Web pages (Home, About the leather, DIY Methods, Brick & Mortar and Shop Now). You are responsible for creating the Shop Now Web page and 2 Web pages connecting to it. You must follow the following instructions to complete the Shop Now Web page, use the Assets folder provided for resources such as images required and font family to be used. a) The Web page should be titled Shop Now. The navigation bar includes images of 3 social media which are links to the different social media pages. The Nkwali Yenkosi logo. The link to the Hamburger style navigation and the landing page should look as illustrated below:

Answer 1

index.html

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  <div class="container-fluid header">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <h1 data-aos="fade-right" data-aos-duration="2000">TITLE HEADER</h1>
        <p data-aos="fade-left" data-aos-duration="1000">
          Lorem ipsum dolor sit amet consectetur eadipisicing elit. Soluta asperiores voluptatem eligendi, at fuga quae eaque autem odit adipisci! Ut fugiat quo consequatur, nisi itaque excepturi perferendis rem laborum doloremque.Cum amet deleniti commodi eligendi magni, nesciunt dignissimos.
          
        </p>
        <button type="button" class="btn btn-outline-warning btn-lg" data-aos="fade-right">Call to action</button>
      </div>
      
    </div>
  </div>
  </div>
  <div class="space"></div>
  <div class="container">
    <div class="row">
      <div class="col-md">
        <h2>Title Here</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md">
        <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" data-aos="fade-left" class="img-fluid" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-md">
        <div class="space"></div>
        <p data-aos="fade-up" data-aos-anchor-placement="top-bottom">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate natus, in, omnis possimus earum similique ducimus consectetur qui expedita totam velit labore, voluptatibus facilis. Consequuntur repudiandae explicabo nisi animi perspiciatis.
          Sequi, odit a eum esse animi dolor doloremque laboriosam maxime deserunt consequuntur debitis earum modi iste rem aliquid, atque repudiandae, aliquam adipisci eligendi? Laudantium deleniti ipsum accusamus earum eaque placeat.
          Blanditiis doloribus labore animi, illum excepturi numquam quae qui eaque fugiat amet ratione quo tenetur debitis rerum quisquam corrupti deleniti eligendi! Totam itaque suscipit expedita eligendi neque quis, voluptatem aliquam!
        </p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md">
        <h2>Explore</h2>
      </div>
    </div>
    <div class="space"></div>
    <div class="row">
      <div class="col-md">
        <div class="card" data-aos="flip-left">
  <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
      </div>
      <div class="col-md">
        <div class="card" data-aos="flip-up">
  <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
      </div>
      <div class="col-md">
        <div class="card" data-aos="flip-right">
  <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title1</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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
      </div>
    </div>
  </div>
  <div class="space"></div>

style.css

$white: #fff;
$grey: #000;


.header{
  height: auto;
  background: #000;
  background-image: url('https://images.unsplash.com/photo-1508610232556-b13ab6d792b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1276&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5rem;
  h1{
    color: $white;
    font-size: 3rem;
  }
  p{
    color: $white;
    font-size: 1.7rem;
  }
  h1,p{
    text-shadow: 2px 2px #000;
  }
}
.card{width: 100%;}
.space{height: 30px;}
@media screen and (max-width: 400px){
    .header{padding: 1rem;}
  }

script.js

AOS.init({
      duration: 1000
    });