У меня есть примерная версия того, что я пытаюсь сделать. Я не уверен, чего мне не хватает, но я определенно что-то упускаю. Обе флипкарты ведут к одной и той же ссылке, и я не могу заставить их быть отдельными, когда я меняю одну, меняется и другая. Я пытался создать отдельный класс, но, думаю, я сделал это неправильно. Также интересно, как исправить задержку, возникающую для второй флипкарты. Заранее спасибо.
<!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>