Selectable options dashboard made with CSS;
As usual, adding the plain HTML:
<section class="app">
<i class="fa fa-rocket"></i>
<h1>It's time to <span class="blue-color">upgrade</span></h1>
<h3 class="gray-color">Choose the feature that best fit your needs and you'll be good to go!</h3>
<article class="feature1">
<input type="checkbox" id="feature1"/>
<div>
<span>
20 GB<br/>
+ $15.00
</span>
</div>
</article>
<article class="feature2">
<input type="checkbox" id="feature2"/>
<div>
<span>
10 Emails<br/>
+ $10.00
</span>
</div>
</article>
<article class="feature3">
<input type="checkbox" id="feature3"/>
<div>
<span>
Support<br/>
+ $65.00
</span>
</div>
</article>
<article class="feature4">
<input type="checkbox" id="feature4" checked/>
<div>
<span>
Coffee<br/>
$1.00
</span>
</div>
</article>
<h3>
<span class="blue-color">50% </span>discount only today!
</h3>
<a href="#" class="upgrade-btn">Upgrade</a>
<div class="gray-color">terms & conditions apply, the app will never share your private info</div>
</section>
Now doing the magic:
body {
text-align: center;
color: #f5f5f5;
background-image: linear-gradient(-90deg , #0c0c0d, #1a1a1a);
font-family: 'Roboto';
}
.app {
max-width: 300px;
margin: 0 auto;
}
.app i {
font-size: 80px;
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: 1;
}
article {
position: relative;
width: 140px;
height: 100px;
margin: 5px;
float: left;
border: 2px solid #50bcf2;
box-sizing: border-box;
}
article div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
transition: .5s ease;
}
article input {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 100px;
opacity: 0;
cursor: pointer;
}
input[type=checkbox]:checked ~ div {
background-color: #50bcf2;
}
.upgrade-btn {
display: block;
margin: 30px auto;
width: 200px;
padding: 10px 20px;
border: 2px solid #50bcf2;
border-radius: 50px;
color: #f5f5f5;
font-size: 18px;
font-weight: 600;
text-decoration: none;
transition: .3s ease;
}
.upgrade-btn:hover {
background-color: #50bcf2;
}
.blue-color {
color: #50bcf2;
}
.gray-color {
color: #555;
}
@keyframes slidein {
from {
margin-top: 100%;
width: 300%;
}
to {
margin: 0%;
width: 100%;
}
}
What i want to cherry pick and describe is how i made the custom checkboxes:
<article class="feature1">
<input type="checkbox" id="feature1"/>
<div>
<span>
20 GB<br/>
+ $15.00
</span>
</div>
</article>
article {
position: relative;
width: 140px;
height: 100px;
margin: 5px;
float: left;
border: 2px solid #50bcf2;
box-sizing: border-box;
}
article div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
transition: .5s ease;
}
article input {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 100px;
opacity: 0;
cursor: pointer;
}
input[type=checkbox]:checked ~ div {
background-color: #50bcf2;
}
I've created two overlapping elements inside an article, one for the checkbox and one for the container which will have the nicer look;
I made the checkbox as big as the container and I gave it an opacity 0;
Let me know what do you think.
Top comments (0)