Skip to content

Instantly share code, notes, and snippets.

@tararoutray
Created October 9, 2022 02:04
Show Gist options
  • Save tararoutray/abb4c5963b565545b7b532d380bcf1c5 to your computer and use it in GitHub Desktop.
Save tararoutray/abb4c5963b565545b7b532d380bcf1c5 to your computer and use it in GitHub Desktop.
#radio-cards-container {
margin-top: 5rem;
width: 75vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.radio-card {
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 300px;
margin-right: 2rem;
margin-bottom: 2rem;
padding: 3rem;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.radio-card:hover {
border: 2px solid #016787;
cursor: pointer;
}
.radio-card-check {
display: none;
position: absolute;
top: 1.5rem;
left: 1.5rem;
}
.radio-card-check i {
font-size: 1.6rem;
color: #016787;
}
.text-center {
text-align: center;
}
.radio-card-icon img {
width: 80px;
}
.radio-card-label {
margin-top: 1rem;
font-weight: 600;
font-size: 1.2rem;
}
.radio-card-label-description {
margin-top: 0.5rem;
color: rgba(0, 0, 0, 0.7);
}
.radio-card.selected {
border: 2px solid #016787;
}
.radio-card.selected .radio-card-check {
display: inline-flex;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment