footer with background image half in it - javascript

I have designed a footer for a website using Figma which looks like the image provided below:
see design Picture below
design image
Added working example
#f-text{
font-size: 14px;
color: #ffffff;
}
#footer-head{
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text{
color: #818181;
font-size:17px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer mt-5" style="width:100%; padding-top: 100px; padding-bottom:40px; margin-top: 75px; position:absolute; background-color: #0C0C0C">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</footer>
I need help with turning my design into working code.

Since you need the "background-image" to extend beyond the footer you cannot use background-image property on the footer itself.
Use a pseudo-element absolutely positioned and place the background image on that.
E.g.
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: flex-end;
}
footer {
margin: 0 auto;
position: relative;
width: 80%;
height: 50vh;
background: black;
}
footer::after {
content: "";
width: 20vw;
height: 20vw;
background-image: url(http://www.fillmurray.com/460/460);
background-size: contain;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
z-index: -1
}
<footer>
</footer>

#f-text {
font-size: 14px;
color: #ffffff;
}
#footer-head {
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text {
color: #818181;
font-size: 17px;
}
footer {
position: relative;
}
.footer-main {
width: 90%;
padding-top: 100px;
padding-bottom: 40px;
margin-top: 75px;
background-color: #0C0C0C;
}
.img-styling {
position: absolute;
right: 0;
top: 35px;
z-index: -1;
width: 30%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<div class="footer-main">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</div>
<img class="img-styling" src="https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2014/materialdesign_principles_metaphor.png" alt="image" />
</div>

Related

Repeating the same action on multiple elements

So I've got some code for a drop-down infobox and it has some Javascripts attached to it. It works perfectly but I'm now trying to duplicate it for a second box below, but I'm getting a few bugs.
In order to duplicate this, do I just copy and paste the script and HTML and change:
handleClick() to handleClick2()
drop_down to drop_down2
product_section to product_section2
or is there an easier way to attaching the same Javascript to two boxes?
var show = false;
const handleClick = () => {
const element = document.querySelector(".drop_down");
const product = document.querySelector(".product_section");
if (!show) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show = false;
}
};
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down" onclick="handleClick()">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
body {
box-sizing: border-box;
background-color: #f7f7f7;
font-family: montserrat, sans-serif;
}
.box {
position: relative;
width: 80vw;
margin: 0 auto;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgba(78, 137, 175, 0.15);
line-height: 28px;
font-size: 20px;
text-align: left;
}
.ranked {
position: absolute;
left: -25px;
top: -25px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.badge_one {
width: 52px;
height: 52px;
background-color: #00113d;
border-radius: 50%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.badge_two {
width: 82px;
height: 32px;
background-color: #e7cd60;
border-radius: 20px;
margin-right: 5px;
margin-left: -20px;
color: black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
font-size: 12px;
text-align: center;
padding-left: 10px;
}
.product_image {
width: 160px;
height: 100px;
padding: 40px 20px;
}
.overview_section {
display: flex;
flex-direction: column;
justify-content: center;
width: 55%;
}
.title {
color: #8f2e53;
margin-bottom: 10px;
cursor: pointer;
}
.title:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.company {
color: #001143;
font-weight: 700;
margin-bottom: 15px;
cursor: pointer;
}
.company:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.hide { display: none;
}
.drop_down {
font-size: 18px;
font-weight: 500;
color: #8f2e53;
margin-top: 5px;
cursor: pointer;
text-transform: capitalize;
}
.drop_down:hover {
text-decoration-color: #e7cd60;
}
.price_section {
border-left: 1px solid rgba(78, 137, 175, 0.15);
width: 30%;
/* min-width: 130px; */
margin-left: 25px;
display: flex;
flex-direction: column;
margin-top: 5px;
}
.section_one,
.section_two {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.price {
font-size: 35px;
font-weight: 500;
line-height: 35px;
color: #78c02a;
margin-bottom: 0;
}
.price span {
font-size: 25px;
font-weight: 100;
padding-left: 5px;
}
.btn_block {
width: 100%;
padding: 0 20px;
margin: 10px 0;
text-align: center;
}
.btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 18px 60px;
cursor: pointer;
}
.btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.btn:focus {
outline: 0;
}
.btn_label {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.35px;
text-transform: uppercase;
}
.info_one {
color: #999;
cursor: pointer;
font-family: noto sans, sans-serif;
font-size: 14px;
margin-top: 5px;
text-transform: capitalize;
}
.info_two {
color: #17baef;
text-decoration: none;
}
.product_section {
display: none;
width: 81vw;
margin: 0 auto;
border-radius: 4px;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
}
.product_info {
border-top: 2px solid #e7cd60;
padding: 25px 50px 25px 70px;
background-color: #e9f5fd;
}
.heading {
font-weight: 500;
font-family: montserrat, sans-serif;
padding: 10px 0;
color: #00113d;
text-transform: capitalize;
font-size: 22px;
}
.features {
color: #00113d !important;
list-style: none;
}
.feature_item {
line-height: 1.5;
font-weight: 300;
font-family: montserrat, sans-serif;
margin: 20px 0;
font-size: 16px;
cursor: pointer;
}
.feature_item:hover {
color: #638043;
transition: all 0.3s ease-in-out;
}
.feature_item i {
color: #78c02a;
}
.divider {
width: 100%;
height: 1px;
margin: 25px 0;
background-color: #e9e9e9;
}
.deals {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
margin-top: 10px;
}
.deal_item {
display: flex;
flex-direction: column;
align-items: center;
}
.product_logo {
max-width: 70px;
max-height: 40px;
}
.product_price {
height: 40px;
display: flex;
line-height: 1.1;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin: 20px 0;
font-family: "Montserrat", sans-serif;
}
.product_price small {
margin: 0 auto;
font-size: 12px;
}
.product_btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 15px;
cursor: pointer;
}
.product_btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.product_btn:focus {
outline: 0;
}
#media only screen and (max-width: 776px) {
.box {
width: 90vw;
position: relative;
flex-direction: column;
margin: 0px auto;
}
.ranked {
left: 15px;
top: 15px;
}
.product_image {
align-self: flex-end;
}
.company {
order: -1;
}
.price_section {
width: 100%;
margin-left: 0px;
}
.section_one {
flex-direction: row;
justify-content: space-between;
padding-left: 10px;
}
.section_two {
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 10px;
}
.info_one {
visibility: hidden;
}
.info_two {
font-size: 15px;
}
.btn_block {
/* width: 40% !important; */
width: 40vw;
}
.btn {
padding: 9px 30px;
}
.overview_section {
width: 100%;
margin: 0 10px;
}
.drop_down {
width: 90vw;
position: absolute;
bottom: -45px;
left: 0;
padding: 10px;
text-align: center;
background-color: #e9f5fd;
color: #1f1740;
font-weight: 900;
text-transform: uppercase;
}
.product_section {
width: 93vw;
}
.product_info {
padding: 20px 5px;
}
.heading {
padding: 10px 0 5px 0px;
font-size: 20px;
}
.features {
margin-left: 5px;
}
.feature_item {
margin: 10px 0;
font-size: 14px;
}
.divider {
margin: 15px 0;
}
.deals {
margin-top: 5px;
}
.product_logo {
max-width: 60px;
max-height: 30px;
margin-top: 5px;
}
.product_price {
font-size: 16px;
margin: 10px 0;
}
.product_btn {
padding: 10px 10px;
}
}
You need to delegate from the outer container
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("drop_down")) {
e.preventDefault();
const parent = tgt.closest(".box").parentNode; // or give the <div style="margin-top: 50px"> a class
const element = parent.querySelector(".drop_down");
const product = parent.querySelector(".product_section");
product.classList.toggle("hide")
element.innerHTML = product.classList.contains("hide") ? `more info <i class="fas fa-angle-down"></i>` :`close <i class="fas fa-angle-up"></i>`;
}
})
.hide { display:none; }
<div id="container">
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section hide">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
Here's a basic concept without the use of inline JavaScript on* handlers.
Use the ::after pseudo to style your buttons
Use a state class like .is-active to style the active button
Use a utility class like .u-none to hide the element
Use data-* attribute to store into it the desired target selector
Use JavaScript .addEventListener() and .classList.toggle()
document
.querySelectorAll('[data-toggle]')
.forEach( btn =>
btn.addEventListener('click', ev =>
{
ev.preventDefault()
const el = ev.currentTarget
, target = el.dataset.toggle
;
el.classList.toggle('is-active')
document.querySelector(target).classList.toggle('u-none')
}
)
)
[data-toggle] {
cursor: pointer;
}
[data-toggle]::after {
font-family: "Font Awesome 5 Free";
font-weight: 900; /* Needed for Font Awesome to work */
content: "\f107";
padding-left: 5px;
}
[data-toggle].is-active::after {
content: "\f106";
}
/* Utility classes */
.u-none {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<a data-toggle="#product_23">More info</a>
<div id="product_23" class="u-none">Product section.....</div>
I would pass an argument id to handleClick and use it like :
"drop_down"+id and "product_section"+id
and call handleClick(1) or handleClick(2)
you'd have to copy-paste the html though.
I hope it helped ^^
Edit :
I'll try to make it more clear and make it look less like a comment.
Explaination:
My suggestion is to make the handleClick() not a function that is unique to one element but make it so that it can depends on multiple elements.
But how?
Well I first changed the var show = false (lign 1) to a var show = [] to make it a set of states instead of a state (one state per element).
I then added an argument named a in the handleClick() giving me const handleClick = (a) => {...}. This a will be the id of the element we want to change.
I then add my a to the selected classes: const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
I change the classes names and function accordingly to the previous step:
<a href="#" class="drop_down drop_down1" onclick="handleClick(1)"> //lign 17
<div class="product_section1"> //lign 41
We now change all the show to show[a] in the javascript file
Conclusion and final code
You'd want to make the href="" so it doesn't go up when you click. So here you go I hope it helped ^^
index.html
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="" class="drop_down1" onclick="handleClick(1)">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section product_section1">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
index.js
var show = [];
const handleClick = (a) => {
const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
if (!show[a]) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show[a] = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show[a] = false;
}
};

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>

