<p>Haven't finish this yet but, boy, what fun it's been!</p>
<h1>New Game</h1>
<h2>Select difficulty…</h2>
<section>
<div>
<input type="radio" id="control_01" name="select" value="1" checked>
<label for="control_01">
<h2>Pfft</h2>
<p>Awww, poor baby. Too afraid of the scary game sprites? I laugh at you.</p>
</label>
</div>
<div>
<input type="radio" id="control_02" name="select" value="2">
<label for="control_02">
<h2>Wannabe</h2>
<p>You're not a gaming God by any stretch of the imagination.</p>
</label>
</div>
<div>
<input type="radio" id="control_03" name="select" value="3">
<label for="control_03">
<h2>Daaamn</h2>
<p>Now we're talking. It's gettin' a bit hairy out there in game land.</p>
</label>
</div>
<div>
<input type="radio" id="control_04" name="select" value="4" disabled>
<label for="control_04">
<h2>Mental</h2>
<p>Prepare for glory! This is going to be one hell of a no-holds-barred ride.</p>
</label>
</div>
<div>
<input type="radio" id="control_05" name="select" value="5">
<label for="control_05">
<h2>Suicidal</h2>
<p>You will not live. Strap in and write a heart-felt letter to your loved ones.</p>
</label>
</div>
</section>
body {
padding: 1rem;
color: rgba(121, 126, 134, 1);
}
h1 {
color: rgba(24, 25, 27, 1);
margin-bottom: 2rem;
}
section {
display: flex;
flex-flow: row wrap;
}
section > div {
flex: 1;
padding: 0.5rem;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:not(:disabled) ~ label {
cursor: pointer;
}
input[type="radio"]:disabled ~ label {
color: rgba(188, 194, 191, 1);
border-color: rgba(188, 194, 191, 1);
box-shadow: none;
cursor: not-allowed;
}
label {
height: 100%;
display: block;
background: white;
border: 2px solid rgba(32, 223, 128, 1);
border-radius: 20px;
padding: 1rem;
margin-bottom: 1rem;
text-align: center;
box-shadow: 0px 3px 10px -2px rgba(161, 170, 166, 0.5);
position: relative;
}
input[type="radio"]:checked + label {
background: rgba(32, 223, 128, 1);
color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 20px rgba(0, 255, 128, 0.75);
}
input[type="radio"]:checked + label::after {
color: rgba(61, 63, 67, 1);
font-family: FontAwesome;
border: 2px solid rgba(29, 201, 115, 1);
content: "\f00c";
font-size: 24px;
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background: white;
box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
}
input[type="radio"]#control_05:checked + label {
background: red;
border-color: red;
}
p {
font-weight: 900;
}
@media only screen and (max-width: 700px) {
section {
flex-direction: column;
}
}