I know how to add images to html website but theres one thing i am not sure how to do, even after searching plenty of sites on the internet.
I created a small animation using java script on some other IDE, and I copied the link of my output:
https://g2mjl.csb.app/
I want to paste this link onto my html website but I do not know how to. If i use the regular <img src .... it does not work.
Basically the animation was coded in Java Script and the code for js is as follows:
import Vue from "vue";
import App from "./App.vue";
import TypeIt from "typeit";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
new TypeIt("#inner-demo-2", {
speed: 100,
lifelike: true,
cursor: true,
cursorSpeed: 200,
loop: true
})
.pause(1000)
.type('<span style="font-family: Segoe UI Emoji">👋</span>', {
html: true
})
.type(" Hi there! I'm Hussain Omer")
.go();
How can I add this code into my html file?
Also, this is for my personal website and not for school or anything, so answers are much appreciated!
I am fairly new to html too, as I started learning it a week ago, so help is really appreciated!
I want the animation to display at the very top and the width of it should cover basically my whole page but should be at the very top
Heres my html website code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Portfolio site template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Repl.it_logo.svg/220px-Repl.it_logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<!--────────────────Header───────────────-->
<header>
<a class="logo" href="#home">
<img src="https://newsletter-images--timmy-i-chen.repl.co/logo-light.png" alt="repl logo" />
</a>
<nav>
<ul class="nav-bar"><div class="bg"></div>
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<main>
<!--─────────────────Home────────────────-->
<div id="home">
<div class="filter"></div>
<section class="intro">
<p>Short Description.</p>
<p>Something more about yourself.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<!--────social media links─────-->
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</section>
</div>
<!--───────────────Projects───────────────-->
<div id="projects">
<h3>My Projects.<hr></h3>
<p>Here are some of my projects, you may like.</p>
<div class="work-box">
<div class="work">
<!--───────────────card───────────────-->
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1518611507436-f9221403cca2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1462642109801-4ac2971a3a51?ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1485815457792-d1a966f9bde0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1535556116002-6281ff3e9f36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=781&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
<div class="card">
<img class="work-img" src="https://images.unsplash.com/photo-1483546416237-76fd26bbcdd1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
<a href="" target="_blank"> <!--Link to project-->
<div class="work-content">Lorem ipsum dolor sit amet consectetur.</div></a>
</div>
</div>
</div>
</div>
<!--──────────────Contact────────────────-->
<div id="contact">
<!--────social media links─────-->
<h3>Contact.<hr></h3>
<p>Feel free to contact me on my social media.</p>
<div class="social-media">
<i class='fab fa-codepen'></i>
<i class='fab fa-twitter'></i>
<i class='fab fa-github'></i>
<i class='fab fa-linkedin-in'></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</main>
<footer class="copyright">© 2020
Lilykhan.
<!-- be sure to give credit to me :) -->
</footer>
</div>
</body>
</html>
CSS CLASS:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
:root{
--main-background: #0b0c0f;
--main-fonts-color: #fff;
--main-decor-color:#00a9e2;
--main-header-background:#21252e;
--main-font-family: 'Poppins', sans-serif;
}
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
main{
padding: 0;
width: 100%;
height: 100%;
background: var(--main-background);
}
/*──────────────────
header
──────────────────*/
header{
margin: 0 auto;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: transparent;
position: fixed;
top: 0;
transition: 0.3s;
z-index: 5;
}
.nav-show{
opacity: 0;
}
header:hover{
opacity: 1;
background: var(--main-header-background);
}
.logo img{
padding-top: 5px;
height: 50px;
cursor: pointer;
}
.nav-bar{
list-style:none;
position: relative;
display: inline-flex;
}
a.nav-link{
margin: 2px;
padding: 5px 10px;
text-decoration: none;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
text-transform: uppercase;
}
.active{
background: var(--main-decor-color);
}
.nav-link:hover {
color: #000000;
background: var(--main-decor-color);
}
/*──────────────────
home
──────────────────*/
#home{
margin: auto;
height: 100vh;
color: var(--main-fonts-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
#home .filter{
background: url('https://images.unsplash.com/photo-1544099858-75feeb57f01b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat;
background-size: cover;
background-position:center;
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
opacity:.20;
}
.intro {
text-align:center;
color: var(--main-fonts-color);
z-index: 1;
margin: auto;
padding: 20px;
}
.intro p{
margin: 5px;
font-size:1.2rem;
font-family: var(--main-font-family);
text-align:center;
}
h3{
padding-bottom: 15px;
letter-spacing: normal;
font-family: var(--main-font-family);
font-style: normal;
font-size: 60px;
color: var(--main-fonts-color);
text-shadow: 0px 0px 40px var(--main-decor-color);
}
/*──────────────────
social media
──────────────────*/
.social-media{
padding: 10px;
display: flex;
position: center;
align-items: space-around;
justify-content:center;
}
.social-media a {
margin: 10px;
font-size: 2rem;
text-align:center;
display: inline-block;
color: var(--main-fonts-color);
}
.social-media a i{
cursor: pointer;
}
.social-media a:hover {
color: var(--main-decor-color);
text-shadow: 0 0 50px var(--main-decor-color);
}
/*──────────────────
projects
──────────────────*/
#projects{
margin-top:100px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align:center;
color: var(--main-fonts-color);
}
#projects h3{
padding-top: 70px;
}
#projects p{
font-family: var(--main-font-family);
font-size:1.2rem;
padding: 10px;
}
.work{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content:center;
align-items: center;
padding: 20px;
}
.card{
display: flex;
flex-direction: column;
margin: 20px;
width: 200px;
height:250px;
border-radius:12px;
background:var(--main-decor-color);
}
.card img{
width: 100%;
height:70%;
border-radius:10px 10px 0px 0px;
}
.card .work-content{
text-align: center;
padding: 10px 5px;
font-size: 1rem;
color: var(--main-fonts-color);
font-family: var(--main-font-family);
cursor: pointer;
}
.card a{
text-decoration: none;
}
.card .work-content:hover{
color:#202020;
}
.card:hover{
box-shadow: 0 0 1.5rem gray;
}
/*──────────────────
Contact
──────────────────*/
#contact{
margin: auto;
padding-bottom: 20px;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--main-fonts-color);
}
#contact p{
padding:10px;
text-align:center;
font-size:1.2rem;
font-family: var(--main-font-family);
}
/*──────────────────
footer
──────────────────*/
footer {
width: 100%;
height: 100%;
background-color: var(--main-header-background);
}
.copyright {
color: #fff;
font-size: 1.2rem;
line-height: 40px;
text-align: center;
}
.copyright a{
color: #fff;
font-size: 1rem;
letter-spacing: 1px;
text-decoration: none;
font-family: var(--main-font-family);
}
.copyright a:hover{
color: var(--main-decor-color);
}
/*──── hr ─────*/
hr {
background: var(--main-decor-color);
margin: 2px;
height: 3px;
width: 150px;
border-radius:5px;
border: hidden;
margin-inline-start: auto;
margin-inline-end: auto;
}
/*──────────────────
Scrollbar
──────────────────*/
::-webkit-Scrollbar{
width: 5px;
background: rgba(5,5,5,1);
}
::-webkit-Scrollbar-thumb{
border-radius: 10px;
background: var(--main-decor-color);
box-shadow: inset 0 0 20px var(--main-decor-color);
}
::-webkit-Scrollbar-track{
margin-top: 80px;
border-radius: 10px;
}
/*──────────────────
hamburger
──────────────────*/
.hamburger {
display: none;
}
.hamburger div{
width: 30px;
height: 3px;
background: #dbdbdb;
margin: 5px;
transition:all 0.3s ease;
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#keyframes navLinkFade{
from{
opacity:0;
transform: translatex(50px);
}
to{
opacity: 1;
transform:translatex(0px);
}
}
/*──────────────────
media queries
──────────────────*/
#media only screen and (max-width: 1484px) and (min-width: 1214px) {
.work{
padding:20px 20%;
}
}
#media only screen and (max-width: 1214px) and (min-width: 1000px) {
.work{
padding:20px 12%;
}
}
#media only screen and (max-width: 500px) {
#home, #projects, #contact{
overflow-x: hidden;
}
header{
background-color: var(--main-header-background);
}
.logo{
position:absolute;
top: 2px;
left: 30px;
}
.nav-show{
opacity: 1;
}
.nav-bar{
position:fixed;
top: 0px;
right:0;
width:60%;
height: 100vh;
display:flex;
flex-direction: column;
align-items: center;
justify-content:space-evenly;
background:var(--main-header-background);
transform:translatex(100%);
transition: transform 0.5s ease-in;
z-index: -1;
}
.hamburger{
position:absolute;
top: 17px;
right: 25%;
display: block;
cursor:pointer;
z-index: 5;
}
.nav-bar li{
opacity:0;
}
}
.nav-active{
transform:translatex(0%);
}
JS CLASS:
// header scrolling effect
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('header').addClass('nav-show');
}
else{
$('header').removeClass('nav-show');
}
})
//hamburger
const navSlide = () => {
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
const navLinks = document.querySelectorAll(".nav-bar li");
hamburger.onclick = () => {
navbar.classList.toggle("nav-active");
//Animation links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+1}s`;
}
});
//hamburger animation
hamburger.classList.toggle("toggle");
}
}
window.onload = () => navSlide();
BTW this is a free html website template i got
As others have mentioned, using an iframe would be your best bet if you want to display the actual app on your website.
This is how you would implement the iframe.
<iframe src="https://g2mjl.csb.app/" title="My App"></iframe>
That being said, iframes are tricky. Depending on the website, it's possible that an iframe blocking policy is in place which could prevent you from embedding your app.
More info here and here.
Now, if all you want is a gif, I've gone ahead and done that for you, although, you may want to upload your own with something like giphy.
Here is a link to a gif I've created from your app: https://media.giphy.com/media/U9vs87YlzO1KrlFSaG/giphy.gif
You can also see it by running the snippet below:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />
I wrapped the image with an anchor that will lead to your app page but you can just implement it in your img src as you originally attempted like this:
<img src="https://media.giphy.com/media/boq1oJ25cQ21rpLRmo/giphy.gif" />
you can use this code:
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p>W3Schools.com</p>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>
Related
I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>
Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>
I am building a website to showcase my future projects. But a whitespace randomly appeared on the site. When I inspect the site in chrome, the space does not seem to belong to any element. The space is between the banner and container-fluid from bootstrap. But when I add an extra div between the banner and container-fluid, the space seems to be on top of the container-fluid rather than below the banner.
Another problem I wanted to solve was, how can I make the text "Coming Soon" disappear when I hover over the images. I tried using "+" and "~" but it doesn't seem to work.
Any help or ideas would be very much appreciated! :)
Here is the code.
const navSlide = () => {
const burgerMenu = document.querySelector(".burger");
const nav = document.querySelector(".navbar-nav");
const navlinks = document.querySelectorAll(".navbar-nav li");
burgerMenu.addEventListener("click", function () {
// Toggle drop down menu
nav.classList.toggle("mobilenav-active");
// Increase links' opacity
navlinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `linkSlide 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
// Toggle burger to cross animation
burgerMenu.classList.toggle("toggle");
});
};
navSlide();
#import url("https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
#keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("../images/projects/banner-img.jpg") center/cover no-repeat fixed;
background-position: 50% 60%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
#media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
.transition {
width: 100vw;
height: 50px;
background: #000;
}
/*IMAGE GALLERY*/
.container-fluid {
background: rgb(47,62,70);
background: radial-gradient(circle, rgba(47,62,70,1) 0%, rgba(132,169,140,1) 100%);
}
.item {
transition: all 0.5s ease-in-out;
position: relative;
text-align: center;
color: white;
}
.item img {
filter: brightness(50%);
transition: all 0.3s ease-in-out;
}
.item img:hover {
filter: brightness(100%);
}
.img-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Oswald", sans-serif;
font-weight: 500;
font-size: 2.5rem;
color: #f5f5f5;
text-shadow: 1px 1px 2px black;
transition: all 0.3s ease-in-out;
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
#media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
#media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
#media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/project-style.css" rel="stylesheet" />
<link rel="shortcut icon" href="./images/fav.ico" type="image/x-icon" />
<title>Projects -BWS</title>
</head>
<body>
<div class="site">
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<section class="banner">
<h1 id="banner-text">My Creations</h1>
</section>
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4">
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img1.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img1.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img2.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img2.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img3.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img3.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img4.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img4.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img5.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img5.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img6.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img6.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img7.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img7.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img8.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img8.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img9.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img9.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li>edX</li>
<li>
Coursera
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</div>
</body>
</html>
There is a setting with !important for margin-top buried in an SCSS file.
.mt-4, .my-4 {
margin-top: 1.5rem!important;
}
To override it for just this one instance (so as not to disturb its usage anywhere else if used) introduce this inline style:
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4" style="margin-top: 0 !important;">
Solution for whitespace: Remove margin-top styling applied to the div class="row mt-4" inside div class="container-fluid".
.mt-4 {
margin-top: 1.5rem!important; /*remove this*/
}
I have a shopping cart and it displays how many items are in the cart. It will go up by one if you press 'Add to cart' and will go down by one when you press 'remove'. I have a bug that does this.. When I press each 'remove' button it will take away different types of amounts from the 'total number' depending on which 'remove' button I click, and I want each button to only take away one number on each click event
CODE:
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="/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">
<script src="app.js"async></script>
</head>
<body>
<div class="wrapper">
<div class="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="overlay"></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>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</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;
}
.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;
}
.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: 160vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
}
.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;
}
JAVSCRIPT:
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')
cartbtn.addEventListener('click', function(){
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function(){
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault(){
let qinput = document.getElementsByClassName('qinput')
for(let i = 0; i < qinput.length; i++){
qinput[i].value= 1;
}
}
InputToDefault()
function RemoveItem(){
for (i = 0; i < removebtn.length; i++){
let rbutton = removebtn[i];
rbutton.addEventListener("click", function (){
//HERRE IS THE ISSUE.... HERE IS THE ISSUE...
let TotalNumbervalue = TotalNumber.innerText
if(TotalNumbervalue > 0){
// console.log(TotalNumbervalue)
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}
}
RemoveItem()
function AddItemtoCart(){
for (i = 0; i < Atc.length; i++){
let button = Atc[i];
button.addEventListener("click", function (){
let TotalNumbervalue = TotalNumber.innerHTML
if(TotalNumbervalue > -1){
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].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)
qinput.value = 1
InputToDefault()
RemoveItem()
})
}
}
AddItemtoCart()
I didn't go through the rest of your code, but the way you're creating the Remove item event listeners doesn't really make sense. Why call a function when you just need run through the loop. The reason why you're not getting the result you expect is because the innerText is a string and you can't do math on strings. Instead, convert it to a number by putting a + in front of it.
for (i = 0; i < removebtn.length; i++) {
let rbutton = removebtn[i];
rbutton.addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText.trim()
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}
removeItem() loops through all remove button elements and adds a click listener that deletes the parent. You call this everytime a new item is added, which means eventually multiple click listeners "stack up" and you have multiple click listeners removing 1 from the total.
Instead, assign the click event listener after appending the element, ensuring only 1 click event listener will be applied
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')
cartbtn.addEventListener('click', function() {
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function() {
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault() {
let qinput = document.getElementsByClassName('qinput')
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
}
}
InputToDefault()
function AddItemtoCart() {
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let TotalNumbervalue = TotalNumber.innerHTML
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].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)
cartitems.lastChild.querySelector('.removebtn').addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText;
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
this.parentElement.parentElement.remove()
})
qinput.value = 1
InputToDefault()
})
}
}
AddItemtoCart()
* {
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;
}
.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;
}
.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: 160vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
}
.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;
}
<!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="/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">
<script src="app.js" async></script>
</head>
<body>
<div class="wrapper">
<div class="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="overlay"></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>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>
NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>
The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp
You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.
I'm try to reach a mousemove triggered by a div, I'm thinking the problem it's on this line of code: [_ $('.mousePointer').css({left:e.pageX, top:e.pageY})_]
because the position of the mouse move it's triggered by the size of the entire page, right?
How can I activate the mousemove on different div and change the img in the pointer on different div?
I hope i can explain the problem. I want to use the mouse move as title of each post
body{
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background-color: #800f62;
}
.headerz{
background-color: grey;
max-height: 120px;
}
.headerz img{
width: 80px;
margin: 10px;
}
.wrapper{
margin-bottom: 100px;
}
.content{
background-color: purple;
min-height: 200px;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.Post_container{
color: white;
margin: 5%;
background-color: #620c75;
min-width: 80%;
min-height: 400px;
border-radius: 10px 10px 10px 10px;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
/*try follower mouse*/
.mousePointer{
width: 50px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
}
/*Fine Mouse Follow*/
footer{
background: #121212;
padding: 5px 0;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
height: 65px;
box-shadow: 0px 0px 08px black;
}
.footer-container{
max-width: 100%;
margin: auto;
padding: 0 20px;
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
}
.social-media{
margin: 20px 0;
}
.social-media a{
color: white;
margin: 20px;
font-size: 33px;
text-decoration: none;
transition: .3s linear;
}
.social-media a:hover{
color: purple;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"> </script>
<link rel="stylesheet" href="DigiArch_may20200.css">
<link rel="stylesheet" href="try.js">
<title>Digital Archive Update May 2020</title>
</head>
<body>
<div class="headerz">
<img src="1E_Alpha.png" alt="">
</div>
<div class="wrapper">
<div class="content">
<div class="mousePointer" ><img src="https://i.ibb.co/sQXKSH1/1e-Alpha.png" alt="1e-Alpha" border="0" style="width:100px"></div>
<script type="text/javascript">
$(document).mousemove(function(e){
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
</script>
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post
</div>
</div>
<div class="content" >
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post1
</div>
</div>
<footer>
<div class="footer-container">
<div class="social-media">
<i class="fab fa-instagram"></i>
<i class="fab fa-soundcloud"></i>
<i class="fab fa-behance"></i>
<i class="fab fa-twitch"></i>
<i class="fab fa-paypal"></i>
</div>
</div>
</footer>
</body>
</html>
The problem is with the document. It's targeting the whole page whereas what you need is to focus it on .Post_container since its the container of your image. That's pretty much it.
$(".Post_container").mousemove(function(e){ //======> replaced document with container class
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
Hope it helps :)