Custom tree style in HTML/JS/CSS

I'm trying to create this structure in HTML/CSS and Javascript but I'm having trouble with the lines.
Here's the HTML code:
<div class="okr-container">
<div class="column">
<div class="objective active">
<div class="objective-header">
<span class="objective-title">Building a Foundation</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
<div class="circle"></div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">Doing something</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
</div>
</div>
<div class="column">
<div class="objective">
<div class="objective-header">
<span class="objective-title">REEEEEEEEEE</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
</div>
<div class="objective active">
<div class="objective-header">
<span class="objective-title">Help me please</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
<div class="circle"></div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">REEEEEEEEEE</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">Help me please</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
</div>
</div>
</div>
And here's the CSS:
body {
background-color: #F0F4F5
}
.okr-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.column {
width: 328px;
}
.objective {
width: 280px;
height: 100px;
padding: 10px;
background-color: white;
border: 0.5px solid #BFC5D0;
box-sizing: border-box;
border-radius: 4px;
position: relative;
margin: 16px;
}
.circle {
background: #FFF;
border: 4px solid #09D2C7;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
right: -13px;
top: 35px;
}
.active {
border: 2px solid #09D2C7;
border-radius: 4px;
border-left: 8px solid #09D2C7;
}
.objective-title {
font-family: SF Pro Text;
font-size: 16px;
font-weight: bold;
}
.objective-options {
float: right;
font-weight: bold;
font-size: 20px;
}
.objective-details {
position: absolute;
bottom: 4px;
width: 90%;
}
.objectives-count {
font-family: SF Pro Text;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.02em;
}
.objective-progress {
font-family: SF Pro Display;
font-size: 30px;
line-height: 36px;
/* identical to box height */
float: right;
letter-spacing: 0.02em;
}
Here's what I have made so far on Codepen. I was thinking of using SVG lines but I don't know much about them to proceed in a way where lines would link the right boxes together.
Any help would be greatly appreciated! :)
Thank you!
EDIT: This is not going to be a drag-and-drop thing. Just that when a user clicks a box, it just shows the child DIVs.

