Scribd
Upload
9 views3 pages

Flip Card Code for Player Profiles

The document provides code for a flip card component that displays player information, including their image, name, team, age, position, height, college, birth date, birth place, experience, and nationality. It includes HTML structure for the card, CSS styles for design and layout, and JavaScript variables to dynamically populate the card with player data. The flip card effect is achieved through CSS transitions on hover.

Uploaded by

ajamiami56
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views3 pages

Flip Card Code for Player Profiles

The document provides code for a flip card component that displays player information, including their image, name, team, age, position, height, college, birth date, birth place, experience, and nationality. It includes HTML structure for the card, CSS styles for design and layout, and JavaScript variables to dynamically populate the card with player data. The flip card effect is achieved through CSS transitions on hover.

Uploaded by

ajamiami56
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Flip Card Code

FlipCardMain = //calcutated column; Replace column with your actual column names
VAR PlayerImage = Players[Image Url]
VAR PlayerName = Players[Player]
VAR Team = Players[Team]
VAR Position = Players[Pos]
VAR Height = Players[Height]
VAR Age = Players[Age]
VAR College = Players[College]
VAR BirthDate = Players[Birthdate]
VAR BirthPlace = Players[Birth Place.1]
VAR Experience = Players[Experience]
VAR Nationality = Players[Nationality]
RETURN
"
<div class='border-card'>
<div class='flip-card'>
<div class='flip-card-inner'>

<!-- Front of the card -->


<div class='flip-card-front'>
<img src='" & PlayerImage & "' alt='" & PlayerName & "' class='player-
img'/>
<h2 class='player-name'>" & PlayerName & "</h2>
<p class='team-text'>" & Team & "</p>
<p class='info'><b>Age:</b> " & Age & " | <b>Position:</b> " &
Position & "</p>
<p class='info'><b>Height:</b> " & Height & "</p>
</div>

<!-- Back of the card -->


<div class='flip-card-back'>
<h2>Players Info</h2>
<p><b>College:</b> " & College & "</p>
<p><b>BirthDate:</b> " & BirthDate & "</p>
<p><b>BirthPlace:</b> " & BirthPlace & "</p>
<p><b>Experience:</b> " & Experience & "</p>
<p><b>Nationality:</b> " & Nationality & "</p>
</div>

</div>
</div>
</div>

<style>
.border-card {
width: 360px;
height: 480px;
padding: 8px;
border-radius: 1rem;
overflow: hidden;
background: linear-gradient(to right, #74ebd5 0%, #acb6e5 100%);
position: relative;
z-index: 1;
}

.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1200px;
display: inline-block;
margin: 0;
border-radius: 12px;
overflow: hidden;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s ease-in-out;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
.flip-card-front {
background: #4BE7C8;
color: #011C27;
}

.flip-card-back {
background: linear-gradient(135deg, #2C2D2D, #1A1A1A);
color: white;
transform: rotateY(180deg);
}

.player-img {
width: 95%;
height: auto;
max-height: 200px;
object-fit: cover;
border-radius: 10px;
image-rendering: crisp-edges;
}

[Link]-name {
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 5px;
}

.team-text {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}

[Link] {
font-size: 16px;
margin: 5px 0;
font-weight: 600;
}
</style>"

You might also like