I've imported particle JS into this html file and other files, instead of the particles being in the background the canvas pushes the other elements to the left of the webpage,can anyone help me out with it? Not sure what I am doing wrong in the css and or html perhaps I need to change the class of the canvas element? Thanks in advance.
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>Quiz - Play</title>
<link rel="stylesheet" href="style.css" />
<script src="/particles.min.js"></script>
<link rel="stylesheet" href="game.css" />
</head>
<body id="particles-js" class="canvas">
<div class="container">
<div id="loader"></div>
<div id="game" class="justify-center flex-column hidden">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">Question</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div id="hud-item">
<p class="hud-prefix">Score</p>
<h1 class="hud-main-text" id="score">0</h1>
</div>
</div>
<h2 id="question"></h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<div class="choice-text" data-number="1"></div>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<div class="choice-text" data-number="2"></div>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<div class="choice-text" data-number="3"></div>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<div class="choice-text" data-number="4"></div>
</div>
</div>
</div>
<script src="/game.js"></script>
<script src="/particles.js"></script>
<script src="/app.js"></script>
</body>
</html>
CSS
.choice-container {
display: flex;
margin-bottom: 0.5rem;
width: 100%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235, 0.25);
background-color: white;
}
.choice-prefix {
padding: 1.5rem 2.5rem;
background-color: var(--color-sec);
color: white;
}
.choice-text {
padding: 1.5rem;
width: 100%;
}
.choice-container:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.correct {
background-color: #28a745;
}
.incorrect {
background-color: #dc3545;
}
/* HUD */
#hud {
display: flex;
justify-content: space-around;
}
.hud-prefix {
text-align: center;
font-size: 2rem;
}
.hud-main-text {
text-align: center;
}
#progressBar {
width: 20rem;
height: 4rem;
border: 0.3rem solid #56a5eb;
margin-top: 1rem;
}
#progressBarFull {
height: 3.4rem;
background-color: #56a5eb;
width: 0%;
}
/* LOADER */
#loader {
border: 1.6rem solid white;
border-radius: 50%;
border-top: 1.6rem solid #56a5eb;
width: 12rem;
height: 12rem;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Related
I need move the Logout "button" for bottom in SideBar menu.
body{
background: #526b62;
}
/* Sidebar */
#sidebar-wrapper{
z-index: 1;
position: absolute;
width: 0px;
height: 100%;
overflow-y: hidden;
background: #1c1c1c;/*#2C3E50;*/
/*border: 2px solid red;*/
/*opacity: 0.9;*/
}
#wrapper.MenuDisplayed #sidebar-wrapper{
animation-duration: 2s;
animation-name: side-wrapper;
width: 250px;
}
#wrapper.MenuDisplayed #page-content-wrapper{
animation-duration: 2s;
animation-name: side-content;
padding-left: 250px;
}
.wrapper-reverse{
animation-duration: 2s;
animation-name: side-wrapper-reverse;
}
.content-reverse{
animation-duration: 2s;
animation-name: side-content-reverse;
padding-left: 0px;
}
#keyframes side-content {
from {
padding-left: 0px;
}
to {
padding-left: 250px;
}
}
#keyframes side-content-reverse {
from {
padding-left: 250px;
}
to {
padding-left: 0px;
}
}
#keyframes side-wrapper {
from {
width: 0px;
}
to {
width: 250px;
}
}
#keyframes side-wrapper-reverse {
from {
width: 250px;
}
to {
width: 0px;
}
}
/* Sidebar styling*/
.title-sidebar{
display: flex;
justify-content: center;
font-size: 2em;
color: #ddd;
margin-top: 10px;
}
.sidebar-nav{
padding: 0;
margin-top: 15px;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
padding: 10px;
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li :hover{
background: skyblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sidebar2.css" >
<style>
#menu-toggle div {
width: 20px;
height: 2px;
background-color: white;
margin: 6px 0;
}
.sidebar-nav{
height: 100%;
}
#a_logout{
}
</style>
</head>
<body>
<div id="wrapper">
<!--SideBar -->
<div id="sidebar-wrapper">
<h1 class='title-sidebar'>Welcome</h1>
<h1 class='title-sidebar'>USER</h1>
<ul class="sidebar-nav">
<li><a href="/" class='btn text-start'>HomePage</a></li>
<li><a href="#" class='btn text-start'>View</a></li>
<li><a href="/logout" id='a_logout' class='btn text-start' >Logout</a></li>
</ul>
</div>
<!--Contents -->
<div id="page-content-wrapper">
<div class="container-fluid ">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-success" id="menu-toggle"><div></div>
<div></div>
<div></div></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqkt
iwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click( function(e){
e.preventDefault();
$("#wrapper.MenuDisplayed #page-content-wrapper").addClass("content-reverse");
$("#wrapper.MenuDisplayed #sidebar-wrapper").addClass("wrapper-reverse");
$("#wrapper").toggleClass("MenuDisplayed");
});
</script>
<!-- Booststrap -->
</body>
</html>
How can I do it?
Add
#a_logout{
width: 100%;
position: absolute;
bottom: 0;
}
Add position:relative in <u>
Add position: absolute in Log-out <li>
Also Add top: calc(100vh - 12rem)
Got 2 problems with my index.html page and I will be thankfull to every person who will help me get rid of it. So, first my responsive nav doesn't work even if the js link is correctly written.
And, my media queries does not have any effect, I want to hide the aside for ipad and mobile users. THANK YOU
let toggle = document.querySelector('.toggle');
let body = document.querySelector('body');
toggle.addEventListener('click', function() {
body.classList.toggle('body');
});
body {
background-color: #C6EFE9;
}
.banner {
width: 100%;
background-image: url(../img/banner.jpg);
background-repeat: no-repeat;
margin-top: 75px;
height: 350px;
background-position: center;
background-attachment: scroll;
}
aside{
max-width: 50%;
float: right;
height: auto;
margin-right: 50%;
text-align: center;
margin: 50px;
padding: 50px;
font: serif;
}
aside li {
list-style: none;
text-align: left;
}
.apercus {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
max-width: 50%;
height: 250px;
margin: 50px;
border: 2px solid rgba(81, 136, 151, 1);
cursor: pointer;
transform: translate3d(10%);
box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
border-radius: 10px;
}
img {
max-width: 50%;
height: 250px;
float: left;
padding-right: 20px;
border-radius: 10px;
}
.texte {
padding: 20px;
font-family: 'Sacramento', cursive;
}
.lien {
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
}
.lien a {
display: block;
}
#media all and (max-width: 600){
aside {
display: none;
}
.apercus {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
max-width: 100px;
height: 200px;
margin: 50px;
border: 2px solid rgba(81, 136, 151, 1);
cursor: pointer;
transform: translate3d(10%);
box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
border-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Page d'accueil</title>
<!------------------------------COMPATIBILITIES------------------------------>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---------------------------------FONTS-------------------------------------->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap" rel="stylesheet">
<!---------------------------------------ICONS------------------------------->
<script src="https://kit.fontawesome.com/2942c11df3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<nav>
<i class="fas fa-pen-alt"></i> Lilaby
<div class="toggle">
<i class="fas fa-bars ouvert"></i>
<i class="fas fa-times ferme"></i>
</div>
<ul class="menu">
<li>Accueil</li>
<li>Blog</li>
<li>Quizs</li>
<li>Outils</li>
<li>Contacts</li>
<li><button class="btn">Connexion</button></li>
</ul>
</nav>
</header>
<div class="banner"></div>
<aside>
<h2>FAQ</h2>
<ul>
<li>Lilaby c'est quoi ? </li>
<br>
<li>Comment prendre RDV ?</li>
<br>
<li>Pourquoi nous ? </li>
<br>
<li>Actulités</li>
<br>
<li>Prochains événements</li>
</ul>
</aside>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/article.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/quiz.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
<div class="apercus">
<div class="lien">
</div>
<div class="image">
<img src="img/outils.jpg" alt="Image de l'article 1">
</div>
<div class="texte">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
</div>
</body>
<script type="text/javascript" href="js/header.js"></script>
</html>
Your forget px on #media all and (max-width: 600), #media all and (max-width: 600px`)
<script> tag place is wrong. Correct Place: <script src="js/header.js"></script> </body>
</html>
Add px on media query.
You are toggling "body" class in js but you don't have ".body" class in css you're using body tag.
Currently the code below will display the last uploaded image as a large image after the submit click event. I want the full-image class to display the first uploaded image instead of the last. Is there a way to display the first uploaded image instead of the last uploaded image. Is there a way to grab the value of the first uploaded image? Any help would be appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link ref="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="fieldset">
<div class="legend">
Your Images
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</div>
<div class="upload_form">
<div class="menu">
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">
<button type="submit" id="delete_btn_1">Delete</button>
</div>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">
<button type="submit" class="delete_btn">Delete</button>
</div>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">
<button type="submit" class="delete_btn">Delete</button>
</div>
<div class="submit-container">
<button type="submit" id="submit_btn">Submit</button>
</div>
</div>
</div>
<div class="container">
<div class="col">
<div class="box thumbnail-one">
<img src="https://http.cat/100" alt="Nature" style="width:100%">
</div>
<div class="box thumbnail-two">
<img src="https://http.cat/405" alt="Snow" style="width:100%">
</div>
<div class="box thumbnail-three">
<img src="https://http.cat/504" alt="Mountains" style="width:100%">
</div>
</div>
<div class="col">
<div class="full-image">
<!-- <span class="closebtn">×</span> -->
<img src="https://http.cat/100" id="expandedImg" />
</div>
</div>
</div>
</body>
</html>
jQuery
<script type="text/javascript">
const menuBtn = document.querySelector('.menu-btn');
const uploadForm = document.querySelector('.upload_form')
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
uploadForm.classList.add('open')
} else {
menuBtn.classList.remove('open');
menuOpen = false;
uploadForm.classList.remove('open');
}
});
$(document).ready(function() {
$('.box').click(function() {
$('.full-image').html($(this).html());
});
$('#delete_btn_1').click(function() {
$(files).val('');
});
$("#submit_btn").on("click", function () {
var files = $("input[type=file]");
files.each(function (e) {
if (this.files && this.files[0]) {
let thumb = $(this).data('thumb');
var reader = new FileReader();
console.log(thumb);
reader.onload = function (e) {
console.log(e);
// let imgOne = $(".thumbnail-one img").attr("src", e.target.result);
$("." + thumb + " img").attr("src", e.target.result);
// I need the line below to access the first uploaded image instead of the last image
$('.full-image img').attr("src", e.target.result);
}
reader.readAsDataURL(this.files[0]);
menuBtn.classList.remove('open');
menuOpen = false;
uploadForm.classList.remove('open');
}
});
$(files).val('');
});
});
</script>
CSS
body {
font-family: 'Poppins', Verdana, Arial, sans-serif;
background-image: linear-gradient(to right, #6441a5, #2a0845);
/* background: purple; */
}
.fieldset {
background-color: lavender;
border: 10px solid darkblue;
border-radius: 20px;
margin: 20px auto;
width: 720px;
}
.legend {
background-color: purple;
border-radius: 10px;
color: white;
padding: 12px;
margin: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.fieldset div {
margin: 10px;
}
label {
display: inline-block;
text-align: right;
vertical-align: top;
width: 200px;
}
.submit-container {
/* width: 100%; */
text-align: right;
}
.container {
width: 60%;
overflow: hidden;
margin: 100px auto;
}
.box {
width: 100px;
height: auto;
padding: 10px;
}
.box {
cursor: pointer;
}
.full-image {
width: 580px;
height: 580px;
padding: 10px;
}
.col {
float: right;
}
.full-image img {
width: 100%;
/* height: 100%; */
}
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.menu-btn {
display: inline-block;
position: relative;
cursor: pointer;
transition: all .5s ease-in-out;
}
.menu-btn__burger {
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-8px);
}
.menu-btn__burger::after {
transform: translateY(8px);
}
/* Animation */
/* We are targeting the middle line here */
.menu-btn.open .menu-btn__burger {
/*Moves off to the left*/
transform: translateX(-50px);
background-color: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.upload_form {
display: none;
transition: display .7s;
}
.upload_form.open {
display: block;
transition: display .7s;
}
I recently made a simon game using JS,HTML5,CSS3 and Bootstrap v4.5.Now the issue occurs on phones i.e. when display of viewport is below 726px.While testing locally on Chrome developer tools the site looks the way I want the website to look.Below is the image on Chrome developer tools
https://www.flickr.com/photos/189671520#N03/50243919798/in/dateposted/
Below is the screenshot of the same page taken on actual pone https://www.flickr.com/photos/189671520#N03/50244763957/in/dateposted/
The key difference is on the edge of each color ,the border radius as well as the border color black is not being applied !. Looking forward for help.
the code for CSS is
body {
text-align: center;
font-family: "Press Start 2P", cursive;
background-color: #011f3f;
color: #fef2bf;
}
.btn {
margin: 3px 0px;
display: inline-block;
height: 210px;
width: 210px;
border: 10px solid black;
border-radius: 20%;
padding: 0px;
}
.btn-close:nth-child(odd) {
text-align: right;
}
.btn-close:nth-child(even) {
text-align: left;
}
.btn-close {
padding: 7px 10.5px;
}
footer {
font-size: 1rem;
margin: 0 0 1% 0;
}
.game-over {
background-color: red;
opacity: 0.8;
}
#level-title {
font-size: 2.85rem;
margin: 2% 5%;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
.simon-rules {
color: #fef2bf;
text-decoration: none;
}
.simon-rules:hover {
color: red;
text-decoration: none;
}
/*****************************************colors*****************************************/
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
#media (max-width: 726px) {
.btn {
margin: 0px;
height: 86px;
width: 86px;
border: 5px solid black;
}
.btn-close {
padding: 5px 2.5px;
}
footer {
margin-bottom: 5%;
}
#level-title {
height: 70px;
font-size: 1.85rem;
margin: 4% 5%;
}
}
the code in HTML is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Simon</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
</head>
<body>
<h1 id="level-title">Press Me To Start</h1>
<div class="container">
<div class="row">
<div class="col-6 btn-close">
<div type="button" id="green" class="btn green"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="red" class="btn red"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<a
href="https://www.youtube.com/watch?v=1Yqj76Q4jJ4"
class="simon-rules"
target="_blank"
>What is Simon Game?</a
><br />
© Yash Salvi
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
If possible can anyone also help me know that on phone when user clicks on my "Press me to Start" i.e. on "h1" then I have used "h1" as a button and assigned the onclick function to it.Now the problem is that when user taps say on the "Press" it gets copied and browser asks if I want to do google search of the clicked word.
I want this "click to google search on any word" disabled.
[Text](https://raxy45.github.io/SIMON_GAME/) Link to github page
I'm currently working on a website that shows a visual representation of all the movies I watched. A Movie List if you will. I figured out how to filter the list based on button presses using JS, however, it only filters by 1 button at a time. I'd like the list to be filtered based on multiple buttons.
For example: "All completed movies with a rating of 3 and the action genre*".
Or: "All completed and watching movies"
I've never learned JS (though I plan to eventually) so I am kinda lost on how to do this.
Here's my current code:
filterSelection("all")
function filterSelection(c) {
var eles = document.getElementsByClassName("flex-card");
for(var i=0; i < eles.length; i++) {
if (c === "all" || eles[i].classList.contains(c)) {
eles[i].classList.remove("displayNone");
}
else {
eles[i].classList.add("displayNone");
}
}
}
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
also on jsfidle
It would be possible to store all clicked selectors in an array, and render cards based on the whole array's state, not just the last clicked button. Quick and dirty example could look like this:
const allCards = document.querySelectorAll(".flex-card");
var displayAll = true // special value for displaying all - default true
var activeCards = [] // array holding all selected values
function toggleSelector(c) {
if (c === 'all') {
displayAll = !displayAll
activeCards = [] // optional
return
}
displayAll = false
if (activeCards.includes(c)) {
activeCards = activeCards.filter(card => card !== c)
} else {
activeCards.push(c)
}
}
// quick dirty way to render cards
function renderCards() {
if (displayAll) {
allCards.forEach(card => showCard(card))
return
}
allCards.forEach(card => hideCard(card))
for (let card of allCards) {
for (let cardClass of card.classList) {
if (activeCards.includes(cardClass)) {
showCard(card)
break;
}
}
}
}
// on each click toggle clicked selector and re-render cards
function filterSelection(c) {
toggleSelector(c)
renderCards()
}
function showCard(card) {
card.classList.remove("displayNone");
}
function hideCard(card) {
card.classList.add("displayNone");
}
renderCards()
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card displayNone">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>