html css timeslot
demo link: http://codepen.io/magnus16/pen/JdjpNW
code here:
<html class=""><head><script src="//assets.codepen.io/assets/editor/live/console_runner-ba402f0a8d1d2ce5a72889b81a71a979.js"></script><script src="//assets.codepen.io/assets/editor/live/events_runner-902c66a0175801ad4cdf661b3208a97b.js"></script><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-bad5f8d322020126e7b4287d497c7efe.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/magnus16/pen/JdjpNW">
<style class="cp-pen-styles">body {
background: #16a085;
color: #fff;
font-family: verdana;
}
.clock-container {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px 0;
}
.pie {
height: 50%;
width: calc(50% - 2px);
background: rgb(11, 139, 114);
display: block;
float: left;
margin-right: 2px !important;
margin-bottom: 2px !important;
cursor: pointer;
-webkit-transition: all 300ms cubic-bezier(.45, -0.6, .52, 1.6);
transition: all 300ms cubic-bezier(.45, -0.6, .52, 1.6);
color: #fff;
position: relative;
}
.pie:hover {
background: #fff;
color: #16a085;
}
.pie span {
position: absolute;
width: 100%;
text-align: center;
}
.pie-morning {
border-top-left-radius: 100%;
}
.pie-morning span {
bottom: 15px;
}
#radio-morning:checked ~ .clock-container .pie-morning {
-webkit-transform: scale(1.05) translate(-10px, -10px);
transform: scale(1.05) translate(-10px, -10px);
background: #fff;
color: #16a085;
}
.pie-afternoon {
border-top-right-radius: 100%;
}
.pie-afternoon span {
bottom: 15px;
}
#radio-afternoon:checked ~ .clock-container .pie-afternoon {
-webkit-transform: scale(1.05) translate(10px, -10px);
transform: scale(1.05) translate(10px, -10px);
background: #fff;
color: #16a085;
}
.pie-evening {
border-bottom-right-radius: 100%;
}
.pie-evening span {
top: 15px;
}
#radio-evening:checked ~ .clock-container .pie-evening {
-webkit-transform: scale(1.05) translate(10px, 10px);
transform: scale(1.05) translate(10px, 10px);
background: #fff;
color: #16a085;
}
.pie-night {
border-bottom-left-radius: 100%;
}
.pie-night span {
top: 15px;
}
#radio-night:checked ~ .clock-container .pie-night {
-webkit-transform: scale(1.05) translate(-15px, 15px);
transform: scale(1.05) translate(-10px, 10px);
background: #fff;
color: #16a085;
}
.time-picker-container {
position: relative;
width: 450px;
margin:100px auto;
}
.time-picker-container input[type="radio"] {
display: none;
}
h2.time-display {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
overflow: hidden;
height: 40px;
background: rgb(11, 139, 114);
padding: 10px;
text-align: center;
font-weight: bold !important;
line-height: 40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
span.time-display-inner {
display: block;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.time-display-inner span {
display: block;
}
#radio-morning:checked ~ .time-display .time-display-inner {
-webkit-transform: translateY(0);
transform: translateY(0);
}
#radio-afternoon:checked ~ .time-display .time-display-inner {
-webkit-transform: translateY(-39px);
transform: translateY(-39px);
}
#radio-evening:checked ~ .time-display .time-display-inner {
-webkit-transform: translateY(-81px);
transform: translateY(-81px);
}
#radio-night:checked ~ .time-display .time-display-inner {
-webkit-transform: translateY(-120px);
transform: translateY(-120px);
}</style></head><body>
<div class="time-picker-container">
<input name="AppointmentDateTime" id="radio-morning" type="radio">
<input name="AppointmentDateTime" id="radio-afternoon" type="radio">
<input name="AppointmentDateTime" id="radio-evening" type="radio">
<input name="AppointmentDateTime" id="radio-night" type="radio">
<div class="clock-container">
<label for="radio-morning" class="pie pie-morning">
<span>Morning</span>
</label>
<label for="radio-afternoon" class="pie pie-afternoon">
<span>Afternoon</span>
</label>
<label for="radio-night" class="pie pie-night">
<span>Night</span>
</label>
<label for="radio-evening" class="pie pie-evening">
<span>Evening</span>
</label>
</div>
<h2 class="time-display">
<span class="time-display-inner">
<span>9AM to 12PM</span>
<span>12PM to 3PM</span>
<span>3PM to 6PM</span>
<span>6PM to 9PM</span>
</span>
</h2>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body></html>
Comments
Post a Comment