I have a sample version here of what I am trying to do. I am unsure what I'm missing but I definitely am missing something. Both flipcards lead to the same link and I can't get them to be separate, when I change one the other changes too. I tried making a separate class but I think I did it wrong. Also wondering how to fix the lag that occurs for the second flipcard. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 280px;
padding: 0px;
height: 220px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext1
body {
font-family: Arial;
text-align: center;
}
.flip-card1 {
background-color: transparent;
width: 280px;
height: 220px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
width: 280px;
height: 220px;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}
.flip-card1:hover .flip-card-inner1 {
transform: rotateY(180deg);
}
.flip-card-front1, .flip-card-back1 {
position: absolute;
width: 280px;
height: 220px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: #bbb;
color: black;
}
.flip-card-back1 {
background-color: #354C2F;
color: white;
width: 280px;
height: 220px;
transform: rotateY(180deg);
font-family: Arial;
text-align: center;
padding: 0px;
background-image: url('');
}
a.link1{
href="https://yorku.ca/research" target="https://yorku.ca/research"}
</style>
</head>
<body>
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
<img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
</div>
<div class="flip-card-back1">
<a class="link1" href="https://yorku.ca/research">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png" width="280" height="220">
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#bbb;">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext2
body {
font-family: Arial;
text-align: center;
}
.flip-card2 {
background-color: transparent;
width: 280px;
height: 220px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
background-color: #354C2F;
width: 280px;
height: 220px;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}
.flip-card2:hover .flip-card-inner2 {
transform: rotateY(180deg);
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 280px;
height: 220px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: #bbb;
color: black;
}
.flip-card-back2 {
background-color: #354C2F;
color: white;
width: 280px;
height: 220px;
transform: rotateY(180deg);
font-family: Arial;
text-align: center;
padding: 0px;
background-image: url('');
}
a.link2{
href="https://yorku.ca/c4" target="https://yorku.ca/c4"}
</style>
</head>
<body>
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
<img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
</div>
<div class="flip-card-back2">
<a class="link2" href="https://yorku.ca/c4">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png" width="280" height="220">
</div>
</div>
</div>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
The problem is that the structure of the document is wrong, you have 2 body elements, etc. Here I fixed it for you. May need to put the cards side by side.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 280px;
padding: 0px;
height: 220px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color: #aaa">
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<style>
.fliptext1 body {
font-family: Arial;
text-align: center;
}
.flip-card1 {
background-color: transparent;
width: 280px;
height: 220px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
width: 280px;
height: 220px;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
.flip-card1:hover .flip-card-inner1 {
transform: rotateY(180deg);
}
.flip-card-front1,
.flip-card-back1 {
position: absolute;
width: 280px;
height: 220px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: #bbb;
color: black;
}
.flip-card-back1 {
background-color: #354c2f;
color: white;
width: 280px;
height: 220px;
transform: rotateY(180deg);
font-family: Arial;
text-align: center;
padding: 0px;
background-image: url("");
}
.flip-card2 {
background-color: transparent;
width: 280px;
height: 220px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
background-color: #354c2f;
width: 280px;
height: 220px;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
.flip-card2:hover .flip-card-inner2 {
transform: rotateY(180deg);
}
.flip-card-front2,
.flip-card-back2 {
position: absolute;
width: 280px;
height: 220px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: #bbb;
color: black;
}
.flip-card-back2 {
background-color: #354c2f;
color: white;
width: 280px;
height: 220px;
transform: rotateY(180deg);
font-family: Arial;
text-align: center;
padding: 0px;
background-image: url("");
}
</style>
</head>
<body>
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
<img
src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg"
alt="Avatar"
style="width: 280px; height: 220px"
/>
</div>
<div class="flip-card-back1">
<a
class="link1"
href="https://yorku.ca/research"
target="https://yorku.ca/research"
>
<img
border="0"
alt="YorkU C4"
src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png"
width="280"
height="220"
/>
</a>
</div>
</div>
</div>
<div class="column" style="background-color: #bbb">
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
<img
src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg"
alt="Avatar"
style="width: 280px; height: 220px"
/>
</div>
<div class="flip-card-back2">
<a
class="link2"
href="https://yorku.ca/c4"
target="https://yorku.ca/c4"
>
<img
border="0"
alt="YorkU C4"
src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png"
width="280"
height="220"
/>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
</div>
</div>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>