Skip to content
Snippets Groups Projects
Commit ff69a1f7 authored by Tim Adams's avatar Tim Adams
Browse files

footer has been implemented

parent f4b992cd
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 262 additions and 159 deletions
public/style.css
+ 92
− 11
View file @ ff69a1f7
...@@ -10,7 +10,7 @@ body, h1, h2, p { ...@@ -10,7 +10,7 @@ body, h1, h2, p {
/* Basic page styles */ /* Basic page styles */
.responsive { .responsive {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3)); background:rgba(0, 0, 0, 0.3);
} }
...@@ -435,14 +435,14 @@ header{ ...@@ -435,14 +435,14 @@ header{
@media only screen and (max-width:620px) { @media only screen and (max-width:620px) {
/* For mobile phones: */ /* For mobile phones: */
.menu, .container, .login-button, .shopname, .previous-button, .next-button, .scene, .carousel, .carousel__cell, .menu, .container, .login-button, .shopname, .previous-button, .next-button, .scene, .carousel, .carousel__cell, .footer, .containers,
.carousel__cell:nth-child(1), .carousel__cell:nth-child(2), .carousel__cell:nth-child(3), .carousel__cell:nth-child(4), .carousel__cell:nth-child(5), .carousel__cell:nth-child(6), .carousel__cell:nth-child(1), .carousel__cell:nth-child(2), .carousel__cell:nth-child(3), .carousel__cell:nth-child(4), .carousel__cell:nth-child(5), .carousel__cell:nth-child(6),
.carousel__cell:nth-child(7), .carousel__cell:nth-child(8), .carousel__cell:nth-child(9){ .carousel__cell:nth-child(7), .carousel__cell:nth-child(8), .carousel__cell:nth-child(9){
width:100%; width:100%;
} }
} }
@media screen and (max-width:1250px){ @media screen and (max-width:1250px){
.container ul li, .login-button{ .container ul li, .login-button, .footer, .containers{
width:40%; width:40%;
margin-left: 40px; margin-left: 40px;
...@@ -529,17 +529,98 @@ header{ ...@@ -529,17 +529,98 @@ header{
.next-button:hover{ .next-button:hover{
background-color: #5a5e5f; background-color: #5a5e5f;
} }
/* footer style */
footer { @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
position:fixed;
.containers{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: rgba(0, 0, 0, 0.8);
padding: 50px 0;
position: absolute;
right: 0;
left: 0; left: 0;
bottom: 0; bottom: -1000px;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
@media(max-width: 767px){
.footer-col, .footer, .containers{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col, .footer, .containers{
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.3); }
color: white; }
text-align: center;
}
......
views/cart.hbs
+ 2
− 3
View file @ ff69a1f7
...@@ -42,14 +42,13 @@ ...@@ -42,14 +42,13 @@
</div> </div>
<div id="buy-now">Buy Now</div> <div id="buy-now">Buy Now</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script async <script async
src="https://pay.google.com/gp/p/js/pay.js" src="https://pay.google.com/gp/p/js/pay.js"
onload="onGooglePayLoaded()"></script> onload="onGooglePayLoaded()"></script>
<script src="/search.js"></script> <script src="/search.js"></script>
</body> </body>
{{> common/footer}}
</html> </html>
\ No newline at end of file
views/common/footer.hbs 0 → 100644
+ 45
− 0
View file @ ff69a1f7
<footer class="footer">
<div class="containers">
<div class="row">
<div class="footer-col">
<h4>company</h4>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">our services</a></li>
<li><a href="#">privacy policy</a></li>
<li><a href="#">affiliate program</a></li>
</ul>
</div>
<div class="footer-col">
<h4>get help</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">returns</a></li>
<li><a href="#">order status</a></li>
<li><a href="#">payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>online shop</h4>
<ul>
<li><a href="/men">Men</a></li>
<li><a href="/women">Women</a></li>
<li><a href="/kids">Kids</a></li>
<li><a href="/men-shoes">Men Shoes</a></li>
<li><a href="/women-shoes">Women Shoes</a></li>
<li><a href="/kids-shoes">Kids Shoes</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</footer>
\ No newline at end of file
views/common/navbar.hbs
+ 67
− 62
View file @ ff69a1f7
<div> <div>
<div class="your-fashion-text-box">
<a href="/" class="shopname">Your Fashion</a>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a href="/" class="actives"><i class="fa fa-home"></i></a>
<div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<a href="/" class="actives"><i class="fa fa-home"></i></a> <span class="navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> </button>
<span class="navbar-toggler-icon"></span>
</button> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav">
<ul class="navbar-nav">
<li class="nav-item" onclick="handleAnchorClick('/men')">
<a class="nav-link" id="men-products" href="/men">Men</a>
<li class="nav-item" onclick="handleAnchorClick('/men')"> </li>
<a class="nav-link" id="men-products" href="/men">Men</a> <li class="nav-item" onclick="handleAnchorClick('/women')">
</li> <a class="nav-link" id="women-products" href="/women">Women</a>
<li class="nav-item" onclick="handleAnchorClick('/women')"> </li>
<a class="nav-link" id="women-products" href="/women">Women</a> <li class="nav-item" onclick="handleAnchorClick('/kids')">
</li> <a class="nav-link" id="kids-products" href="/kids">Kids</a>
<li class="nav-item" onclick="handleAnchorClick('/kids')"> </li>
<a class="nav-link" id="kids-products" href="/kids">Kids</a> <li class="nav-item dropdown">
</li> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<li class="nav-item dropdown"> <ul class="dropdown-menu" id="submenu">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a> <li onclick="handleAnchorClick('/men-shoes')"><a class="dropdown-item" id="men-s-products"
<ul class="dropdown-menu" id="submenu"> href="/men-shoes">Men Shoes</a></li>
<li onclick="handleAnchorClick('/men-shoes')"><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li> <li onclick="handleAnchorClick('/women-shoes')"><a class="dropdown-item" id="women-s-products"
<li onclick="handleAnchorClick('/women-shoes')"><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li> href="/women-shoes">Women Shoes</a></li>
<li onclick="handleAnchorClick('/kids-shoes')"><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li> <li onclick="handleAnchorClick('/kids-shoes')"><a class="dropdown-item" id="kids-s-products"
</ul> href="/kids-shoes">Kids Shoes</a></li>
</li> </ul>
</ul> </li>
</div> </ul>
<a class="login-button" href="/authenticate?mode=register">Register</a> </div>
<a class="login-button" href="/authenticate?mode=login">Login</a> <a class="login-button" href="/authenticate?mode=register">Register</a>
<a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a> <a class="login-button" href="/authenticate?mode=login">Login</a>
</div> <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
</nav> </div>
<div class="search-bar"> </nav>
<input class="search" type="text" id="search-input" placeholder="&#x1F50D; Start typing to search" list="container" autocomplete="off"/> <div class="your-fashion-text-box">
</div> <a href="/" class="shopname">Your Fashion</a>
<script> </div>
function handleAnchorClick(category){ <div class="search-bar">
window.location.href = category; <input class="search" type="text" id="search-input" placeholder="&#x1F50D; Start typing to search" list="container"
} autocomplete="off" />
</div>
const user = JSON.parse(localStorage.getItem('user')) <script>
function handleAnchorClick(category) {
if(user) { window.location.href = category;
document.querySelectorAll(".login-button").forEach(el => { }
el.style.display = "none"
}) const user = JSON.parse(localStorage.getItem('user'))
}
</script> if (user) {
document.querySelectorAll(".login-button").forEach(el => {
<script src="/init-shoppingcart.js"></script> el.style.display = "none"
})
</div> }
\ No newline at end of file </script>
<script src="/init-shoppingcart.js"></script>
</div>
\ No newline at end of file
views/index.hbs
+ 3
− 10
View file @ ff69a1f7
...@@ -63,22 +63,15 @@ ...@@ -63,22 +63,15 @@
<button class="next-button"><span style="font-size: 36px;">&#129130;</span></button> <button class="next-button"><span style="font-size: 36px;">&#129130;</span></button>
</p> </p>
<script src="/slides.js"></script> <script src="/slides.js"></script>
{{!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"
integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js"></script> <script src="/search.js"></script>
<script src="/shopping-basket.js"></script> <script src="/shopping-basket.js"></script>
</body> </body>
<div>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>&#9742;
07469241247</a></p>
</footer>
</div>
{{> common/footer}}
</html> </html>
\ No newline at end of file
views/kids-shoes.hbs
+ 1
− 3
View file @ ff69a1f7
...@@ -31,9 +31,7 @@ ...@@ -31,9 +31,7 @@
<div id="characterList" class="characterLists"></div> <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div> <div class="container" id="container"></div>
{{> common/footer}}
{{!-- <script src="/product-cards.js"></script> --}}
{{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script> <script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script> <script src="/shopping-basket.js"></script>
......
views/kids.hbs
+ 2
− 7
View file @ ff69a1f7
...@@ -31,16 +31,11 @@ ...@@ -31,16 +31,11 @@
<div id="characterList" class="characterLists"></div> <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div> <div class="container" id="container"></div>
{{> common/footer}}
{{!-- <script src="/product-cards.js"></script> --}}
{{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script> <script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script> <script src="/shopping-basket.js"></script>
</body> </body>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>&#9742;
07469241247</a></p>
</footer>
</html> </html>
\ No newline at end of file
views/men-shoes.hbs
+ 1
− 7
View file @ ff69a1f7
...@@ -31,16 +31,10 @@ ...@@ -31,16 +31,10 @@
<div id="characterList" class="characterLists"></div> <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div> <div class="container" id="container"></div>
{{> common/footer}}
{{!-- <script src="/product-cards.js"></script> --}}
{{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script> <script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script> <script src="/shopping-basket.js"></script>
</body> </body>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>&#9742;
07469241247</a></p>
</footer>
</html> </html>
\ No newline at end of file
views/men.hbs
+ 45
− 43
View file @ ff69a1f7
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="responsive">
<header>
{{> common/navbar}}
</header>
<br>
<div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
{{!-- <script src="/product-cards.js"></script> --}}
{{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script>
</body>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>&#9742;
07469241247</a></p>
</footer>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Your Fashion</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="responsive">
<header>
{{> common/navbar}}
</header>
<br>
<div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
{{!--
<script src="/product-cards.js"></script> --}}
{{!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"
integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script>
</body>
{{> common/footer}}
</html> </html>
\ No newline at end of file
views/women-shoes.hbs
+ 2
− 7
View file @ ff69a1f7
...@@ -31,16 +31,11 @@ ...@@ -31,16 +31,11 @@
<div id="characterList" class="characterLists"></div> <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div> <div class="container" id="container"></div>
{{> common/footer}}
{{!-- <script src="/product-cards.js"></script> --}}
{{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script> <script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script> <script src="/shopping-basket.js"></script>
</body> </body>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>&#9742;
07469241247</a></p>
</footer>
</html> </html>
\ No newline at end of file
views/women.hbs
+ 2
− 6
View file @ ff69a1f7
...@@ -32,15 +32,11 @@ ...@@ -32,15 +32,11 @@
<div class="container" id="container"></div> <div class="container" id="container"></div>
{{!-- <script src="/product-cards.js"></script> --}} {{> common/footer}}
{{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="/search.js" type="module"></script> <script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script> <script src="/shopping-basket.js"></script>
</body> </body>
<footer>
<p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>&#9742;
07469241247</a></p>
</footer>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

GitLab by CIM Team | RHUL