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

fixed an issue with cart displays but still another issue with pages displays to be sorted later on

parent 5e6a8b64
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 694 additions and 0 deletions
css/style.css 0 → 100644
+ 694
− 0
View file @ a5d94984
* {
box-sizing: border-box;
}
/* Reset some default styles */
body, h1, h2, p {
margin: 0;
padding: 0;
}
/* Basic page styles */
body {
font-family: Arial, sans-serif;
}
.your-fashion-text-box {
text-align: center;
text-decoration-line: none;
top: 3%;
left: 10%;
transform: translate(-10%, -10%);
}
.shopname{
margin: 0;
padding-left: 100px;
color: #ffffff;;
font-size: 24px;
text-transform: uppercase;
text-decoration-line: none;
letter-spacing: 1px;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
background-size: cover;
background-position: center;
margin-bottom: -360px;
height: 400px;
}
/* Navbar styles */
.navbar {
background-color: linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
float: none;
}
.navbar .container-fluid {
font-size: 24px;
}
.navbar ul.navbar-nav {
list-style: none;
display: flex;
}
.navbar ul.navbar-nav li {
margin-right: 60;
}
.navbar ul.navbar-nav li a {
text-decoration: none;
color: #fff;
}
.navbar ul.navbar-nav li a:hover {
opacity: 0.5;
color: #fff;
}
/* Add an active class to highlight the current page */
.actives {
background-color:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
color: white;
padding: 10px 20px;
margin-right: 60;
text-decoration: none;
border-radius: 8px;
}
.actives:hover{
opacity: 0.5;
color: #141313;
}
/* Search bar styles */
.search-bar {
text-align: center;
margin: 2px 10;
}
.search-bar input[type="search"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 60%;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}
/*.search-bar button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.search-bar button:hover{
opacity: 0.5;
color: #fff;
}*/
/* dropdown menu styles */
/*.navbar ul.navbar-nav li a {
text-decoration: none;
color: #fff;
}*/
.nav-item ul.dropdown-menu li a {
text-decoration: none;
color: #141313;
}
.nav-item ul.dropdown-menu li a:hover {
text-decoration: none;
color: #0a550a;
}
/* Login button styles */
.login-button, .add-cart-btn, .add-cart {
padding: 10px 20px;
/*background-color: #333;*/
color: #fff;
border: none;
border-radius: 8px;
text-decoration: none;
}
.login-button:hover{
opacity: 0.5;
color: #ccc;
}
.add-cart-btn:hover{
opacity: 0.5;
color: #ccc;
}
.add-cart:hover{
opacity: 0.5;
color: #ccc;
}
/* Product card styles (for the products page) */
.container, .prods-container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
top: 200px;
}
/*Styles for product card*/
.product .product-card {
z-index: 1;
background: #1d212b;
position: relative;
width: 300px;
height: 500px;
margin: 40px;
border-radius: 10px;
}
.product .product-card:before {
content: "";
background: rgba(255, 255, 255, 0.1);
position: absolute;
display: block;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.product .product-card .product-img {
z-index: 1;
position: absolute;
max-width: 370px;
max-height: 430px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.product .product-card .name {
z-index: 2;
color: #f1efef;
position: absolute;
width: 100%;
text-align: center;
bottom: 100px;
font-size: 20px;
letter-spacing: 1px;
}
.product .product-card .price {
z-index: 2;
color: #f1efef;
position: absolute;
width: 100%;
text-align: center;
bottom: 50px;
font-size: 30px;
font-weight: 300;
}
.product .product-card .popup-btn {
z-index: 2;
color: #fff;
background: #555;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
padding: 10px 15px;
border-radius: 20px;
cursor: pointer;
}
/*Styles for popup view*/
.product .popup-view {
z-index: 2;
background: rgba(255, 255, 255, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.product .popup-view.active {
opacity: 1;
visibility: visible;
}
.product .popup-card {
position: relative;
display: flex;
width: 800px;
height: 500px;
margin: 20px;
}
.product .popup-card .product-img {
z-index: 2;
background: #1d212b;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 45%;
height: 90%;
transform: translateY(25px);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.product .popup-card .product-img img {
z-index: 2;
position: relative;
width: 450px;
left: -50px;
}
.product .popup-card .info {
z-index: 2;
background: #fff;
display: flex;
flex-direction: column;
width: 55%;
height: 100%;
box-sizing: border-box;
padding: 40px;
border-radius: 10px;
}
.product .popup-card .close-btn {
color: #0a0101;
z-index: 3;
position: absolute;
right: 0;
font-size: 20px;
margin: 20px;
cursor: pointer;
}
.product .popup-card .info h2 {
font-size: 10px;
line-height: 20px;
margin: 10px;
}
.product .popup-card .info h2 span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.product .popup-card .info h2 {
font-size: 20px;
line-height: 20px;
margin: 10px;
}
.product .popup-card .info h2 span {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.product .popup-card .info p {
font-size: 15px;
margin: 10px;
}
.product .popup-card .info .price {
font-size: 45px;
font-weight: 300;
margin: 10px;
}
.product .popup-card .info .add-cart-btn {
color: #fff;
background: #009dd2;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 10px auto;
padding: 10px 50px;
border-radius: 20px;
}
.product .popup-card .info .add-wish {
color: #009dd2;
font-size: 16px;
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
/*Responsive styles*/
@media (max-width: 900px) {
.product .popup-card {
flex-direction: column;
width: 550px;
height: auto;
}
.product .popup-card .product-img {
z-index: 3;
width: 100%;
height: 200px;
transform: translateY(0);
border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.product .popup-card .product-img img {
left: initial;
max-width: 100%;
}
.product .popup-card .info {
width: 100%;
height: auto;
padding: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.product .popup-card .info h2 {
margin: 20px 5px 5px 5px;
font-size: 25px;
}
.product .popup-card .info h2 span {
font-size: 10px;
}
.product .popup-card .info p {
margin: 5px;
font-size: 13px;
}
.product .popup-card .info .price {
margin: 5px;
font-size: 30px;
}
.product .popup-card .info .add-cart-btn {
margin: 5px auto;
padding: 5px 40px;
font-size: 14px;
}
.product .popup-card .info .add-wish {
font-size: 14px;
}
.product .popup-card .close-btn {
z-index: 4;
}
}
@media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .container, .login-button, .shopname {
width:100%;
}
}
@media screen and (max-width:1250px){
.container ul li, .login-button{
width:40%;
margin-left: 40px;
}
}
/*******Carousel styles************/
.scene {
border: 1px solid #CCC;
position: relative;
width: 360px;
height: 290px;
margin: 40px auto;
perspective: 1000px;
top: 30%;
}
.carousel {
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-588px);
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel__cell {
position: absolute;
width: 390px;
height: 320px;
left: 10px;
top: 10px;
border: none;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.slides{
width: 390px;
height: 320px;
opacity: 90%;
border-radius: 8px;
}
.carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(588px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(588px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(588px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(588px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(588px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(588px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(588px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(588px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(588px); }
.previous-button{
border-radius: 8px;
position: absolute;
top: 90%;
left: 48%;
}
.next-button{
border-radius: 8px;
position: absolute;
top: 90%;
right: 45%;
}
/* slideshow styles */
/* * {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
/*.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
margin-top:25rem;
}
/* Caption text */
/*.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
/*.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
/*.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
/*.fade {
animation-name: fade;
animation-duration: 2s;
}*/
/* On smaller screens, decrease text size */
@media only screen and (max-width: 100px) {
.text {font-size: 8px}
}
/* ---------------Cart page--------------*/
.prods-container{
max-width: 650px;
justify-content: space-around;
margin: 0 auto;
}
.prods-container .gg-close-o{
font-size: 25px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.prods-container .gg-add{
font-size: 25px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.prods-container .gg-remove{
font-size: 25px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.prod-header{
width: 100%;
max-width: 650px;
display: flex;
justify-content: flex-start;
border-bottom: 4px solid #5a5e5f;
margin: 0 auto;
position: relative;
}
.prod-title{
width: 45%;
}
.price{
width: 15%;
display: flex;
align-items: center;
border-bottom: 4px solid #5a5e5f;
}
.quantity{
width: 30%;
display: flex;
align-items: center;
border-bottom: 4px solid #5a5e5f;
}
.total{
width: 10%;
border-bottom: 4px solid #5a5e5f;
display: flex;
align-items: center;
}
.prod{
width: 45%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #5a5e5f;
}
.prods{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.prod img{
width: 75px;
}
.basketTotalContainer{
display: flex;
justify-content: flex-end;
width: 100%;
padding: 10px 0;
}
.basketTotalTitle{
width: 30%;
}
.basketTotal{
width: 10%;
}
.buy{
margin-bottom: 20px;
padding-bottom: 39px;
}
#buy-now{
border: none;
background-color: #00ff6a;
color: #000;
padding: 0 0 0 0px;
margin-bottom: 9px;
text-decoration: none;
justify-content: space-around;
border-radius: 8px;
position:absolute;
text-align: center;
right: 45%;
top: 120%;
}
\ No newline at end of file
images/BlackShirt.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/BlackShirt.jpg

19.8 KiB

images/BlueBlouse.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/BlueBlouse.jpg

17.2 KiB

images/BlueShirt.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/BlueShirt.jpg

47.2 KiB

images/Browntrouser.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/Browntrouser.jpg

56.8 KiB

images/Cottonjeans.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/Cottonjeans.jpg

124 KiB

images/DenimJeans.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/DenimJeans.jpg

17.3 KiB

images/LightBlue.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/LightBlue.jpg

51.4 KiB

images/OffWhiteblouse.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/OffWhiteblouse.jpg

55.2 KiB

images/WhiteShirt.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/WhiteShirt.jpg

39.2 KiB

images/boys-jumper.avif 0 → 100644
+ 0
− 0
View file @ a5d94984
File added
images/boys-jumper1.webp 0 → 100644
+ 0
− 0
View file @ a5d94984
images/boys-jumper1.webp

407 KiB

images/boys-jumper2.webp 0 → 100644
+ 0
− 0
View file @ a5d94984
images/boys-jumper2.webp

142 KiB

images/boys-shoes.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/boys-shoes.jpg

121 KiB

images/boys-shoes1.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/boys-shoes1.jpg

17.3 KiB

images/boys-shoes2.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/boys-shoes2.jpg

75.1 KiB

images/brown-trouser.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/brown-trouser.jpg

56.8 KiB

images/creamTrouser.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/creamTrouser.jpg

16 KiB

images/girls-dress.jpg 0 → 100644
+ 0
− 0
View file @ a5d94984
images/girls-dress.jpg

191 KiB

images/girls-dress1.webp 0 → 100644
+ 0
− 0
View file @ a5d94984
images/girls-dress1.webp

103 KiB

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