How to center a div vertically and horizontally with a checkbox on the top corner of parent div

I am developing an application using VueJS and Bootstrap. I am trying to center a div with an image and at the same time have the checkbox label appear on the top right like this.
But when hovered over the card, the image moves slightly towards it's left, like this:
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
<div v-for="(item, index) in recentFiles" #mouseover="showByIndexRecent = index" #mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
<stats-card>
<div slot="header" class="header-rectangle" >
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div>
<label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="margin-top: 8px;float: right;margin-right: 10px;margin-left: 0px;">
<input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
<i class="form-icon">
</i>
</label>
</div>
<div style="margin-left: 25px;">
<img :src="item.source" style=" height: 50px; margin-top: 50px">
</div>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div class="row" >
<div class="col-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{item.name}}</span>
</div>
<div class="file-size-style" >
<span>{{item.size}} MB</span>
</div>
</div>
<div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>
How to make sure that the div with the image appears center vertically and horizontally with the checkbox aligned to the top right?
I'd love some help on it. Thanks in advance.
You can use bootstrap classes like d-flex, align-items-center, justify-content-center in the image div to center it horizontally and vertically. To position the checkbox at top right, you should add position-relative class in the header-rectangle. In the label you should add style as position: absolute; top: 0; right: 10px, based on your output you can make some little changes to top and right properties values.
<div v-for="(item, index) in recentFiles" #mouseover="showByIndexRecent = index" #mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
<stats-card>
<div slot="header" class="header-rectangle position-relative" >
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div>
<label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="position: absolute; top: 0; right: 10px">
<input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
<i class="form-icon">
</i>
</label>
</div>
<div class="d-flex align-items-center justify-content-center">
<img :src="item.source" style=" height: 50px;">
</div>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div class="row" >
<div class="col-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{item.name}}</span>
</div>
<div class="file-size-style" >
<span>{{item.size}} MB</span>
</div>
</div>
<div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>

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