Skip to content

Front End task - Ashish Arora #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ashish0077 wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Front End task - Ashish Arora #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
cb0c0d6
Initial Commit
Ashish0077 Feb 6, 2019
9d53ce4
The Navigation Bar
Ashish0077 Feb 6, 2019
77fe839
The Carousel
Ashish0077 Feb 6, 2019
7f6ce5c
The Grid 3c1r with hover effect
Ashish0077 Feb 6, 2019
34362b9
One More Carousel
Ashish0077 Feb 7, 2019
044fb10
Footer
Ashish0077 Feb 7, 2019
5e1ed1a
Initial : Created 'Sort and Filter' Page Files
Ashish0077 Feb 7, 2019
eec7ed5
Search Page
Ashish0077 Feb 7, 2019
9e23357
Initial: Product Page
Ashish0077 Feb 7, 2019
7413367
Product Buy Now Page
Ashish0077 Feb 7, 2019
126de7f
Merge pull request #1 from Ashish0077/Initial
Ashish0077 Feb 7, 2019
7c180b9
Clean up #1
Ashish0077 Feb 7, 2019
71d5528
linking Htmls to each other
Ashish0077 Feb 7, 2019
14a1b46
Screenshots
Ashish0077 Feb 7, 2019
2da9020
Update README.md
Ashish0077 Feb 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Images/eight.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/five.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/four.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/one.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/product.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/seven.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/six.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/three.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/two.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions JS/bootstrap.min.js
View file
Open in desktop

Large diffs are not rendered by default.

211 changes: 211 additions & 0 deletions Landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Store</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
<script src="JS/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style/landing.css" />
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><i class="fab fa-500px"></i> The Store</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">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="Search.html">Mens</a>
<a class="dropdown-item" href="Search.html">Womens</a>
<a class="dropdown-item" href="Search.html">Kids</a>
<a class="dropdown-item" href="Search.html">Universal</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="Search.html">The Store's Special</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 " action="search.html">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
</form>
<ul class="nav justify-content-end navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far fa-user"></i></a>
</li>
</ul>
</div>
</nav>
</div>

<div id="carousel-one" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/one.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block jk">
<h5 class="caption-h">Lorem Ipsum</h5>
<p class="caption-p">Lorem ipsum dolor sit amet, consectetur Animi error suscipit.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/two.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block jk">
<h5 class="caption-h">Lorem Ipsum</h5>
<p class="caption-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ducimus voluptates fuga magnam id sunt at debitis</p>
</div>
</div>
<div class="carousel-item">
<img src="images/three.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block jk">
<h5 class="caption-h">Lorem Ipsum</h5>
<p class="caption-p">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo obcaecati quasi dolores similique sunt.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-one" 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="#carousel-one" 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="container mr">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="hovereffect">
<img class="img-fluid" alt="Responsive image" src="images/four.jpg">
<div class="overlay">
<h2>Lorem Ipsum</h2>
<a class="info" href="Product.html">Shop Now</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6"><div class="hovereffect">
<img class="img-fluid" alt="Responsive image" src="images/five.jpg">
<div class="overlay">
<h2>Lorem Ipsum</h2>
<a class="info" href="Product.html">Shop Now</a>
</div>
</div></div>
<div class="col-lg-4 col-sm-6"><div class="hovereffect">
<img class="img-fluid" alt="Responsive image" src="images/six.jpg">
<div class="overlay">
<h2>Lorem Ipsum</h2>
<a class="info" href="Product.html">Shop Now</a>
</div>
</div></div>
</div>
</div>

<div class="container" style="text-align: center; font-size: 2em">OUR COLLECTION</div>

<div id="carousel-two" class="carousel slide carousel-fade mr" style="margin-bottom: 30px;" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/seven.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/eight.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-two" 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="#carousel-two" 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="mail mr">
<p>Join our mailing list to receive email exclusives and save 15% on your first order.</p>
<button type="button" class="btn btn-secondary btn-lg active">Sign Up</button>
</div>

<hr>

<!-- Footer -->
<footer class="page-footer font-small blue pt-4">

<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">

<!-- Content -->
<h5 class="text-uppercase"><i class="fab fa-500px"></i>THE STORE</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed provident similique facilis, velit a voluptates earum ratione nam porro, corrupti dolore eos nemo quis qui. Maxime itaque sed iusto vel.</p>

</div>
<!-- Grid column -->

<hr class="clearfix w-100 d-md-none pb-3">

<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">

<!-- Links -->
<h5 class="text-uppercase">Contact Us</h5>

<ul class="list-unstyled">
<li>
<a href="#!"><i class="fab fa-facebook"></i> Facebook</a>
</li>
<li>
<a href="#!">XXX-XXX-XXX</a>
</li>
<li>
<a href="#!">Email : thestore0077@blahmail.com</a>
</li>
</ul>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

</div>
<!-- Footer Links -->

<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="#"> THESTORE.com</a>
</div>
<!-- Copyright -->

</footer>
<!-- Footer -->

</body>
</html>
166 changes: 166 additions & 0 deletions Product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Product Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
<script src="JS/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style/product.css" />
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="Landing.html"><i class="fab fa-500px"></i> The Store</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">
<a class="nav-link" href="Landing.html">Home <span class="sr-only">(current)</span></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">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="Search.html">Mens</a>
<a class="dropdown-item" href="Search.html">Womens</a>
<a class="dropdown-item" href="Search.html">Kids</a>
<a class="dropdown-item" href="Search.html">Universal</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="Search.html">The Store's Special</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 " action="Search.html">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
</form>
<ul class="nav justify-content-end navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far fa-user"></i></a>
</li>
</ul>
</div>
</nav>
</div>


<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-6">
<img class="img-thumbnail" src="images/product.jpg" alt="">
</div>
<div class="col-lg-6 col-sm-6">
<h2>Nine Iron Full Zip Vest</h2>
<h3>Rs.967/-</h3>

<h4 style="font-style: italic; margin-top: 50px;">Discription</h5>
<p>Be prepared for a change in the weather with the Nine Iron. This full zip vest offers temperature regulation, CB DryTec water resistant fabric, two front pockets to stow essentials, and a drawcord hem to tie it all together.</p>

<ul>
<li>CB DryTec water resistant fabric</li>
<li>100% polyester</li>
<li>Machine washable</li>
<li>Contrast zipper & collar</li>
<li>Welded chest pocket
</li>
</ul>

<button type="button" class="btn btn-primary">BUY NOW</button>
<button type="button" class="btn btn-warning">Add to Cart</button>
<button type="button" class="btn btn-secondary">Wishlist</button>
</div>
</div>
</div>















<hr>

<!-- Footer -->
<footer class="page-footer font-small blue pt-4">

<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">

<!-- Content -->
<h5 class="text-uppercase"><i class="fab fa-500px"></i>THE STORE</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed provident similique facilis, velit a voluptates earum ratione nam porro, corrupti dolore eos nemo quis qui. Maxime itaque sed iusto vel.</p>

</div>
<!-- Grid column -->

<hr class="clearfix w-100 d-md-none pb-3">

<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">

<!-- Links -->
<h5 class="text-uppercase">Contact Us</h5>

<ul class="list-unstyled">
<li>
<a href="#!"><i class="fab fa-facebook"></i> Facebook</a>
</li>
<li>
<a href="#!">XXX-XXX-XXX</a>
</li>
<li>
<a href="#!">Email : thestore0077@blahmail.com</a>
</li>
</ul>

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->

</div>
<!-- Footer Links -->

<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="#"> THESTORE.com</a>
</div>
<!-- Copyright -->

</footer>
<!-- Footer -->

</body>
</html>
Loading