"Prueba"
Bootstrap 3.0.0 Snippet by nhaze

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>login - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </head> <body> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dpinnick/pen/LjdLmo?limit=all&page=21&q=service" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300); /* GENERAL RESETS */ * { margin: 0; padding: 0; } html { box-sizing: border-box; } *, *:before, *:after { margin: 0; padding: 0; box-sizing: inherit; } a { color: #666; text-decoration: none; } a:hover { color: #4FDA8C; } /* BODY */ body { position: relative; color: #666; font: 16px/26px "Raleway", sans-serif; text-align: center; height: 100%; background: -moz-linear-gradient(270deg, rgba(34,46,64,1) 0%, rgba(81,195,184,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(34,46,64,1)), color-stop(100%, rgba(81,195,184,1))); background: -webkit-linear-gradient(270deg, rgba(34,46,64,1) 0%, rgba(81,195,184,1) 100%); background: linear-gradient(180deg, rgba(34,46,64,1) 0%, rgba(81,195,184,1) 100%); overflow:hidden; } /* BUTTON */ a.button { position: absolute; left: 20px; top: 20px; height: auto; padding: .8rem 1.0rem; font-size: .8rem; line-height: normal; text-transform: uppercase; font-family: 'Proxima Nova', sans-serif; font-weight: 700; letter-spacing: 0; border-radius: 0; border: 1px solid #2D515C; text-decoration: none; color: #fff; background-color: transparent; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } a.button:hover { border-color: #2D515C; color: #fff; padding: 1.0rem 3.2rem; } @media only screen and (min-width: 22em) { a.button { padding: 1.0rem 2.8rem; font-size: 1.0rem; } } /* LOGIN */ .login { margin: 0; width: 100%; height: 100%; min-height: 100vh; } /* WRAP */ .wrap { position: static; margin: auto; width: 100%; height: auto; overflow: hidden; } .wrap:after { content: ""; display: table; clear: both; } /* LOGO */ .logo { position: absolute; z-index: 2; top: 0; left: 0; width: 40px; height: 40px; background: #4FC1B7; } .logo img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 30px; } .logo a { width: 100%; height: 100%; display: block; } /* USER (FORM WRAPPER) */ .user { position: relative; z-index: 0; float: none; margin: 0 auto; padding-top: 40px; width: 100%; height: 100vh; overflow: auto; background: -moz-linear-gradient(48deg, rgba(42,46,54,1) 0%, rgba(97,107,125,1) 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(42,46,54,1)), color-stop(100%, rgba(97,107,125,1))); background: -webkit-linear-gradient(48deg, rgba(42,46,54,1) 0%, rgba(97,107,125,1) 100%); background: linear-gradient(42deg, rgba(42,46,54,1) 0%, rgba(97,107,125,1) 100%); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; border-top: 1px solid #4FC1B7; } .user .actions { margin: 1em 0 0; padding-right: 10px; width: 100%; display: block; text-align: center; } .user .actions a { margin: 1em 0; width: 90px; display: inline-block; padding: .2em 0em; background-color: #5C6576; border: none; color: #999; cursor: pointer; text-align: center; font-size: .8em; border-radius: 30px 0 0 30px; -webkit-box-shadow: 0px 0px 27px -9px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 27px -9px rgba(0,0,0,0.75); box-shadow: 0px 0px 27px -9px rgba(0,0,0,0.75); } .user .actions a:last-child { color: #fff; border-radius: 0 30px 30px 0; background-color: #28A55F; background: -moz-linear-gradient(270deg, rgba(105,221,201,1) 0%, rgba(78,193,182,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(105,221,201,1)), color-stop(100%, rgba(78,193,182,1))); background: -webkit-linear-gradient(270deg, rgba(105,221,201,1) 0%, rgba(78,193,182,1) 100%); background: linear-gradient(180deg, rgba(105,221,201,1) 0%, rgba(78,193,182,1) 100%); } /* TERMS */ @keyframes show_terms { 0% { opacity: 0; -webkit-transform: translateY(-110%); -moz-transform: translateY(-110%); -o-transform: translateY(-110%); transform: translateY(-110%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes hide_terms { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-110%); -moz-transform: translateY(-110%); -o-transform: translateY(-110%); transform: translateY(-110%); opacity: 0; } } .terms, .recovery { position: absolute; z-index: 3; margin: 40px 0 0; padding: 1.5em 1em; width: 100%; height: calc(100% - 40px); border-radius: 0; background: #fff; text-align: left; overflow: auto; will-change: transform; -webkit-transform: translateY(-110%); -moz-transform: translateY(-110%); -o-transform: translateY(-110%); transform: translateY(-110%); opacity: 0; border-radius: 0; } .terms.open, .recovery.open { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); animation: show_terms .5s .2s 1 ease normal forwards; } .terms.closed, .recovery.closed { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; animation: hide_terms .6s .2s 1 ease normal forwards; } .terms p, .recovery p { margin: 1em 0; font-size: .9em; } .terms h3, .recovery h3 { margin: 2em 0 .2em; } .terms p.small { margin: 0 0 1.5em; font-size: .8em; } .recovery form .input { margin: 0 0 .8em 0; padding: .8em 2em 10px 0; width: 100%; display: inline-block; background: transparent; border: 0; border-bottom: 1px solid #5A6374; outline: 0; box-sizing: border-box; -moz-box-sizing: border-box; color: inherit; font-family: inherit; color: #666; } .recovery form .button { margin: 1em 0; padding: .2em 3em; width: auto; display: block; background-color: #28A55F; border: none; color: #fff; cursor: pointer; font-size: .8em; border-radius: 0px; background: rgba(62,181,169,1) 0%; } .form-wrap form .button:hover { background-color: #4FDA8C; } .recovery p.mssg { opacity: 0; -webkit-transition: opacity 1s .5s ease; -moz-transition: opacity 1s .5s ease; -o-transition: opacity 1s .5s ease; transition: opacity 1s .5s ease; } .recovery p.mssg.animate { opacity: 1; } /* CONTENT */ .content { position: fixed; z-index: 1; float: none; margin: 0 auto; width: 100%; height: 40px; background: -moz-linear-gradient(90deg, rgba(62,181,169,1) 0%, rgba(111,226,204,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(111,226,204,1)), color-stop(100%, rgba(62,181,169,1))); background: -webkit-linear-gradient(90deg, rgba(62,181,169,1) 0%, rgba(111,226,204,1) 100%); background: linear-gradient(0deg, rgba(62,181,169,1) 0%, rgba(111,226,204,1) 100%); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; overflow: hidden; } /* TOGGLE */ #toggle-wrap { position: absolute; z-index: 4; top: 40px; right: 17px; width: 80px; height: 1px; } #toggle-terms span { background: #fff; border-radius: 0; } /* TOGGLE TERMS */ #toggle-terms { position: absolute; z-index: 4; right: 0; top: 0; width: 40px; height: 40px; margin: auto; display: block; cursor: pointer; background: rgba(0, 0, 0, 0.1); border-radius: 100%; opacity: 0; -webkit-transform: translate(-6px, 20px); -moz-transform: translate(-6px, 20px); -o-transform: translate(-6px, 20px); transform: translate(-6px, 20px); } /* CIRCLE EFFECT */ #toggle-terms:after { position: absolute; width: 100%; height: 100%; pointer-events: none; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #toggle-terms:before { speak: none; display: block; -webkit-font-smoothing: antialiased; } #toggle-terms { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; } #toggle-terms:after { top: 0px; left: 0px; padding: 0; z-index: -1; background: rgba(0, 0, 0, 0.2); -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; -moz-transition: -moz-transform 0.2s, opacity 0.3s; -o-transition: -o-transform 0.2s, opacity 0.3s; transition: transform 0.2s, opacity 0.3s; } #toggle-terms.closed { color: rgba(0, 0, 0, 0.2); } #toggle-terms.closed:after { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); opacity: 0; } /* CLOSE ANIMATION*/ @keyframes show_close { 0% { opacity: 0; -webkit-transform: translate(-6px, -100px); -moz-transform: translate(-6px, -100px); -o-transform: translate(-6px, -100px); transform: translate(-6px, -100px); } 100% { opacity: 1; -webkit-transform: translate(-6px, 20px); -moz-transform: translate(-6px, 20px); -o-transform: translate(-6px, 20px); transform: translate(-6px, 20px); } } @keyframes hide_close { 0% { opacity: 1; } 100% { opacity: 0; } } #toggle-terms.open { animation: show_close .4s .5s 1 ease normal forwards; } #toggle-terms.closed { animation: hide_close .2s .0s 1 ease normal forwards; } #toggle-terms:hover { background: rgba(0, 0, 0, 0.4); } /* TOGGLE TERMS CROSS */ #toggle-terms #cross { position: absolute; z-index: 4; height: 100%; width: 100%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #toggle-terms.open #cross { -webkit-transition-delay: .9s; -moz-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #toggle-terms.open #cross span { position: absolute; z-index: 4; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } #toggle-terms.open #cross span:nth-child(1) { top: 15%; left: 19px; height: 70%; width: 1px; } #toggle-terms.open #cross span:nth-child(2) { left: 15%; top: 19px; width: 70%; height: 1px; } #toggle-terms #cross span:nth-child(1) { height: 0; -webkit-transition-delay: .625s; -moz-transition-delay: .625s; -o-transition-delay: .625s; transition-delay: .625s; } #toggle-terms #cross span:nth-child(2) { width: 0; -webkit-transition-delay: .375s; -moz-transition-delay: .375s; -o-transition-delay: .375s; transition-delay: .375s; } /* SLIDESHOW */ #slideshow { position: relative; margin: 0 auto; width: 100%; height: 100%; padding: 10px; border-radius: 10px 0 0 10px; } #slideshow h2 { margin: .0em auto .0em auto; text-align: center; font-size: 1.4em; color: #fff; line-height: .5em; } #slideshow p { color: #fff; display: none; } #slideshow div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 1em 3em; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #slideshow .one { background-image: url("http://res.cloudinary.com/dpcloudinary/image/upload/v1506186248/dots.png"); background-repeat: no-repeat; background-position: 0% 50%; } #slideshow .two { background-image: url("http://res.cloudinary.com/dpcloudinary/image/upload/v1506186248/gears.png"); background-repeat: no-repeat; background-position: 0% 50%; } #slideshow .three { background-image: url("http://res.cloudinary.com/dpcloudinary/image/upload/v1506186248/splat.png"); background-repeat: no-repeat; background-position: 0% 5%; } #slideshow .four { background-image: url("http://res.cloudinary.com/dpcloudinary/image/upload/v1506186248/ray.png"); background-repeat: no-repeat; background-position: 0% 50%; } /* FORM ELEMENTS */ input { font: 16px/26px "Raleway", sans-serif; } .form-wrap { width: 100%; margin: 2em auto 0; } .form-wrap a { color: #ccc; padding-bottom: 4px; border-bottom: 1px solid #5FD1C1; } .form-wrap a:hover { color: #fff; } .form-wrap .tabs { overflow: hidden; } .form-wrap .tabs * { -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .form-wrap .tabs h3 { float: left; width: 50%; } .form-wrap .tabs h3 a { padding: 0.5em 0; text-align: center; font-weight: 400; display: block; color: #999; border: 0; } .form-wrap .tabs h3 a.active { color: #ccc; } .form-wrap .tabs h3 a.active span { padding-bottom: 4px; border-bottom: 1px solid #5FD1C1; } .form-wrap .tabs-content { padding: 1.5em 3em; text-align: left; width: auto; } .help-action { padding: .4em 0 0; font-size: .93em; } .form-wrap .tabs-content div[id$="tab-content"] { display: none; } .form-wrap .tabs-content .active { display: block !important; } .form-wrap form .input { margin: 0 0 .8em 0; padding: .8em 2em 10px 0; width: 100%; display: inline-block; background: transparent; border: 0; border-bottom: 1px solid #5A6374; outline: 0; box-sizing: border-box; -moz-box-sizing: border-box; color: inherit; font-family: inherit; color: #fff; } .form-wrap form .button { margin: 1em 0; padding: .2em 3em; width: auto; display: block; background-color: #28A55F; border: none; color: #fff; cursor: pointer; font-size: .8em; border-radius: 30px; background: -moz-linear-gradient(270deg, rgba(105,221,201,1) 0%, rgba(78,193,182,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(105,221,201,1)), color-stop(100%, rgba(78,193,182,1))); background: -webkit-linear-gradient(270deg, rgba(105,221,201,1) 0%, rgba(78,193,182,1) 100%); background: linear-gradient(180deg, rgba(105,221,201,1) 0%, rgba(78,193,182,1) 100%); -webkit-box-shadow: 0px 0px 37px -9px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 37px -9px rgba(0,0,0,0.75); box-shadow: 0px 0px 37px -9px rgba(0,0,0,0.75); } .form-wrap form .button:hover { background-color: #4FDA8C; } .form-wrap form .checkbox { margin: 1em 0; padding: 20px; visibility: hidden; text-align: left; } .form-wrap form .checkbox:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .form-wrap form label[for] { position: relative; padding-left: 20px; cursor: pointer; } .form-wrap form label[for]:before { position: absolute; width: 17px; height: 17px; top: 0px; left: -14px; content: ''; border: 1px solid #5A6374; } .form-wrap form label[for]:after { position: absolute; top: 1px; left: -10px; width: 15px; height: 8px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; background-color: transparent; border: solid #67DAC6; border-width: 0 0 3px 3px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .form-wrap .help-text { margin-top: .6em; } .form-wrap .help-text p { text-align: left; font-size: 14px; } .fa { display: none; } /* MEDIUM VIEWPORT */ @media only screen and (min-width: 40em) { /* GLOBAL TRANSITION */ * { /*transition: .25s ease-in-out;*/ } /* WRAP */ .wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 600px; height: 500px; margin: auto; border-radius: 10px; } /* LOGO */ .logo { top: 10px; left: 10px; width: 40px; height: 40px; background: none; } .logo img { width: 100%; } @keyframes show_close { 0% { opacity: 0; -webkit-transform: translate(-6px, -100px); -moz-transform: translate(-6px, -100px); -o-transform: translate(-6px, -100px); transform: translate(-6px, -100px); } 100% { opacity: 1; -webkit-transform: translate(-6px, 18px); -moz-transform: translate(-6px, 18px); -o-transform: translate(-6px, 18px); transform: translate(-6px, 18px); } } /* TOGGLE WRAP */ #toggle-wrap { top: 60px; right: calc(50% + 17px); height: 80px; overflow: hidden; } #toggle-wrap.closed { width: 50%; } /* TOGGLE TERMS */ #toggle-terms { opacity: 1; -webkit-transform: translate(-6px, -100px); -moz-transform: translate(-6px, -100px); -o-transform: translate(-6px, -100px); transform: translate(-6px, -100px); } #toggle-terms.closed { opacity: 1; -webkit-transform: translate(-6px, 18px); -moz-transform: translate(-6px, 18px); -o-transform: translate(-6px, 18px); transform: translate(-6px, 18px); } /* SLIDESHOW */ #slideshow h2 { margin: 4.5em 0 1em; font-size: 2em; } #slideshow h2 span { padding: 5px 0; border: solid #B6EDE3; border-width: 1px 0; } #slideshow p { display: block; } #slideshow div { -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto; } #slideshow .one { background-position: 50% 130%; } #slideshow .two { background-position: 50% 200%; } #slideshow .three { background-position: 50% 300%; } #slideshow .four { background-position: -40% -80%; } /* CONTENT */ .content, .content.full { position: relative; float: left; width: 50%; height: 500px; -webkit-box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); -moz-box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); border-radius: 10px 0 0 10px; } /* TERMS */ .terms, .recovery { position: absolute; width: 50%; height: 440px; float: left; margin: 60px 0 0; -webkit-box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); -moz-box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); border-radius: 0 0 0 10px; } /* USER (FORM WRAPPER) */ .user { padding-top: 0; float: left; width: 50%; height: 500px; -webkit-box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); -moz-box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); box-shadow: -3px 0px 45px -6px rgba(56,75,99,0.61); border-radius: 0 10px 10px 0; border: 0; } .user .actions { margin: 0; text-align: right; } /* FORM ELEMENTS */ .form-wrap { margin: 3em auto 0; } .form-wrap .tabs-content { padding: 1.5em 2.5em; } .tabs-content p { position: relative; } /* ARROW */ .tabs-content .fa { position: absolute; top: 8px; left: -16px; display: block; font-size: .8em; color: #fff; opacity: .3; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: transform .3s .3s ease, opacity .6s .0s ease; -moz-transition: transform .3s .3s ease, opacity .6s .0s ease; -o-transition: transform .3s .3s ease, opacity .6s .0s ease; transition: transform .3s .3s ease, opacity .6s .0s ease; } .tabs-content .fa.active { -webkit-transform: translate(-3px, 0); -moz-transform: translate(-3px, 0); -o-transform: translate(-3px, 0); transform: translate(-3px, 0); opacity: .8; } .tabs-content .fa.inactive { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); opacity: .3; } } /* LARGE VIEWPORT */ @media only screen and (min-width: 60em) { /* WRAP */ .wrap { width: 900px; height: 550px; } /* CONTENT */ .content, .content.full { height: 550px; } .terms, .recovery { height: 490px; } /* SLIDESHOW */ #slideshow h2 { margin: 4em 0 1em; font-size: 3em; } #slideshow .four { background-position: -82% -330%; } /* USER (FORM WRAPPER) */ .user { height: 550px; } .form-wrap { margin: 5em auto 0; } .form-wrap .tabs-content { padding: 1.5em 4.9em; } } /* CSS */ .element { opacity: 0.0; transform: scale(0.95) translate3d(0,100%,0); transition: transform 400ms ease, opacity 400ms ease; } .element.active { opacity: 1.0; transform: scale(1.0) translate3d(0,0,0); } .element.inactive { opacity: 0.0; transform: scale(1) translate3d(0,0,0); } </style></head><body> <!-- LOGIN MODULE --> <div class="login"> <div class="wrap"> <!-- TOGGLE --> <div id="toggle-wrap"> <div id="toggle-terms"> <div id="cross"> <span></span> <span></span> </div> </div> </div> <!-- RECOVERY --> <div class="recovery"> <h2>Información</h2> <p>Estimado Usuario: Los resultados entregados a través de este servicio corresponden exclusivamente a exámenes realizados en el Servicio de Laboratorio Clínico. Agradecemos su comprensión. Además, con el fin de resguardar su seguridad y la confidencialidad de información que puede ser en extremo sensible o por razones técnicas en algunos casos, los resultados de algunos exámenes sólo estarán disponibles en el mesón de la Unidad de Toma de Muestra en el que fue atendido y no en nuestro sitio web</p> <form class="recovery-form" action="" method="post"> <input type="submit" placeholder="Aceptar" class="button" value="Aceptar"> </form> </div> <!-- SLIDER --> <div class="content"> <!-- LOGO --> <div class="logo"> <a href="#"><img src="https://res.cloudinary.com/dpcloudinary/image/upload/v1506186248/logo.png" alt=""></a> </div> <!-- SLIDESHOW --> <div id="slideshow"> <div class="one"> <h2><span>Prueba 1</span></h2> <p>Aquí escribir el texto</p> </div> <div class="two"> <h2><span>Prueba 2</span></h2> <p>Thousands of instant online classes/tutorials included</p> </div> <div class="three"> <h2><span>GROUPS</span></h2> <p>Create your own groups and connect with others that share your interests</p> </div> <div class="four"> <h2><span>SHARING</span></h2> <p>Share your works and knowledge with the community on the public showcase section</p> </div> </div> </div> <!-- LOGIN FORM --> <div class="user"> <!-- ACTIONS <div class="actions"> <a class="help" href="#signup-tab-content">Sign Up</a><a class="faq" href="#login-tab-content">Login</a> </div> --> <div class="form-wrap"> <!-- TABS --> <div class="tabs"> <h3 class="login-tab"><a class="log-in active" href="#login-tab-content"><span>Paciente<span></a></h3> <h3 class="signup-tab"><a class="sign-up" href="#signup-tab-content"><span>Institucion</span></a></h3> </div> <!-- TABS CONTENT --> <div class="tabs-content"> <!-- TABS CONTENT LOGIN --> <div id="login-tab-content" class="active"> <form class="login-form" action="" method="post"> <input type="text" class="input" id="user_login" autocomplete="off" placeholder="Email or Username"> <input type="password" class="input" id="user_pass" autocomplete="off" placeholder="Password"> <input type="checkbox" class="checkbox" checked id="remember_me"> <label for="remember_me">Remember me</label> <input type="submit" class="button" value="Login"> </form> <div class="help-action"> <p><i class="fa fa-arrow-left" aria-hidden="true"></i><a class="forgot" href="#">Forgot your password?</a></p> </div> </div> <!-- TABS CONTENT SIGNUP --> <div id="signup-tab-content"> <form class="signup-form" action="" method="post"> <input type="email" class="input" id="user_email" autocomplete="off" placeholder="Email"> <input type="text" class="input" id="user_name" autocomplete="off" placeholder="Username"> <input type="password" class="input" id="user_pass" autocomplete="off" placeholder="Password"> <input type="submit" class="button" value="Sign Up"> </form> <div class="help-action"> <p>By signing up, you agree to our</p> <p><i class="fa fa-arrow-left" aria-hidden="true"></i><a class="agree" href="#">Terms of service</a></p> </div> </div> </div> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script >/* LOGIN - MAIN.JS - dp 2017 */ // LOGIN TABS $(function() { var tab = $('.tabs h3 a'); tab.on('click', function(event) { event.preventDefault(); tab.removeClass('active'); $(this).addClass('active'); tab_content = $(this).attr('href'); $('div[id$="tab-content"]').removeClass('active'); $(tab_content).addClass('active'); }); }); // SLIDESHOW $(function() { $('#slideshow > div:gt(0)').hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3850); }); // CUSTOM JQUERY FUNCTION FOR SWAPPING CLASSES (function($) { 'use strict'; $.fn.swapClass = function(remove, add) { this.removeClass(remove).addClass(add); return this; }; }(jQuery)); // SHOW/HIDE PANEL ROUTINE (needs better methods) // I'll optimize when time permits. $(function() { $('.agree,.forgot, #toggle-terms, .log-in, .sign-up').on('click', function(event) { event.preventDefault(); var terms = $('.terms'), recovery = $('.recovery'), close = $('#toggle-terms'), arrow = $('.tabs-content .fa'); if ($(this).hasClass('agree') || $(this).hasClass('log-in') || ($(this).is('#toggle-terms')) && terms.hasClass('open')) { if (terms.hasClass('open')) { terms.swapClass('open', 'closed'); close.swapClass('open', 'closed'); arrow.swapClass('active', 'inactive'); } else { if ($(this).hasClass('log-in')) { return; } terms.swapClass('closed', 'open').scrollTop(0); close.swapClass('closed', 'open'); arrow.swapClass('inactive', 'active'); } } else if ($(this).hasClass('forgot') || $(this).hasClass('sign-up') || $(this).is('#toggle-terms')) { if (recovery.hasClass('open')) { recovery.swapClass('open', 'closed'); close.swapClass('open', 'closed'); arrow.swapClass('active', 'inactive'); } else { if ($(this).hasClass('sign-up')) { return; } recovery.swapClass('closed', 'open'); close.swapClass('closed', 'open'); arrow.swapClass('inactive', 'active'); } } }); }); // DISPLAY MSSG $(function() { $('.recovery .button').on('click', function(event) { event.preventDefault(); $('.recovery .mssg').addClass('animate'); setTimeout(function() { $('.recovery').swapClass('open', 'closed'); $('#toggle-terms').swapClass('open', 'closed'); $('.tabs-content .fa').swapClass('active', 'inactive'); $('.recovery .mssg').removeClass('animate'); }, 2500); }); }); // DISABLE SUBMIT FOR DEMO $(function() { $('.button').on('click', function(event) { $(this).stop(); event.preventDefault(); return false; }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: