Codepen link - 
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Card</title>
</head>
<body>
<div class="container">
<div class="card-container">
<input type="radio" name="colors-btn" id="color-1" checked>
<input type="radio" name="colors-btn" id="color-2">
<input type="radio" name="colors-btn" id="color-3">
<input type="radio" name="colors-btn" id="color-4">
<div class="shoe-area">
<div class="logo-div">
<img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/nike-logo.png?raw=true" alt="">
</div>
<div class="floating-div">
<div class="shoe-1"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/red-nike.png?raw=true" alt="red-nike" ></div>
<div class="shoe-2"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/orange-nike.png?raw=true" alt="orange-nike"></div>
<div class="shoe-3"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/white.png?raw=true" alt="white-nike"></div>
<div class="shoe-4"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/black-nike.png?raw=true" alt="black-nike"></div>
</div>
</div>
<div class="text-area">
<div class="heading-area">
<h2>Jordan Proto-Lyte</h2>
<h4>Running Collection</h4>
</div>
<p class="paragraph-area">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, rerum asperiores error omnis pariatur sequi placeat quia fuga ullam. Harum obcaecati suscipit illum similique excepturi voluptates quae deserunt tempore, distinctio architecto ipsum dolor laboriosam inventore impedit nostrum totam eaque sed est? Non rem repudiandae, vitae iure suscipit pariatur, cum esse sequi cumque saepe commodi reprehenderit quaerat. Quasi ipsam repellendus similique
</p>
<div class="color-selection">
<div class="h5-text"><h5>Available Colors: </h5></div>
<div class="color-pick-div">
<label for="color-1" class="colors color-1"></label>
<label for="color-2" class="colors color-2"></label>
<label for="color-3"class="colors color-3" ></label>
<label for="color-4" class="colors color-4"></label>
</div>
</div>
<div class="price-and-buy-btn">
<h2 class="price-1">$ 854.75</h2>
<h2 class="price-2">$ 824.15</h2>
<h2 class="price-3">$ 914.38</h2>
<h2 class="price-4">$ 884.12</h2>
<button class="buy-btn">BUY NOW</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
padding: 0;
margin: 0;
}
:root{
font-family: "Poppins";
--primary-color-1: hsl(348, 68%, 34%);
--primary-color-2: hsl(20,94%,34%);
--primary-color-3: hsl(232,16%,34%);
--primary-color-4: hsl(0, 0%, 25%);
--text-area-color: whitesmoke;
--heading-secondary-color: hsl(0, 0%, 55%);
--secondary-card-color: whitesmoke;
}
html{
width: 100%;
height: 100%;
}
body{
/* background-color: skyblue; */
}
input{
display: none;
}
.container{
margin: 0 auto;
/* background-color: green; */
max-width: 60rem;
min-height: 30rem;
padding: 3rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.card-container{
display: flex;
flex-direction: row;
/* background-color: wheat; */
box-sizing: border-box;
box-shadow: 0px 0px 10px 0px rgb(145, 145, 145);
border-radius: 0.8rem;
}
.shoe-area{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
transition: background-color 0.3s ease-in-out;
border-radius: 0.8rem 0 0 0.8rem
}
.logo-div{
margin: 2rem 0 0 1.5rem;
position: absolute;
opacity: 1;
top: 0;
left: 0;
width: 100%;
/* background-color: yellowgreen; */
}
.logo-div img{
width: 70%;
opacity: 0.1;
}
.floating-div{
/* background-color: yellowgreen; */
height: 100%;
width: 100%;
display: grid;
place-items: center;
align-items: center;
animation: float 6s ease-in-out infinite;
box-sizing: border-box;
}
@keyframes float{
0%{
transform: translateY(0%);
}
50%{
transform: translateY(-6%);
}
100%{
transform: translateY(0%);
}
}
.shoe-area :is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) {
/* background-color: yellow; */
position: absolute;
width: 100%;
transform: rotateZ(-30deg) scale(1.3) translateX(-10%);
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.shoe-area .shoe-4{
/* background-color: whitesmoke; */
}
:is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) img{
width: 100%;
opacity: 0;
transform: rotateZ(-30deg) scale(1.3) translateX(-10%);
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
/* =============
Text styling
========== */
.text-area{
background-color: var(--text-area-color);
/* background-color: rgb(114, 91, 114); */
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
border-radius: 0 0.8rem 0.8rem 0
}
.text-area .heading-area{
padding: 1rem;
}
.heading-area h2{
font-weight: 800;
font-size: 2.5rem;
transition: color 0.3s ease-in-out;
}
.heading-area h4{
margin: 0.25rem 0 0 0;
}
.paragraph-area{
margin: 1.5rem 1rem 1.5rem 5rem;
/* background-color: yellow; */
font-size: 1rem;
}
/* =============
Available colors
========== */
.color-selection{
margin: 1rem 1rem 1.5rem 5rem;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.8rem;
box-sizing: border-box;
/* background-color: wheat; */
}
.color-selection h5{
font-size: 1rem;
}
.color-selection .colors{
padding: 1rem;
border-radius: 50%;
cursor: pointer;
}
.color-pick-div{
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.8rem;
}
.color-selection .color-1{
background-color: var(--primary-color-1);
}
.color-selection .color-2{
background-color: var(--primary-color-2);
}
.color-selection .color-3{
background-color: var(--primary-color-3);
}
.color-selection .color-4{
background-color: var(--primary-color-4);
}
/* =============
price-and-buy-btn styling
========== */
.price-and-buy-btn{
display: flex;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.price-and-buy-btn :is(.price-1, .price-2, .price-3, .price-4){
display: none;
font-weight: 800;
font-size: 2.5rem;
transition: color 0.3s ease-in-out;
}
.buy-btn{
padding: 1em 1.5em;
font-size: 1.2rem;
border-radius: 2rem;
border: none;
color: whitesmoke;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
/* ========== Themes ======== */
/* Theme 1 */
#color-1:checked ~ .text-area .color-selection .color-pick-div .color-1{
outline: 2px solid var(--primary-color-1);
outline-offset: 2px;
}
#color-1:checked ~ .shoe-area{
background-color: var(--primary-color-1);
}
#color-1:checked ~ .text-area .heading-area h2{
color: var(--primary-color-1)
}
#color-1:checked ~ .text-area .price-and-buy-btn .price-1{
display: block;
color: var(--primary-color-1);
}
#color-1:checked ~* .buy-btn{
background-color: var(--primary-color-1);
}
/* Theme 2 */
#color-2:checked ~ .text-area .color-selection .color-pick-div .color-2{
outline: 2px solid var(--primary-color-2);
outline-offset: 2px;
}
#color-2:checked ~ .shoe-area{
background-color: var(--primary-color-2);
}
#color-2:checked ~ .text-area .heading-area h2{
color: var(--primary-color-2)
}
#color-2:checked ~ .text-area .price-and-buy-btn .price-2{
display: block;
color: var(--primary-color-2);
}
#color-2:checked ~* .buy-btn{
background-color: var(--primary-color-2);
}
/* Theme 3 */
#color-3:checked ~ .text-area .color-selection .color-pick-div .color-3{
outline: 2px solid var(--primary-color-3);
outline-offset: 2px;
}
#color-3:checked ~ .text-area .price-and-buy-btn .price-3{
display: block;
color: var(--primary-color-3);
}
#color-3:checked ~ .shoe-area{
background-color: var(--primary-color-3);
}
#color-3:checked ~ .text-area .heading-area h2{
color: var(--primary-color-3)
}
#color-3:checked ~* .buy-btn{
background-color: var(--primary-color-3);
}
/* Theme 4 */
#color-4:checked ~ .text-area .color-selection .color-pick-div .color-4{
outline: 2px solid var(--primary-color-4);
outline-offset: 2px;
}
#color-4:checked ~ .shoe-area{
background-color: var(--primary-color-4);
}
#color-4:checked ~ .text-area .price-and-buy-btn .price-4{
display: unset;
color: var(--primary-color-4);
}
#color-4:checked ~ .text-area .heading-area h2{
color: var(--primary-color-4)
}
#color-4:checked ~* .buy-btn{
background-color: var(--primary-color-4);
}
/* Transition when the screen is higher than 1000px */
@media screen and (min-width: 62.5rem){
#color-1:checked ~ .shoe-area .floating-div .shoe-1 {
transition-delay: 0.2s;
animation-delay: 0.3s;
transform: rotateZ(0);
z-index: 99;
}
#color-1:checked ~ .shoe-area .floating-div .shoe-1 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 2 */
#color-2:checked ~ .shoe-area .floating-div .shoe-2 {
transition-delay: 0.2s;
transform: rotateZ(0);
z-index: 99;
}
#color-2:checked ~ .shoe-area .floating-div .shoe-2 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 3 */
#color-3:checked ~ .shoe-area .floating-div .shoe-3 {
transition-delay: 0.2s;
transform: rotateZ(0);
z-index: 99;
}
#color-3:checked ~ .shoe-area .floating-div .shoe-3 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 4 */
#color-4:checked ~ .shoe-area .floating-div .shoe-4 {
transition-delay: 0.2s;
transform: rotateZ(0);
z-index: 99;
}
#color-4:checked ~ .shoe-area .floating-div .shoe-4 img{
transition-delay: 0.2s;
opacity: 1;
}
}
#color-4:checked ~* .heading-area h2{
color: var(--primary-color-4)
}
@media screen and (max-width: 62.5rem){
.container{
padding: 1rem;
}
.card-container{
display: flex;
flex-direction: column;
}
.shoe-area{
width: 100%;
height: 40vw;
padding: 1rem 0;
border-radius: 0.8rem 0.8rem 0 0;
}
.shoe-area :is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) {
/* background-color: yellow; */
position: absolute;
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
/* Transition for any screen lower than 1000px */
.shoe-area :is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) {
/* background-color: yellow; */
transform: rotateZ(0deg) translateY(-10%);
width: 70%;
margin: 1rem 0;
opacity: 0;
}
:is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) img{
transform: rotateZ(0) scale(1) ;
opacity: 1;
}
#color-1:checked ~ .shoe-area .floating-div .shoe-1 {
transition-delay: 0.2s;
opacity: 1;
transform: rotateZ(0);
}
#color-1:checked ~ .shoe-area .floating-div .shoe-1 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 2 */
#color-2:checked ~ .shoe-area .floating-div .shoe-2 {
transition-delay: 0.2s;
opacity: 1;
transform: rotateZ(0);
}
#color-2:checked ~ .shoe-area .floating-div .shoe-2 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 3 */
#color-3:checked ~ .shoe-area .floating-div .shoe-3 {
transition-delay: 0.2s;
opacity: 1;
transform: rotateZ(0);
}
#color-3:checked ~ .shoe-area .floating-div .shoe-3 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 4 */
#color-4:checked ~ .shoe-area .floating-div .shoe-4 {
transition-delay: 0.2s;
transform: rotateZ(0);
opacity: 1;
}
#color-4:checked ~ .shoe-area .floating-div .shoe-4 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Transition end */
.logo-div img{
width: 40%;
}
.text-area{
/* background-color: rgb(114, 91, 114); */
width: 100%;
display: flex;
flex-direction: column;
padding: 1rem;
box-sizing: border-box;
border-radius: 0 0 0.8rem 0.8rem
}
.paragraph-area, .color-selection{
margin: 1.5rem 1rem;
}
}
/* ====== Phone Size ===== */
@media screen and (max-width: 26.9rem){
.paragraph-area{
margin: 1rem;
font-size: 0.8rem;
}
.paragraph-area, .color-selection{
margin: 0.7rem 1rem;
}
.color-selection{
display: flex;
flex-direction: column;
align-items: unset;
row-gap: 0.8rem;;
}
.price-and-buy-btn{
padding: 0.5rem 1rem;
flex-direction: column;
row-gap: 0.8rem;
align-items: flex-start;
}
}
