How do I create two flip cards side by side in html
Question
I'm completely new to coding - have been using w3schools to learn the basics and have come across something I can't seem to find a way around. Basically I'm a complete noob and could use some help with what is probably an extremely basic request:)
I recently did the tutorial on how to create flip cards (here: https://www.w3schools.com/howto/howto_css_flip_card.asp ) and managed to create my own, change the font and the image etc. What I was wondering was how you'd create a grid of these in html?
I've played around and am able to create two flip cards that stack on top of one another, but is there a way to have them side by side (very basic screenshot of what I mean attached). Is there a way to do it using the template above?
I have searched this answer online but the responses are intended for people with a greater knowledge than me - I started this coding journey a couple of weeks ago!
Thanks for any help:) Really appreciated
3 answers
solution1
0 2021-01-21 12:39:46
Float: left; so that your 2nd card will be aligned on your 1st card.
<style> body { font-family: Arial, Helvetica, sans-serif; }.flip-card { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; float:left; //I just added this positioning. }.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }.flip-card:hover.flip-card-inner { transform: rotateY(180deg); }.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }.flip-card-front { background-color: #bbb; color: black; }.flip-card-back { background-color: #2980b9; color: white; transform: rotateY(180deg); } </style>
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_avatar:png" alt="Avatar" style="width;300px:height;300px."> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_avatar:png" alt="Avatar" style="width;300px:height;300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </body> </html>
solution2
0 2021-01-21 12:39:59
All you have to do is, put both cards into one <div></div> element and give this div a styling of display:flex
Full Code: HTML:
<div style="display:flex">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect + Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect + Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
CSS:
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
On JSFiddle: JSFiddle
solution3
0 2021-01-21 12:44:02
What you could do is make an container div and put your cards inside of it.
HTML
<div class="container">
<div class="card">
<div class="card">
</div>
CSS
.container {
display: flex; //default display items in a row
}
.container .card {
//styling for your card
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.