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

Popular posts from this blog

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

-
Image
I am assuming here that you are familiar with HTML and CSS. I have commented the code with the necessary information in the major part of the code. So you can understand easily. I have also attached the source code so you can download it and use it. Let's start. Note: I have updating this article on my personal blog. The following are the points we will be learn in this article: Creating Database in phpmyadmin. Create connection with MySQL database. Insert, delete and view data from MySQL database. Some Bootstrap components. Sessions in PHP. Files and IDE: Registration Login Logout Welcome Admin_login View_users Db_conection Delete.php I am using PHPStorm for the coding and Bootstrap framework for front end development. Create Database: Create Tables: Create columns in Users table: Crate Admin Table: Create Admin Columns: Registration.php: <html>   <head lang= "en" >      ...
Read more

PHP Ajax Login Validation Tutorial

-
Image
This post explains you about php login with ajax. In this example, first of all we will validate the user details using ajax library and showing the appropriate result. If user enter correct detail (ie:- admin/admin in this example)we will be redirected to the “index.php” and if you will try to directly access “index.php” means without entering the user details you will redirected to “login.php”. Download Link    Demo Link Sample database design for table name contact. This table contains id (primary key), name and age. CREATE TABLE IF NOT EXISTS `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `uname` varchar(50) NOT NULL `password` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) dbConnect.inc.php Contains database connectivity code $mysql_db_hostname = "Host name"; $mysql_db_user = "UserName"; $mysql_db_password = "Password"; $mysql_db_database = "Database Name"; $con = mysql_connect($mysql_db_hostname, $mysql_db_user, ...
Read more

Insert CheckBox and Radio button Data in MySQL Database Using PHP

-
Image
MY-SQL Code CREATE DATABASE IF NOT EXISTS databasename; CREATE TABLE students( student_name varchar(255) NOT NULL, student_email varchar(255) NOT NULL, student_contact varchar(255) NOT NULL, student_address varchar(255) NOT NULL, stars varchar(25) NOT NULL, sports varchar(25) NOT NULL, gender text(25) NOT NULL, )     Download Code     LIVE DEMO   page- formelements.php   php code <?php $connection = mysqli_connect("localhost", "root", "","formdatainsert"); // Establishing Connection with Server //$db = mysql_select_db("colleges", $connection); // Selecting Database from Server if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL $name = $_POST['name']; $email = $_POST['email']; $contact = $_POST['contact']; $address = $_POST['address']; $sports=implode(' , ',$_POST['sports']); $star=implode(' , ',$_POST['star']); ...
Read more