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

Popular posts from this blog

Script For Login, Logout and View Using PHP, MySQL and Bootstrap

Hyperledger Development with in 10 days — Day 6

Insert CheckBox and Radio button Data in MySQL Database Using PHP