Related
Whenever I add an item to the cart, the item appends to the row in the shopping cart, and the price will adjust. But I am having some trouble having the price adjusting to whenever I change the inputs (input: "type" = number) values. I cannot seem to find the correct format. Can I have some assistance? Feedback is much appreciated. Here to learn!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal"id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js"async></script>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a{
text-decoration: none;
color: black;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn{
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover{
background-color: rgb(11, 70, 75);
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 120vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
#media only screen and (max-width: 600px){
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer{
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 1.5rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
}
JAVASCRIPT:
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbtn = document.getElementById("cartbtn");
const closeicon = document.getElementById("closeicon");
const cartbody = document.querySelector(".cartbody");
const removebtn = document.getElementsByClassName("removebtn");
const carttotal = document.querySelector(".carttotal");
let price = document.querySelector(".actualprice");
let itempricestring = document.getElementsByClassName("itemprice");
let globalquantinput = document.querySelector(".qinput");
cartbtn.addEventListener("click", function () {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function () {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function () {
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
//GETTING THE SHOP ELEMENTS AND APPENDING THEM TO THE CART
let shopitem = button.parentElement;
let shoptitle =
shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("div");
let cartitems = document.getElementsByClassName("cartitems")[0];
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
//ADJUSTING THE TOTAL
let priceint = price.innerText;
let pricerounded = parseFloat(priceint.replace("Total: $", ""));
let shopprice2 = shopprice.replace("$", "");
let shoppriceint = parseFloat(shopprice2);
console.log(shoppriceint);
console.log(pricerounded);
price.innerText = "Total: $" + (shoppriceint + pricerounded).toFixed(2);
//REMOVING ELEMENTS AND DECREASING NUMBER
cartitems.lastChild
.querySelector(".removebtn")
.addEventListener("click", function () {
let TotalNumbervalue = parseInt(TotalNumber.innerText);
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
let shopremoveitem = this.parentElement.parentElement;
let shopremoveprice =
shopremoveitem.getElementsByClassName("itemprice")[0].innerText;
let shopremoveprice2 = shopremoveprice.replace("$", "");
let shopremovepriceint = parseFloat(shopremoveprice2);
let quantin = document.querySelector(".qinput");
let quantinval = quantin.value;
let priceafteradded = parseFloat(
price.innerText.replace("Total: $", "")
);
TotalNumber.innerText--;
Math.round(shopremovepriceint);
price.innerText =
"Total: $" +
(priceafteradded - shopremovepriceint * quantinval).toFixed(2);
}
this.parentElement.parentElement.remove();
});
//PRICEINT1 PRICEINT2 AND PRICEINT3 ARE TO GET THE INNER TEXT OF THE PRICE IN EACH FUNCTION.
//MAKING SURE THE INPUTS DONT GO OVER 1 AND ALSO MAKING SURE THEY WORK
let qinput = document.getElementsByClassName("qinput");
for (let i = 0; i < qinput.length; i++) {
let qinputnumber = document.querySelector(".qinput");
//HERE IS THE ISSUE //
qinput[i].addEventListener("change", function () {
//UPDATE THE PRICE TOTAL ON CHANGE
let priceint3 = document.querySelector(".actualprice").innerText;
let newqinput = cartrow.getElementsByClassName("qinput")[0];
let newqinputval = newqinput.value;
let priceint3rounded = parseFloat(priceint3.replace("Total: $", ""));
price.innerText =
"Total: $" +
(priceint3rounded + shoppriceint * newqinputval).toFixed(2);
//MAKE SURE NUMBERS DONT GO BELOW 1
if (qinput[i].value < 1) {
qinput[i].value = 1;
price.innerText = priceint3;
}
});
if (qinput[i].value > 1) {
qinput[i].value = qinputnumber.value;
} else {
qinput[i].value = 1;
}
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function () {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});
The problem is that you add the price of an object every time you change the amount of it.
So if you have "Red Shoes" in your Cart and the price is at 4.99$
If you now click the up button or increase the value of the input field by one another shoppriceint * newqinputval is added to the OLD-total so the price displayed now is $14.97 (eg. 4.99 initial price + 2 * shoppriceint)
You would have to store the current amount before the change happened (onfoucs or something simmilar) and then substract it before you add another 2 items on top:
(priceint3rounded - shoppriceint * oldqinputval + shoppriceint * newqinputval).toFixed(2);
Hope this helped.
Have a great day! If you need further assistance let me know (:
Here's the part I updated, removing the code around it that was trying to do the same thing before:
function updateAmounts() {
let total = 0
document.querySelectorAll(".qinput").forEach(el => {
let qty = +el.value
let price = +el.closest('.cartitem').querySelector('.itemprice').innerText.trim().replace('$','');
total += (qty * price);
})
document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`
}
document.querySelectorAll(".qinput").forEach(el => el.addEventListener("change", (e) => updateAmounts()))
What this does is:
every time a .qinput field is changed (a quantity)
it triggers updateAmounts(), which
cycles through ALL the .qinput fields, finds their respective prices, and tallies the (quantity * price) for each, culminating in the total
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbtn = document.getElementById("cartbtn");
const closeicon = document.getElementById("closeicon");
const cartbody = document.querySelector(".cartbody");
const removebtn = document.getElementsByClassName("removebtn");
const carttotal = document.querySelector(".carttotal");
let price = document.querySelector(".actualprice");
let itempricestring = document.getElementsByClassName("itemprice");
let globalquantinput = document.querySelector(".qinput");
cartbtn.addEventListener("click", function() {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function() {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
//GETTING THE SHOP ELEMENTS AND APPENDING THEM TO THE CART
let shopitem = button.parentElement;
let shoptitle =
shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("div");
let cartitems = document.getElementsByClassName("cartitems")[0];
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
//ADJUSTING THE TOTAL
let priceint = price.innerText;
let pricerounded = parseFloat(priceint.replace("Total: $", ""));
let shopprice2 = shopprice.replace("$", "");
let shoppriceint = parseFloat(shopprice2);
console.log(shoppriceint);
console.log(pricerounded);
price.innerText = "Total: $" + (shoppriceint + pricerounded).toFixed(2);
//REMOVING ELEMENTS AND DECREASING NUMBER
cartitems.lastChild
.querySelector(".removebtn")
.addEventListener("click", function() {
let TotalNumbervalue = parseInt(TotalNumber.innerText);
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
let shopremoveitem = this.parentElement.parentElement;
let shopremoveprice =
shopremoveitem.getElementsByClassName("itemprice")[0].innerText;
let shopremoveprice2 = shopremoveprice.replace("$", "");
let shopremovepriceint = parseFloat(shopremoveprice2);
let quantin = document.querySelector(".qinput");
let quantinval = quantin.value;
let priceafteradded = parseFloat(
price.innerText.replace("Total: $", "")
);
TotalNumber.innerText--;
Math.round(shopremovepriceint);
price.innerText =
"Total: $" +
(priceafteradded - shopremovepriceint * quantinval).toFixed(2);
}
this.parentElement.parentElement.remove();
});
//PRICEINT1 PRICEINT2 AND PRICEINT3 ARE TO GET THE INNER TEXT OF THE PRICE IN EACH FUNCTION.
//MAKING SURE THE INPUTS DONT GO OVER 1 AND ALSO MAKING SURE THEY WORK
let qinput = document.getElementsByClassName("qinput");
for (let i = 0; i < qinput.length; i++) {
let qinputnumber = document.querySelector(".qinput");
// UPDATED CODE //
function updateAmounts() {
let total = 0
document.querySelectorAll(".qinput").forEach(el => {
let qty = +el.value
let price = +el.closest('.cartitem').querySelector('.itemprice').innerText.trim().replace('$', '');
total += (qty * price);
})
document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`
}
document.querySelectorAll(".qinput").forEach(el => el.addEventListener("change", (e) => updateAmounts()))
if (qinput[i].value > 1) {
qinput[i].value = qinputnumber.value;
} else {
qinput[i].value = 1;
}
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function() {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
overflow-x: hidden;
}
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a {
text-decoration: none;
color: black;
}
.topleftnav {
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
margin-right: 2.5%;
}
.navcartcontainer {
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover {
transform: scale(1.15);
}
.p1 {
height: 100vh;
position: relative;
}
.p1 img {
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after {
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn {
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover {
background-color: rgb(11, 70, 75);
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 2.2rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: 120vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
.arrow {
color: white;
}
#media only screen and (max-width: 600px) {
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav {
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer {
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 1.5rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer {
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
.arrow {
color: white;
}
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<a href="#p1">
<li class="topnavlink">Home</li>
</a>
<a href="#p2">
<li class="topnavlink">Shop</li>
</a>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
</div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
</div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal" id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js" async></script>
I am attempting to create a calendar wherein upon clicking a particular date, the calendar should flip over to reveal details of a specific reservation. While the calendar interface appears perfectly on the webpage, the flip animation does not work and I cant seem to figure out why. I must add that I found most of this code on codepen and am modifying it based on my preference. I have attached my code breakdown below. I would greatly appreciate any advice and help. Thanks!:
<script type = "text/javascript">
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
</script>
<style type = "text/css">
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<link rel = "stylesheet" type = "text/css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>
Just change the <script> tag as shown below. I added Google CDN for jQuery. Why?
For more about how to load script tags check here
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
My Hamburger menu is not working properly, that's it is not showing the menu items whenever a user clicks on it. It is however acting properly on the other functionality whenever it is clicked. I have tried every possible trick and i haven't managed to get it to work properly.I am not sure what is the challenge with my javascript because i believe that should be were the issues are. Below is my code:
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
display: none;
opacity: 0;
}
}
.open {
right: 0;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>
You need to remove display:none from your .nav__list, add opacity:1 to .open and also edit your code on mobile version.
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__list {
right: -100%;
opacity: 0;
}
.open{
right: 0;
opacity:1;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
opacity: 0;
}
}
html .open {
right: 0;
opacity:1;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>
I like what I've created here and the functionality / Action works to my liking. What I've had to do though, is apply a height to the red container (id="greeting")to allow the expanded text to fit nicely upon expansion. It therefore leaves an ugly amount of space below the button when I'd like the "Read More" button state to be flush against the underneath container (id="skills"). Objective: to push the #skills container down when clicking the Read More Button.
var i = 0;
function read() {
if (!i) {
document.getElementById('more').style.display = 'inline';
document.getElementById('dots').style.display = 'none';
document.getElementById('read').innerHTML = 'Read Less';
i = 1;
} else {
document.getElementById('more').style.display = 'none';
document.getElementById('dots').style.display = 'inline';
document.getElementById('read').innerHTML = 'Read More';
i = 0;
}
}
#import url("https://fonts.googleapis.com/css2?family=Lato:wght#300;400&family=Open+Sans:wght#600;700&display=swap");
.container {
max-width: 1280px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-container {
max-width: 800px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-btn {
width: 40%;
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.contact-btn:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.btn-light {
background-color: #f7f7f5;
color: #082449;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.btn-light:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
.btn-dark {
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 1rem;
border: none;
}
.btn-dark:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.t-center {
text-align: center;
}
.lead {
text-align: center;
}
.bottom-line {
border: 1px solid #f43d56;
width: 80px;
margin: 2rem auto;
}
.py-1 {
padding: 1rem 0rem;
}
.py-2 {
padding: 2rem 0rem;
}
.py-3 {
padding: 3rem 0rem;
}
.py-4 {
padding: 4rem 0rem;
}
.my-1 {
margin: 1rem 0rem;
}
.my-2 {
margin: 2rem 0rem;
}
.my-3 {
margin: 3rem 0rem;
}
.my-4 {
margin: 4rem 0rem;
}
.items {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.item {
position: relative;
background: #f43d56;
overflow: hidden;
}
.item::after {
content: '';
position: absolute;
display: block;
background: inherit;
opacity: 0.9;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2) translateX(-75%) translateY(-75%);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
}
.item:hover:after {
transform: scale(2);
}
.item:hover .item-text {
opacity: 1;
transform: translateY(0);
}
.item-image {
height: auto;
transform: translateZ(0);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
display: block;
}
.item-image::before {
content: '';
display: block;
padding-top: 55%;
overflow: hidden;
}
.item-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
line-height: 0;
}
.item-text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
text-align: center;
z-index: 1;
color: #f7f7f5;
transform: translateY(-20%);
transition: opacity 500ms cubic-bezier(0.3, 1.5, 0.4, 1), transform 500ms cubic-bezier(0.3, 1.5, 0.4, 1);
transition-delay: 200ms;
}
.item-text-wrap {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.item-text-title {
font-size: 2rem;
padding: 0 1rem;
margin: 5px 0 0 0;
}
.item-text-category {
text-transform: uppercase;
font-size: 1.3rem;
opacity: 0.8;
}
.item .item-button {
margin-top: 1.5rem;
}
.item .item-button:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
#skills {
margin: -7rem 0 0 0;
}
#skills .cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
background-color: #f7f7f5;
border-radius: 10px;
}
#skills .card:first-of-type {
border-right: 1px solid #ccc;
padding: 1rem;
}
#skills .card {
padding: 1rem;
}
#skills .skill-list h2 {
color: #f43d56;
}
#skills i.fa-3x {
margin-top: 2rem;
color: #f43d56;
}
#skills ul {
display: flex;
justify-content: center;
align-items: center;
}
#skills li {
padding: 0.5rem;
margin-right: 0.5rem;
}
#skills h2 {
padding: 1rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #f7f7f5;
font-family: 'Lato', sans-serif;
line-height: 1.8;
letter-spacing: 1.3px;
font-weight: 300;
color: #082449;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#logo {
width: 70px;
height: 70px;
margin-left: 4rem;
}
#main-nav {
display: flex;
justify-content: space-between;
padding: 1rem;
margin: 0 3rem;
background-color: #f7f7f5;
}
#main-nav ul {
display: flex;
}
#main-nav li {
padding: 1rem 1.5rem;
}
#main-nav a {
color: #082449;
border: 1px solid #f43d56;
border-radius: 4px;
padding: 0.5rem 2rem;
}
#main-nav a:hover {
background-color: #f43d56;
color: #f7f7f5;
transition: ease 0.4s;
}
#showcase {
flex-direction: column;
display: flex;
height: 60vh;
align-items: center;
background-color: #f7f7f5;
}
#showcase h1 {
padding: 1rem;
margin-top: 3rem;
}
#showcase p {
font-size: 1.3rem;
}
#showcase img {
width: 100%;
}
#greeting {
background-color: #f43d56;
color: #f7f7f5;
height: 70vh;
}
#greeting h1 {
padding: 1rem;
margin-top: 3rem;
font-size: 32px;
}
#greeting p {
margin: 1rem auto;
max-width: 800px;
text-align: center;
}
#greeting #more {
display: none;
}
#greeting .btn-light {
display: flex;
flex-direction: column;
margin: auto;
text-align: center;
}
#contact-a h3 {
margin-top: 10%;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name email' 'subject phone' 'message message';
grid-gap: 1rem;
margin: 3rem 0 2rem 0;
}
#contact-a .text-fields .name-input {
grid-area: name;
}
#contact-a .text-fields .subject-input {
grid-area: subject;
}
#contact-a .text-fields .email-input {
grid-area: email;
}
#contact-a .text-fields .phone-input {
grid-area: phone;
}
#contact-a .text-fields .message-input {
grid-area: message;
height: 100px;
}
#contact-a .text-fields .text-input {
padding: 0.3rem 0.6rem;
border: solid 1px #ccc;
border-radius: 4px;
}
#contact-a .contact-container .btn-dark {
display: flex;
flex-direction: column;
margin: auto;
width: 30%;
text-align: center;
}
#contact-b .contact-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
margin: 0 0 4rem 0;
}
#main-footer {
background: #082449;
color: #f7f7f5;
height: 5rem;
}
#main-footer .footer-content {
display: flex;
justify-content: space-evenly;
height: 5rem;
align-items: center;
font-size: 0.8rem;
}
#main-footer .social .fab {
color: #f7f7f5;
margin-right: 1.5rem;
border-radius: 50%;
padding: 0.5rem;
font-size: 1.3rem;
text-align: center;
}
#main-footer .social .fab:hover {
background: #f43d56;
}
#media (max-width: 1300px) {
#showcase {
min-height: 100vh;
position: relative;
}
#greeting {
height: 90vh;
}
}
#media (max-width: 800px) {
#showcase {
min-height: 50vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#work-a .item-text-title {
font-size: 1.2rem;
padding: 1rem;
}
#work-a .item-text-category {
font-size: 1rem;
margin-top: 1rem;
}
#greeting {
height: 65vh;
}
#greeting .container {
padding: 0 2rem;
}
#skills .cards {
grid-template-columns: 1fr 1fr;
width: 100%;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
}
/*===================PHONES==================================
============================================================*/
#media (max-width: 500px) {
#main-nav {
flex-direction: column;
align-items: center;
}
#main-nav #logo {
margin: 1rem 0;
}
#main-nav li {
padding: 1rem;
margin-top: 2rem;
}
#showcase {
height: 85vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase img {
width: 300px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting {
height: 140vh;
}
#greeting h1 {
font-size: 1.5rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .container {
padding: 0 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 0.5rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-category {
font-size: 0.9rem;
margin-top: 1.8rem;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
}
#main-footer .footer-content {
flex-direction: column-reverse;
font-size: 0.6rem;
padding-bottom: 1rem;
}
#main-footer .social .fab {
font-size: 1.2rem;
padding: 0 1rem;
margin: 1rem 0;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name' 'email' 'phone' 'subject' 'message';
grid-gap: 1rem;
margin: 2rem 0;
}
#contact-b .contact-info {
grid-template-columns: 1fr;
grid-row-gap: 1rem;
padding: 0;
}
}
#media (max-height: 500px) {
#showcase {
height: 85vh;
}
#showcase img {
width: 250px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting {
height: 190vh;
}
#greeting h1 {
font-size: 1.2rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 1rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
margin: 0.8rem 0;
}
}
<section id="greeting" class="rellax" data-rellax-speed="3">
<div class="container" data-rellax-speed="-1">
<h1 class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
Hi, I'm Jon. Nice to meet you.
</h1>
<p class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
I am a recent graduate of the Borough of Manhattan Community College where I pursued a degree in Multimedia Programming with a specialization in Frontend Web Development and Graphic Design I offer an attention to detail, analysis, and problem solving
that will serve me well as a Frontend Developer. I enjoy working across various programs and platforms from Sketch or XD to SASS/JS/REACT and NODE to name a few. In my recent internship at Interactive One, I was able to apply this skill set in the
development of personalized landing pages and digital marketing campaigns on sites hosted on WordPress VIP.<span id="dots">...</span
><span id="more">
I also find WordPress Development to be engaging as well, especially
theme customization and incorporating raw coding techniques to
create a unique end product. My specialties include: Prototyping in
Adobe XD. Building in HTML/CSS, JavaScript and React. All aspects of
the WordPress and Squarespace platforms. I have had the chance to
work with Firebase creating an original Blog and also the P5.js
library creating animated projects, games and data
visualization.</span
>
</p>
<button
type="button"
id="read"
class="btn-light t-center"
onclick="read()"
>
Read More
</button>
</div>
</section>
<!-- Section Skills -->
<section
id="skills"
class="t-center py-3 rellax"
data-rellax-xs-speed="2"
data-rellax-speed="1.5"
data-rellax-tablet-speed="0"
>
<div class="container">
<div class="cards">
<div class="card">
<div>
<i class="fas fa-code fa-3x"></i>
<h2>Frontend Developer</h2>
<p>
I aim for an original, clean and streamlined approach. I
especially enjoy coding from scratch and exploring new
techniques.
</p>
<div class="skill-list">
<h2>My Languages:</h2>
<ul>
<li>
<i class="fab fa-js"></i>
<p>javascript</p>
</li>
<li>
<i class="fab fa-react"></i>
<p>react</p>
</li>
<li>
<i class="fab fa-sass"></i>
<p>sass</p>
</li>
<li>
<i class="fab fa-node"></i>
<p>node.js</p>
</li>
<li>
<i class="fas fa-database"></i>
<p>firebase</p>
</li>
<li>
<i class="fas fa-file-code"></i>
<p>html5 / css3</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Developer Tools:</h2>
<ul>
<li>
<i class="fas fa-file-alt"></i>
<p>VS-Code</p>
</li>
<li>
<i class="fab fa-bootstrap"></i>
<p>Bootstrap</p>
</li>
<li>
<i class="fab fa-codepen"></i>
<p>Codepen</p>
</li>
<li>
<i class="fab fa-github"></i>
<p>Github</p>
</li>
<li>
<i class="fab fa-wordpress"></i>
<p>WordPress</p>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div>
<i class="fas fa-bezier-curve fa-3x"></i>
<h2>Graphic Design</h2>
<p>
I value simple content structure, clean design patterns, and
thoughtful interactions.
</p>
<div class="skill-list">
<h2>What I like to design:</h2>
<ul>
<li>
<i class="fab fa-sketch"></i>
<p>ux / ui</p>
</li>
<li>
<i class="fas fa-wifi"></i>
<p>web</p>
</li>
<li>
<i class="fas fa-mobile"></i>
<p>mobile</p>
</li>
<li>
<i class="fab fa-app-store-ios"></i>
<p>apps</p>
</li>
<li>
<i class="fas fa-bezier-curve"></i>
<p>logos</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Design Tools:</h2>
<ul>
<li>
<i class="fas fa-align-center"></i>
<p>Sketch</p>
</li>
<li>
<i class="fab fa-figma"></i>
<p>Figma</p>
</li>
<li>
<i class="fab fa-adobe"></i>
<p>Adobe Suite</p>
</li>
<li>
<i class="fas fa-drafting-compass"></i>
<p>Draw</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
Take off the fixed height of the #greeting and it does just that. It will expand with it's content
var i = 0;
function read() {
if (!i) {
document.getElementById('more').style.display = 'inline';
document.getElementById('dots').style.display = 'none';
document.getElementById('read').innerHTML = 'Read Less';
i = 1;
} else {
document.getElementById('more').style.display = 'none';
document.getElementById('dots').style.display = 'inline';
document.getElementById('read').innerHTML = 'Read More';
i = 0;
}
}
#import url("https://fonts.googleapis.com/css2?family=Lato:wght#300;400&family=Open+Sans:wght#600;700&display=swap");
.container {
max-width: 1280px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-container {
max-width: 800px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-btn {
width: 40%;
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.contact-btn:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.btn-light {
background-color: #f7f7f5;
color: #082449;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.btn-light:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
.btn-dark {
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 1rem;
border: none;
}
.btn-dark:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.t-center {
text-align: center;
}
.lead {
text-align: center;
}
.bottom-line {
border: 1px solid #f43d56;
width: 80px;
margin: 2rem auto;
}
.py-1 {
padding: 1rem 0rem;
}
.py-2 {
padding: 2rem 0rem;
}
.py-3 {
padding: 3rem 0rem;
}
.py-4 {
padding: 4rem 0rem;
}
.my-1 {
margin: 1rem 0rem;
}
.my-2 {
margin: 2rem 0rem;
}
.my-3 {
margin: 3rem 0rem;
}
.my-4 {
margin: 4rem 0rem;
}
.items {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.item {
position: relative;
background: #f43d56;
overflow: hidden;
}
.item::after {
content: '';
position: absolute;
display: block;
background: inherit;
opacity: 0.9;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2) translateX(-75%) translateY(-75%);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
}
.item:hover:after {
transform: scale(2);
}
.item:hover .item-text {
opacity: 1;
transform: translateY(0);
}
.item-image {
height: auto;
transform: translateZ(0);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
display: block;
}
.item-image::before {
content: '';
display: block;
padding-top: 55%;
overflow: hidden;
}
.item-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
line-height: 0;
}
.item-text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
text-align: center;
z-index: 1;
color: #f7f7f5;
transform: translateY(-20%);
transition: opacity 500ms cubic-bezier(0.3, 1.5, 0.4, 1), transform 500ms cubic-bezier(0.3, 1.5, 0.4, 1);
transition-delay: 200ms;
}
.item-text-wrap {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.item-text-title {
font-size: 2rem;
padding: 0 1rem;
margin: 5px 0 0 0;
}
.item-text-category {
text-transform: uppercase;
font-size: 1.3rem;
opacity: 0.8;
}
.item .item-button {
margin-top: 1.5rem;
}
.item .item-button:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
#skills {
margin: 0 0 0 0;
}
#skills .cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
background-color: #f7f7f5;
border-radius: 10px;
}
#skills .card:first-of-type {
border-right: 1px solid #ccc;
padding: 1rem;
}
#skills .card {
padding: 1rem;
}
#skills .skill-list h2 {
color: #f43d56;
}
#skills i.fa-3x {
margin-top: 2rem;
color: #f43d56;
}
#skills ul {
display: flex;
justify-content: center;
align-items: center;
}
#skills li {
padding: 0.5rem;
margin-right: 0.5rem;
}
#skills h2 {
padding: 1rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #f7f7f5;
font-family: 'Lato', sans-serif;
line-height: 1.8;
letter-spacing: 1.3px;
font-weight: 300;
color: #082449;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#logo {
width: 70px;
height: 70px;
margin-left: 4rem;
}
#main-nav {
display: flex;
justify-content: space-between;
padding: 1rem;
margin: 0 3rem;
background-color: #f7f7f5;
}
#main-nav ul {
display: flex;
}
#main-nav li {
padding: 1rem 1.5rem;
}
#main-nav a {
color: #082449;
border: 1px solid #f43d56;
border-radius: 4px;
padding: 0.5rem 2rem;
}
#main-nav a:hover {
background-color: #f43d56;
color: #f7f7f5;
transition: ease 0.4s;
}
#showcase {
flex-direction: column;
display: flex;
height: 60vh;
align-items: center;
background-color: #f7f7f5;
}
#showcase h1 {
padding: 1rem;
margin-top: 3rem;
}
#showcase p {
font-size: 1.3rem;
}
#showcase img {
width: 100%;
}
#greeting {
background-color: #f43d56;
color: #f7f7f5;
}
#greeting h1 {
padding: 1rem;
margin-top: 3rem;
font-size: 32px;
}
#greeting p {
margin: 1rem auto;
max-width: 800px;
text-align: center;
}
#greeting #more {
display: none;
}
#greeting .btn-light {
display: flex;
flex-direction: column;
margin: auto;
text-align: center;
}
#contact-a h3 {
margin-top: 10%;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name email' 'subject phone' 'message message';
grid-gap: 1rem;
margin: 3rem 0 2rem 0;
}
#contact-a .text-fields .name-input {
grid-area: name;
}
#contact-a .text-fields .subject-input {
grid-area: subject;
}
#contact-a .text-fields .email-input {
grid-area: email;
}
#contact-a .text-fields .phone-input {
grid-area: phone;
}
#contact-a .text-fields .message-input {
grid-area: message;
height: 100px;
}
#contact-a .text-fields .text-input {
padding: 0.3rem 0.6rem;
border: solid 1px #ccc;
border-radius: 4px;
}
#contact-a .contact-container .btn-dark {
display: flex;
flex-direction: column;
margin: auto;
width: 30%;
text-align: center;
}
#contact-b .contact-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
margin: 0 0 4rem 0;
}
#main-footer {
background: #082449;
color: #f7f7f5;
height: 5rem;
}
#main-footer .footer-content {
display: flex;
justify-content: space-evenly;
height: 5rem;
align-items: center;
font-size: 0.8rem;
}
#main-footer .social .fab {
color: #f7f7f5;
margin-right: 1.5rem;
border-radius: 50%;
padding: 0.5rem;
font-size: 1.3rem;
text-align: center;
}
#main-footer .social .fab:hover {
background: #f43d56;
}
#media (max-width: 1300px) {
#showcase {
min-height: 100vh;
position: relative;
}
}
#media (max-width: 800px) {
#showcase {
min-height: 50vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#work-a .item-text-title {
font-size: 1.2rem;
padding: 1rem;
}
#work-a .item-text-category {
font-size: 1rem;
margin-top: 1rem;
}
#greeting .container {
padding: 0 2rem;
}
#skills .cards {
grid-template-columns: 1fr 1fr;
width: 100%;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
}
/*===================PHONES==================================
============================================================*/
#media (max-width: 500px) {
#main-nav {
flex-direction: column;
align-items: center;
}
#main-nav #logo {
margin: 1rem 0;
}
#main-nav li {
padding: 1rem;
margin-top: 2rem;
}
#showcase {
height: 85vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase img {
width: 300px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting h1 {
font-size: 1.5rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .container {
padding: 0 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 0.5rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-category {
font-size: 0.9rem;
margin-top: 1.8rem;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
}
#main-footer .footer-content {
flex-direction: column-reverse;
font-size: 0.6rem;
padding-bottom: 1rem;
}
#main-footer .social .fab {
font-size: 1.2rem;
padding: 0 1rem;
margin: 1rem 0;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name' 'email' 'phone' 'subject' 'message';
grid-gap: 1rem;
margin: 2rem 0;
}
#contact-b .contact-info {
grid-template-columns: 1fr;
grid-row-gap: 1rem;
padding: 0;
}
}
#media (max-height: 500px) {
#showcase {
height: 85vh;
}
#showcase img {
width: 250px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting h1 {
font-size: 1.2rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 1rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
margin: 0.8rem 0;
}
}
<section id="greeting" class="rellax" data-rellax-speed="3">
<div class="container" data-rellax-speed="-1">
<h1 class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
Hi, I'm Jon. Nice to meet you.
</h1>
<p class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
I am a recent graduate of the Borough of Manhattan Community College where I pursued a degree in Multimedia Programming with a specialization in Frontend Web Development and Graphic Design I offer an attention to detail, analysis, and problem solving
that will serve me well as a Frontend Developer. I enjoy working across various programs and platforms from Sketch or XD to SASS/JS/REACT and NODE to name a few. In my recent internship at Interactive One, I was able to apply this skill set in the
development of personalized landing pages and digital marketing campaigns on sites hosted on WordPress VIP.<span id="dots">...</span
><span id="more">
I also find WordPress Development to be engaging as well, especially
theme customization and incorporating raw coding techniques to
create a unique end product. My specialties include: Prototyping in
Adobe XD. Building in HTML/CSS, JavaScript and React. All aspects of
the WordPress and Squarespace platforms. I have had the chance to
work with Firebase creating an original Blog and also the P5.js
library creating animated projects, games and data
visualization.</span
>
</p>
<button
type="button"
id="read"
class="btn-light t-center"
onclick="read()"
>
Read More
</button>
</div>
</section>
<!-- Section Skills -->
<section
id="skills"
class="t-center py-3 rellax"
data-rellax-xs-speed="2"
data-rellax-speed="1.5"
data-rellax-tablet-speed="0"
>
<div class="container">
<div class="cards">
<div class="card">
<div>
<i class="fas fa-code fa-3x"></i>
<h2>Frontend Developer</h2>
<p>
I aim for an original, clean and streamlined approach. I
especially enjoy coding from scratch and exploring new
techniques.
</p>
<div class="skill-list">
<h2>My Languages:</h2>
<ul>
<li>
<i class="fab fa-js"></i>
<p>javascript</p>
</li>
<li>
<i class="fab fa-react"></i>
<p>react</p>
</li>
<li>
<i class="fab fa-sass"></i>
<p>sass</p>
</li>
<li>
<i class="fab fa-node"></i>
<p>node.js</p>
</li>
<li>
<i class="fas fa-database"></i>
<p>firebase</p>
</li>
<li>
<i class="fas fa-file-code"></i>
<p>html5 / css3</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Developer Tools:</h2>
<ul>
<li>
<i class="fas fa-file-alt"></i>
<p>VS-Code</p>
</li>
<li>
<i class="fab fa-bootstrap"></i>
<p>Bootstrap</p>
</li>
<li>
<i class="fab fa-codepen"></i>
<p>Codepen</p>
</li>
<li>
<i class="fab fa-github"></i>
<p>Github</p>
</li>
<li>
<i class="fab fa-wordpress"></i>
<p>WordPress</p>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div>
<i class="fas fa-bezier-curve fa-3x"></i>
<h2>Graphic Design</h2>
<p>
I value simple content structure, clean design patterns, and
thoughtful interactions.
</p>
<div class="skill-list">
<h2>What I like to design:</h2>
<ul>
<li>
<i class="fab fa-sketch"></i>
<p>ux / ui</p>
</li>
<li>
<i class="fas fa-wifi"></i>
<p>web</p>
</li>
<li>
<i class="fas fa-mobile"></i>
<p>mobile</p>
</li>
<li>
<i class="fab fa-app-store-ios"></i>
<p>apps</p>
</li>
<li>
<i class="fas fa-bezier-curve"></i>
<p>logos</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Design Tools:</h2>
<ul>
<li>
<i class="fas fa-align-center"></i>
<p>Sketch</p>
</li>
<li>
<i class="fab fa-figma"></i>
<p>Figma</p>
</li>
<li>
<i class="fab fa-adobe"></i>
<p>Adobe Suite</p>
</li>
<li>
<i class="fas fa-drafting-compass"></i>
<p>Draw</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
I have designed a navigation system for my project which is built on flexbox like unsplash
Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
For Main Navigation
=========================== */
.cm-navigation-area {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 5;
display: block;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.cm-navigation {
background: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
}
#media (max-width: 768px) {
.cm-navigation {
margin: 0 -5%;
}
}
.cm-burger-nav {
display: flex;
justify-content: center;
align-items: center;
}
#burger-nav {
fill: #575757;
}
.cm-logo {
display: flex;
justify-content: center;
align-items: center;
}
.cm-logo a img {
width: auto;
height: 50px;
}
#media (max-width: 991px) {
.cm-logo a img {
width: 80px;
height: auto;
}
}
.cm-nav nav {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cm-nav nav ul {
margin: 0;
padding: 0;
display: flex;
}
.cm-nav nav ul li {
list-style: none;
display: flex;
}
.cm-nav nav ul li:not(:last-child) {
margin-right: 1.8em;
}
#media (max-width: 991px) {
.cm-nav nav ul li:not(:last-child) {
margin-right: 10;
}
}
.cm-nav nav ul li a {
font-size: 0.9em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: gray;
font-weight: 300;
}
.cm-nav nav ul li a span {
padding-right: 0.4em;
}
.cm-nav nav ul li a span img {
width: 13px;
height: auto;
}
#media (max-width: 991px) {
.cm-nav nav ul li a span img {
width: 18px;
height: auto;
}
}
#media (max-width: 768px) {
.nav-r-text {
display: none;
}
}
.cm-currency {
font-size: 0.8em;
}
.cm-currency .cm-currency-link span {
margin-right: 0 !important;
}
.cm-currency .cm-currency-link span img {
width: 10px !important;
}
.cm-dots {
margin-right: 2.5em !important;
}
.cm-submit-photo {
margin-right: 48px !important;
}
.cm-submit-photo-link {
transition: all 0.2s ease-in-out;
display: flex;
background: #fff;
border: 1px solid #dddddd;
color: gray !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-submit-photo-link:hover {
border: 1px solid #dedede;
color: #dedede;
}
.cm-join-button {
position: relative;
}
.cm-join-button:before {
position: absolute;
top: 0;
left: -24px;
display: inline-block;
width: 1px;
height: 32px;
content: "";
background-color: gray;
}
.cm-join-button-link {
transition: all 0.3s ease-in-out;
display: flex;
background: green;
color: #ffffff !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-join-button-link:hover {
background: #004d00;
}
.cm-user-link img {
height: 30px;
width: auto;
}
.cm-cart {
min-height: 30px;
}
#cm-cart-link {
position: relative;
}
#cm-cart-link .cart-img {
width: 16px;
height: auto;
}
#cm-cart-link .cm-cart-badge:after {
position: absolute;
right: -6px;
top: 0;
content: attr(data-count);
font-size: 60%;
width: 16px;
height: 16px;
padding: 0.3em;
border-radius: 50%;
line-height: 1em;
color: white;
background: green;
text-align: center;
min-width: 1.2em;
}
/* ===================================
Navbar Search Integrations
=================================== */
.cm-nav-searchbar {
display: flex;
flex: 1;
align-items: center;
height: 100%;
padding: 0 1em;
}
#media (max-width: 1200px) {
.cm-nav-searchbar {
display: none;
}
}
.cm-nav-searchbar .field-container {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbar .icons-container {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbar .icon-search {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbar .icon-search:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbar .search-field {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbar .search-field:focus {
outline: none;
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
opacity: 0;
transform: translateX(200%);
}
/* ========================
Mobile Searchbar
======================== */
.cm-nav-searchbars {
display: flex;
flex: 1;
align-items: center;
height: 100%;
margin-top: 70px;
}
#media (min-width: 1200px) {
.cm-nav-searchbars {
display: none;
}
}
.cm-nav-searchbars .field-containers {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbars .icons-containers {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbars .icon-searchs {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbars .icon-searchs:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbars .search-fields {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbars .search-fields:focus {
outline: none;
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
opacity: 0;
transform: translateX(200%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
Main Navigation
=============================-->
<div class="cm-navigation-area">
<div class="cm-navigation px-5-percent">
<!--Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-burger-nav d-flex d-md-none">
<span>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</span>
</div>
<!--End Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-logo">
<a class="cm-logo-link" href="">
<img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
</a>
</div>
<div class="cm-nav-searchbar">
<fieldset class="field-container">
<input type="text" placeholder="Search Photos Here" class="search-field" />
<div class="icons-container">
<div class="icon-search"></div>
</div>
</fieldset>
</div>
<div class="cm-nav mr-md-2">
<nav>
<ul>
<li class="cm-currency">
<a class="cm-currency-link" href="">
<span>BDT</span>
<span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
</a>
</li>
<li class="cm-explore">
<a href="image-category.html">
<span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
<span class="nav-r-text">Explore</span>
</a>
</li>
<li class="cm-collection d-none d-md-flex">
<a href="./dashboard/dashboard-images.html">
<span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
<span class="nav-r-text">Collection</span>
</a>
</li>
<li class="cm-dots d-none d-md-flex">
<a href="">
<img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
</a>
</li>
<li class="cm-cart">
<a id="cm-cart-link" href="javascript:void(0)">
<span class="cm-cart-badge has-badge" data-count="2"></span>
<span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
</a>
</li>
<li class="cm-user d-flex d-md-none">
<a class="cm-user-link" href="">
<span>
<img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
</span>
<span class="nav-r-text">Login</span>
</a>
</li>
<li class="cm-submit-photo d-none d-md-flex">
<a class="cm-submit-photo-link" href="submit-image.html">
<!--<span>-->
<!--<img src="images/s_photo.svg" alt="">-->
<!--</span>-->
<span> Submit a photo </span>
</a>
</li>
<!--<li class="cm-user">-->
<!--<a class="cm-user-link" href="">-->
<!--<span>-->
<!--<img src="images/user.svg" alt="">-->
<!--</span>-->
<!--<span class="nav-r-text">Login</span>-->
<!--</a>-->
<!--</li>-->
<li class="cm-join-button d-none d-md-flex">
<a class="cm-join-button-link" href="">Login | Signup</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="cm-nav-searchbars">
<fieldset class="field-containers">
<input type="text" placeholder="Search Photos Here" class="search-fields" />
<div class="icons-containers">
<div class="icon-searchs"></div>
</div>
</fieldset>
</div>
Its look responsive but some how its not align and looks not beautiful on responsive, also I have to need a drop down like unsplash on dot hover or click event.
Thanks in advance