I am using a CSS flip animation to show content on one side and text on the other. The animation works using a hover selector on desktop browsers. On mobile devices it should use a touch event to carry out the flip.
It works on edge, chrome and firefox and I have added additional CSS to handle older versions of IE.
However when I run it up on my iPhone I cannot get the the flip animation to work as expected.
I have attached a fiddle to show the issue I am having.
https://jsfiddle.net/rsmith93/oehqd5j6/
$(".flip-container").hover(function() {
$(this).toggleClass('hover');
});
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 360px;
height: 270px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: rgba(33, 33, 33, 1);
color: white;
}
.name1 {
font-size: 1.5em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 40px;
left: 4px;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="row">
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 1</span>
</div>
<div class="back">
<!-- back content -->
back panel
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 2</span>
</div>
<div class="back">
<!-- back content -->
back 2
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 3</span>
</div>
<div class="back">
<!-- back content -->
back 3
</div>
</div>
</div>
</div>
Any help here is appreciated.
Related
I am trying to create a card game but I am stuck at the end point of the Translate function, the player has 30 cards (for programming I only use four since it is easier with less lines), when clicking on a card, the card makes an animation with translate and rotate to reveal the value of the card, and since I only need to reveal the value of 3 cards, I need them to end up in a specific place and be clearly visible, even if the user chooses consecutive cards.
The problem is that I can't make the card end in the div that has the Card1 label, since translate moves me according to the starting point and doesn't to the end point. Can someone help me find a way to do this with translate or is there any other way to do it?
Thank you!
<!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>Document</title>
<style>
body {
background-color: #100e17;
font-family: sans-serif;
}
.container {
position: absolute;
height: 280px;
width: 1200px;
top: 60px;
left: calc(28% - 300px);
display: flex;
}
.card{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.card1 {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
.card2 {
display: flex;
height: 260px;
width: 200px;
background-color: red;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
backface-visibility: hidden;
}
.animate{
position: relative;
transform: perspective(600px) translate(0px, 300px) rotateY(-180deg);
transform-origin: 100% 50%;
transition-property: transform;
transition-duration: 3s;
}
.card .card1,
.animate .card .card2{
position: absolute;
backface-visibility: hidden;
}
.card .card2 {
transform: rotateY(-180deg);
}
.title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}
.answer {
position: absolute;
height: 260px;
width: 300px;
top: 360px;
left: 250px;
display: flex;
}
label {
color: white;
}
.solve {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<h3 class="title">Card front 1</h3>
</div>
<div class="card2">
<h3 class="title">Card back 1</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 2</h3>
</div>
<div class="card2">
<h3 class="title">Card back 2</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 3</h3>
</div>
<div class="card2">
<h3 class="title">Card back 3</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 4</h3>
</div>
<div class="card2">
<h3 class="title">Card back 4</h3>
</div>
</div>
</div>
<div class="answer">
<label for="solve">Card 1</label>
<div class="solve" id="solve"></div>
</div>
<script>
const card = document.querySelectorAll(".card");
const card2 = document.querySelector('.card2');
let fragment = document.querySelector(".solve");
card.forEach((card) => {
card.style.display = 'block';
card.onmousedown = function () {
card.classList.add('animate');
};
</script>
</body>
</html>
I want to achieve this result of the trees moving from center to left and right on click.
I was trying this tutorial but it didn't work at all in translating the first tree from center to left.
I am working on the white arrows of the same section to see if its work and added changing the WHO WE ARE title to magenta to see if the function is working and it is but the image isn't moving at all.
<section id="abtus">
<div class=" container position-absolute" style=" left:100px; float: left; z-index: 100;">
<a href="#abtus">
<button onclick="next()"><span class="arrow1"></span></button>
</a>
</div>
<div class="container position-relative">
<div class="row mt-5 ms-5">
<div class="col offset-md-1 col-md-4">
<h3 class="text1 pb-3" id="myP">WHO WE ARE</h3>
<p class="text2 p-1">
We are two sisters who come from a similar
<br>
background of love for everything creative and magical.
</p>
<p class="text2 p-1">
We aim to deliver your stories with interesting
<br>
visually pleasing magic that separates you from the rest!
</p>
<p class="text2 p-1">
To guarantee great quality work and also an added fun
<br>
element to your project.
</p>
</div>
<div class="col col-md-4">
<h3 class="text1 pb-3">THE TEAM</h3>
<div class="row-4 pb-5 position-relative">
<p class="text2 pb-4">We have a rich experience in the market, especially
<br>
in gaming and animation. We work with several tasks
<br>
such as visual development, concept art, character design,
<br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p>
</div>
</div>
</div>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute" style="right: 200px;">
<img src="./images/tree1.png" width="800" class="img" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="./images/tree2.png" width="900">
</div>
</div>
<div class="container position-absolute" style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute " style="right: 200px;">
<img src="https://imgur.com/9d6S7wK" width="800" class="img tree1" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="https://imgur.com/VOFz7Hi" width="900">
</div>
</div>
<div class="container position-absolute " style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
</section>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
CSS
section{
background-color: pink;
height: 100%;
width: 100%;
}
tree1{
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(https://imgur.com/9d6S7wK");
background-size: 100% 100%;
width: 50%;
height: 50vh;
}
.arrow1{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(45deg);
z-index: 1;
}
.arrow2{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(225deg);
z-index: 1;
}
.img{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
;}
.img .horizTranslate{
margin-right: 80% !important;
}
.img .horizTranslateReverse{
margin-left: 0% !important;
}
}
JS
const img = document.querySelector("#img");
function next() {
document.getElementById("myP").style.color = "magenta";
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
document.getElementById("myP").style.color = "black";
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
I've included the code of this section here and uploaded the trees images. So far I managed to put the section style 100% but it is the parallax element that is driving me crazy.
Could someone please help me in figuring out what is wrong?
So I was trying to make a contact card on hover like twitter. When a person hover on a contact name, the card will appear. It is working fine. But it is going beyond the page.
What I need is, show it up and down according to the position.
This is my code
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
bottom: 40px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: 0;
bottom: -20px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #d9dcde transparent;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, 10px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message p {
text-align: left;
font-size: 13px;
margin: 0;
}
<div class="popover__wrapper m-t-5">
<a>Arshad</a>
<div class="push popover__content">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 no-padding">
<div class="widget-item user ">
<div class="tiles user-dp">
<div class="tiles-body no-padding">
<img src="../assets/img/profiles/arshad-small.jpg" alt="">
<div class="overlayer bottom-right fullwidth">
<div class="overlayer-wrapper">
<div class=" p-l-20 p-r-20 p-b-20 p-t-20">
<div class="text-center"> <a class="hashtags"> Administrator </a> </div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="tiles white ">
<div class="tiles-body">
<div class="row">
<div class="user-comment-wrapper pull-left">
<div class="comment">
<div class="user-name text-black semi-bold">Full Name </div>
<div class="preview-wrapper">Designer</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="p-l-15 p-r-20 popover__message">
<p>phone</p>
<p>Email</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried many methods, didn't find exactly. So how do I achieve it? Any help?
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>
I am trying to develop my webpage with some animation effects, and I have three cards with front and back flip animation effect. Now I am looking for front and back animation effect, which I have described in below image clearly.
Image before front and back animation (Initially).
Image after click on card-2,
Example:
var accHD = document.getElementsByClassName('card');
var showNotificationBtn = document.getElementsByClassName('showsettingsbutton');
for (i = 0; i < accHD.length; i++) {
showNotificationBtn[i].addEventListener(
'click', function toggleItem() {
var itemClass = this.parentNode.parentNode.parentNode.className;
for (i = 0; i < showNotificationBtn.length; i++) {
showNotificationBtn[i].parentNode.parentNode.parentNode.parentNode.parentNode.className = 'card';
showNotificationBtn[i].parentNode.parentNode.parentNode.className = 'flipper';
}
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = 'cardlarge';
this.parentNode.parentNode.parentNode.className = 'flipperRotaion';
}
);
}
.card {
padding: 30px;
background: #fff;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
transition: 0.3s;
width: 10%;
z-index: 1;
}
.container {
padding: 2px 16px;
}
.cardlarge {
padding: 30px;
background: #fff;
transition: 0.3s;
width: 10%;
-moz-transition: all 2s; -webkit-transition : all 2s; -o-transition :
all 2s; transition : all 2s;
z-index: 2;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
/*Card Design ends here*/
/*Flip Design starts here*/
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
*/
.flipperRotaion {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/*Flip Design ends here*/
/*Show Notification button design starts here*/
.showsettingsbutton {
border: 0;
background: #0087cc;
border-radius: 4px;
box-shadow: 0 5px 0 #006599;
color: #fff;
cursor: pointer;
font: inherit;
margin: 0;
outline: 0;
padding: 12px 20px;
transition: all .1s linear;
}
.showsettingsbutton:active {
box-shadow: 0 2px 0 #006599;
transform: translateY(3px);
}
<div class="cardlist" align="center">
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
<input type="checkbox" name="Notification" value="Email">Email
</div>
</div>
</div>
</div>
</div>
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
Back
</div>
</div>
</div>
</div>
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
</div>
</div>
</div>
</div>
</div>