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

Question

Designing a Web site for a company called Nkwali Yenkosi that designs and sells leather clothing and accessories. The Web site must have 5 Web pages (Home, About the leather, DIY Methods, Brick & Mortar and Shop Now). Create the Shop Now Web page and 2 Web pages connecting to it.

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.

b) The Hamburger style navigation should contain all the links to the 5 web

pages.

c) when user scrolls down, they should see the Shop Now! Heading and the

different clothing items they can shop, with the prices and the icon to

click on to buy the item

d) user clicks on the icon to buy a pop box will appear which will allow them to

select how many items they want to buy. It should calculate accordingly.

e) clicks check out. They should be redirected to the Checkout page, where they need to fill in information.

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>

styles.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
    });