I want to add a circular ripple hover effect on image

I want to add a circular ripple hover effect on image - javascript

I want to add a ripple effect animation when hovering over an image. I have a link which he uses ripple effect on button by using JavaScript which i have no idea how it work but i want to use the same method over an image on my code.
https://codepen.io/ViktorKorolyuk/pen/GYGwpv
Above Link shows the ripple effect on button and below is my code with blur effect with no animation at all.So I just want to add a ripple effect using the same method but on image
<html>
<div class="row">
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
</div>
<!--Second container-->
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
</html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text{
position: relative;
}
.div-with-image-and-text .text {
display:none;
}
.div-with-image-and-text:hover img{
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text{
display: block;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%);
text-align:center;
font-family: 'Muli';
color:white;
font-size: 30px;
text-shadow:0 0 10px gray;
}

this way give you ripple effect without your effect that you give with hover
first make a html file and write this code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
anf after that make a css file behind your html file and write this code in cssFile
index.css
/* #keyframes shake {
25% {
transform: rotate(calc(var(--angle) * -1));
}
50% {
transform: rotate(var(--angle));
}
100% {
transform: rotate(0deg);
}
} */
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER:hover {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}

Simple CSS solution for the Ripple Effect:
A working example: https://next.plnkr.co/edit/i3HhQVIzlbq5QzGM?preview
HTML
<div class="ripple-effect-container">
<img src="https://www.w3schools.com/w3images/wedding.jpg">
</div>
CSS
.ripple-effect-container {
width: 200px;
height: 200px;
background-position: center;
transition: background 0.2s;
background-color: #063458;
}
.ripple-effect-container:hover {
background: #063458 radial-gradient(circle, transparent 1%, #063458 1%) center/15000%;
}
.ripple-effect-container:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
.ripple-effect-container img:hover {
opacity: 0.5;
}
.ripple-effect-container img {
object-fit: contain;
width: 100%;
height: 100%;
transition: 0.2s;
}

Related

My JavaScript won't work before i resize my browser window, and almost all my CSS is working, except for a few lines (idk what's the problem here)

I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn't working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
Sign-Up Now!
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
And here is links.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
Now for the CSS (style.css) :
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}
Here's script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});
Now the problem is that #linksList doesn't seem to change even though I've written the CSS in style.css. What's wrong about it? I can't seem to find anything that could've conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there's the #topnav, the JS won't add the class .transparent when the user scrolled to the #topnav in links.html until the browser's screen was resized (I'm using Chrome). I have no actual clue about what is going on here. Maybe it's just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)

How can I put 2 div classes side by side. The accordian menu (faq) and the user profile cards?

I need to put the profile cards that are in columns right now and put them beside the faq accordian menu. I also need them to stack on mobile. I'm not sure how to execute this idea. Any help is very much appreciated. I will post the HTML and the CSS below. Thank you in advance for any and all help, it is very much appreciated.
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection </h2>
<p>A Colorful, Engaging and Inovating Community.</p>
<br>
<p>These</p>
<br>
<p>Yeti's</p>
<!--PicGridStart-->
<div class="image-grid">
<img class="image-grid-col-2 image-grid-row-2" src="img/PAINT-ANGEL.png" alt="architecture">
<img src="img/B-GUY-ARMOR.jpg" alt="architecture">
<img src="img/Mustard_1.jpg" alt="architecture">
<img src="img/IMG_0125.jpg" alt="architecture">
<img src="img/IMG_0060.jpg" alt="architecture">
</div>
<!--PicGridEnd-->
<!--StartofTimeline-->
<!--EndofTimeline-->
<div class="flex-container">
<div id="column_container">
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Trist</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Dy</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Meg</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
</div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Landon</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Christopher</div>
<div class="fig-author-figure-title">Artist</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Jake</div>
<div class="fig-author-figure-title">Lead Artist</div>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share </p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
<style>
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
#-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}#-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}#keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}#keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
</div>
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
cursor: url("img/cursor.png"), auto !important;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 4em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 3em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
* {
box-sizing: border-box;
}
:root {
--fir-font-article: "adobe-garamond-pro", "Times New Roman", Times;
--fir-font-header: "foco", Helvetica;
--fir-blue-twitter-alpha: rgba(85, 172, 238, 0.6);
--fir-color-grey: rgba(0, 0, 0, 0.4);
}
.fir-clickcircle {
height: 80px;
width: 80px;
border-radius: 100px;
cursor: pointer;
}
.fir-image-figure {
margin: 0;
display: flex;
align-items: center;
margin-bottom: 40px;
position: relative;
text-decoration: none;
}
.fir-image-figure .caption,
.fir-image-figure figcaption {
padding-left: 15px;
}
html.wf-active .fir-image-figure .fig-author-figure-title {
font-family: var(--fir-font-header);
font-size: 16px;
}
.fir-image-figure .fig-author-figure-title {
color: var(--fir-color-grey);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 15px;
margin-top: 2px;
color: #fff;
}
.fir-imageover {
position: relative;
display: flex;
}
.fir-imageover-color {
height: 80px;
width: 80px;
position: absolute;
background: var(--fir-blue-twitter-alpha);
background-image: none;
border-radius: 100px;
cursor: pointer;
transition: background 0.3s ease-in-out;
animation: fadeInFadeOut 4s infinite;
top: 0;
left: 0;
}
.fir-imageover-image {
position: absolute;
top: 0;
left: 0;
animation: fadeInFadeOut 4s infinite;
}
#keyframes fadeInFadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
#column_container {
width: 959px;
margin: 0 auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-grid {
--gap: 16px;
--num-cols: 4;
--row-height: 300px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-grid-col-2 {
grid-column: span 2;
}
.image-grid-row-2 {
grid-row: span 2;
}
/* Anything udner 1024px */
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}

