On click x remove class on y - javascript

I need to close (remove class .active) when clicking on .btn.
There probably is a conflict because also clicking on .item.
It only works on clicking on an other .item.
$(".item").on("click", function() {
$(".item").removeClass("active");
$(this).addClass("active");
});
//$(".btn").on("click", function(){
// $(".item").removeClass("active");
//});
$(".btn").on("click", function() {
$(this).parent(".item").removeClass("active");
});
* {
box-sizing: border-box;
transition: 0.5s;
margin: 0;
padding: 0;
}
.clear {
clear: both;
height: 0;
}
.wrap {
padding: 20px;
background: #eee;
color: #fff;
}
.btn {
display: block;
line-height: 100px;
position: relative;
z-index: 100;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.btn:hover {
background: #f00;
}
.item {
position: relative;
float: left;
margin: 2px;
width: 100px;
height: 100px;
text-align: center;
background: purple;
overflow: hidden;
}
.item.active {
overflow: visible;
width: 200px;
height: 200px;
}
.large {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.active .large {
width: 200px;
height: 200px;
background: red;
opacity: 1;
z-index: 10;
}
.close {
position: absolute;
opacity: 0;
right: 8px;
bottom: 8px;
width: 16px;
height: 16px;
text-align: center;
background: black;
cursor: pointer;
font-family: Arial;
font-size: 11px;
}
.active .close {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="item">
<h2 class="btn">item 1</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 2</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 3</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 4</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 5</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 6</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 7</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="clear"></div>
</div>


You need to prevent the default action in one of the buttons, otherwise both actions will be executed (the opener and the close action). Return false on any jQuery event will prevent default action and stop propagation of the event.
Check my example, i changed the close button action to the span.close elements:
$(".item").on("click", function(){
$(".item").not($(this)).removeClass("active");
$(this).addClass("active");
});
$(".close").on("click", function(){
$(this).closest(".item.active").removeClass("active");
return false;
});
*{box-sizing:border-box; transition:0.5s; margin:0; padding:0;}
.clear{clear:both; height:0;}
.wrap{padding:20px; background:#eee; color:#fff;}
.btn{display:block; line-height:100px; position:relative; z-index:100; font-size:14px; text-align:center; cursor:pointer;}
.btn:hover{background:#f00;}
.item{position:relative; float:left; margin:2px; width:100px; height:100px; text-align:center; background:purple; overflow:hidden;}
.item.active{overflow:visible; width:200px; height:200px;}
.large{width:100px; height:100px; position:absolute; left:0; top:0; opacity:0;}
.active .large{width:200px; height:200px; background:red; opacity:1; z-index:10;}
.close{position:absolute; opacity:0; right:8px; bottom:8px; width:16px; height:16px; text-align:center; background:black; cursor:pointer; font-family:Arial; font-size:11px;}
.active .close{opacity:1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="item">
<h2 class="btn">item 1</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 2</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 3</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 4</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 5</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 6</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 7</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="clear"></div>
</div>


Prevent the bubbling of the event to the parent "item". Use event.stopPropagation:
$(".btn").on("click", function(e){
$(this).parent(".item").removeClass("active");
e.stopPropagation();
});
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
Of course the way you designed it, the parent will never receive the clicks..


What about a toggling approach?
$(".item").on("click", function(){
$(".item").removeClass("active");
$(this).toggleClass("active");
});
https://jsfiddle.net/hw15pq6c/1/

Related

HTML/CSS Nav Bar Not Responding Correctly

I'm somewhat new to more involved web design, if you can really call it that!
I seem to be having some issues with my navigation bar.
It seems to work on all my sections apart from one, the about section.
I've included all the CSS code since I think this is where the problem is.
$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('.top-nav').toggleClass('open');
});
$('.top-nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('.top-nav').removeClass('open');
});
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("#js-menu").toggleClass('active');
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#up").on("click", function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
/*Start global*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #e9e9e9;
}
body{
width: 100%;
height: 100%;
background: url("images/sitebg.jpg") no-repeat center fixed;
background-size: cover;
text-align: center;
}
section{
padding: 6rem 0;
}
a{
text-decoration: none;
color: #e9e9e9;
}
p{
font-weight: 300;
font-size: 1.8rem;
}
img{
width: 100%;
}
/*End global*/
/*Start reusable*/
.container{
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
padding: .3rem;
}
.section-heading{
text-align: center;
margin-bottom: 2.5rem;
}
.section-heading h1{
font-size: 3.5rem;
color: black;
text-transform: uppercase;
font-weight: 300;
position: relative;
margin-bottom: 1rem;
}
.section-heading h1::before,
.section-heading h1::after{
content: '';
position: absolute;
bottom: -5rem;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.75);
}
.section-heading h1::before{
width: 10rem;
height: 3px;
border-radius: 0.8rem;
bottom: -4.5rem;
}
.section-heading h6{
font-size: 1.6rem;
font-weight: 300;
}
.has-margin-right{
margin-right: 5rem;
}
/*End reusable*/
/*Start header*/
header{
width: 100%;
height: 100%;
}
.top-nav{
width: 100%;
height: 100vh;
position: fixed;
top: -100vh;
z-index: 50;
background-color: #16162d;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
transition: all 650ms cubic-bezier(1, 0, 0, 1);
}
.nav-list{
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li{
margin: 0.2rem;
}
#font-face {
font-family: 'The Historia Demo';
src: url('/fonts/the_historia_demo-webfont.woff2') format('woff2'),
url('fonts/the_historia_demo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.nav-link{
font-family:"The Historia Demo", sans-serif;
font-size: 5rem;
padding: 1rem;
}
.nav-link:hover,
.nav-link:focus{
background: linear-gradient(to top, #ffe838, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.top-nav.open{
top: 0;
border-radius: initial;
}
.menu-toggler{
position: absolute;
top: 5rem;
right: 5rem;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1500;
transition: transform 650ms ease-out;
}
.menu-toggler.open{
transform: rotate(-45deg);
}
.bar{
background: linear-gradient(to right, #ffe838, #fd57bf);
width: 100%;
height: 4px;
border-radius: .8rem;
}
.bar.half{
width: 50%;
}
.bar.start{
transform-origin: right;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.start{
transform: rotate(-450deg) translateX(.8rem);
}
.bar.end{
align-self: flex-end;
transform-origin: left;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.end{
transform: rotate(-450deg) translateX(-.8rem);
}
.landing-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
z-index: 1;
}
.landing-text h1{
font-size: 15rem;
font-weight: 500;
font-family: "The Historia Demo", sans-serif;
background: linear-gradient(to top, #ffe838 30%, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem;
user-select: none;
line-height: 1.1;
}
.landing-text h6{
font-size: 2rem;
font-weight: 300;
margin-bottom: 0.4rem;
}
.landingbtn {
margin: 1rem auto;
background-color:#16162d;
height: 3rem;
width: 15rem;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
text-transform: capitalize;
opacity: 0.5;
}
.landingbtn p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
}
.landingbtn:hover {
transform: scale(1.05);
background-color: #221e3f;
}
/*End header*/
/*Start about*/
.about .container{
display: flex;
align-items: center;
justify-content: center;
margin-top: 60rem;
}
.about-heading{
text-align: center;
text-transform: uppercase;
line-height: 0;
margin-bottom: 6rem;
}
.about-heading h1{
font-size: 10rem;
opacity: .3;
}
.about-heading h6{
font-size: 2rem;
font-weight: 300;
}
.profile-img{
flex: 1;
margin-right: 5rem;
}
.about-details{
flex: 1;
}
.social-media{
margin-top: 5rem;
}
.social-media i{
font-size: 5rem;
transition: color 650ms;
padding: 1rem;
}
.fa-linkedin:hover{
color: #0e76a8;
}
.fa-github:hover{
color: #211F1F;
}
.fa-soundcloud:hover{
color: #ff7700;
}
/*End about*/
/*Start services*/
.my-skills{
margin-top: 3.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
text-align: center;
}
<body>
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="landing-text">
<h1>Karanvir S. Ghatt</h1>
<h6>Full Stack Developer | Scientist | Artist </h6>
<h6> I Am
<a href="" class="typewrite" data-period="2000" data-type='[ " Creative.", " Driven.", " Analytical." ]'>
<span class="wrap"></span>
</a>
</h6>
<a class="landingbtn" href="#portfolio">
<p> See my work </p>
</a>
</div>
</header>
<section id="about" class="about">
<div class="container">
<div class="prolife-img" data-aos="fade-right" data-aos-delay="200">
<img src="images/profile(1).png" alt="avatar image">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="400">
<div class="about-heading">
<h1>About</h1>
</div>
<p>
A confident individual offering skills in a range of areas,
from anlytical and formulation chemistry to, web development,
backend, hospitality and sales.
Self-taught full stack developer, offering skills in web-design,
python, data science and analysis.
</p>
<div class="social-media">
<ul class="nav-list">
<li>
<a href="#" class="icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-soundcloud"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="section-heading">
<h1 data-aos="zoom-in" data-aos-delay="100">Services</h1>
<h6 data-aos="zoom-in" data-aos-delay="100">What I Can Do For You</h6>
</div>
<div class="my-skills">
<div class="skill" data-aos="fade-left" data-aos-delay="300">
<div class="icon-container">
<i class="fas fa-code"></i>
</div>
<h1>Design & Development</h1>
<p>
Good web design is more thanjust pixelated information.
It should be seamless, it should be invisible.
In my hands, every project is bespoke and tailored to your specific needs and requirements.
In a few short months I have developed and deployed a number of websites, find our more in my portfolio.
</p>
</div>
<div class="skill" data-aos="fade-in" data-aos-delay="150">
<div class="icon-container">
<i class="fa fa-cogs"></i>
</div>
<h1>Design & Deployment</h1>
<p>
Over the last few months I have devloped my python skills, developing a number of applications,
and sucessfully depolying a few. I am drawn to data analysis and visulation, data can truly be beautiful.
Although not an expert, far from it, I am working everyday to expand my skillset.
What I have developed so far, in a short period of time, can show what I can do.
</p>
</div>
<div class="skill" data-aos="fade-right" data-aos-delay="300">
<div class="icon-container">
<i class="fa fa-dashboard"></i>
</div>
<h1>Versitility</h1>
<p>
I take pride in having a versitile skill-set, from sales, to business, to programming, to life sciences, to music and creative design.
Those 'soft-skils', and my exposiure to a range of feilds and industries, means that I'm sure there's some way I can be of service.
These are more words, included to make this look right.
</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading" data-aos="zoom-in" data-aos-delay="100">
<h1 data-aos="fade-right" data-aos-delay="150">Portfolio</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Veiw Recent Projects</h6>
</div>
</div>
<div class="row" data-aos="fade-down" data-aos-delay="200">
<!-- Portfolio Item 1 | AB Removals -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="1">
<img src="/images/abremovals.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 1</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 2 | Resume -->
<div class="portfolio-container">
<div class="item" id="2">
<img src="/images/resume.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 2</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 3 | Resume -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="3">
<img src="/images/portfolio.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 3</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 4 | Data Projects -->
<div class="portfolio-container">
<div class="item" id="4">
<img src="/images/covid.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 4</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 5 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="5">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 5</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 6 | Face Detection -->
<div class="portfolio-container">
<div class="item" id="6">
<img src="/images/testgiftwo.gif" alt="">
<div class="text">
<h3>PROJECT 6</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 7 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="7">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 7</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 8 | Colour Detection -->
<div class="portfolio-container">
<div class="item" id="8">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 8</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="preview" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="details">
<h3 id="title"></h3>
<p id="info">SOME TEXT</p>
<div class="button" id="live">View</div>
<i class="fab fa-github-square" id="github"></i>
</div>
</div>
</div>
<!-- Item End -->
</section>
<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-left" data-aos-delay="150">Work Experience</h1>
<h6 data-aos="fade-right" data-aos-delay="150">Previous Roles</h6>
</div>
<div class="timeline" data-aos="fade-down" data-aos-delay="200">
<ul>
<li class="date" data-date="Oct 2018 - Dec 2019">
<h1>Mettler Toledo | Sales Coordinator</h1>
<p>
The key aim of this role was to sell or introduce new corporate products or services to
established clients, along with prospecting for new business, the generation and qualification of sales leads.
Management of project execution actions and overall coordination between Internal and Outside Sales departments,
along with key stakeholders both inside, and beyond the business.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>Vape.ABox | Flavourist - Lead Chemist</h1>
<p>
Set up and maintenance of the analytical laboratory on site, along with product procurement.
Demonstration of creation leadership potential through commercial projects & their execution.
Creation of new flavors and re-formulation of current flavours, with regards to specific technologies and delivery systems.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>3M | QC Inhilations Chemist</h1>
<p>
Testing of pharmaceutical products for batch release, stability and complaints in line with departmental
and site procedures across a number of departments.
Completion of work and documentation to standards of compliance designated by external regulatory
bodies and internal Company procedures.
</p>
</li>
<h2>Further information regarding my work experience can be found in my Resume</h2>
</ul>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-right" data-aos-delay="150">Contact</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Contact Me</h6>
</div>
<form actions="" data-aos="fade-up" data-aos-delay="200">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name..." required>
<label for="name">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your E-mail..." required>
<label for="number">Contact Number:</label>
<input type="number" id="number" name="number" placeholder="Enter Your Contact Number...">
<label for="message">Message:</label>
<textarea name="subject" id="subject" cols="10" rows="10" placeholder="Enter Your Messgage..."></textarea>
<input type="submit" value="Subit">
</form>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa fa-chevron-up"></i>
</div>
<p>© 2020 Karanvir S. Ghattoraya</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script src="main.js"></script>
</body>
</html>
Any insight would be greatly appreciated!!

You have the .container of about section with margin-top: 60rem;
so technically the anchor point is working but its position is at the
top of the document :(
To avoid this, you can change the position:absolute of the .landing-text to default value and the about section it will go down .landing-text with no margin-top to simulate its position. I hope this can help you.
Here is the code:
(Run code snippet with full page to see the solution)
$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('.top-nav').toggleClass('open');
});
$('.top-nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('.top-nav').removeClass('open');
});
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("#js-menu").toggleClass('active');
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#up").on("click", function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
/*Start global*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #e9e9e9;
}
body{
width: 100%;
height: 100%;
background: url("images/sitebg.jpg") no-repeat center fixed;
background-size: cover;
text-align: center;
}
section{
padding: 6rem 0;
}
a{
text-decoration: none;
color: #e9e9e9;
}
p{
font-weight: 300;
font-size: 1.8rem;
}
img{
width: 100%;
}
/*End global*/
/*Start reusable*/
.container{
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
padding: .3rem;
}
.section-heading{
text-align: center;
margin-bottom: 2.5rem;
}
.section-heading h1{
font-size: 3.5rem;
color: black;
text-transform: uppercase;
font-weight: 300;
position: relative;
margin-bottom: 1rem;
}
.section-heading h1::before,
.section-heading h1::after{
content: '';
position: absolute;
bottom: -5rem;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.75);
}
.section-heading h1::before{
width: 10rem;
height: 3px;
border-radius: 0.8rem;
bottom: -4.5rem;
}
.section-heading h6{
font-size: 1.6rem;
font-weight: 300;
}
.has-margin-right{
margin-right: 5rem;
}
/*End reusable*/
/*Start header*/
header{
width: 100%;
height: 100%;
}
.top-nav{
width: 100%;
height: 100vh;
position: fixed;
top: -100vh;
z-index: 50;
background-color: #16162d;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
transition: all 650ms cubic-bezier(1, 0, 0, 1);
}
.nav-list{
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li{
margin: 0.2rem;
}
#font-face {
font-family: 'The Historia Demo';
src: url('/fonts/the_historia_demo-webfont.woff2') format('woff2'),
url('fonts/the_historia_demo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.nav-link{
font-family:"The Historia Demo", sans-serif;
font-size: 5rem;
padding: 1rem;
}
.nav-link:hover,
.nav-link:focus{
background: linear-gradient(to top, #ffe838, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.top-nav.open{
top: 0;
border-radius: initial;
}
.menu-toggler{
position: absolute;
top: 5rem;
right: 5rem;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1500;
transition: transform 650ms ease-out;
}
.menu-toggler.open{
transform: rotate(-45deg);
}
.bar{
background: linear-gradient(to right, #ffe838, #fd57bf);
width: 100%;
height: 4px;
border-radius: .8rem;
}
.bar.half{
width: 50%;
}
.bar.start{
transform-origin: right;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.start{
transform: rotate(-450deg) translateX(.8rem);
}
.bar.end{
align-self: flex-end;
transform-origin: left;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.end{
transform: rotate(-450deg) translateX(-.8rem);
}
.landing-text{
width: 100%;
}
.landing-text h1{
font-size: 15rem;
font-weight: 500;
font-family: "The Historia Demo", sans-serif;
background: linear-gradient(to top, #ffe838 30%, #fd57bf );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem;
user-select: none;
line-height: 1.1;
}
.landing-text h6{
font-size: 2rem;
font-weight: 300;
margin-bottom: 0.4rem;
}
.landingbtn {
margin: 1rem auto;
background-color:#16162d;
height: 3rem;
width: 15rem;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
text-transform: capitalize;
opacity: 0.5;
}
.landingbtn p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
}
.landingbtn:hover {
transform: scale(1.05);
background-color: #221e3f;
}
/*End header*/
/*Start about*/
.about .container{
display: flex;
align-items: center;
justify-content: center;
}
.about-heading{
text-align: center;
text-transform: uppercase;
line-height: 0;
margin-bottom: 6rem;
}
.about-heading h1{
font-size: 10rem;
opacity: .3;
}
.about-heading h6{
font-size: 2rem;
font-weight: 300;
}
.profile-img{
flex: 1;
margin-right: 5rem;
}
.about-details{
flex: 1;
}
.social-media{
margin-top: 5rem;
}
.social-media i{
font-size: 5rem;
transition: color 650ms;
padding: 1rem;
}
.fa-linkedin:hover{
color: #0e76a8;
}
.fa-github:hover{
color: #211F1F;
}
.fa-soundcloud:hover{
color: #ff7700;
}
/*End about*/
/*Start services*/
.my-skills{
margin-top: 3.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
text-align: center;
}
<body>
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="landing-text">
<h1>Karanvir S. Ghatt</h1>
<h6>Full Stack Developer | Scientist | Artist </h6>
<h6> I Am
<a href="" class="typewrite" data-period="2000" data-type='[ " Creative.", " Driven.", " Analytical." ]'>
<span class="wrap"></span>
</a>
</h6>
<a class="landingbtn" href="#portfolio">
<p> See my work </p>
</a>
</div>
<section id="about" class="about">
<div class="container">
<div class="prolife-img" data-aos="fade-right" data-aos-delay="200">
<img src="images/profile(1).png" alt="avatar image">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="400">
<div class="about-heading">
<h1>About</h1>
</div>
<p>
A confident individual offering skills in a range of areas,
from anlytical and formulation chemistry to, web development,
backend, hospitality and sales.
Self-taught full stack developer, offering skills in web-design,
python, data science and analysis.
</p>
<div class="social-media">
<ul class="nav-list">
<li>
<a href="#" class="icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-soundcloud"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="section-heading">
<h1 data-aos="zoom-in" data-aos-delay="100">Services</h1>
<h6 data-aos="zoom-in" data-aos-delay="100">What I Can Do For You</h6>
</div>
<div class="my-skills">
<div class="skill" data-aos="fade-left" data-aos-delay="300">
<div class="icon-container">
<i class="fas fa-code"></i>
</div>
<h1>Design & Development</h1>
<p>
Good web design is more thanjust pixelated information.
It should be seamless, it should be invisible.
In my hands, every project is bespoke and tailored to your specific needs and requirements.
In a few short months I have developed and deployed a number of websites, find our more in my portfolio.
</p>
</div>
<div class="skill" data-aos="fade-in" data-aos-delay="150">
<div class="icon-container">
<i class="fa fa-cogs"></i>
</div>
<h1>Design & Deployment</h1>
<p>
Over the last few months I have devloped my python skills, developing a number of applications,
and sucessfully depolying a few. I am drawn to data analysis and visulation, data can truly be beautiful.
Although not an expert, far from it, I am working everyday to expand my skillset.
What I have developed so far, in a short period of time, can show what I can do.
</p>
</div>
<div class="skill" data-aos="fade-right" data-aos-delay="300">
<div class="icon-container">
<i class="fa fa-dashboard"></i>
</div>
<h1>Versitility</h1>
<p>
I take pride in having a versitile skill-set, from sales, to business, to programming, to life sciences, to music and creative design.
Those 'soft-skils', and my exposiure to a range of feilds and industries, means that I'm sure there's some way I can be of service.
These are more words, included to make this look right.
</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading" data-aos="zoom-in" data-aos-delay="100">
<h1 data-aos="fade-right" data-aos-delay="150">Portfolio</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Veiw Recent Projects</h6>
</div>
</div>
<div class="row" data-aos="fade-down" data-aos-delay="200">
<!-- Portfolio Item 1 | AB Removals -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="1">
<img src="/images/abremovals.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 1</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 2 | Resume -->
<div class="portfolio-container">
<div class="item" id="2">
<img src="/images/resume.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 2</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 3 | Resume -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="3">
<img src="/images/portfolio.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 3</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 4 | Data Projects -->
<div class="portfolio-container">
<div class="item" id="4">
<img src="/images/covid.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 4</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 5 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="5">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 5</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 6 | Face Detection -->
<div class="portfolio-container">
<div class="item" id="6">
<img src="/images/testgiftwo.gif" alt="">
<div class="text">
<h3>PROJECT 6</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 7 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="7">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 7</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 8 | Colour Detection -->
<div class="portfolio-container">
<div class="item" id="8">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 8</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="preview" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="details">
<h3 id="title"></h3>
<p id="info">SOME TEXT</p>
<div class="button" id="live">View</div>
<i class="fab fa-github-square" id="github"></i>
</div>
</div>
</div>
<!-- Item End -->
</section>
<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-left" data-aos-delay="150">Work Experience</h1>
<h6 data-aos="fade-right" data-aos-delay="150">Previous Roles</h6>
</div>
<div class="timeline" data-aos="fade-down" data-aos-delay="200">
<ul>
<li class="date" data-date="Oct 2018 - Dec 2019">
<h1>Mettler Toledo | Sales Coordinator</h1>
<p>
The key aim of this role was to sell or introduce new corporate products or services to
established clients, along with prospecting for new business, the generation and qualification of sales leads.
Management of project execution actions and overall coordination between Internal and Outside Sales departments,
along with key stakeholders both inside, and beyond the business.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>Vape.ABox | Flavourist - Lead Chemist</h1>
<p>
Set up and maintenance of the analytical laboratory on site, along with product procurement.
Demonstration of creation leadership potential through commercial projects & their execution.
Creation of new flavors and re-formulation of current flavours, with regards to specific technologies and delivery systems.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>3M | QC Inhilations Chemist</h1>
<p>
Testing of pharmaceutical products for batch release, stability and complaints in line with departmental
and site procedures across a number of departments.
Completion of work and documentation to standards of compliance designated by external regulatory
bodies and internal Company procedures.
</p>
</li>
<h2>Further information regarding my work experience can be found in my Resume</h2>
</ul>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-right" data-aos-delay="150">Contact</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Contact Me</h6>
</div>
<form actions="" data-aos="fade-up" data-aos-delay="200">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name..." required>
<label for="name">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your E-mail..." required>
<label for="number">Contact Number:</label>
<input type="number" id="number" name="number" placeholder="Enter Your Contact Number...">
<label for="message">Message:</label>
<textarea name="subject" id="subject" cols="10" rows="10" placeholder="Enter Your Messgage..."></textarea>
<input type="submit" value="Subit">
</form>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa fa-chevron-up"></i>
</div>
<p>© 2020 Karanvir S. Ghattoraya</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script src="main.js"></script>
</body>
</html>

$(document).ready(function () {
$('.menu-toggler').on('click', function () {
$(this).toggleClass('open');
$('.top-nav').toggleClass('open');
});
$('.top-nav .nav-link').on('click', function () {
$('.menu-toggler').removeClass('open');
$('.top-nav').removeClass('open');
});
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("#js-menu").toggleClass('active');
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 500);
});
$("#up").on("click", function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
color: #e9e9e9;
}
body {
text-align: center;
}
section {
padding: 6rem 0;
}
a {
text-decoration: none;
color: #e9e9e9;
}
p {
font-weight: 300;
font-size: 1.8rem;
}
img {
width: 100%;
}
/*End global*/
/*Start reusable*/
.container {
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
padding: .3rem;
}
.section-heading {
text-align: center;
margin-bottom: 2.5rem;
}
.section-heading h1 {
font-size: 3.5rem;
color: black;
text-transform: uppercase;
font-weight: 300;
position: relative;
margin-bottom: 1rem;
}
.section-heading h1::before,
.section-heading h1::after {
content: '';
position: absolute;
bottom: -5rem;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.75);
}
.section-heading h1::before {
width: 10rem;
height: 3px;
border-radius: 0.8rem;
bottom: -4.5rem;
}
.section-heading h6 {
font-size: 1.6rem;
font-weight: 300;
}
.has-margin-right {
margin-right: 5rem;
}
/*End reusable*/
/*Start header*/
header {
width: 100%;
height: 100%;
}
.top-nav {
width: 100%;
height: 100vh;
position: fixed;
top: -100vh;
z-index: 50;
background-color: #16162d;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
transition: all 650ms cubic-bezier(1, 0, 0, 1);
}
.nav-list {
list-style: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li {
margin: 0.2rem;
}
#font-face {
font-family: 'The Historia Demo';
src: url('/fonts/the_historia_demo-webfont.woff2') format('woff2'), url('fonts/the_historia_demo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.nav-link {
font-family: "The Historia Demo", sans-serif;
font-size: 2rem;
padding: 1rem;
}
.nav-link:hover,
.nav-link:focus {
background: linear-gradient(to top, #ffe838, #fd57bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.top-nav.open {
top: 0;
border-radius: initial;
}
.menu-toggler {
position: absolute;
top: 5rem;
right: 5rem;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1500;
transition: transform 650ms ease-out;
}
.menu-toggler.open {
transform: rotate(-45deg);
}
.bar {
background: linear-gradient(to right, #ffe838, #fd57bf);
width: 100%;
height: 4px;
border-radius: .8rem;
}
.bar.half {
width: 50%;
}
.bar.start {
transform-origin: right;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.start {
transform: rotate(-450deg) translateX(.8rem);
}
.bar.end {
align-self: flex-end;
transform-origin: left;
transition: transform 650ms cubic-bezier(0.54, -0.81, 0.057, 0.57);
}
.open .bar.end {
transform: rotate(-450deg) translateX(-.8rem);
}
.landing-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
z-index: 1;
}
.landing-text h1 {
font-size: 5rem;
font-weight: 500;
font-family: "The Historia Demo", sans-serif;
background: linear-gradient(to top, #ffe838 30%, #fd57bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem;
user-select: none;
line-height: 1.1;
}
.landing-text h6 {
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 0.4rem;
}
.landingbtn {
margin: 1rem auto;
background-color: #16162d;
height: 3rem;
width: 15rem;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 1rem;
display: flex;
justify-content: center;
text-transform: capitalize;
opacity: 0.5;
}
.landingbtn p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
font-size: 2rem;
}
.landingbtn:hover {
transform: scale(1.05);
background-color: #221e3f;
}
/*End header*/
/*Start about*/
.about .container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 60rem;
}
.about-heading {
text-align: center;
text-transform: uppercase;
line-height: 0;
margin-bottom: 6rem;
}
.about-heading h1 {
font-size: 10rem;
opacity: .3;
}
.about-heading h6 {
font-size: 2rem;
font-weight: 300;
}
.profile-img {
flex: 1;
margin-right: 5rem;
}
.about-details {
flex: 1;
}
.social-media {
margin-top: 5rem;
}
.social-media i {
font-size: 5rem;
transition: color 650ms;
padding: 1rem;
}
.fa-linkedin:hover {
color: #0e76a8;
}
.fa-github:hover {
color: #211F1F;
}
.fa-soundcloud:hover {
color: #ff7700;
}
/*End about*/
/*Start services*/
.my-skills {
margin-top: 3.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
text-align: center;
}
#media only screen and (max-width: 600px) {
.nav-list {
display: block;
}
.nav-list{
margin-top: 48%;
margin-left: -7%;
}
.nav-list li{
margin-top: 10px;
}
.menu-toggler { width: 4rem;
height: 3rem;right: 4rem;}
.landing-text h1 {
font-size: 3rem; margin-bottom: 20px;}
.landingbtn { width: 10rem;}
.landingbtn p{font-size: 24px;}
.about-details{margin-left: -27%;}
.about-heading h1 {
font-size: 6rem;}
}
<body>
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav">
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="landing-text">
<h1>Karanvir S. Ghatt</h1>
<h6>Full Stack Developer | Scientist | Artist </h6>
<h6> I Am
<a href="" class="typewrite" data-period="2000" data-type='[ " Creative.", " Driven.", " Analytical." ]'>
<span class="wrap"></span>
</a>
</h6>
<a class="landingbtn" href="#portfolio">
<p> See my work </p>
</a>
</div>
</header>
<section id="about" class="about">
<div class="container">
<div class="prolife-img" data-aos="fade-right" data-aos-delay="200">
<img src="images/profile(1).png" alt="avatar image">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="400">
<div class="about-heading">
<h1>About</h1>
</div>
<p>
A confident individual offering skills in a range of areas,
from anlytical and formulation chemistry to, web development,
backend, hospitality and sales.
Self-taught full stack developer, offering skills in web-design,
python, data science and analysis.
</p>
<div class="social-media">
<ul class="nav-list">
<li>
<a href="#" class="icon-link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" class="icon-link">
<i class="fab fa-soundcloud"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="section-heading">
<h1 data-aos="zoom-in" data-aos-delay="100">Services</h1>
<h6 data-aos="zoom-in" data-aos-delay="100">What I Can Do For You</h6>
</div>
<div class="my-skills">
<div class="skill" data-aos="fade-left" data-aos-delay="300">
<div class="icon-container">
<i class="fas fa-code"></i>
</div>
<h1>Design & Development</h1>
<p>
Good web design is more thanjust pixelated information.
It should be seamless, it should be invisible.
In my hands, every project is bespoke and tailored to your specific needs and requirements.
In a few short months I have developed and deployed a number of websites, find our more in my portfolio.
</p>
</div>
<div class="skill" data-aos="fade-in" data-aos-delay="150">
<div class="icon-container">
<i class="fa fa-cogs"></i>
</div>
<h1>Design & Deployment</h1>
<p>
Over the last few months I have devloped my python skills, developing a number of applications,
and sucessfully depolying a few. I am drawn to data analysis and visulation, data can truly be beautiful.
Although not an expert, far from it, I am working everyday to expand my skillset.
What I have developed so far, in a short period of time, can show what I can do.
</p>
</div>
<div class="skill" data-aos="fade-right" data-aos-delay="300">
<div class="icon-container">
<i class="fa fa-dashboard"></i>
</div>
<h1>Versitility</h1>
<p>
I take pride in having a versitile skill-set, from sales, to business, to programming, to life sciences, to music and creative design.
Those 'soft-skils', and my exposiure to a range of feilds and industries, means that I'm sure there's some way I can be of service.
These are more words, included to make this look right.
</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading" data-aos="zoom-in" data-aos-delay="100">
<h1 data-aos="fade-right" data-aos-delay="150">Portfolio</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Veiw Recent Projects</h6>
</div>
</div>
<div class="row" data-aos="fade-down" data-aos-delay="200">
<!-- Portfolio Item 1 | AB Removals -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="1">
<img src="/images/abremovals.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 1</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 2 | Resume -->
<div class="portfolio-container">
<div class="item" id="2">
<img src="/images/resume.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 2</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 3 | Resume -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="3">
<img src="/images/portfolio.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 3</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 4 | Data Projects -->
<div class="portfolio-container">
<div class="item" id="4">
<img src="/images/covid.png" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 4</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 5 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="5">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 5</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 6 | Face Detection -->
<div class="portfolio-container">
<div class="item" id="6">
<img src="/images/testgiftwo.gif" alt="">
<div class="text">
<h3>PROJECT 6</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Portfolio Item 7 | Colour Detection -->
<div class="column">
<div class="portfolio-container">
<div class="item" id="7">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 7</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
<!-- Portfolio Item 8 | Colour Detection -->
<div class="portfolio-container">
<div class="item" id="8">
<img src="/images/testimage.gif" style="width:100%" alt="">
<div class="text">
<h3>PROJECT 8</h4>
<p>Short Description</p>
</div>
<div class="button">Learn More</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="preview" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="details">
<h3 id="title"></h3>
<p id="info">SOME TEXT</p>
<div class="button" id="live">View</div>
<i class="fab fa-github-square" id="github"></i>
</div>
</div>
</div>
<!-- Item End -->
</section>
<section class="experience" id="experience">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-left" data-aos-delay="150">Work Experience</h1>
<h6 data-aos="fade-right" data-aos-delay="150">Previous Roles</h6>
</div>
<div class="timeline" data-aos="fade-down" data-aos-delay="200">
<ul>
<li class="date" data-date="Oct 2018 - Dec 2019">
<h1>Mettler Toledo | Sales Coordinator</h1>
<p>
The key aim of this role was to sell or introduce new corporate products or services to
established clients, along with prospecting for new business, the generation and qualification of sales leads.
Management of project execution actions and overall coordination between Internal and Outside Sales departments,
along with key stakeholders both inside, and beyond the business.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>Vape.ABox | Flavourist - Lead Chemist</h1>
<p>
Set up and maintenance of the analytical laboratory on site, along with product procurement.
Demonstration of creation leadership potential through commercial projects & their execution.
Creation of new flavors and re-formulation of current flavours, with regards to specific technologies and delivery systems.
</p>
</li>
<li class="date" data-date="Mar 2018 - Jan 2019">
<h1>3M | QC Inhilations Chemist</h1>
<p>
Testing of pharmaceutical products for batch release, stability and complaints in line with departmental
and site procedures across a number of departments.
Completion of work and documentation to standards of compliance designated by external regulatory
bodies and internal Company procedures.
</p>
</li>
<h2>Further information regarding my work experience can be found in my Resume</h2>
</ul>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-heading">
<h1 data-aos="fade-right" data-aos-delay="150">Contact</h1>
<h6 data-aos="fade-left" data-aos-delay="150">Contact Me</h6>
</div>
<form actions="" data-aos="fade-up" data-aos-delay="200">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Your Name..." required>
<label for="name">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Your E-mail..." required>
<label for="number">Contact Number:</label>
<input type="number" id="number" name="number" placeholder="Enter Your Contact Number...">
<label for="message">Message:</label>
<textarea name="subject" id="subject" cols="10" rows="10" placeholder="Enter Your Messgage..."></textarea>
<input type="submit" value="Subit">
</form>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa fa-chevron-up"></i>
</div>
<p>© 2020 Karanvir S. Ghattoraya</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
</body>

jquery to flip cards onClick rather than css hover rotate

I am newbie JS and jquery so take it easy on me! lol....I'm using Bootstrap to make a layout using cards. As of now I have the cards flipping on a hover which works good but I think I would rather the cards flip back and forth on clicks. I have tried giving the cards a class of flip and using toggleclass but am not having any luck. Any advice would be greatly appreciated! Thanks!
.book-card {
position: relative;
box-shadow: 5px 15px 50px #aaa;
max-width: 420px;
overflow: hidden;
transition: all .8s;
}
.rotate {
perspective: 100rem;
}
.back {
position: absolute;
top: -100%;
background: #fefefe;
height: 100%;
width: 100%;
opacity: 0;
user-select: none;
pointer-events: none;
transform: rotateY(180deg);
transition: top .8s, opacity .4s;
}
.back-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.back-content p {
color: #111517;
}
.back-content h1 {
font-size: 30px !important;
}
.back-content h3 {
font-size: 25px !important;
}
.back-content a {
font-size: 30px;
padding-left: 3px;
}
.rotate:hover .book-card {
transform: rotateY(180deg);
}
.rotate:hover .back {
opacity: 1;
top: 0;
user-select: auto;
pointer-events: auto;
}
<div class="col-xl-3 col-lg-4 col-sm-8 rotate">
<div class="card text-center mb-3 book-card mx-auto">
<div class="card-header">
<h4 class="font-weight-light">TBD - <em>HRG</em></h4>
</div>
<div class="card-body">
<img src="/images/girl-two.png" class="img-fluid rounded">
</div>
<div class="card-footer">
Portland, ME
</div>
<div class="back">
<div class="back-content">
<h1 class="text-uppercase font-weight-light font-italic">Portland, ME</h1>
<h3 class="mb-3">4:45pm</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos veniam</p>
<img src="images/linklong.png">
</div>
</div>
</div>
</div>
Should I remove the hover rotate css?

You can do somthing like this..
`.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
position: absolute;
}`
$('.flip').click(function(){ //hover can be used
$(this).find('.card').toggleClass('flipped');
});
body{
padding-top:50px;
background: #555;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
background-color: #fff;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .front img{
width: 270px;
height: 100%;
}
.flip .card .img {
position: relaitve;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
position: absolute;
}
.inner{
margin:0px !important;
width: 270px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

z-index image not showing when used next prev button like image gallery using jquery

$(document).ready(function(){
$(".divs div.panel").each(function(e) {
if (e > 2)
$(this).hide();
console.log(e);
});
$("#next").click(function(){
if ($(".divs div.panel:visible:last").next().length != 0){
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:first").hide();
$(".divs div.panel:visible:first").hide();
}
else {
//either hide the next button or show 1st two again. :)
}
return false;
});
$("#prev").click(function(){
if ($(".divs div.panel:visible:first").prev().length != 0){
var curVisLen = $(".divs div.panel:visible").length;
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:last").hide();
if(curVisLen == 3){
$(".divs div.panel:visible:last").hide();
}
}
else {
// either hide the button or show last two divs
// $(".divs div.panel:visible").hide();
// $(".divs div.panel:last").show();
}
return false;
});
});
body{
background-color: grey;
}
.dash-img-dv{
position: absolute;
width: 170px;
height: 221px;
-moz-box-shadow: inset 5px -59px 63px 4px #5642BE;
-webkit-box-shadow: inset 5px -59px 63px 4px #5642BE;
box-shadow: inset 5px -59px 63px 4px #5642BE;
}
.dash-img-dv img {
width: 170px;
height: 221px;
position: relative;
z-index: -1;
}
.dash-img-dv-ttle{
position: relative;
width: 153px;
height: 50px;
color: #fff;
margin-left: 16px;
margin-top: 167px;
z-index: 1;
}
.panel{
display: inline-block;
margin-left: 10px;
}
.gallery {
background: #CCC;
position: relative;
margin: 0 auto;
padding-top: 22px;
}
.prev-next-button {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
background: #5642BE;
transform: translateY(-50%);
}
.prev-next-button a{
color: #fff;
position: absolute;
left: 28%;
top: 21%;
}
.previous { left: -16px; }
.next { right: -16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<div class="divs">
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title1</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title2</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title3</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title4</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title5</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title6</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title7</p>
</div>
</div>
</div>
<!-- <a id="prev">prev</a>
<a id="next">next</a> -->
<div class="prev-next-button previous">
<a id="prev"><span class="fa fa-chevron-left"></span></a>
</div>
<div class="prev-next-button next">
<a id="next"><span class="fa fa-chevron-right"></span></a>
</div>
</div>
I want to show my next previous div with images using jquery. I tried something like bellow.Everything is almost fine but problem is now that the images is not showing. Is there any z-index problem or something like that? I could not find the reason why images are not showing. Would anyone please help me to show the images?Here is the image bellow before write the script

The negative z-index on the image will push it behind everything else on the page that isn't positioned. Add a z-index to .panel so that the negative z-index on the image doesn't push it behind .panel and keeps it between .panel and the element with the inner box shadow you want it to appear below.
$(document).ready(function(){
$(".divs div.panel").each(function(e) {
if (e > 2)
$(this).hide();
console.log(e);
});
$("#next").click(function(){
if ($(".divs div.panel:visible:last").next().length != 0){
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:last").next().show();
$(".divs div.panel:visible:first").hide();
$(".divs div.panel:visible:first").hide();
}
else {
//either hide the next button or show 1st two again. :)
}
return false;
});
$("#prev").click(function(){
if ($(".divs div.panel:visible:first").prev().length != 0){
var curVisLen = $(".divs div.panel:visible").length;
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:first").prev().show();
$(".divs div.panel:visible:last").hide();
if(curVisLen == 3){
$(".divs div.panel:visible:last").hide();
}
}
else {
// either hide the button or show last two divs
// $(".divs div.panel:visible").hide();
// $(".divs div.panel:last").show();
}
return false;
});
});
body{
background-color: grey;
}
.dash-img-dv{
position: absolute;
width: 170px;
height: 221px;
-moz-box-shadow: inset 5px -59px 63px 4px #5642BE;
-webkit-box-shadow: inset 5px -59px 63px 4px #5642BE;
box-shadow: inset 5px -59px 63px 4px #5642BE;
}
.dash-img-dv img {
width: 170px;
height: 221px;
position: relative;
z-index: -1;
}
.dash-img-dv-ttle{
position: relative;
width: 153px;
height: 50px;
color: #fff;
margin-left: 16px;
margin-top: 167px;
z-index: 1;
}
.panel{
display: inline-block;
margin-left: 10px;
position: relative;
z-index: 1;
}
.gallery {
background: #CCC;
position: relative;
margin: 0 auto;
padding-top: 22px;
}
.prev-next-button {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
background: #5642BE;
transform: translateY(-50%);
}
.prev-next-button a{
color: #fff;
position: absolute;
left: 28%;
top: 21%;
}
.previous { left: -16px; }
.next { right: -16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<div class="divs">
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title1</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title2</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title3</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title4</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title5</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title6</p>
</div>
</div>
<div class="panel">
<div class="dash-img-dv">
<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
</div>
<div class="dash-img-dv-ttle">
<p>This is title7</p>
</div>
</div>
</div>
<!-- <a id="prev">prev</a>
<a id="next">next</a> -->
<div class="prev-next-button previous">
<a id="prev"><span class="fa fa-chevron-left"></span></a>
</div>
<div class="prev-next-button next">
<a id="next"><span class="fa fa-chevron-right"></span></a>
</div>
</div>

FTScroller - not fixing scroll to the bottom

On my project I have a list of items with FTScroller plugin implemented. However when I scroll to the bottom of this list, the scroll don't fixes on that position.
How can I solve this? What I'm doing wrong?
HTML
<div class="container">
<div id="boxesScroll">
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">A</span>
</div>
<div class="box-count">
<span class="description">Item A</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">B</span>
</div>
<div class="box-count">
<span class="description">Item B</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">C</span>
</div>
<div class="box-count">
<span class="description">Item C</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">D</span>
</div>
<div class="box-count">
<span class="description">Item D</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">E</span>
</div>
<div class="box-count">
<span class="description">Item E</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">F</span>
</div>
<div class="box-count">
<span class="description">Item F</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">G</span>
</div>
<div class="box-count">
<span class="description">Item G</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
var scrollBehaviours = {
scrollingY: true,
scrollingX: false,
alwaysScroll: true,
scrollbars: true
};
var scrollerPartidos = new FTScroller(document.getElementById('boxesScroll'), scrollBehaviours);
});
CSS
.container
{
width: 195px;
display: inline-block;
vertical-align: top;
height: 200px;
position: relative;
overflow: hidden;
white-space: nowrap;
float: initial;
background: lightblue;
}
#boxesScroll
{
position: absolute;
overflow: hidden;
width: 100%;
}
.boxItem
{
float: initial;
border: 0px!important;
display: block;
padding: 15px;
background: white;
margin: 10px;
cursor: pointer;
}
.boxItem .box-icon {
float: left;
padding-top: 5px;
}
.boxItem .box-icon span.roundedDescIcon {
padding: 8px;
border-radius: 50%;
border: 1px solid #ced5de;
background: #f7f9fb;
}
.boxItem .box-count {
padding: 0px 10px;
width: calc(100% - 50px);
display: inline-block;
vertical-align: top;
}
.boxItem .box-count .description {
font-size: 17px;
line-height: 30px;
vertical-align: middle;
float: left;
width: 100%;
}
.ftscroller_scrollbary,
.ftscroller_scrollbarx {
-moz-opacity: .2;
-khtml-opacity: .2;
-webkit-opacity: .2;
opacity: .2;
-ms-filter: alpha(opacity=.2 * 100);
filter: alpha(opacity=.2 * 100);
}
JSFiddle example

You need the height in ftscroller element
#boxesScroll
{
width: 100%;
height: 200px;
position: absolute;
overflow: hidden;
}

How to darken and add text to images on hover?

Ive tried multiple methods, but nothing seems to be working.
Ive recently stumbled upon this http://codepen.io/VectorQuanity/pen/qEeJoK, but when i try to implement it into my code, the text doesn't pop up on hover.
My code :
$(".pic").hover(function() {
$(".info", this).css("display", "block");
}, function() {
$(".info", this).css("display", "none");
});
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding: 10px 0;
}
nav {
list-style-type: none;
}
.pic {
position: relative;
display: inline-block;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:99.5%;
left: 0;
background-color:#000;
opacity:0.5;
z-index: 100;
display: block;
}
.info {
display: none;
position: absolute;
top: 100px;
left: 0;
text-align: center;
}
footer{
background: black;
color: white;
padding: 40px 0;
bottom: 0;
width: 100%;
z-index: -1;
font-family: 'Source Code Pro';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul>
<li>Home</li>
<li>Shop</li>
<li class="logo">Gullible</li>
<li>Visit</li>
<li>Contact</li>
</ul>
<div class="pic">
<img src="http://i.stack.imgur.com/cjj0l.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/cjj0l.jpg">
<p class="text">Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/fgwPb.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/fgwPb.jpg">
<p class="text">Batman</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/b8VTt.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/b8VTt.jpg">
<p class="text">Joker</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/rTZPO.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/rTZPO.jpg">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/7aHn3.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/7aHn3.jpg">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/JOzEN.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/JOzEN.jpg">
<p class="text">Bane</p>
</div>
</div>
<footer>
<h2>Gullible</h2>
<nav>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</nav>
</footer>
</body>
</html>

There are quite a few things in your code that could be improved. For example, you don't even need ANY JavaScript at all to achieve what you're looking for.
Check out the improved code below (which fixes your issue)!
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding: 10px 0;
}
nav ul {
list-style-type: none;
}
.pic {
position: relative;
display: inline-block;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:99.5%;
left: 0;
background-color:#000;
opacity:0.5;
display: block;
}
.pic:hover .info {
display: block;
}
footer{
background: black;
color: white;
padding: 40px 0;
bottom: 0;
width: 100%;
z-index: -1;
font-family: 'Source Code Pro';
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li class="logo">Gullible</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="pic">
<img src="http://i.stack.imgur.com/cjj0l.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/fgwPb.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Batman</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/b8VTt.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Joker</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/rTZPO.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/7aHn3.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/JOzEN.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<footer>
<h2>Gullible</h2>
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</footer>

Categories