*{

User-select: none;

*:focus

{ outline: none;

Html, body

{ height: 100%; min-height: 100%;}

Body

{ font-family: “Segoe UI”, Tahoma, Geneva, Verdana, sans-serif; padding-bottom: 100px; margin: 0;
background-color: #ebf3f3;

.brd { border: 1px solid #e2eded; border-color: #eafif1 #e4eded #dbe7e7 #e4eded;}

#info { position: absolute; top: 0; right: 0; left: 0; color: #2d3667; font-size: 16px; text-align: center;
padding: 14px; background-color: #f3f9f9;

#app-cover { position: absolute; top: 0; right: 0; left: O; width: 300px; height: 42px; margin: 100px auto 0
auto; z-index: 1;

#select-button { position: relative; height: 16px; padding: 12px 14px; background-color: #fff; border-
radius: 4px; cursor: pointer;

#options-view-button { position: absolute; top: 0; right: 0; bottom: 0;

Left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3;

#selected-value { font-size: 16px; line-height: 1; margin-right: 26px;

.option I { width: 16px; height: 16px;

.option,

.label { color: #2d3667; font-size:16px;

#chevrons { position: absolute; top:0;

Right: 0;

Color: #didede; font-size: 12px; text-align: right;

#options-view-button:checked + #select-button #chevrons I { color: #2d3667;

-
.options { position: absolute; left: O; width: 250px;

Shar

#options{ position: absolute; top: 42px; right: 0; left: 0; width: 298px; margin: 0 auto; background-color:
#ff; border-radius: 4px;

#options-view-button:checked #options

Border: 1px solid #e2eded;

Border-color: #eaflfl #e4eded #dbe7e7 #e4eded;

.option position: relative; line-height: 1; transition: 0.3s ease all; z-index: 2;

Option I position: absolute; left: 14px; padding: 0; display: none;

#options-view-button:checked - #options .option ir display: block; Share padding: 12px 0;

Label( display: none padding: 0; margin-left: 27px;

#options-view-button:checked-#options label display: block; padding: 12px 14px;

S-c{ position: absolute; left: 0 width: 100%; height: 50%;

13

S-c.top top: 0;

S-c.bottom bottom: 0;

Oislike

Input[type=”radio”] position: absolute; right: 0; left: 0; width: 100%; height: 5O%; margin: o opacity: 0
cursor: pointer;

S-choveril color: #fff; opacity: 0

S-c:hover

Height: 100%; Z-index:

s-c.bottom:hover+ il bottom:-25px;
animation: moveup 0.3s ease 0.1s forwards;

S-c.top:hover – I top:-25px

Animation: movedown 0.3s ease 0.1s forwards;

13

@keyframes moveup{ 0%( bottom:-25px; opacity: 0; 100%

Bottom: 0; opacity: 1;

Dislike

@keyframes movedown

0%( top:-25pxx opacity: 0

100% ( top: 0; opacity: 1;

Label

Transition: 0.3s ease all;

Opt-val ( position: absolute; left: 14px width: 217px; height: 21px; opacity: 0; background-color: #ff;
transform: scale(0)}

Option input[type=”radio1becked-.opt-val{ opacity: 1; transform: scale(l);

Option input[type=”radio1becked-.opt-val{ opacity: 1; transform: scale(l);

Option input[type=”radio}checked- it

Top: :0 bottom: auto; opacity: 1; animation: unset;

Disik

Option input[type=”radio checked- I, option input[type=”radio”];:checked label{ color: #ff

Option input[type=”radio)checked- Jabeltbefore (

Content: “;

Position: absolute; top: 0; right: 0; bottom: 0; left: 0 Z-index:-;

#options-view-button.not(checked) #options option

Input[type=”radio”tchecked opt-val top:-30px

Optionnth-child0) inputitype=”radio”tchecked – Jabeltbefore( background-color: #000; border-radius;:

4px 4px 0 0;

Optionnth-child(|) input[type=”radio”}checked-opt-val top:-31pxx

Option:.nth-child /2) input[type background-color: #ea4c89

Checked- Jabeltbefore(

Optionnth-child 2) input(type=”radio”)checked -optval ( top:-71px

Option.nth-child(3) input[types”radio”)checked- Jlabetbefore( background-color: #O0S7ff;

Disik

Optionnth-child(3) input[typeradío)checked- opt-val

Top:-mpx;

Option.nth-child(4) inputtype=”radio)checkedJabetbefore background-color: #32¢766;

Optionnth-child(4) input[type=”radio”)checked-optval top:-151px

Option:nth-child(5) input[type=”radio”).checked – Jabelbefore

Background-color: #t48024;

Optionnth-child(5) input[type=”radiochecked-opt-val

Top:-191p

Option.nth-child(6) input[typesradio”Jchecked- Jabeltbefore background-color: #006400; border-radius:

0 0 4px 4px

Optionnth-child(6) input[type=”radio”]checked- opt-val

Topt-231px

Option fa-codepen ( color: #000;

Option fa-dribbble( color: #ea4c89,

Option.fa-behance color: #0057f;

Option fa-hackerrank color: #32c766;

Option fa-stack-overflow color: #148024;

Option fa-free-code-camp{ color: #006400:

Toption-bg( position absolute; top: 0 right lett: :0; height: 40px; transition: 0.3s ease all;

Z-index: 1;

Display: none;

Share

#options-view-button:checked-#options #option-bg display: block;

Option:hover label color: #fff;

Option:nth-child():hover -# option-bg (

Top: 0; background-color: #000; border-radius: 4px 4px 0 0;

Option:nth-child(2):hovoftoption-bg top: 40pxx background-color: #ea4c89

13

Optionnth-child(3);hover #option-bg ( top: 80px; background-color: #0057ff;

Option:nth-child(4):hoverdoption-bg{ top: 120px background-color: #32c766;

Option:nth-child(5)hover-#option-bg( top: 160px background-color: #f48024;

Disllke

Option:nth-child(6):hover #option-bg top: 200px background-color: #006400; border-radius: 0 0 4px

4px;