This will do what you are asking. Keep in mind it will look a bit a mess because your images won't resolve in my snippet.
Basically all that is changed is that I added to #column_container a grid layout supporting two columns, then closed the two columns in a new div, and then the second column is populated by accordion, and then I added a media query that changes from grid to flex for viewports of 720px or less, so the columns become stacked.
Run snippet then 'full page' and scale browser and everything should work as expected.
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
cursor: url("img/cursor.png"), auto !important;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 4em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 3em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
* {
box-sizing: border-box;
}
:root {
--fir-font-article: "adobe-garamond-pro", "Times New Roman", Times;
--fir-font-header: "foco", Helvetica;
--fir-blue-twitter-alpha: rgba(85, 172, 238, 0.6);
--fir-color-grey: rgba(0, 0, 0, 0.4);
}
.fir-clickcircle {
height: 80px;
width: 80px;
border-radius: 100px;
cursor: pointer;
}
.fir-image-figure {
margin: 0;
display: flex;
align-items: center;
margin-bottom: 40px;
position: relative;
text-decoration: none;
}
.fir-image-figure .caption,
.fir-image-figure figcaption {
padding-left: 15px;
}
html.wf-active .fir-image-figure .fig-author-figure-title {
font-family: var(--fir-font-header);
font-size: 16px;
}
.fir-image-figure .fig-author-figure-title {
color: var(--fir-color-grey);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 15px;
margin-top: 2px;
color: #fff;
}
.fir-imageover {
position: relative;
display: flex;
}
.fir-imageover-color {
height: 80px;
width: 80px;
position: absolute;
background: var(--fir-blue-twitter-alpha);
background-image: none;
border-radius: 100px;
cursor: pointer;
transition: background 0.3s ease-in-out;
animation: fadeInFadeOut 4s infinite;
top: 0;
left: 0;
}
.fir-imageover-image {
position: absolute;
top: 0;
left: 0;
animation: fadeInFadeOut 4s infinite;
}
#keyframes fadeInFadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
#column_container {
/* width: 959px; */
margin: 0 auto;
grid-column: 1 / -1;
grid-gap: 48px;
display: grid;
grid-template-columns: auto auto;
align-items: flex-start;
flex-direction: column;
}
#media (max-width:720px) {
#column_container {
width: 100%;
margin: 0 auto;
display: flex;
}
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-grid {
--gap: 16px;
--num-cols: 4;
--row-height: 300px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid>img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-grid-col-2 {
grid-column: span 2;
}
.image-grid-row-2 {
grid-row: span 2;
}
/* Anything udner 1024px */
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection </h2>
<p>A Colorful, Engaging and Inovating Community.</p>
<br>
<p>These</p>
<br>
<p>Yeti's</p>
<!--PicGridStart-->
<div class="image-grid">
<img class="image-grid-col-2 image-grid-row-2" src="img/PAINT-ANGEL.png" alt="architecture">
<img src="img/B-GUY-ARMOR.jpg" alt="architecture">
<img src="img/Mustard_1.jpg" alt="architecture">
<img src="img/IMG_0125.jpg" alt="architecture">
<img src="img/IMG_0060.jpg" alt="architecture">
</div>
<!--PicGridEnd-->
<!--StartofTimeline-->
<!--EndofTimeline-->
<div class="flex-container">
<div id="column_container">
<div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Trist</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Dy</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Meg</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
</div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Landon</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Christopher</div>
<div class="fig-author-figure-title">Artist</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Jake</div>
<div class="fig-author-figure-title">Lead Artist</div>
</figcaption>
</figure>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share </p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function () {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top = -value * -0.5 + 'px';
header.style.top = -value * -0.5 + 'px';
mountains_front.style.top = -value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e) => {
let clickedLi;
if (e.target.classList.contains("question-arrow")) {
clickedLi = e.target.parentElement;
} else {
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
</div>
</body>
</html>

Content inside div with fixed position just can scroll half of content

I have a sidebar with a position fixed that can vertically scroll. But why when I scroll it, I just can scroll to half of the content of the sidebar I cant scroll until to the bottom of the sidebar.
As you can see in the first pic, there's still text follow us, but I cant scroll anymore. the second image is the image of the full sidebar
First image
second image
$(document).ready(function () {
//OPEN FOR SIDEBAR MOBILE
$(".toggle-menu button").click(function () {
$(".menu-list-container").addClass("show");
$(".menu-list").css("width", "275px");
$(".notify").addClass("hide");
$(".livetv").addClass("hide");
$(".close-mobile").css("display", "block");
});
//SCRIPT FOR CLOSING SIDEBAR MOBILE
$(".close-mobile").click(function () {
$(".menu-list-container").removeClass("show");
$(".menu-list").css("width", "0px");
$(".notify").removeClass("hide");
$(".livetv").removeClass("hide");
$(".close-mobile").css("display", "none");
})
})
/* SCSS */
.navbar-mobile {
position: sticky;
top: 0;
right: 0;
left: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: $white;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
z-index: 100;
.toggle-menu {
position: relative;
width: 10%;
}
.logo {
width: 50%;
position: relative;
img {
position: absolute;
transform: translateY(-18px);
max-width: 134px;
}
}
.navbar-right {
width: 40%;
display: flex;
flex-flow: row nowrap;
div {
width: calc(200px - 20px);
}
.livetv {
a {
color: $black;
text-decoration: none;
text-align: center;
img {
display: block;
margin: 0 auto;
}
span {
display: block;
font: $small;
}
}
}
.notify {
position: relative;
button {
position: absolute;
top: -50%;
transform: translateY(25px);
background: none;
border: none;
}
}
.close-mobile {
display: none;
position: relative;
button {
background: none;
border: none;
position: absolute;
right: 32px;
top: 12px;
}
}
}
.menu-list-container {
position: relative;
max-width: 275px;
height: auto;
.menu-list {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 0px;
//width: 275px;
overflow-y: scroll;
background-color: $white;
transition: ease-out 300ms;
z-index: 1;
.header {
background: url("../../asset/header.png") no-repeat;
background-size: cover;
color: $white;
.flex {
position: relative;
display: flex;
flex-flow: row nowrap;
.image-container {
display: flex;
justify-content: center;
align-items: center;
img {
width: 65px;
height: 65px;
border-radius: 8px;
border: solid 2px $white;
}
}
.header-info {
width: auto;
p {
font: $heading6;
}
a {
color: $white;
opacity: 0.7;
text-decoration: none;
}
}
}
}
.form-search {
position: relative;
border-bottom: solid 1px $gray1;
input {
width: 100%;
height: 50px;
border: solid 1px $gray3;
border-radius: 8px;
}
button {
position: absolute;
top: 37px;
right: 30px;
background: none;
border: none;
}
}
.menu-content {
border-bottom: solid 1px $gray1;
ul {
list-style: none;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
li {
a {
color: $black;
text-decoration: none;
}
}
.live-tv {
a {
color: $secondary;
font: $heading4;
}
}
.live-tv:before {
content: url("../../asset/icons/livetv-icon.svg");
position: relative;
top: 2px;
}
.foryou::before {
content: url("../../asset/icons/check.svg");
position: relative;
top: 2px;
}
.saved::before {
content: url("../../asset/icons/save.svg");
position: relative;
top: 2px;
}
.tv-schedule::before {
content: url("../../asset/icons/check.svg");
position: relative;
}
.livetv-regular::before {
content: url("../../asset/icons/livetv.svg");
position: relative;
}
.brandconnect::before {
content: url("../../asset/icons/brandconnect.svg");
position: relative;
}
li:last-child {
margin-bottom: 0 !important;
}
}
}
.program {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
margin-block-start: 0;
}
ul {
padding-inline-start: 0;
margin-block-end: 0;
margin-block-start: 0;
list-style: none;
li {
display: flex;
.image {
width: 48px;
border-radius: 8px;
img {
width: 100%;
object-fit: cover;
border-radius: 8px;
}
}
.image:last-child {
background-color: $gray1;
}
.pl-20 {
width: 70%;
a {
color: $black;
text-decoration: none;
}
}
}
li:last-child {
.image {
display: flex;
justify-content: center;
align-items: center;
background-color: $gray1;
border-radius: 50%;
height: 48px;
img {
width: auto !important;
}
}
a {
font: $heading4;
}
}
}
}
}
.social {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
}
.social-list {
display: flex;
flex-flow: row nowrap;
.social-item {
width: calc(100px - 20px);
height: 43.75px;
border-radius: 50%;
img {
display: block;
position: absolute;
margin: 0 auto;
transform: translate(13px, -7px);
}
}
.facebook img {
transform: translate(15px, -11px) !important;
}
.social-item:last-child {
margin-right: 0 !important;
}
}
}
.signout {
a {
color: $black;
text-decoration: none;
}
a:before {
content: url("../../asset/icons/signout.svg");
position: relative;
}
}
}
.show {
visibility: visible !important;
}
.hide {
visibility: hidden !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-mobile">
<div class="toggle-menu pl-10">
<button type="button" class="btn">
<img src="../asset/icons/menu.svg" alt="menu icon" />
</button>
</div>
<div class="logo">
<a href="#">
<img src="../asset/logo.png" alt="logo" />
</a>
</div>
<div class="navbar-right">
<div class="livetv pr-20">
<a href="livetv.html">
<img src="../asset/icons/livetv.svg" alt="live tv" />
<span>Live TV</span>
</a>
</div>
<div class="notify">
<button type="button">
<img src="../asset/icons/bell-black.svg" alt="notify icon" />
</button>
</div>
<div class="close-mobile">
<button type="button">
<img src="../asset/icons/close-black.png" alt="close-icon" />
</button>
</div>
</div>
<div class="menu-list-container">
<div class="menu-list">
<div class="header p-20">
<div class="flex">
<div class="image-container">
<img src="../asset/avatar.png" alt="avatar" />
</div>
<div class="header-info pl-20">
<p>muhammad Rojali hernandez</p>
<span><img src="../asset/icons/" ></span>Setting
</div>
</div>
</div>
<form class="form-search pt-20 pb-20 ml-20 mr-20" method="post">
<input type="text" name="search" required />
<button type="submit">
<img src="../asset/icons/search-icon.svg" alt="Search Icon" />
</button>
</form>
<div class="menu-content pt-20 pb-20 ml-20 mr-20">
<ul>
<li class="live-tv mb-20">
<a class="pl-10" href="livetv.html">LIVE TV</a>
</li>
<li class="foryou mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="saved mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="program pt-20 pb-20 ml-20 mr-20">
<p>PROGRAM</p>
<ul>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program4.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Kick Andy
</div>
</li>
<li class="browse">
<div class="image">
<img src="../asset/icons/add.svg" alt="browse icon" />
</div>
<div class="pl-20 pt-10">
Browse Program
</div>
</li>
</ul>
</div>
<div class="menu-content pt-30 pb-30 ml-20 mr-20">
<ul>
<li class="tv-schedule mb-20">
<a class="pl-10" href="livetv.html">TV Schedule</a>
</li>
<li class="livetv-regular mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="brandconnect mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="social mt-30 mb-30 ml-20 mr-20">
<p>FOLLOW US</p>
<div class="social-list">
<div class="social-item facebook mr-20">
<a href="#">
<img src="../asset/icons/facebook.svg" alt="facebook icon" />
</a>
</div>
<div class="social-item twitter mr-20">
<a href="#">
<img src="../asset/icons/twitter.svg" alt="twitter icon" />
</a>
</div>
<div class="social-item instagram mr-20">
<a href="#">
<img src="../asset/icons/instagram.svg" alt="instagram icon" />
</a>
</div>
<div class="social-item youtube mr-20">
<a href="#">
<img src="../asset/icons/youtube.svg" alt="youtube icon" />
</a>
</div>
</div>
</div>
<div class="signout pt-30 pb-30 ml-20 mr-20">
Sign Out
</div>
</div>
</div>
</nav>

How can I have my search check for objects on other pages but display on the current page

Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>

Overlap issue in html card

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

Develop Reference

JavaScript is the programming language of the Web.

I want to add a circular ripple hover effect on image - javascript

Related

My JavaScript won't work before i resize my browser window, and almost all my CSS is working, except for a few lines (idk what's the problem here)

How can I put 2 div classes side by side. The accordian menu (faq) and the user profile cards?

Content inside div with fixed position just can scroll half of content

How can I have my search check for objects on other pages but display on the current page

Overlap issue in html card

Categories

Resources