<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #f5f5f5;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: black;
}
body .btn,
body .btn2 {
width: 300px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
color: rgba(255,255,255,0.9);
border-radius: 50px;
background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
background-size: 600%;
-webkit-animation: anime 5s linear infinite;
animation: anime 5s linear infinite;
}
body .btn2 {
position: absolute;
margin-top: -70px;
z-index: -1;
-webkit-filter: blur(30px);
filter: blur(30px);
opacity: 0.8;
}
@-webkit-keyframes anime {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes anime {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="btn">Call to action
<div class="btn2"></div>
</div>
</body>
</html>
===================================================================================
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
.container {
width: 390px;
height: 549px;
background: #000;
margin-left: auto;
margin-right: auto;
margin-top: 11px;
-webkit-box-shadow: 0px 0px 114px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 114px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 114px 2px rgba(0, 0, 0, 0.75);
svg {
position: absolute;
}
}
.rect1 {
z-index: 1;
stroke-dasharray: 197 509;
stroke-dashoffset: -729;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.rect2 {
z-index: 1;
stroke-dasharray: 197 509;
stroke-dashoffset: -1058;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.text {
position: absolute;
margin-top: 254px;
border: none;
background: #000;
margin-left: 101px;
color: gray;
width: 196px;
height: 44px;
padding-left: 3px;
z-index: 100;
font-family: 'Roboto', sans-serif;
padding-top: 21px;
transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
&:focus {
outline-width: 0;
font-size: 16px;
}
}
.pass {
position: absolute;
margin-top: 305px;
border: none;
background: #000;
margin-left: 101px;
color: gray;
width: 196px;
height: 44px;
padding-left: 3px;
z-index: 100;
font-family: 'Roboto', sans-serif;
padding-top: 21px;
transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
&:focus {
outline-width: 0;
font-size: 16px;
}
}
button {
position: absolute;
z-index: 100;
width: 149px;
height: 43px;
border: 1px solid #fff;
background: #000;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 16px;
border-radius: 22px;
margin-top: 421px;
margin-left: 120.5px;
transition: 0.5s;
cursor: pointer;
&:hover {
color: #000;
background: #fff;
}
&:focus {
outline-width: 0;
}
}
.header {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 48px;
margin-left: 128px;
margin-top: 81px;
}
.info {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #BDFFBD
;
font-size: 14px;
margin-left: 125px;
margin-top: 181px;
}
</style>
</head>
<body>
<div class="al"></div>
<div class="container">
<div class="header">Sign In</div>
<div class='info'>*Click on the input boxes</div>
<input id='username' class='text' onfocus="handle2()" class='inc2' type="text" name="Username" placeholder='Username' value="">
<!-- Had to remove the type "password" due to the browser user credential's autofill-->
<input id='password' class='pass' onfocus="handle1()" class='inc1' type="pass" name="Password" placeholder='Password' value="">
<button>Sign In</button>
<svg width="390" height="549" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id='rect' class='rect1' x="45px" y="300px" rx="27" ry="27" width="300px" height="50px" style="stroke: #fff; stroke-width: 1px; fill: #000" />
</svg>
</div>
<script>
let rect = document.getElementById("rect");
let username = document.getElementById("username");
let password = document.getElementById("password");
function handle1() {
rect.setAttribute("class", "rect2");
}
function handle2() {
rect.setAttribute("class", "rect1");
}
//For codepen header!!!
setTimeout(() => {
password.focus();
}, 500);
setTimeout(() => {
username.focus();
}, 1500);
</script>
</body>
</html>
============================================
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* base.scss */
html {
box-sizing: border-box;
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
table {
width: 100%;
}
iframe {
border: 0;
height: 100%;
width: 100%;
}
button {
background: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
small {
display: block;
}
fieldset {
margin: 0;
}
input,
fieldset {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 0;
margin: 0;
min-width: 0;
font-size: 1.0rem;
font-family: inherit;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
img {
display: block;
height: auto;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
svg {
display: block;
pointer-events: none;
}
a {
color: inherit;
display: block;
text-decoration: none;
}
p > a {
display: inline;
font-family: inherit;
font-size: inherit;
font-style: inherit;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
/* type.scss */
html {
font-size: 62.5%;
line-height: 1.5;
}
body, h1, h2, h3, h4, h5, h6, label, button, input, select, textarea, li, a, strong, i, span, th, td {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.6rem;
font-weight: 300;
text-rendering: optimizeSpeed;
}
h1 {
font-weight: 900;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.125;
margin-top: 0;
text-rendering: optimizeLegibility;
}
p + p {
margin-top: 1.5em;
}
/* mixins.scss */
/* z_index.scss */
/* utility.scss */
.u-m0 {
margin: 0;
}
.u-mt0 {
margin-top: 0;
}
.u-mr0 {
margin-right: 0;
}
.u-mb0 {
margin-bottom: 0;
}
.u-ml0 {
margin-left: 0;
}
.u-m05 {
margin: 5px;
}
.u-m1 {
margin: 10px;
}
.u-mt1 {
margin-top: 10px;
}
.u-mr1 {
margin-right: 10px;
}
.u-mb1 {
margin-bottom: 10px;
}
.u-ml1 {
margin-left: 10px;
}
.u-m2 {
margin: 20px;
}
.u-mt2 {
margin-top: 20px;
}
.u-mr2 {
margin-right: 20px;
}
.u-mb2 {
margin-bottom: 20px;
}
.u-ml2 {
margin-left: 20px;
}
.u-p0 {
padding: 0;
}
.u-pt0 {
padding-top: 0;
}
.u-pr0 {
padding-right: 0;
}
.u-pb0 {
padding-bottom: 0;
}
.u-pl0 {
padding-left: 0;
}
.u-p1 {
padding: 10px;
}
.u-pt1 {
padding-top: 12px;
}
.u-pr1 {
padding-right: 12px;
}
.u-pb1 {
padding-bottom: 12px;
}
.u-pl1 {
padding-left: 12px;
}
.u-p2 {
padding: 20px;
}
.u-pt2 {
padding-top: 20px;
}
.u-pr2 {
padding-right: 20px;
}
.u-pb2 {
padding-bottom: 20px;
}
.u-pl2 {
padding-left: 20px;
}
.u-db {
display: block;
}
.u-show {
display: block !important;
}
.u-show-dib {
display: inline-block !important;
}
.u-dn {
display: none;
}
.u-hide {
display: none !important;
}
.u-hide-off-canvas {
position: absolute;
top: 0;
-webkit-transform: translateX(3000px);
transform: translateX(3000px);
}
.u-dib {
display: inline-block;
}
.u-fl {
float: left;
}
.u-full-height {
min-height: 100vh;
}
.u-full-width-break-container {
margin-left: calc(-50vw + 50%);
width: 100vw;
}
.u-relative {
position: relative;
}
.u-absolute {
position: absolute;
}
.u-fixed {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
}
.u-pos-t0 {
top: 0;
}
.u-pos-r0 {
right: 0;
}
.u-pos-b0 {
bottom: 0;
}
.u-pos-l0 {
left: 0;
}
.u-pos-tr0 {
top: 0;
right: 0;
bottom: auto;
left: auto;
}
.u-pos-tl0 {
top: 0;
right: auto;
bottom: auto;
left: 0;
}
.u-pos-br0 {
top: auto;
right: 0;
bottom: 0;
left: auto;
}
.u-pos-bl0 {
top: auto;
right: auto;
bottom: 0;
left: 0;
}
.u-pos-tr10 {
top: 10px;
right: 10px;
}
.u-pos-tl10 {
top: 10px;
left: 10px;
}
.u-pos-br10 {
bottom: 10px;
right: 10px;
}
.u-pos-bl10 {
bottom: 10px;
left: 10px;
}
.u-pos-c {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
}
.u-b-radius {
border-radius: 3px;
}
.u-b-radius-round {
border-radius: 50%;
}
.u-b-radius-big {
border-radius: 40px;
}
.u-b-radius-top {
border-radius: 3px 3px 0 0;
}
.u-b-radius-bottom {
border-radius: 0 0 3px 3px;
}
.u-b-radius-right {
border-radius: 0 3px 3px 0;
}
.u-b-radius-left {
border-radius: 3px 0 0 3px;
}
.u-oh {
overflow: hidden;
}
.u-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.u-div-c {
margin: 0 auto;
}
.u-text-c {
text-align: center;
}
.u-text-r {
text-align: right;
}
.u-cursor-hand {
cursor: pointer;
}
.u-text-small {
font-size: 1.2rem;
}
.u-text-disclaimer {
font-size: 1.2rem;
font-style: italic;
}
.u-btn-wrapper {
padding: 15px 12px;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
z-index: 2;
}
/* grid.scss */
.grid-u,
[class*="grid-u-"] {
display: inline-block;
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
zoom: 1;
}
.grid-r {
word-spacing: -0.34em;
}
.opera-only :-o-prefocus,
.grid-r {
/* Opera 12 on Windows needs word-spacing. The ".opera-only" selector is used to prevent actual prefocus styling and is not required in markup. */
word-spacing: -0.43em;
}
@media (min-width: 25em) {
.grid-u-sm-1-5 {
width: 20%;
}
.grid-u-sm-1-4,
.grid-u-sm-3-12 {
width: 25%;
}
.grid-u-sm-1-3,
.grid-u-sm-4-12 {
width: 33.3333%;
}
.grid-u-sm-2-5 {
width: 40%;
}
.grid-u-sm-1-2,
.grid-u-sm-6-12 {
width: 50%;
}
.grid-u-sm-3-5 {
width: 60%;
}
.grid-u-sm-2-3,
.grid-u-sm-4-6,
.grid-u-sm-8-12 {
width: 66.6667%;
}
.grid-u-sm-3-4,
.grid-u-sm-9-12 {
width: 75%;
}
.grid-u-sm-1 {
width: 100%;
}
}
@media (min-width: 34.375em) {
.grid-u-md-1-5 {
width: 20%;
}
.grid-u-md-1-4,
.grid-u-md-3-12 {
width: 25%;
}
.grid-u-md-1-3,
.grid-u-md-4-12 {
width: 33.3333%;
}
.grid-u-md-2-5 {
width: 40%;
}
.grid-u-md-1-2,
.grid-u-md-6-12 {
width: 50%;
}
.grid-u-md-3-5 {
width: 60%;
}
.grid-u-md-2-3,
.grid-u-md-4-6,
.grid-u-md-8-12 {
width: 66.6667%;
}
.grid-u-md-3-4,
.grid-u-md-9-12 {
width: 75%;
}
.grid-u-md-1 {
width: 100%;
}
}
@media (min-width: 46.875em) {
.grid-u-lg-1-5 {
width: 20%;
}
.grid-u-lg-1-4,
.grid-u-lg-3-12 {
width: 25%;
}
.grid-u-lg-1-3,
.grid-u-lg-4-12 {
width: 33.3333%;
}
.grid-u-lg-2-5 {
width: 40%;
}
.grid-u-lg-1-2,
.grid-u-lg-6-12 {
width: 50%;
}
.grid-u-lg-3-5 {
width: 60%;
}
.grid-u-lg-2-3,
.grid-u-lg-4-6,
.grid-u-lg-8-12 {
width: 66.6667%;
}
.grid-u-lg-3-4,
.grid-u-lg-9-12 {
width: 75%;
}
.grid-u-lg-1 {
width: 100%;
}
}
@media (min-width: 62.5em) {
.grid-u-xl-1-5 {
width: 20%;
}
.grid-u-xl-1-4,
.grid-u-xl-3-12 {
width: 25%;
}
.grid-u-xl-1-3,
.grid-u-xl-4-12 {
width: 33.3333%;
}
.grid-u-xl-2-5 {
width: 40%;
}
.grid-u-xl-1-2,
.grid-u-xl-6-12 {
width: 50%;
}
.grid-u-xl-3-5 {
width: 60%;
}
.grid-u-xl-2-3,
.grid-u-xl-4-6,
.grid-u-xl-8-12 {
width: 66.6667%;
}
.grid-u-xl-3-4,
.grid-u-xl-9-12 {
width: 75%;
}
.grid-u-xl-1 {
width: 100%;
}
}
/* icons.scss */
@font-face {
font-family: 'comeon-iconset';
src: url("https://dl.dropboxusercontent.com/u/26351585/Comeon/comeon-iconfamily.woff2") format("woff2");
src: url("https://dl.dropboxusercontent.com/u/26351585/Comeon/comeon-iconfamily.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.btn--error {
/* overrides for Error State */
}
.btn--in-progress {
/* overrides for In Progress State */
}
.no-touchevents .btn.btn--main-cta:hover {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
.no-touchevents .btn.btn--secondary:hover {
-webkit-transform: none;
transform: none;
}
input[type="radio"] {
position: fixed;
left: -100px;
}
input:not([type="radio"]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
display: block;
-webkit-transition: 300ms ease;
transition: 300ms ease;
border-radius: 7px;
border: 0;
max-height: 0;
margin: 0;
padding: 0 10px;
overflow: hidden;
width: 250px;
opacity: 0;
font-size: 16px;
text-align: center;
outline: 0;
}
[id="sign-in"]:checked ~ input.sign-in,
[id="sign-up"]:checked ~ input.sign-up,
[id="reset"]:checked ~ input.reset {
max-height: 40px;
padding: 10px;
margin: 10px 0;
opacity: 1;
}
button {
width: 250px;
height: 40px;
border-radius: 7px;
background-color: #16a085;
font-size: 0;
}
button:before {
font-size: 16px;
}
[id="sign-in"]:checked ~ button:before {
content: "Sign In";
}
[id="sign-up"]:checked ~ button:before {
content: "Sign Up";
}
[id="reset"]:checked ~ button:before {
content: "Reset password";
}
label {
position: relative;
display: inline-block;
text-align: center;
font-weight: 700;
cursor: pointer;
color: #16a085;
-webkit-transition: 300ms ease;
transition: 300ms ease;
width: calc(100% / 3 - 4px);
}
label:after {
content: "";
border: 10px solid transparent;
position: absolute;
bottom: -10px;
left: calc(50% - 10px);
-webkit-transition: inherit;
transition: inherit;
}
[id="sign-in"]:checked ~ [for="sign-in"],
[id="sign-up"]:checked ~ [for="sign-up"],
[id="reset"]:checked ~ [for="reset"] {
color: #fff;
}
[id="sign-in"]:checked ~ [for="sign-in"]:after,
[id="sign-up"]:checked ~ [for="sign-up"]:after,
[id="reset"]:checked ~ [for="reset"]:after {
border-bottom-color: #fff;
}
.flex-wrap {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
flex-wrap: wrap;
height: 300px;
text-align: center;
}
body {
background-color: #1abc9c;
font-size: 16px;
}
</style>
</head>
<body>
<div class="flex-wrap">
<fieldset>
<form action novalidate>
<input type="radio" name="rg" id="sign-in" checked/>
<input type="radio" name="rg" id="sign-up" />
<input type="radio" name="rg" id="reset" />
<label for="sign-in">Sign in</label>
<label for="sign-up">Sign up</label>
<label for="reset">Reset</label>
<input class="sign-up sign-in reset" type="email" placeholder="Email" />
<input class="sign-up sign-in" type="password" placeholder ="Password" />
<input class="sign-up" type="password" placeholder ="Repeat Password" />
<button>Submit</button>
<p>In response to <a href="https://codepen.io/IanHazelton/details/bgwEPa/" target="_blank">this pen</a></p>
</form>
</fieldset>
</div>
</body>
</html>
==================================================
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: lightgrey;
font-family: sans-serif;
}
.Login-Wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 450px;
height: 490px;
border-radius: 3px;
background: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.Field {
position: relative;
padding: 20px;
float: left;
height: 80px;
}
.Field--half {
width: 50%;
}
.Field--full {
width: 100%;
}
.Field-label {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 20px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
overflow: hidden;
border: 1px solid transparent;
}
.Field-text {
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
border: none;
padding: 20px;
height: 40px;
font-size: 13px;
width: 100%;
color: #a8b1b8;
border: 1px solid transparent;
}
.Field-text:focus {
background: #d7ebf6;
outline: none;
border: 1px solid #5cadd8;
border-top: 0;
}
.Field-text:focus ~ .Field-label {
background: #d7ebf6;
color: #5cadd8;
border: 1px solid #5cadd8;
}
.Field-button {
width: 100%;
padding: 15px 30px;
border: none;
}
.Field-button--submit {
background: #7fa743;
box-shadow: inset 0 -5px 0 #638334;
color: white;
}
.Field-button--facebook {
background: #617db7;
box-shadow: inset 0 -5px 0 #48649d;
color: white;
}
.Login-row {
width: 100%;
padding: 20px;
float: left;
border-top: 1px solid #e0e3e6;
}
</style>
</head>
<body>
<div class="Login-Wrap">
<div class="Field Field--half">
<input type="text" id="name" class="Field-text" autocomplete="off" placeholder="Name *" autofocus>
<label for="name" class="Field-label">Name</label>
</div>
<div class="Field Field--half">
<input type="text" id="surname" class="Field-text" autocomplete="off" placeholder="Lastname *">
<label for="surname" class="Field-label">Lastname</label>
</div>
<div class="Field Field--half">
<input type="text" id="email" class="Field-text" autocomplete="off" placeholder="Email *">
<label for="email" class="Field-label">E-mail</label>
</div>
<div class="Field Field--half">
<input type="password" id="password" class="Field-text" autocomplete="off" placeholder="Password *">
<label for="password" class="Field-label">Password</label>
</div>
<div class="Login-row">
<button class="Field-button Field-button--submit">Sign up</button>
</div>
<div class="Field Field--full">
<input type="text" id="email2" class="Field-text" autocomplete="off" placeholder="Email *">
<label for="email2" class="Field-label">E-mail</label>
</div>
<div class="Field Field--full">
<input type="password" id="password2" class="Field-text" autocomplete="off" placeholder="Password *">
<label for="password2" class="Field-label">Password</label>
</div>
<div class="Login-row">
<button class="Field-button Field-button--facebook">Sign in</button>
</div>
</div>
</body>
</html>
======================================
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
input[type="radio"] {
position: absolute;
opacity: 0;
}
.ui-calendar {
position: relative;
}
.ui-header {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(3vmin);
transform: translateX(3vmin);
width: 100%;
height: 9vmin;
line-height: 9vmin;
text-transform: uppercase;
}
.ui-header > .ui-text {
position: absolute;
height: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
letter-spacing: inherit;
}
.ui-header > .ui-text.-month-year {
opacity: 0;
}
/* ---------------------------------- */
.ui-grid {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 9vmin;
z-index: 100;
pointer-events: none;
}
.ui-column,
.ui-row {
position: absolute;
border: solid 0px;
border-color: #797979;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.55, 1);
transition-timing-function: cubic-bezier(0.5, 0, 0.55, 1);
-webkit-transition-property: border-color, -webkit-transform;
transition-property: border-color, -webkit-transform;
transition-property: transform, border-color;
transition-property: transform, border-color, -webkit-transform;
}
.ui-row {
left: 0;
right: 0;
border-top-width: 1px;
}
.ui-column {
top: 0;
bottom: 0;
border-left-width: 1px;
}
.ui-row {
-webkit-transform: translate(6.75vmin, calc( -7.3125vmin + (var(--row) - 1) * 6.75vmin / var(--rows) )) scaleX(0.0975);
transform: translate(6.75vmin, calc( -7.3125vmin + (var(--row) - 1) * 6.75vmin / var(--rows) )) scaleX(0.0975);
-webkit-transition-delay: calc(var(--row) * 60ms);
transition-delay: calc(var(--row) * 60ms);
}
.ui-column {
-webkit-transform: translate(calc( -8.4375vmin + ((var(--columns)) * 9vmin) + (var(--col) - 1) * 6.75vmin / var(--columns) ), -7.3125vmin) scaleY(0.1275);
transform: translate(calc( -8.4375vmin + ((var(--columns)) * 9vmin) + (var(--col) - 1) * 6.75vmin / var(--columns) ), -7.3125vmin) scaleY(0.1275);
-webkit-transition-delay: calc( ( (var(--columns) - var(--col)) * 60ms ));
transition-delay: calc( ( (var(--columns) - var(--col)) * 60ms ));
}
.ui-calendar:focus .ui-column,
.ui-calendar:focus .ui-row {
border-color: #E3E3E3;
}
.ui-calendar:focus .ui-row {
-webkit-transform: translate(0em, calc( (var(--row) - 1) * 9vmin )) scaleX(1);
transform: translate(0em, calc( (var(--row) - 1) * 9vmin )) scaleX(1);
-webkit-transition-delay: calc(var(--row) * 40ms);
transition-delay: calc(var(--row) * 40ms);
}
.ui-calendar:focus .ui-column {
-webkit-transform: translate(calc( (var(--col) - 1) * 9vmin ), 0em) scaleY(1);
transform: translate(calc( (var(--col) - 1) * 9vmin ), 0em) scaleY(1);
-webkit-transition-delay: calc( ( (var(--columns) - var(--col)) * 40ms ));
transition-delay: calc( ( (var(--columns) - var(--col)) * 40ms ));
}
/* ---------------------------------- */
.ui-text {
white-space: nowrap;
font-size: 3vmin;
}
.ui-text.-month-year:before, .ui-text.-month-year:after {
position: absolute;
content: '';
top: 3vmin;
height: 3vmin;
width: 3vmin;
border: 2px solid gray;
border-right: none;
border-bottom: none;
-webkit-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.ui-text.-month-year:before {
-webkit-transform: scale(1, 1) translateX(0) rotate(-45deg);
transform: scale(1, 1) translateX(0) rotate(-45deg);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
left: -18vmin;
}
.ui-text.-month-year:after {
-webkit-transform: scale(1, 1) translateX(0) rotate(135deg);
transform: scale(1, 1) translateX(0) rotate(135deg);
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
right: -18vmin;
}
.ui-day {
display: -webkit-box;
display: flex;
position: absolute;
height: 9vmin;
width: 9vmin;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-transform: translate(var(--x, 0), var(--y));
transform: translate(var(--x, 0), var(--y));
font-size: 3vmin;
cursor: pointer;
}
.ui-day:before {
content: attr(data-day);
-webkit-transition-delay: calc(0s + (30 - var(--day)) * 20ms);
transition-delay: calc(0s + (30 - var(--day)) * 20ms);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.ui-day:nth-of-type(n + 1):nth-of-type(-n + 7) {
--y: 9vmin;
}
.ui-day:nth-of-type(n + 8):nth-of-type(-n + 14) {
--y: 18vmin;
}
.ui-day:nth-of-type(n + 15):nth-of-type(-n + 21) {
--y: 27vmin;
}
.ui-day:nth-of-type(n + 22):nth-of-type(-n + 28) {
--y: 36vmin;
}
.ui-day:nth-of-type(n + 29):nth-of-type(-n + 35) {
--y: 45vmin;
}
.ui-day:nth-of-type(7n + 1) {
--x: 9vmin;
}
.ui-day:nth-of-type(7n + 2) {
--x: 18vmin;
}
.ui-day:nth-of-type(7n + 3) {
--x: 27vmin;
}
.ui-day:nth-of-type(7n + 4) {
--x: 36vmin;
}
.ui-day:nth-of-type(7n + 5) {
--x: 45vmin;
}
.ui-day:nth-of-type(7n + 6) {
--x: 54vmin;
}
.ui-day:nth-of-type(7n + 7) {
--x: 63vmin;
}
#day-1:checked ~ .ui-calendar .ui-day[for="day-1"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-1:checked ~ .ui-calendar .ui-day[for="day-1"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-2:checked ~ .ui-calendar .ui-day[for="day-2"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-2:checked ~ .ui-calendar .ui-day[for="day-2"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-3:checked ~ .ui-calendar .ui-day[for="day-3"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-3:checked ~ .ui-calendar .ui-day[for="day-3"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-4:checked ~ .ui-calendar .ui-day[for="day-4"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-4:checked ~ .ui-calendar .ui-day[for="day-4"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-5:checked ~ .ui-calendar .ui-day[for="day-5"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-5:checked ~ .ui-calendar .ui-day[for="day-5"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-6:checked ~ .ui-calendar .ui-day[for="day-6"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-6:checked ~ .ui-calendar .ui-day[for="day-6"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-7:checked ~ .ui-calendar .ui-day[for="day-7"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-7:checked ~ .ui-calendar .ui-day[for="day-7"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-8:checked ~ .ui-calendar .ui-day[for="day-8"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-8:checked ~ .ui-calendar .ui-day[for="day-8"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-9:checked ~ .ui-calendar .ui-day[for="day-9"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-9:checked ~ .ui-calendar .ui-day[for="day-9"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-10:checked ~ .ui-calendar .ui-day[for="day-10"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-10:checked ~ .ui-calendar .ui-day[for="day-10"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-11:checked ~ .ui-calendar .ui-day[for="day-11"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-11:checked ~ .ui-calendar .ui-day[for="day-11"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-12:checked ~ .ui-calendar .ui-day[for="day-12"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-12:checked ~ .ui-calendar .ui-day[for="day-12"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-13:checked ~ .ui-calendar .ui-day[for="day-13"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-13:checked ~ .ui-calendar .ui-day[for="day-13"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-14:checked ~ .ui-calendar .ui-day[for="day-14"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-14:checked ~ .ui-calendar .ui-day[for="day-14"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-15:checked ~ .ui-calendar .ui-day[for="day-15"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-15:checked ~ .ui-calendar .ui-day[for="day-15"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-16:checked ~ .ui-calendar .ui-day[for="day-16"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-16:checked ~ .ui-calendar .ui-day[for="day-16"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-17:checked ~ .ui-calendar .ui-day[for="day-17"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-17:checked ~ .ui-calendar .ui-day[for="day-17"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-18:checked ~ .ui-calendar .ui-day[for="day-18"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-18:checked ~ .ui-calendar .ui-day[for="day-18"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-19:checked ~ .ui-calendar .ui-day[for="day-19"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-19:checked ~ .ui-calendar .ui-day[for="day-19"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-20:checked ~ .ui-calendar .ui-day[for="day-20"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-20:checked ~ .ui-calendar .ui-day[for="day-20"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-21:checked ~ .ui-calendar .ui-day[for="day-21"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-21:checked ~ .ui-calendar .ui-day[for="day-21"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-22:checked ~ .ui-calendar .ui-day[for="day-22"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-22:checked ~ .ui-calendar .ui-day[for="day-22"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-23:checked ~ .ui-calendar .ui-day[for="day-23"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-23:checked ~ .ui-calendar .ui-day[for="day-23"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-24:checked ~ .ui-calendar .ui-day[for="day-24"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-24:checked ~ .ui-calendar .ui-day[for="day-24"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-25:checked ~ .ui-calendar .ui-day[for="day-25"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-25:checked ~ .ui-calendar .ui-day[for="day-25"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-26:checked ~ .ui-calendar .ui-day[for="day-26"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-26:checked ~ .ui-calendar .ui-day[for="day-26"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-27:checked ~ .ui-calendar .ui-day[for="day-27"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-27:checked ~ .ui-calendar .ui-day[for="day-27"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-28:checked ~ .ui-calendar .ui-day[for="day-28"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-28:checked ~ .ui-calendar .ui-day[for="day-28"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-29:checked ~ .ui-calendar .ui-day[for="day-29"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-29:checked ~ .ui-calendar .ui-day[for="day-29"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
#day-30:checked ~ .ui-calendar .ui-day[for="day-30"] {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
#day-30:checked ~ .ui-calendar .ui-day[for="day-30"]:before {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.ui-reset {
position: absolute;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: none;
background: none;
font: inherit;
font-size: 0.7em;
right: 10.8vmin;
top: 0;
height: 9vmin;
padding: 0.25em 0.5em;
opacity: 0;
pointer-events: none;
}
input:checked ~ .ui-reset {
opacity: 0.5;
pointer-events: auto;
}
.ui-calendar {
height: 63vmin;
width: 81vmin;
/* Fix for clickable items outside of collapsed height */
pointer-events: none;
}
.ui-calendar > .ui-bg {
-webkit-transform: scaleY(0.1428571429);
transform: scaleY(0.1428571429);
}
.ui-calendar .ui-header {
pointer-events: auto;
}
.ui-calendar:focus {
pointer-events: auto;
}
.ui-calendar:focus > .ui-header {
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.ui-calendar:focus > .ui-header > .ui-text {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ui-calendar:focus > .ui-header > .ui-text.-empty {
opacity: 0;
}
.ui-calendar:focus > .ui-header > .ui-text.-month-year {
opacity: 1;
}
.ui-calendar:focus > .ui-bg {
-webkit-transform: none;
transform: none;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.ui-calendar:focus .ui-day:before {
-webkit-transform: none;
transform: none;
opacity: 1;
-webkit-transition-delay: calc(0.6s + var(--day) * 20ms);
transition-delay: calc(0.6s + var(--day) * 20ms);
}
input:checked ~ .ui-calendar > .ui-header {
-webkit-transform: translateX(7.5vmin);
transform: translateX(7.5vmin);
}
input:checked ~ .ui-calendar > .ui-header > .ui-text {
-webkit-transform: none;
transform: none;
}
input:checked ~ .ui-calendar > .ui-header > .ui-text.-empty {
opacity: 0;
}
input:checked ~ .ui-calendar > .ui-header > .ui-text.-month-year {
opacity: 1;
}
input:checked ~ .ui-calendar .ui-text.-month-year:before, input:checked ~ .ui-calendar .ui-text.-month-year:after {
opacity: 0;
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
}
.ui-calendar:not(:focus) .ui-text.-month-year:before {
-webkit-transform: scale(2, 0) translateX(500%) rotate(-45deg);
transform: scale(2, 0) translateX(500%) rotate(-45deg);
}
.ui-calendar:not(:focus) .ui-text.-month-year:after {
-webkit-transform: scale(2, 0) translateX(-500%) rotate(135deg);
transform: scale(2, 0) translateX(-500%) rotate(135deg);
}
input:checked ~ .ui-calendar:not(:focus) .ui-day:before {
-webkit-transition-delay: calc((30 - var(--day)) * 10ms);
transition-delay: calc((30 - var(--day)) * 10ms);
}
/* ---------------------------------- */
.ui-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
-webkit-transform-origin: top center;
transform-origin: top center;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
overflow: hidden;
}
body {
background-color: #649EAA;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
overflow: hidden;
color: #242424;
}
*:focus {
outline: none;
}
*, *:before, *:after {
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
box-sizing: border-box;
position: relative;
}
body, html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<a href="https://youtu.be/_8OMGE87e2Q" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<form>
<input type="radio" name="day" id="day-1" />
<input type="radio" name="day" id="day-2" />
<input type="radio" name="day" id="day-3" />
<input type="radio" name="day" id="day-4" />
<input type="radio" name="day" id="day-5" />
<input type="radio" name="day" id="day-6" />
<input type="radio" name="day" id="day-7" />
<input type="radio" name="day" id="day-8" />
<input type="radio" name="day" id="day-9" />
<input type="radio" name="day" id="day-10" />
<input type="radio" name="day" id="day-11" />
<input type="radio" name="day" id="day-12" />
<input type="radio" name="day" id="day-13" />
<input type="radio" name="day" id="day-14" />
<input type="radio" name="day" id="day-15" />
<input type="radio" name="day" id="day-16" />
<input type="radio" name="day" id="day-17" />
<input type="radio" name="day" id="day-18" />
<input type="radio" name="day" id="day-19" />
<input type="radio" name="day" id="day-20" />
<input type="radio" name="day" id="day-21" />
<input type="radio" name="day" id="day-22" />
<input type="radio" name="day" id="day-23" />
<input type="radio" name="day" id="day-24" />
<input type="radio" name="day" id="day-25" />
<input type="radio" name="day" id="day-26" />
<input type="radio" name="day" id="day-27" />
<input type="radio" name="day" id="day-28" />
<input type="radio" name="day" id="day-29" />
<input type="radio" name="day" id="day-30" />
<input type="radio" name="day" id="day-31" />
<input type="radio" name="day" id="day-32" />
<input type="radio" name="day" id="day-33" />
<input type="radio" name="day" id="day-34" />
<input type="radio" name="day" id="day-35" />
<div class="ui-calendar" tabindex="0">
<div class="ui-bg"></div>
<header class="ui-header">
<span class="ui-text -empty">Pick your date</span>
<span class="ui-text -month-year">
November, 2018
</span>
</header>
<div class="ui-grid" style="--columns: 8; --rows: 6">
<div class="ui-row" style="--row: 1"></div>
<div class="ui-row" style="--row: 2"></div>
<div class="ui-row" style="--row: 3"></div>
<div class="ui-row" style="--row: 4"></div>
<div class="ui-row" style="--row: 5"></div>
<div class="ui-row" style="--row: 6"></div>
<div class="ui-column" style="--col: 1"></div>
<div class="ui-column" style="--col: 2"></div>
<div class="ui-column" style="--col: 3"></div>
<div class="ui-column" style="--col: 4"></div>
<div class="ui-column" style="--col: 5"></div>
<div class="ui-column" style="--col: 6"></div>
<div class="ui-column" style="--col: 7"></div>
<div class="ui-column" style="--col: 8"></div>
</div>
<!-- Dates go here -->
<label class="ui-day" for="day-1" data-day="1" style="--day: 1"></label>
<label class="ui-day" for="day-2" data-day="2" style="--day: 2"></label>
<label class="ui-day" for="day-3" data-day="3" style="--day: 3"></label>
<label class="ui-day" for="day-4" data-day="4" style="--day: 4"></label>
<label class="ui-day" for="day-5" data-day="5" style="--day: 5"></label>
<label class="ui-day" for="day-6" data-day="6" style="--day: 6"></label>
<label class="ui-day" for="day-7" data-day="7" style="--day: 7"></label>
<label class="ui-day" for="day-8" data-day="8" style="--day: 8"></label>
<label class="ui-day" for="day-9" data-day="9" style="--day: 9"></label>
<label class="ui-day" for="day-10" data-day="10" style="--day: 10"></label>
<label class="ui-day" for="day-11" data-day="11" style="--day: 11"></label>
<label class="ui-day" for="day-12" data-day="12" style="--day: 12"></label>
<label class="ui-day" for="day-13" data-day="13" style="--day: 13"></label>
<label class="ui-day" for="day-14" data-day="14" style="--day: 14"></label>
<label class="ui-day" for="day-15" data-day="15" style="--day: 15"></label>
<label class="ui-day" for="day-16" data-day="16" style="--day: 16"></label>
<label class="ui-day" for="day-17" data-day="17" style="--day: 17"></label>
<label class="ui-day" for="day-18" data-day="18" style="--day: 18"></label>
<label class="ui-day -current" for="day-19" data-day="19" style="--day: 19"></label>
<label class="ui-day" for="day-20" data-day="20" style="--day: 20"></label>
<label class="ui-day" for="day-21" data-day="21" style="--day: 21"></label>
<label class="ui-day" for="day-22" data-day="22" style="--day: 22"></label>
<label class="ui-day" for="day-23" data-day="23" style="--day: 23"></label>
<label class="ui-day" for="day-24" data-day="24" style="--day: 24"></label>
<label class="ui-day" for="day-25" data-day="25" style="--day: 25"></label>
<label class="ui-day" for="day-26" data-day="26" style="--day: 26"></label>
<label class="ui-day" for="day-27" data-day="27" style="--day: 27"></label>
<label class="ui-day" for="day-28" data-day="28" style="--day: 28"></label>
<label class="ui-day" for="day-29" data-day="29" style="--day: 29"></label>
<label class="ui-day" for="day-30" data-day="30" style="--day: 30"></label>
</div>
<button type="reset" class="ui-reset">reset</button>
</form>
</body>
</html>
=======================================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
* {
box-sizing: border-box;
position: relative;
}
html, body {
font-family: Lato, sans-serif;
font-weight: 300;
line-height: 1;
background-color: #4075b7;
width: 100%;
height: 100%;
counter-reset: previous-month 29 current-month next-month;
margin: 0;
}
aside, main {
width: 50%;
height: 816px;
float: left;
padding: 0 2rem;
margin: 2rem 0;
}
header {
color: white;
}
.header-bar {
height: 1rem;
}
.header-title {
padding: 1rem;
}
.header-title h1 {
font-weight: 300;
font-size: 1rem;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
}
.header-weekdays {
height: 2rem;
}
.header-weekdays span {
font-size: 0.8rem;
display: block;
float: left;
width: 14.28571%;
padding: 0.5rem 0;
text-align: center;
text-transform: uppercase;
}
.calendar:before, .calendar:after {
content: " ";
display: table;
}
.calendar:after {
clear: both;
}
.calendar.inactive {
pointer-events: none;
}
form {
background: rgba(88, 178, 164, 0.9);
}
form:before, form:after {
content: " ";
display: table;
}
form:after {
clear: both;
}
.month {
padding: 1rem;
font-size: 1rem;
color: #333;
margin: 0;
}
.day {
float: left;
width: 14.28571%;
text-align: center;
padding: 1rem 0;
margin: 0;
font-size: 1rem;
line-height: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
-webkit-transition-property: background, color;
transition-property: background, color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.device:not(:hover) .day {
-webkit-transition-duration: 0;
transition-duration: 0;
}
.day:after {
display: block;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.day.current-month:after {
content: counter(current-month);
counter-increment: current-month;
}
.day.next-month:after {
content: counter(next-month);
counter-increment: next-month;
}
.day.previous-month:after {
content: counter(previous-month);
counter-increment: previous-month;
}
.day.previous-month, .day.next-month {
color: rgba(51, 51, 51, 0.3);
}
.day:last-of-type:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 100%;
width: 700%;
height: 100%;
background: white;
}
.day:checked, .day:checked ~ .day {
color: white;
}
.day:checked ~ .day {
background-color: transparent;
}
.day:hover, .day:checked, .day ~ .day:hover, .day ~ .day:checked {
background-color: rgba(0, 0, 0, 0.1);
color: white;
}
.day, .day:checked ~ .day:checked ~ .day, .day:checked ~ .day:hover ~ .day, .day:checked:hover ~ .day {
background-color: white;
color: #333;
}
.day.next-month, .day:checked ~ .day:checked ~ .day.next-month, .day:checked ~ .day:hover ~ .day.next-month, .day:checked:hover ~ .day.next-month {
color: rgba(51, 51, 51, 0.3);
}
.day:nth-child(7n + 1):after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.day:nth-child(7n + 2):after {
-webkit-transition-delay: 0.08571s;
transition-delay: 0.08571s;
-webkit-animation-delay: 0.08571s;
animation-delay: 0.08571s;
}
.day:nth-child(7n + 3):after {
-webkit-transition-delay: 0.17143s;
transition-delay: 0.17143s;
-webkit-animation-delay: 0.17143s;
animation-delay: 0.17143s;
}
.day:nth-child(7n + 4):after {
-webkit-transition-delay: 0.25714s;
transition-delay: 0.25714s;
-webkit-animation-delay: 0.25714s;
animation-delay: 0.25714s;
}
.day:nth-child(7n + 5):after {
-webkit-transition-delay: 0.34286s;
transition-delay: 0.34286s;
-webkit-animation-delay: 0.34286s;
animation-delay: 0.34286s;
}
.day:nth-child(7n + 6):after {
-webkit-transition-delay: 0.42857s;
transition-delay: 0.42857s;
-webkit-animation-delay: 0.42857s;
animation-delay: 0.42857s;
}
.day:nth-child(7n + 7):after {
-webkit-transition-delay: 0.51429s;
transition-delay: 0.51429s;
-webkit-animation-delay: 0.51429s;
animation-delay: 0.51429s;
}
.calendar-label-bg {
display: block;
position: absolute;
outline: none;
top: 0;
left: 0;
width: 100%;
height: 15rem;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-animation: bg-inactive 1s cubic-bezier(0.77, 0, 0.175, 1);
animation: bg-inactive 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.calendar-label-bg:checked {
-webkit-animation: bg-active 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
animation: bg-active 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.calendar-label-bg:checked ~ .calendar .day:checked:after, .calendar-label-bg:checked ~ .calendar .day:checked ~ .day:after {
-webkit-animation-name: day-active;
animation-name: day-active;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.calendar-label-bg:checked ~ .calendar .day:checked ~ .day:checked ~ .day:after {
-webkit-animation: none;
animation: none;
}
#vacation {
background-color: #d3738b;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#vacation:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation].full input {
font-weight: 700;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation].full:before {
color: white;
border-color: white;
}
#vacation:checked ~ .calendar .calendar-labels label[for=vacation] > span {
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
}
#fishing {
background-color: #8f658a;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#fishing:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing].full input {
font-weight: 700;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing].full:before {
color: white;
border-color: white;
}
#fishing:checked ~ .calendar .calendar-labels label[for=fishing] > span {
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
}
#walk {
background-color: #7186db;
}
#walk:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#walk:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#walk:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#walk:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#walk:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#walk:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#walk:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk].full input {
font-weight: 700;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk].full:before {
color: white;
border-color: white;
}
#walk:checked ~ .calendar .calendar-labels label[for=walk] > span {
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
}
#weekend {
background-color: #f7c187;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#weekend:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend].full input {
font-weight: 700;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend].full:before {
color: white;
border-color: white;
}
#weekend:checked ~ .calendar .calendar-labels label[for=weekend] > span {
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
}
#new {
background-color: #58b2a4;
}
#new:checked ~ .calendar .day:nth-child(7n + 1) {
z-index: 70;
}
#new:checked ~ .calendar .day:nth-child(7n + 2) {
z-index: 60;
}
#new:checked ~ .calendar .day:nth-child(7n + 3) {
z-index: 50;
}
#new:checked ~ .calendar .day:nth-child(7n + 4) {
z-index: 40;
}
#new:checked ~ .calendar .day:nth-child(7n + 5) {
z-index: 30;
}
#new:checked ~ .calendar .day:nth-child(7n + 6) {
z-index: 20;
}
#new:checked ~ .calendar .day:nth-child(7n + 7) {
z-index: 10;
}
#new:checked ~ .calendar .calendar-labels label[for=new]:not(.full):before {
visibility: visible;
-webkit-animation: check-active 0.1s 0.2s ease-out both;
animation: check-active 0.1s 0.2s ease-out both;
}
#new:checked ~ .calendar .calendar-labels label[for=new].full input {
font-weight: 700;
}
#new:checked ~ .calendar .calendar-labels label[for=new].full:before {
color: white;
border-color: white;
}
#new:checked ~ .calendar .calendar-labels label[for=new] > span {
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
}
.calendar-labels {
display: none;
width: 100%;
position: absolute;
top: 0;
z-index: 100;
pointer-events: none;
-webkit-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
-webkit-transition-delay: 1s;
transition-delay: 1s;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
.device:hover .calendar-labels {
display: block;
}
.calendar-labels:before {
content: '';
display: block;
position: absolute;
bottom: 100%;
height: 15rem;
width: 100%;
pointer-events: auto;
}
.calendar-labels > label {
display: block;
float: left;
width: 57.14286%;
font-size: 1rem;
padding: 1rem;
color: white;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.calendar-labels > label:before {
display: block;
position: absolute;
left: 0.75rem;
height: 1rem;
visibility: hidden;
}
.calendar-labels > label.full {
width: 100%;
font-weight: 700;
}
.calendar-labels > label.full:before {
-webkit-transition-property: color, border-color;
transition-property: color, border-color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
content: '+';
top: calc(50% - 0.75rem);
font-size: 1rem;
font-weight: 700;
width: 1rem;
border: 4px solid rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
text-align: center;
visibility: visible;
}
.calendar-labels > label.full > input {
display: block;
margin-left: 2rem;
width: calc(100% - 2rem);
font-size: 1rem;
background-image: none;
background-color: transparent;
outline: none;
border: none;
color: white;
line-height: 1;
padding: 0;
}
.calendar-labels > label.full > input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.full > input::-moz-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.full > input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.full > input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.full > input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.calendar-labels > label.reset {
width: 100%;
background: white;
float: left;
padding: 0;
height: 3rem;
}
.calendar-labels > label.reset > input {
display: block;
padding: 1rem;
line-height: 1;
font-size: 0.8rem;
width: 100%;
height: 100%;
-webkit-appearance: none;
border: none;
background: transparent;
outline: none;
text-transform: uppercase;
color: rgba(51, 51, 51, 0.3);
letter-spacing: 3px;
}
.calendar-labels > label:not(.full):before {
content: '';
top: 50%;
width: 0.5rem;
-webkit-transform: scaleX(-1) rotate(135deg);
transform: scaleX(-1) rotate(135deg);
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 5px solid rgba(255, 255, 255, 0.7);
border-top: 5px solid rgba(255, 255, 255, 0.7);
-webkit-animation: check-inactive 0.3s 0 cubic-bezier(0.77, 0, 0.175, 1) both;
animation: check-inactive 0.3s 0 cubic-bezier(0.77, 0, 0.175, 1) both;
}
.calendar-labels > label > * {
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
display: inline-block;
}
.calendar-labels > label[for="vacation"] {
background: #d3738b;
}
.calendar-labels > label[for="fishing"] {
background: #8f658a;
}
.calendar-labels > label[for="walk"] {
background: #7186db;
}
.calendar-labels > label[for="weekend"] {
background: #f7c187;
}
.calendar-labels > label[for="new"] {
background: #58b2a4;
}
.calendar-labels > label:nth-child(n + 2):nth-child(-n + 3) {
width: 42.85714%;
}
.calendar-labels > label:nth-child(2n - 1) {
z-index: 20;
-webkit-animation-name: leftLabel-inactive;
animation-name: leftLabel-inactive;
}
.calendar-labels > label:nth-child(2n) {
z-index: 10;
-webkit-animation-name: rightLabel-inactive;
animation-name: rightLabel-inactive;
}
.day:checked ~ .day:checked ~ .calendar-labels {
-webkit-transition-delay: 0s;
transition-delay: 0s;
display: block;
opacity: 1;
}
.day:checked ~ .day:checked:nth-child(n + 1):nth-child(-n + 7) ~ .calendar-labels {
-webkit-transform: translateY(3rem);
transform: translateY(3rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 8):nth-child(-n + 14) ~ .calendar-labels {
-webkit-transform: translateY(6rem);
transform: translateY(6rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 15):nth-child(-n + 21) ~ .calendar-labels {
-webkit-transform: translateY(9rem);
transform: translateY(9rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 22):nth-child(-n + 28) ~ .calendar-labels {
-webkit-transform: translateY(12rem);
transform: translateY(12rem);
pointer-events: auto;
}
.day:checked ~ .day:checked:nth-child(n + 29):nth-child(-n + 35) ~ .calendar-labels {
-webkit-transform: translateY(15rem);
transform: translateY(15rem);
pointer-events: auto;
}
.day:checked ~ .day:checked ~ .day:nth-child(7n) ~ .day:after, .day:checked ~ .day:checked:nth-child(7n) ~ .day:after {
-webkit-transform: translateY(15rem);
transform: translateY(15rem);
opacity: 0;
}
.day:checked ~ .day:checked ~ .calendar-labels label:nth-child(2n - 1) {
z-index: 20;
-webkit-animation: leftLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
animation: leftLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.day:checked ~ .day:checked ~ .calendar-labels label:nth-child(2n) {
z-index: 10;
-webkit-animation: rightLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
animation: rightLabel-active 1s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@-webkit-keyframes check-active {
0% {
width: 0;
height: 0;
opacity: 0;
}
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
opacity: 1;
}
}
@keyframes check-active {
0% {
width: 0;
height: 0;
opacity: 0;
}
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes check-inactive {
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
width: 0;
height: 0;
opacity: 0;
}
}
@keyframes check-inactive {
50% {
opacity: 1;
width: 0.5rem;
height: 0;
}
100% {
width: 0;
height: 0;
opacity: 0;
}
}
@-webkit-keyframes labels-inactive {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes labels-inactive {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes leftLabel-active {
from {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes leftLabel-active {
from {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes leftLabel-inactive {
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes leftLabel-inactive {
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes rightLabel-active {
from {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
}
@keyframes rightLabel-active {
from {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
}
@-webkit-keyframes rightLabel-inactive {
to {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
}
@keyframes rightLabel-inactive {
to {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
}
@-webkit-keyframes bg-active {
from {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bg-active {
from {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes bg-inactive {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes bg-inactive {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes day-active {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes day-active {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.meta {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.2rem;
}
.meta p, .meta a {
color: rgba(255, 255, 255, 0.5);
}
.meta h1 {
font-size: 3rem;
line-height: 1.2;
font-weight: 300;
color: white;
}
.meta p {
line-height: 1.4;
}
.meta a:hover {
color: rgba(255, 255, 255, 0.7);
}
.device {
position: absolute;
right: 2rem;
height: 816px;
width: 396px;
padding: 90px 10px;
border: 5px solid white;
border-radius: 60px;
background-color: #dcdfe6;
box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.1);
}
.device:before, .device:after {
content: '';
position: absolute;
z-index: 2;
}
.device:before {
width: 20%;
height: 10px;
top: 40px;
left: 40%;
border-radius: 10px;
background-color: #a1a5b3;
}
.device:after {
width: 50px;
height: 50px;
border-radius: 50%;
border: solid 5px #bdc0ca;
left: calc(50% - 25px);
bottom: 15px;
}
.device header {
height: 6rem;
background-color: #58b2a4;
}
.device section {
height: calc(100% - 6rem);
width: 100%;
overflow: hidden;
background-color: white;
}
</style>
</head>
<body>
<main>
<div class="device">
<header>
<div class="header-bar"></div>
<div class="header-title">
<h1>Calendar</h1>
</div>
<div class="header-weekdays">
<span>sun</span>
<span>mon</span>
<span>tue</span>
<span>wed</span>
<span>thu</span>
<span>fri</span>
<span>sat</span>
</div>
</header>
<section>
<h2 class="month">December</h2>
<form>
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="vacation" />
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="walk" />
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="fishing" />
<input type="radio" name="calendar-label-bg" class="calendar-label-bg" id="weekend" />
<input type="radio" name="calendar-label-bg" id="new" class="calendar-label-bg">
<div class="calendar">
<input type="checkbox" name="" id="" class="day previous-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day current-month" />
<input type="checkbox" name="" id="" class="day next-month" />
<input type="checkbox" name="" id="" class="day next-month" />
<input type="checkbox" name="" id="" class="day next-month" />
<div class="calendar-labels">
<label for="vacation"><span>vacation</span></label>
<label for="walk"><span>walk</span></label>
<label for="fishing"><span>fishing</span></label>
<label for="weekend"><span>weekend</span></label>
<label for="new" class="full"><input type="text" placeholder="Add new task"></label>
<label class="reset">
<input type="reset" value="Reset"/>
</label>
</div>
</div>
</form>
<h2 class="month">January</h2>
<div class="calendar inactive">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
<input type="checkbox" name="" id="" class="day next-month">
</div>
</section>
</div>
</main>
<aside>
<div class="meta">
<h1>CSS-only Calendar App Concept</h1>
<p>
Dribbble Rework<br>
Original shot by <a href="https://dribbble.com/shots/1841134-Gif-for-Calendar">Sergey Valiukh</a>
</p>
<p>
Click two dates and the labels to see the effect.<br>
Works <strike>best</strike> only in Chrome and Safari.
</p>
</div>
</aside>
</body>
</html>
==============================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
background-color: #EEEEEE;
}
.container {
width: 100%;
height: 100%;
}
.tutorial {
width: 80%;
margin: 5% auto 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
max-width: 800px;
}
.tutorial .slider {
width: 100%;
height: 300px;
background-color: #F03861;
}
.tutorial .information {
width: 100%;
padding: 20px 50px;
margin-bottom: 30px;
font-family: "Open Sans", sans-serif;
}
.tutorial .information h1 {
color: #333;
font-size: 1.5rem;
padding: 0px 10px;
border-left: 3px solid #F03861;
}
.tutorial .information h3 {
color: #e0e0e0;
font-size: 1rem;
font-weight: 300;
padding: 0px 10px;
border-left: 3px solid #F03861;
}
.tutorial .information p {
padding: 10px 0px;
}
.tutorial ul {
font-size: 0;
list-style-type: none;
}
.tutorial ul li {
font-family: "Open Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #333;
display: inline-block;
padding: 15px;
position: relative;
}
.tutorial ul li ul {
display: none;
}
.tutorial ul li:hover {
cursor: pointer;
background-color: #f2f2f2;
}
.tutorial ul li:hover ul {
display: block;
margin-top: 15px;
width: 200px;
left: 0;
position: absolute;
}
.tutorial ul li:hover ul li {
display: block;
background-color: #e7e7e7;
}
.tutorial ul li:hover ul li span {
float: right;
color: #f9f9f9;
background-color: #F03861;
padding: 2px 5px;
text-align: center;
font-size: .8rem;
border-radius: 3px;
}
.tutorial ul li:hover ul li:hover {
background-color: #e0e0e0;
}
.tutorial ul li:hover ul li:hover span {
background-color: #ee204e;
}
</style>
</head>
<body>
<div class="container">
<div class="tutorial">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Services <i class="fa fa-angle-down"></i>
<ul>
<li>Graphic Design</li>
<li>Website Design </li>
<li>Python Programming</li>
<li>PHP Programming</li>
</ul>
</li>
<li>Tutorials <i class="fa fa-angle-down"></i>
<ul>
<li>CSS <span>12 Available</span></li>
<li>HTML <span>9 Available</span></li>
<li>Jade<span>3 Available</span></li>
<li>Javascript<span>21 Available</span></li>
<li>Design<span>37 Available</span></li>
</ul>
</li>
<li>Contact</li>
</ul>
<div class="slider"></div>
<div class="information">
<p>A simple, clean looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.</p>
</div>
</div>
</div><link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</body>
</html>
---------------------------------------------------------------------------<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
background: rgba( 71, 147, 227, 1);
}
h2{
text-align: center;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
padding: 30px 0;
}
/* Table Styles */
.table-wrapper{
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}
.fl-table {
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;
}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 12px;
}
.fl-table thead th {
color: #ffffff;
background: #4FC3A1;
}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;
}
.fl-table tr:nth-child(even) {
background: #F8F8F8;
}
/* Responsive */
@media (max-width: 767px) {
.fl-table {
display: block;
width: 100%;
}
.table-wrapper:before{
content: "Scroll horizontally >";
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;
}
.fl-table thead, .fl-table tbody, .fl-table thead th {
display: block;
}
.fl-table thead th:last-child{
border-bottom: none;
}
.fl-table thead {
float: left;
}
.fl-table tbody {
width: auto;
position: relative;
overflow-x: auto;
}
.fl-table td, .fl-table th {
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;
}
.fl-table thead th {
text-align: left;
border-bottom: 1px solid #f7f7f9;
}
.fl-table tbody tr {
display: table-cell;
}
.fl-table tbody tr:nth-child(odd) {
background: none;
}
.fl-table tr:nth-child(even) {
background: transparent;
}
.fl-table tr td:nth-child(odd) {
background: #F8F8F8;
border-right: 1px solid #E6E4E4;
}
.fl-table tr td:nth-child(even) {
border-right: 1px solid #E6E4E4;
}
.fl-table tbody td {
display: block;
text-align: center;
}
}
</style>
</head>
<body><h2>Responsive Table</h2>
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
</tr>
<tr>
<td>Content 2</td>
<td>Content 2</td>
<td>Content 2</td>
<td>Content 2</td>
<td>Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 3</td>
<td>Content 3</td>
<td>Content 3</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 6</td>
<td>Content 6</td>
<td>Content 6</td>
<td>Content 6</td>
<td>Content 6</td>
</tr>
<tr>
<td>Content 7</td>
<td>Content 7</td>
<td>Content 7</td>
<td>Content 7</td>
<td>Content 7</td>
</tr>
<tr>
<td>Content 8</td>
<td>Content 8</td>
<td>Content 8</td>
<td>Content 8</td>
<td>Content 8</td>
</tr>
<tr>
<td>Content 9</td>
<td>Content 9</td>
<td>Content 9</td>
<td>Content 9</td>
<td>Content 9</td>
</tr>
<tr>
<td>Content 10</td>
<td>Content 10</td>
<td>Content 10</td>
<td>Content 10</td>
<td>Content 10</td>
</tr>
<tbody>
</table>
</div>
</body>
</html>
================================================================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
padding: 0;
margin: 0;
color: #292929;
background-color: #eaeaea;
}
.container {
text-align: center;
color: #2c3e50;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
form {
transition: all 0.5s;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.finder {
border: 1px solid #fff;
background-color: #f6f5f0;
border-radius: 15px;
padding: 8px;
box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.finder__outer {
display: flex;
width: 600px;
padding: 1.5rem 2rem;
border-radius: 10px;
box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;
}
.finder__inner {
display: flex;
align-items: center;
position: relative;
flex: 1;
}
.finder__form {
flex: 1;
height: calc(100% + 3rem);
}
.finder__input {
height: calc(100% + 3rem);
border: none;
background-color: transparent;
outline: none;
font-size: 1.5rem;
letter-spacing: 0.75px;
}
.finder__icon {
width: 40px;
height: 40px;
margin-right: 1rem;
transition: all 0.2s;
box-shadow: inset 0 0 0 20px #292929;
border-radius: 50%;
position: relative;
}
.finder__icon:after, .finder__icon:before {
display: block;
content: "";
position: absolute;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.finder__icon:after {
width: 10px;
height: 10px;
background-color: #292929;
border: 3px solid #f6f5f0;
top: 50%;
position: absolute;
transform: translateY(-50%);
left: 0px;
right: 0;
margin: auto;
border-radius: 50%;
}
.active .finder__icon:after {
border-width: 10px;
background-color: #f6f5f0;
}
.finder__icon:before {
width: 4px;
height: 13px;
background-color: #f6f5f0;
top: 50%;
left: 20px;
transform: rotateZ(45deg) translate(-50%, 0);
transform-origin: 0 0;
border-radius: 4px;
}
.active .finder__icon:before {
background-color: #292929;
width: 6px;
transform: rotateZ(45deg) translate(-50%, 25px);
}
.processing .finder__icon {
transform-origin: 50%;
animation: spinner 0.3s linear infinite;
animation-delay: 0.5s;
}
.active .finder__icon {
transform: translateY(-5px);
}
@keyframes spinner {
0% {
transform: rotateZ(45deg);
}
100% {
transform: rotateZ(405deg);
}
}
</style>
</head>
<body>
<div class="container">
<form autocomplete="off">
<div class="finder">
<div class="finder__outer">
<div class="finder__inner">
<div class="finder__icon" ref="icon"></div>
<input class="finder__input" type="text" name="q" />
</div>
</div>
</div>
</form>
</div>
<script>
const input = document.querySelector(".finder__input");
const finder = document.querySelector(".finder");
const form = document.querySelector("form");
input.addEventListener("focus", () => {
finder.classList.add("active");
});
input.addEventListener("blur", () => {
if (input.value.length === 0) {
finder.classList.remove("active");
}
});
form.addEventListener("submit", (ev) => {
ev.preventDefault();
finder.classList.add("processing");
finder.classList.remove("active");
input.disabled = true;
setTimeout(() => {
finder.classList.remove("processing");
input.disabled = false;
if (input.value.length > 0) {
finder.classList.add("active");
}
}, 1000);
});
</script>
</body>
</html>
======================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@font-face {
font-family: Clip;
src: url("https://acupoftee.github.io/fonts/Clip.ttf");
}
body {
background-color: #141114;
background-image: linear-gradient(335deg, black 23px, transparent 23px),
linear-gradient(155deg, black 23px, transparent 23px),
linear-gradient(335deg, black 23px, transparent 23px),
linear-gradient(155deg, black 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
.sign {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
background-image: radial-gradient(
ellipse 50% 35% at 50% 50%,
#6b1839,
transparent
);
transform: translate(-50%, -50%);
letter-spacing: 2;
left: 50%;
top: 50%;
font-family: "Clip";
text-transform: uppercase;
font-size: 6em;
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
animation: shine 2s forwards, flicker 3s infinite;
}
@keyframes blink {
0%,
22%,
36%,
75% {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
}
28%,
33% {
color: #ff65bd;
text-shadow: none;
}
82%,
97% {
color: #ff2483;
text-shadow: none;
}
}
.flicker {
animation: shine 2s forwards, blink 3s 2s infinite;
}
.fast-flicker {
animation: shine 2s forwards, blink 10s 1s infinite;
}
@keyframes shine {
0% {
color: #6b1839;
text-shadow: none;
}
100% {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
}
}
@keyframes flicker {
from {
opacity: 1;
}
4% {
opacity: 0.9;
}
6% {
opacity: 0.85;
}
8% {
opacity: 0.95;
}
10% {
opacity: 0.9;
}
11% {
opacity: 0.922;
}
12% {
opacity: 0.9;
}
14% {
opacity: 0.95;
}
16% {
opacity: 0.98;
}
17% {
opacity: 0.9;
}
19% {
opacity: 0.93;
}
20% {
opacity: 0.99;
}
24% {
opacity: 1;
}
26% {
opacity: 0.94;
}
28% {
opacity: 0.98;
}
37% {
opacity: 0.93;
}
38% {
opacity: 0.5;
}
39% {
opacity: 0.96;
}
42% {
opacity: 1;
}
44% {
opacity: 0.97;
}
46% {
opacity: 0.94;
}
56% {
opacity: 0.9;
}
58% {
opacity: 0.9;
}
60% {
opacity: 0.99;
}
68% {
opacity: 1;
}
70% {
opacity: 0.9;
}
72% {
opacity: 0.95;
}
93% {
opacity: 0.93;
}
95% {
opacity: 0.95;
}
97% {
opacity: 0.93;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Neon Letters</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="sign">
<span class="fast-flicker">b</span>rea<span class="flicker">t</span>he
</div>
</body>
</html>
<script>
</script>
</body>
</html>
=====================================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.text-effect {
overflow: hidden;
position: relative;
-webkit-filter: contrast(110%) brightness(190%);
filter: contrast(110%) brightness(190%);
}
.neon {
position: relative;
background: black;
color: transparent;
}
.neon::before, .neon::after {
content: attr(data-text);
color: white;
-webkit-filter: blur(0.02em);
filter: blur(0.02em);
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.neon::after {
mix-blend-mode: difference;
}
.gradient,
.spotlight {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
z-index: 10;
}
.gradient {
background: linear-gradient(45deg, red, blue);
mix-blend-mode: multiply;
}
.spotlight {
-webkit-animation: light 5s infinite linear;
animation: light 5s infinite linear;
background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%;
top: -100%;
left: -100%;
mix-blend-mode: color-dodge;
}
@-webkit-keyframes light {
100% {
-webkit-transform: translate3d(50%, 50%, 0);
transform: translate3d(50%, 50%, 0);
}
}
@keyframes light {
100% {
-webkit-transform: translate3d(50%, 50%, 0);
transform: translate3d(50%, 50%, 0);
}
}
.neon {
font: 700 220px 'Lato', sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0;
}
.neon:focus {
outline: none;
border: 1px dotted white;
}
body {
background: black;
display: -webkit-box;
display: flex;
min-height: 100vh;
-webkit-box-pack: center;
justify-content: center;
align-content: center;
-webkit-box-align: center;
align-items: center;
}
</style>
</head>
<body>
<div class="text-effect">
<!-- Select the text in the preview and type in your own -->
<h1 class="neon" data-text="Neon" contenteditable>Neon</h1>
<div class="gradient"></div>
<div class="spotlight"></div>
</div>
<script>
$("[data-text]").on("keyup", function () {
$(this).attr("data-text", $(this).text());
});
</script>
</body>
</html>
=======================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300);
body {
font-family: 'Yanone Kaffeesatz', sans-serif;
}
body a {
text-decoration: none;
color: white;
}
body .container {
width: 938px;
position: absolute;
top: 50%;
left: 30px;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: auto;
}
body .container .card {
margin: 0 auto;
display: inline-block;
margin-right: 30px;
-webkit-transform: scale(0);
transform: scale(0);
width: 280px;
text-align: center;
position: relative;
-webkit-transition: all .2s;
transition: all .2s;
cursor: pointer;
opacity: 0.5;
box-shadow: 0px 17px 46px -10px #777777;
height: 470px;
border-radius: 14px;
}
body .container .card:nth-of-type(1) {
-webkit-animation: intro 1s 0.1s forwards;
animation: intro 1s 0.1s forwards;
}
body .container .card:nth-of-type(2) {
-webkit-animation: intro 1s 0.2s forwards;
animation: intro 1s 0.2s forwards;
}
body .container .card:nth-of-type(3) {
-webkit-animation: intro 1s 0.3s forwards;
animation: intro 1s 0.3s forwards;
}
body .container .card:nth-of-type(1) {
background: -webkit-linear-gradient(45deg, #c96881 0%, #f7b695 100%);
}
body .container .card:nth-of-type(2) {
background: -webkit-linear-gradient(45deg, #6B6ECC 0%, #89BFDF 100%);
}
body .container .card:nth-of-type(3) {
background: -webkit-linear-gradient(45deg, #81B77B 0%, #A3E3C3 100%);
}
body .container .card:hover .card_inner__header img {
left: -50px;
-webkit-transition: all 3.4s linear;
transition: all 3.4s linear;
}
body .container .card:hover .card_inner__cta button {
-webkit-transform: scale(1);
transform: scale(1);
}
body .container .card:nth-of-type(1):hover .card_inner__circle img {
-webkit-animation: launch 1s forwards;
animation: launch 1s forwards;
}
body .container .card:nth-of-type(1) .card_inner__circle img {
top: 22px;
left: 1px;
}
body .container .card:nth-of-type(2):hover .card_inner__circle img {
-webkit-animation: spin 1s forwards;
animation: spin 1s forwards;
}
body .container .card:nth-of-type(2) .card_inner__circle img {
top: 22px;
}
body .container .card:nth-of-type(3):hover .card_inner__circle img {
-webkit-animation: fly 1s forwards;
animation: fly 1s forwards;
}
body .container .card:nth-of-type(3) .card_inner__circle img {
top: 22px;
left: 1px;
}
body .container .card:hover {
opacity: 1;
}
body .container .card_inner__circle {
overflow: hidden;
width: 70px;
position: absolute;
background: #F1F0ED;
z-index: 10;
height: 70px;
border-radius: 100px;
left: 0;
box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.28);
right: 0;
margin: auto;
border: 4px solid white;
top: 82px;
}
body .container .card_inner__circle img {
height: 26px;
position: relative;
top: 17px;
-webkit-transition: all .2s;
transition: all .2s;
}
body .container .card_inner__header {
height: 120px;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
overflow: hidden;
}
body .container .card_inner__header img {
width: 120%;
position: relative;
top: -30px;
left: 0;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}
body .container .card_inner__content {
padding: 20px;
}
body .container .card_inner__content .price {
color: white;
font-weight: 800;
font-size: 70px;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.42);
}
body .container .card_inner__content .text {
color: rgba(255, 255, 255, 0.6);
font-weight: 100;
margin-top: 20px;
font-size: 13px;
line-height: 16px;
}
body .container .card_inner__content .title {
font-weight: 800;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.64);
margin-top: 40px;
font-size: 25px;
letter-spacing: 1px;
}
body .container .card_inner__cta {
position: absolute;
bottom: -24px;
left: 0;
right: 0;
margin: auto;
width: 200px;
}
body .container .card_inner__cta button {
padding: 16px;
box-shadow: 0px 0px 40px 4px #F76583, 0px 0px 0px 2px rgba(255, 255, 255, 0.19) inset;
width: 100%;
background: -webkit-linear-gradient(-90deg, #fe5e7d 0%, #e5375b 100%);
border: none;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: white;
outline: none;
font-size: 20px;
border-radius: 6px;
-webkit-transform: scale(0.94);
transform: scale(0.94);
cursor: pointer;
-webkit-transition: box-shadow .3s, -webkit-transform .3s .1s;
transition: box-shadow .3s, -webkit-transform .3s .1s;
transition: box-shadow .3s, transform .3s .1s;
transition: box-shadow .3s, transform .3s .1s, -webkit-transform .3s .1s;
}
body .container .card_inner__cta button span {
text-shadow: 0px 4px 18px #BA3F57;
}
body .container .card_inner__cta button:hover {
box-shadow: 0px 0px 60px 8px #F76583, 0px 0px 0px 2px rgba(255, 255, 255, 0.19) inset;
}
@-webkit-keyframes launch {
0% {
left: 1px;
}
25% {
top: -50px;
left: 1px;
}
50% {
left: -100px;
}
75% {
top: 100px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100% {
left: 1px;
}
}
@keyframes launch {
0% {
left: 1px;
}
25% {
top: -50px;
left: 1px;
}
50% {
left: -100px;
}
75% {
top: 100px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100% {
left: 1px;
}
}
@-webkit-keyframes fly {
0% {
left: 0px;
}
25% {
top: -50px;
left: 50px;
}
50% {
left: -130px;
}
75% {
top: 60px;
}
100% {
left: 0px;
}
}
@keyframes fly {
0% {
left: 0px;
}
25% {
top: -50px;
left: 50px;
}
50% {
left: -130px;
}
75% {
top: 60px;
}
100% {
left: 0px;
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@-webkit-keyframes intro {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
50% {
-webkit-transform: scale(0.965);
transform: scale(0.965);
}
75% {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes intro {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
50% {
-webkit-transform: scale(0.965);
transform: scale(0.965);
}
75% {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
</head>
<body>
<div class='container'>
<section class='card'>
<div class='card_inner'>
<div class='card_inner__circle'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rocket.png'>
</div>
<div class='card_inner__header'>
<img src='http://www.pixeden.com/media/k2/galleries/343/002-city-vector-background-town-vol2.jpg'>
</div>
<div class='card_inner__content'>
<div class='title'>Personal edition</div>
<div class='price'>$19.99</div>
<div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. <br/> <br/>Fusce sed tortor in orci ultrices tempor quis ut leo. Fusce imperdiet eget ante eu faucibus. Nam rhoncus sapien</div>
</div>
<div class='card_inner__cta'>
<button>
<span>Buy now</span>
</button>
</div>
</div>
</section>
<section class='card'>
<div class='card_inner'>
<div class='card_inner__circle'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cog.png'>
</div>
<div class='card_inner__header'>
<img src='http://4vector.com/i/free-vector-modern-city_093317_bluecity.jpg'>
</div>
<div class='card_inner__content'>
<div class='title'>Team edition</div>
<div class='price'>$49.99</div>
<div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. <br/> <br/>Fusce sed tortor in orci ultrices tempor quis ut leo. Fusce imperdiet eget ante eu faucibus. Nam rhoncus sapien</div>
</div>
<div class='card_inner__cta'>
<button>
<span>
<a href='https://www.codepen.io/jcoulterdesign' target='_blank'>Follow me on codepen</a>
</span>
</button>
</div>
</div>
</section>
<section class='card'>
<div class='card_inner'>
<div class='card_inner__circle'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paperplane.png'>
</div>
<div class='card_inner__header'>
<img src='http://7428.net/wp-content/uploads/2013/06/Forest-Creek.jpg'>
</div>
<div class='card_inner__content'>
<div class='title'>Enterprise edition</div>
<div class='price'>$89.99</div>
<div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at posuere eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. <br/> <br/>Fusce sed tortor in orci ultrices tempor quis ut leo. Fusce imperdiet eget ante eu faucibus. Nam rhoncus sapien</div>
</div>
<div class='card_inner__cta'>
<button>
<span>Buy now</span>
</button>
</div>
</div>
</section>
</div>
</body>
</html>
===========================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
text-decoration: none;
list-style: none;
margin: 0px;
padding: 0px;
outline: none;
}
body {
margin: 0px;
padding: 0px;
font-family: "Open Sans", sans-serif;
}
section {
width: 100%;
max-width: 1200px;
margin: 0px auto;
display: table;
position: relative;
}
h1 {
margin: 0px auto;
display: table;
font-size: 26px;
padding: 40px 0px;
color: #002e5b;
text-align: center;
}
h1 span {
font-weight: 500;
}
header {
width: 100%;
display: table;
background-color: #fde428;
margin-bottom: 50px;
}
#logo {
float: left;
font-size: 24px;
text-transform: uppercase;
color: #002e5b;
font-weight: 600;
padding: 20px 0px;
}
nav {
width: auto;
float: right;
}
nav ul {
display: table;
float: right;
}
nav ul li {
float: left;
}
nav ul li:last-child {
padding-right: 0px;
}
nav ul li a {
color: #002e5b;
font-size: 18px;
padding: 25px 20px;
display: inline-block;
transition: all 0.5s ease 0s;
}
nav ul li a:hover {
background-color: #002e5b;
color: #fde428;
transition: all 0.5s ease 0s;
}
nav ul li a:hover i {
color: #fde428;
transition: all 0.5s ease 0s;
}
nav ul li a i {
padding-right: 10px;
color: #002e5b;
transition: all 0.5s ease 0s;
}
.toggle-menu ul {
display: table;
width: 25px;
}
.toggle-menu ul li {
width: 100%;
height: 3px;
background-color: #002e5b;
margin-bottom: 4px;
}
.toggle-menu ul li:last-child {
margin-bottom: 0px;
}
input[type="checkbox"],
label {
display: none;
}
.content {
display: table;
margin-bottom: 60px;
width: 900px;
}
.content h2 {
font-size: 18px;
font-weight: 500;
color: #002e5b;
border-bottom: 1px solid #fde428;
display: table;
padding-bottom: 10px;
margin-bottom: 10px;
}
.content p {
font-size: 14px;
line-height: 22px;
color: #7c7c7c;
text-align: justify;
}
footer {
display: table;
padding-bottom: 30px;
width: 100%;
}
.social {
margin: 0px auto;
display: table;
display: table;
}
.social li {
float: left;
padding: 0px 10px;
}
.social li a {
color: #002e5b;
transition: all 0.5s ease 0s;
}
.social li a:hover {
color: #fde428;
transition: all 0.5s ease 0s;
}
@media only screen and (max-width: 1440px) {
section {
max-width: 95%;
}
}
@media only screen and (max-width: 980px) {
header {
padding: 20px 0px;
}
#logo {
padding: 0px;
}
input[type="checkbox"] {
position: absolute;
top: -9999px;
left: -9999px;
background: none;
}
input[type="checkbox"]:fous {
background: none;
}
label {
float: right;
padding: 8px 0px;
display: inline-block;
cursor: pointer;
}
input[type="checkbox"]:checked ~ nav {
display: block;
}
nav {
display: none;
position: absolute;
right: 0px;
top: 53px;
background-color: #002e5b;
padding: 0px;
z-index: 99;
}
nav ul {
width: auto;
}
nav ul li {
float: none;
padding: 0px;
width: 100%;
display: table;
}
nav ul li a {
color: #fff;
font-size: 15px;
padding: 10px 20px;
display: block;
border-bottom: 1px solid rgba(225, 225, 225, 0.1);
}
nav ul li a i {
color: #fde428;
padding-right: 13px;
}
}
@media only screen and (max-width: 980px) {
.content {
width: 90%;
}
}
@media only screen and (max-width: 568px) {
h1 {
padding: 25px 0px;
}
h1 span {
display: block;
}
}
@media only screen and (max-width: 480px) {
section {
max-width: 90%;
}
}
@media only screen and (max-width: 360px) {
h1 {
font-size: 20px;
}
label {
padding: 5px 0px;
}
#logo {
font-size: 20px;
}
nav {
top: 47px;
}
}
@media only screen and (max-width: 320px) {
h1 {
padding: 20px 0px;
}
}
</style>
</head>
<body>
<h1><span>Responsive Navigation Menu</span> Using Only CSS</h1>
<header>
<section>
<a href="https://www.linkedin.com/in/sutharmayur" id="logo" target="_blank">Mayur Suthar</a>
<label for="toggle-1" class="toggle-menu"><ul><li></li> <li></li> <li></li></ul></label>
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><a href="#logo"><i class="icon-home"></i>Home</a></li>
<li><a href="#about"><i class="icon-user"></i>About</a></li>
<li><a href="#portfolio"><i class="icon-thumbs-up-alt"></i>Portfolio</a></li>
<li><a href="#services"><i class="icon-gear"></i>Services</a></li>
<li><a href="#gallery"><i class="icon-picture"></i>Gallery</a></li>
<li><a href="#contact"><i class="icon-phone"></i>Contact</a></li>
</ul>
</nav>
</header>
</section>
<section id="about" class="content">
<h2>About</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section id="portfolio" class="content">
<h2>Portfolio</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section id="services" class="content">
<h2>Services</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section id="gallery" class="content">
<h2>Gallery</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section id="contact" class="content">
<h2>Contact</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</body>
</html>
===================================
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
header:after, #timeline .timeline-item:after, header:before, #timeline .timeline-item:before {
content: '';
display: block;
width: 100%;
clear: both;
}
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
background: #f9f9f9;
background-size: cover;
margin: 0;
padding: 0;
font-family: helvetica, arial, tahoma, verdana;
line-height: 20px;
font-size: 14px;
color: #726f77;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
h1, h2, h3, h4 {
font-family: "Dosis", arial, tahoma, verdana;
font-weight: 500;
}
.project-name {
text-align: center;
padding: 10px 0;
}
header {
background: #2b2e48;
padding: 10px;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
header .logo {
color: #ee4d4d;
float: left;
font-family: "Dosis", arial, tahoma, verdana;
font-size: 22px;
font-weight: 500;
}
header .logo > span {
color: #f7aaaa;
font-weight: 300;
}
header .social {
float: right;
}
header .social .btn {
font-family: "Dosis";
font-size: 14px;
margin: 10px 5px;
}
#timeline {
width: 100%;
margin: 30px auto;
position: relative;
padding: 0 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#timeline:before {
content: "";
width: 3px;
height: 100%;
background: #ee4d4d;
left: 50%;
top: 0;
position: absolute;
}
#timeline:after {
content: "";
clear: both;
display: table;
width: 100%;
}
#timeline .timeline-item {
margin-bottom: 50px;
position: relative;
}
#timeline .timeline-item .timeline-icon {
background: #ee4d4d;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -23px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
#timeline .timeline-item .timeline-icon svg {
position: relative;
top: 14px;
left: 14px;
}
#timeline .timeline-item .timeline-content {
width: 45%;
background: #fff;
padding: 20px;
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#timeline .timeline-item .timeline-content h2 {
padding: 15px;
background: #ee4d4d;
color: #fff;
margin: -20px -20px 0 -20px;
font-weight: 300;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#timeline .timeline-item .timeline-content:before {
content: '';
position: absolute;
left: 45%;
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ee4d4d;
}
#timeline .timeline-item .timeline-content.right {
float: right;
}
#timeline .timeline-item .timeline-content.right:before {
content: '';
right: 45%;
left: inherit;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
.btn {
padding: 5px 15px;
text-decoration: none;
background: transparent;
border: 2px solid #f27c7c;
color: #f27c7c;
display: inline-block;
position: relative;
text-transform: uppercase;
font-size: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-ms-transition: background 0.3s ease;
transition: background 0.3s ease;
-webkit-box-shadow: 2px 2px 0 #f27c7c;
-moz-box-shadow: 2px 2px 0 #f27c7c;
-ms-box-shadow: 2px 2px 0 #f27c7c;
box-shadow: 2px 2px 0 #f27c7c;
}
.btn:hover {
box-shadow: none;
top: 2px;
left: 2px;
-webkit-box-shadow: 2px 2px 0 transparent;
-moz-box-shadow: 2px 2px 0 transparent;
-ms-box-shadow: 2px 2px 0 transparent;
box-shadow: 2px 2px 0 transparent;
}
@media screen and (max-width: 768px) {
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
}
#timeline:before {
left: 0;
}
#timeline .timeline-item .timeline-content {
width: 90%;
float: right;
}
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid #ee4d4d;
}
#timeline .timeline-item .timeline-icon {
left: 0;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1 class="logo">
BRUNO<span>RODRIGUES</span>
</h1>
<section class="social">
<a class="btn" href="https://www.github.com/itbruno">Github</a>
<a class="btn" href="https://www.twitter.com/_brunoweb">Twitter</a>
</section>
</div>
</header>
<div class="container">
<h1 class="project-name">RESPONSIVE TIMELINE</h1>
<div id="timeline">
<div class="timeline-item">
<div class="timeline-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
<path fill="#FFFFFF" d="M19.998,6.766l-5.759-0.544c-0.362-0.032-0.676-0.264-0.822-0.61l-2.064-4.999
c-0.329-0.825-1.5-0.825-1.83,0L7.476,5.611c-0.132,0.346-0.462,0.578-0.824,0.61L0.894,6.766C0.035,6.848-0.312,7.921,0.333,8.499
l4.338,3.811c0.279,0.246,0.395,0.609,0.314,0.975l-1.304,5.345c-0.199,0.842,0.708,1.534,1.468,1.089l4.801-2.822
c0.313-0.181,0.695-0.181,1.006,0l4.803,2.822c0.759,0.445,1.666-0.23,1.468-1.089l-1.288-5.345
c-0.081-0.365,0.035-0.729,0.313-0.975l4.34-3.811C21.219,7.921,20.855,6.848,19.998,6.766z"/>
</svg>
</div>
<div class="timeline-content">
<h2>LOREM IPSUM DOLOR</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
</p>
<a href="#" class="btn">button</a>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M17.92,3.065l-1.669-2.302c-0.336-0.464-0.87-0.75-1.479-0.755C14.732,0.008,7.653,0,7.653,0v5.6
c0,0.096-0.047,0.185-0.127,0.237c-0.081,0.052-0.181,0.06-0.268,0.02l-1.413-0.64C5.773,5.183,5.69,5.183,5.617,5.215l-1.489,0.65
c-0.087,0.038-0.19,0.029-0.271-0.023c-0.079-0.052-0.13-0.141-0.13-0.235V0H2.191C1.655,0,1.233,0.434,1.233,0.97
c0,0,0.025,15.952,0.031,15.993c0.084,0.509,0.379,0.962,0.811,1.242l2.334,1.528C4.671,19.905,4.974,20,5.286,20h10.307
c1.452,0,2.634-1.189,2.634-2.64V4.007C18.227,3.666,18.12,3.339,17.92,3.065z M16.42,17.36c0,0.464-0.361,0.833-0.827,0.833H5.341
l-1.675-1.089h10.341c0.537,0,0.953-0.44,0.953-0.979V2.039l1.459,2.027V17.36L16.42,17.36z"/>
</g>
</svg>
</div>
<div class="timeline-content right">
<h2>LOREM IPSUM DOLOR</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
</p>
<a href="#" class="btn">button</a>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
<path fill="#FFFFFF" d="M19.998,6.766l-5.759-0.544c-0.362-0.032-0.676-0.264-0.822-0.61l-2.064-4.999
c-0.329-0.825-1.5-0.825-1.83,0L7.476,5.611c-0.132,0.346-0.462,0.578-0.824,0.61L0.894,6.766C0.035,6.848-0.312,7.921,0.333,8.499
l4.338,3.811c0.279,0.246,0.395,0.609,0.314,0.975l-1.304,5.345c-0.199,0.842,0.708,1.534,1.468,1.089l4.801-2.822
c0.313-0.181,0.695-0.181,1.006,0l4.803,2.822c0.759,0.445,1.666-0.23,1.468-1.089l-1.288-5.345
c-0.081-0.365,0.035-0.729,0.313-0.975l4.34-3.811C21.219,7.921,20.855,6.848,19.998,6.766z"/>
</svg>
</div>
<div class="timeline-content">
<h2>LOREM IPSUM DOLOR</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
</p>
<a href="#" class="btn">button</a>
</div>
</div>
</div>
</div>
</body>
</html>
====================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* default css start */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
.header-area {
background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.5)),
url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80);
background-position: center center;
background-size: cover;
}
/* default css end */
/* navbar regular css start */
.navbar-area {
background: rgba(0,0,0,.6);
border-bottom: 1px solid #000;
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255,255,255,.1);
}
/* navbar regular css end */
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: .3s;
}
.nav-toggler span:before {
content: '';
transform: translateY(-9px);
}
.nav-toggler span:after {
content: '';
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* nav-toggler css start */
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* intro-area css end */
/* mobile breakpoint start */
@media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler{
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0,0,0,.75);
max-height: 0;
overflow: hidden;
transition: .3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255,255,255,.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
/* navbar css for mobile end */
}
/* mobile breakpoint end */
</style>
</head>
<body>
<header class="header-area">
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar">
<!-- site logo -->
<a href="#home" class="site-logo">logo</a>
<!-- site menu/nav -->
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">contact</a></li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div><!-- navbar-area end -->
<div class="intro-area">
<div class="container">
<h2>Responsive Navbar with pure JavaScript</h2>
<p>Please resize your browser and see the result</p>
</div>
</div>
</header>
<script>
// define all UI variable
const navToggler = document.querySelector('.nav-toggler');
const navMenu = document.querySelector('.site-navbar ul');
const navLinks = document.querySelectorAll('.site-navbar a');
// load all event listners
allEventListners();
// functions of all event listners
function allEventListners() {
// toggler icon click event
navToggler.addEventListener('click', togglerClick);
// nav links click event
navLinks.forEach( elem => elem.addEventListener('click', navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle('toggler-open');
navMenu.classList.toggle('open');
}
// navLinkClick function
function navLinkClick() {
if(navMenu.classList.contains('open')) {
navToggler.click();
}
}
</script>
</body>
</html>
=====================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0px;
font-family: 'segoe ui';
}
.nav {
height: 50px;
width: 100%;
background-color: #4d4d4d;
position: relative;
}
.nav > .nav-header {
display: inline;
}
.nav > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}
.nav > .nav-btn {
display: none;
}
.nav > .nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav > .nav-links > a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #efefef;
}
.nav > .nav-links > a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > #nav-check {
display: none;
}
@media (max-width:600px) {
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav > .nav-btn > label:hover,.nav #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav > .nav-links > a {
display: block;
width: 100%;
}
.nav > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.nav > #nav-check:checked ~ .nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
</style>
</head>
<body>
<div class="nav">
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title">
JoGeek
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<a href="//github.io/jo_geek" target="_blank">Github</a>
<a href="http://stackoverflow.com/users/4084003/" target="_blank">Stackoverflow</a>
<a href="https://in.linkedin.com/in/jonesvinothjoseph" target="_blank">LinkedIn</a>
<a href="https://codepen.io/jo_Geek/" target="_blank">Codepen</a>
<a href="https://jsfiddle.net/user/jo_Geek/" target="_blank">JsFiddle</a>
</div>
</div>
<script>
</script>
</body>
</html>
===================================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
60% {
transform: rotate(5deg);
}
70% {
transform: rotate(0deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes sonar {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
body {
font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*----------------page-wrapper----------------*/
.page-wrapper {
height: 100vh;
}
.page-wrapper .theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.page-wrapper .theme.chiller-theme {
background: #1e2229;
}
/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
@media screen and (min-width: 768px) {
.page-wrapper.toggled .page-content {
padding-left: 300px;
}
}
/*----------------show sidebar button----------------*/
#show-sidebar {
position: fixed;
left: 0;
top: 10px;
border-radius: 0 4px 4px 0px;
width: 35px;
transition-delay: 0.3s;
}
.page-wrapper.toggled #show-sidebar {
left: -40px;
}
/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
/*----------------sidebar-content----------------*/
.sidebar-content {
max-height: calc(100% - 30px);
height: calc(100% - 30px);
overflow-y: auto;
position: relative;
}
.sidebar-content.desktop {
overflow-y: hidden;
}
/*--------------------sidebar-brand----------------------*/
.sidebar-wrapper .sidebar-brand {
padding: 10px 20px;
display: flex;
align-items: center;
}
.sidebar-wrapper .sidebar-brand > a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
}
.sidebar-wrapper .sidebar-brand #close-sidebar {
cursor: pointer;
font-size: 20px;
}
/*--------------------sidebar-header----------------------*/
.sidebar-wrapper .sidebar-header {
padding: 20px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic {
float: left;
width: 60px;
padding: 2px;
border-radius: 12px;
margin-right: 15px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic img {
object-fit: cover;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar-header .user-info {
float: left;
}
.sidebar-wrapper .sidebar-header .user-info > span {
display: block;
}
.sidebar-wrapper .sidebar-header .user-info .user-role {
font-size: 12px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status {
font-size: 11px;
margin-top: 4px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status i {
font-size: 8px;
margin-right: 4px;
color: #5cb85c;
}
/*-----------------------sidebar-search------------------------*/
.sidebar-wrapper .sidebar-search > div {
padding: 10px 20px;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
padding-bottom: 10px;
}
.sidebar-wrapper .sidebar-menu .header-menu span {
font-weight: bold;
font-size: 14px;
padding: 15px 20px 5px 20px;
display: inline-block;
}
.sidebar-wrapper .sidebar-menu ul li a {
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 8px 30px 8px 20px;
}
.sidebar-wrapper .sidebar-menu ul li a i {
margin-right: 10px;
font-size: 12px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
display: inline-block;
animation: swing ease-in-out 0.5s 1 alternate;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-style: normal;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
background: 0 0;
position: absolute;
right: 15px;
top: 14px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
padding: 5px 0;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
padding-left: 25px;
font-size: 13px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-style: normal;
display: inline-block;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 10px;
font-size: 8px;
}
.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
float: right;
margin-top: 8px;
margin-left: 5px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
float: right;
margin-top: 0px;
}
.sidebar-wrapper .sidebar-menu .sidebar-submenu {
display: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
transform: rotate(90deg);
right: 17px;
}
/*--------------------------side-footer------------------------------*/
.sidebar-footer {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
}
.sidebar-footer > a {
flex-grow: 1;
text-align: center;
height: 30px;
line-height: 30px;
position: relative;
}
.sidebar-footer > a .notification {
position: absolute;
top: 0;
}
.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;
}
.badge-sonar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;
}
/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
display: inline-block;
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
.page-wrapper .page-content > div {
padding: 20px 40px;
}
.page-wrapper .page-content {
overflow-x: hidden;
}
/*------scroll bar---------------------*/
::-webkit-scrollbar {
width: 5px;
height: 7px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #525965;
border: 0px none #ffffff;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #525965;
}
::-webkit-scrollbar-thumb:active {
background: #525965;
}
::-webkit-scrollbar-track {
background: transparent;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
background: #31353D;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
border-top: 1px solid #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
border-color: transparent;
box-shadow: none;
}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand>a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
color: #818896;
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
.chiller-theme .sidebar-footer>a:hover i {
color: #b8bfce;
}
.page-wrapper.chiller-theme.toggled #close-sidebar {
color: #bdbdbd;
}
.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
color: #ffffff;
}
.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
color: #16c7ff;
text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
background: #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
color: #6c7b88;
}
.chiller-theme .sidebar-footer {
background: #3a3f48;
box-shadow: 0px -1px 5px #282c33;
border-top: 1px solid #464a52;
}
.chiller-theme .sidebar-footer>a:first-child {
border-left: none;
}
.chiller-theme .sidebar-footer>a:last-child {
border-right: none;
}
</style>
</head>
<body>
<div class="page-wrapper chiller-theme toggled">
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
<a href="#">pro sidebar</a>
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header">
<div class="user-pic">
<img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg" alt="User picture">
</div>
<div class="user-info">
<span class="user-name">Jhon
<strong>Smith</strong>
</span>
<span class="user-role">Administrator</span>
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
<!-- sidebar-header -->
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search...">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<!-- sidebar-search -->
<div class="sidebar-menu">
<ul>
<li class="header-menu">
<span>General</span>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-tachometer-alt"></i>
<span>Dashboard</span>
<span class="badge badge-pill badge-warning">New</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 1
<span class="badge badge-pill badge-success">Pro</span>
</a>
</li>
<li>
<a href="#">Dashboard 2</a>
</li>
<li>
<a href="#">Dashboard 3</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span>E-commerce</span>
<span class="badge badge-pill badge-danger">3</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Products
</a>
</li>
<li>
<a href="#">Orders</a>
</li>
<li>
<a href="#">Credit cart</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="far fa-gem"></i>
<span>Components</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">General</a>
</li>
<li>
<a href="#">Panels</a>
</li>
<li>
<a href="#">Tables</a>
</li>
<li>
<a href="#">Icons</a>
</li>
<li>
<a href="#">Forms</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-chart-line"></i>
<span>Charts</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Pie chart</a>
</li>
<li>
<a href="#">Line chart</a>
</li>
<li>
<a href="#">Bar chart</a>
</li>
<li>
<a href="#">Histogram</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-globe"></i>
<span>Maps</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Google maps</a>
</li>
<li>
<a href="#">Open street map</a>
</li>
</ul>
</div>
</li>
<li class="header-menu">
<span>Extra</span>
</li>
<li>
<a href="#">
<i class="fa fa-book"></i>
<span>Documentation</span>
<span class="badge badge-pill badge-primary">Beta</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-folder"></i>
<span>Examples</span>
</a>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
<!-- sidebar-content -->
<div class="sidebar-footer">
<a href="#">
<i class="fa fa-bell"></i>
<span class="badge badge-pill badge-warning notification">3</span>
</a>
<a href="#">
<i class="fa fa-envelope"></i>
<span class="badge badge-pill badge-success notification">7</span>
</a>
<a href="#">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<a href="#">
<i class="fa fa-power-off"></i>
</a>
</div>
</nav>
<!-- sidebar-wrapper -->
<main class="page-content">
<div class="container">
<h2>Pro Sidebar</h2>
<hr>
<div class="row">
<div class="form-group col-md-12">
<p>This is a responsive sidebar template with dropdown menu based on bootstrap 4 framework.</p>
<p> You can find the complete code on <a href="https://github.com/azouaoui-med/pro-sidebar-template" target="_blank">
Github</a>, it contains more themes and background image option</p>
</div>
<div class="form-group col-md-12">
<iframe src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=pro-sidebar-template&type=star&count=true&size=small" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=pro-sidebar-template&type=fork&count=true&size=small" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
</div>
<div class="form-group col-md-12">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">New !</h4>
<p>New react pro sidebar library is now available on <a href="https://www.npmjs.com/package/react-pro-sidebar" target="_blank">npm</a> <a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social" />
</a></p>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank" class="btn btn-sm btn-primary mr-2">
Github</a>
<a href="https://azouaoui-med.github.io/react-pro-sidebar" target="_blank" class="btn btn-sm btn-success">
Demo</a>
</div>
</div>
</div>
<h5>More templates</h5>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="card rounded-0 p-0 shadow-sm">
<img src="https://user-images.githubusercontent.com/25878302/58369568-a49b2480-7efc-11e9-9ca9-2be44afacda1.png" class="card-img-top rounded-0" alt="Angular pro sidebar">
<div class="card-body text-center">
<h6 class="card-title">Angular Pro Sidebar</h6>
<a href="https://github.com/azouaoui-med/angular-pro-sidebar" target="_blank" class="btn btn-primary btn-sm">Github</a>
<a href="https://azouaoui-med.github.io/angular-pro-sidebar/demo/" target="_blank" class="btn btn-success btn-sm">Demo</a>
<hr>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/angular-pro-sidebar?style=social" />
</a>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/forks/azouaoui-med/angular-pro-sidebar?style=social" />
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="card rounded-0 p-0 shadow-sm">
<img src="https://user-images.githubusercontent.com/25878302/58369258-33f20900-7ef8-11e9-8ff3-b277cb7ed7b4.PNG" class="card-img-top rounded-0" alt="Angular pro sidebar">
<div class="card-body text-center">
<h6 class="card-title">Angular Dashboard</h6>
<a href="https://github.com/azouaoui-med/lightning-admin-angular" target="_blank" class="btn btn-primary btn-sm">Github</a>
<a href="https://azouaoui-med.github.io/lightning-admin-angular/demo/" target="_blank" class="btn btn-success btn-sm">Demo</a>
<hr>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/lightning-admin-angular?style=social" />
</a>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/forks/azouaoui-med/lightning-admin-angular?style=social" />
</a>
</div>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<div class="mb-2">
<small>
© 2020 made with <i class="fa fa-heart" style="color:red"></i> by - <a target="_blank" rel="noopener noreferrer" href="https://azouaoui.netlify.com">
Mohamed Azouaoui
</a>
</small>
</div>
<div>
<a href="https://github.com/azouaoui-med" target="_blank">
<img alt="GitHub followers" src="https://img.shields.io/github/followers/azouaoui-med?label=github&style=social" />
</a>
<a href="https://twitter.com/azouaoui_med" target="_blank">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/azouaoui_med?label=twitter&style=social" />
</a>
</div>
</footer>
</div>
</main>
<!-- page-content" -->
</div>
<!-- page-wrapper -->
<script>
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
$("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
$(".page-wrapper").addClass("toggled");
});
</script>
</body>
</html>
====================<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
height: 100%;
background-color: #222120;
background-image: url(https://cdn.wp.nginx.com/wp-content/themes/nginx-theme/assets/img/tiles/datalines-black.png);
}
h1{
font-size:1em;
text-align:center;
color:#eee;
letter-spacing: 1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
padding: 20px;
}
.nav-container {
width: 300px;
box-shadow: 1px 3px 3px 3px black;
transition: all 0.5s linear;
}
.nav {
list-style-type: none;
margin:0;
padding:0;
}
li{
height: 50px;
position:relative;
background:linear-gradient(#292929, #242424);
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration: none;
display:block;
height:100%;
width:100%;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
padding-left:25%;
border-left: 5px solid transparent;
letter-spacing: 1px;
transition:all 0.3s linear;
}
.text {
transition: all .4s linear;
}
li:hover .text{
margin-left:20px
}
.active a {
color: #9b59b6;
border-left:5px solid #9b59b6;
background-color: #1B1B1B;
outline:0;
}
li:not(.active):hover a{
color: #eee;
border-left:5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size:1.5em;
transition: all 0.3s linear;
}
@media only screen and (max-width : 860px){
.text{
display:none;
}
.nav-container, a {
width: 70px;
}
a:hover{
width: 200px;
z-index:1;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
box-shadow: 0 0 1px 1px black;
}
a:hover .text {
display:block;
padding-left: 30%;
}
}
@media only screen and (max-width: 480px){
.nav-container, a{ width:50px; }
span[class ^= "icon"]{left:8px;}
}
</style>
</head>
<body>
<h1>Make Slow Resize screan to see the transition</h1>
<div class="nav-container">
<ul class="nav">
<li class="active">
<a href="#">
<span class="icon-home"></span>
<span class="text">home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-user"></span>
<span class="text">About</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-play"></span>
<span class="text">Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-cogs"></span>
<span class="text">Services</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-briefcase"></span>
<span class="text">testmonials</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-calendar"></span>
<span class="text">Contact us</span>
</a>
</li>
</ul>
</div>
<script src="https://use.fontawesome.com/c9d2b81f44.js">
</script>
<script>
$('li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
</script>
</body>
</html>
Share This :
0 Comments