मैं एक नमूना संस्करण यहाँ मैं क्या कर रहा हूँ करने की कोशिश कर रहा. मैं अनिश्चित हूँ क्या मैं याद कर रहा हूँ, लेकिन मैं निश्चित रूप से कुछ याद आ रहा हूँ. दोनों flipcards नेतृत्व करने के लिए एक ही कड़ी है और मैं नहीं मिल सकता है उन्हें अलग होने के लिए, जब मैं बदलने के लिए एक अन्य परिवर्तन भी है । मैं बनाने की कोशिश की एक अलग वर्ग है, लेकिन मुझे लगता है कि मैं इसे गलत किया था. यह भी सोच रहा था कि कैसे ठीक करने के लिए अंतराल के लिए होता है कि दूसरा फ़्लिपकार्ड. आप पहले से धन्यवाद.
<!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>