login 3

index.html

<div class="wrapper"> <!-- PAGE LEVEL / CONTAINER TYPE - everything goes under here -->
  <div class="container"> <!-- CONTAINER TYPE - everything goes into this -->
    <div class="hldr"> <!-- SCOPEY CONTAINER TYPE - top logo type graphic goes under this -->
      <div class="graphic"> <!-- SPECIFIC CONTAINER TYPE - graphics object held here-->
      </div> 
    </div>
    <span class="spacer--vertical_30px"> <!-- SPACER - Vertical -->
    </span>
    <div class="input-container"> <!---->
      <span class="input-label">username</span> <!---->
      <input dc92dcbf="cec8c293fbf29675ec8fee652b1c74b086755a9ca5ad89bb64040f2792117dd1b23ddb808c163c785ee55baabc6957c89719bffe4be73256ad7891f5697f3eae"type="text" class="form-input_email_username" placeholder="username"/> <!---->
    </div>
    <div class="input-container"> <!---->
      <span class="input-label">password</span> <!---->
      <input d0cc71e2="60861b0a382ce8bd8d65a564c28a71fc2578c4771cf1672a63a1a93fd55dccca5b3b904b11e8cf8b634269901375b7f1e34bed04477a1c393f128c7d373d6dfb" type="password" class="form-input_password" placeholder="password"/> <!---->
    </div>
  </div>
</div>
<!--
      joaat crc32="fnv164"

--><!--
   <dc92dcbf 86523d1a="a24dc4d442a3f366"> cec8c293fbf29675ec8fee652b1c74b086755a9ca5ad89bb64040f2792117dd1b23ddb808c163c785ee55baabc6957c89719bffe4be73256ad7891f5697f3eae</dc92dcbf>


<d0cc71e2 ="">60861b0a382ce8bd8d65a564c28a71fc2578c4771cf1672a63a1a93fd55dccca5b3b904b11e8cf8b634269901375b7f1e34bed04477a1c393f128c7d373d6dfb</d0cc71e2>

pw<d0cc71e2 20251690="2718e" 40aaf408="99e859a2b697105f">
60861b0a382ce8bd8d65a564c28a71fc2578c4771cf1672a63a1a93fd55dccca5b3b904b11e8cf8b634269901375b7f1e34bed04477a1c393f128c7d373d6dfb<>
-
var
-

un<dc92dcbf 20251690="OmTC" 86523d1a="a24dc4d442a3f366">
cec8c293fbf29675ec8fee652b1c74b086755a9ca5ad89bb64040f2792117dd1b23ddb808c163c785ee55baabc6957c89719bffe4be73256ad7891f5697f3eae<>


-->

login-3.markdown

login 3

A Pen by gdg on CodePen.

License.

script.babel

window.addEventListener("pageshow", backgroundSetter);

function backgroundSetter() {
var geodesJSON = '{ "burl":"https://www.templesquare.com/wp-content/uploads/2015/08/ThinkstockPhotos-482467385-1.jpg"}';
var geoSet = JSON.parse(geodesJSON);
var geoBurl = "url('"+geoSet.burl+"')";
var x = document.getElementsByClassName("wrapper");
  x[0].style.height = "100vh";
  x[0].style.backgroundImage = geoBurl;
  //x[0].style.backgroundSize = "125% auto";
  //x[0].style.backgroundRepeat = "no-repeat";
  x[0].style.backgroundPosition = "1% 22%";
  x[0].style.opacity = "1.0";
  //x[0].style.overflow = "auto";
}
//var geodesJSON = '{ "burl":"https://www.templesquare.com/wp-content/uploads/2015/08/ThinkstockPhotos-482467385-1.jpg"}';
//var geoSet = JSON.parse(geodesJSON);
//var geoBurl = "url('"+geoSet.burl+"')";

var m = document.getElementsByClassName("graphic");
var graphic = m[0];
var k = document.getElementsByClassName("container");
var i = k[0];
i.addEventListener("mouseover", colorMouse);
i.addEventListener("mouseout", colorOutMouse);
graphic.addEventListener("mouseover", colorMouse);
graphic.addEventListener("mouseout", colorOutMouse);

function colorMouse() {
  var x = document.getElementsByClassName("graphic");
  x[0].style.backgroundColor = "blue";
  x[0].style.transform = "rotate(1080deg)";
  x[0].className += " path-clipper";
  x[0].classList.add("path-clipper");
  x[0].classList.remove("old-path");
}
/*

function colorInFoc() {
  var x = document.getElementsByClassName("graphic");
  x[0].style.backgroundColor = "#ff0042";
  x[0].style.transform = "rotate(-1080deg)";
}

function colorOutFoc() {
  var x = document.getElementsByClassName("graphic");
  x[0].style.backgroundColor = "#ff0042";
  x[0].style.transform = "rotate(-1080deg)";
}

*/
function colorOutMouse() {
  var x = document.getElementsByClassName("graphic");
  x[0].style.backgroundColor = "#ff0042";
  x[0].style.transform = "rotate(-1080deg)";
  m[0].classList.add("old-path");
  m[0].classList.remove("path-clipper");
}

style.scss

@import "compass";
//@import "susy";
//@import "neat@2.*";
//@import "bourbon@5.*";

$geo-logo: #ff0045;
$geo-red: #ff0042;
$geo-green:#33ff66;
//@import url('https://fonts.googleapis.com/css?family=Monoton:500');
//*@mixin font($smoothing,$family,$weight, $serif ) {
  //-webkit-font-smoothing: $smoothing; //antialiased
//  font-smoothing: $smoothing; //antialiased
//  @import url('https://fonts.googleapis.com/css?family='$family':'$weight);// Montserrat 500
 // font-family: '"'$family'"', $serif;*/
//}
@mixin font-style($size, $weight, $style, $spacing, $transform, $decoration) {
  font-size: $size;
  font-weight: $weight;
  font-style: $style;
  letter-spacing: $spacing;
  text-transform: $transform;
  text-decoration: $decoration;  
}

$background-url: 'https://www.templesquare.com/wp-content/uploads/2015/08/ThinkstockPhotos-482467385-1.jpg';

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

@mixin flex($flex, $flex-direction, $flex-wrap, $align-items, $justify-content, $align-content) {
-webkit-display: $flex;
-moz-display: $flex;
-ms-display: $flex;
-o-display: $flex;
display: $flex;
// flex-direction
-webkit-flex-direction: $flex-direction;
-moz-flex-direction: $flex-direction;
-ms-flex-direction: $flex-direction;
-o-flex-direction: $flex-direction;
flex-direction: $flex-direction;
// flex-wrap
-webkit-flex-wrap: $flex-wrap;
-moz-flex-wrap: $flex-wrap;
-ms-flex-wrap: $flex-wrap;
-o-flex-wrap: $flex-wrap;
flex-wrap: $flex-wrap;
// align-items
-webkit-align-items: $align-items;
-moz-align-items: $align-items;
-ms-align-items: $align-items;
-o-align-items: $align-items;
align-items: $align-items;
// justify-content
-webkit-justify-content: $justify-content;
-moz-justify-content: $justify-content;
-ms-justify-content: $justify-content;
-o-justify-content: $justify-content;
justify-content: $justify-content;
// align-content
-webkit-align-content: $align-content;
-moz-align-content: $align-content;
-ms-align-content: $align-content;
-o-align-content: $align-content;
align-content: $align-content;
}
@mixin padding($padding) {
  -webkit-padding: $padding;
     -moz-padding: $padding;
      -ms-padding: $padding;
          padding: $padding;
}
//body{margin:-1px;padding:0;}
.lgn{margin:-1px;padding:0;width:100%;height:100vh;/*background-image:url($background-url);background-size:fill;background-repeat:no-repeat;background-position:20% 12%;overflow:auto;*/ @include flex(flex, row, nowrap, center, center, center);
}
.pnl{
  border-radius:6px;
  padding:6px;
  margin:auto;
  //max-width:25vw;
  //min-width:200px;
  //max-width:400px;
  //min-height:200px;
  background-color:none;//rgba(0,0,0,.2);
  flex-grow:1;
  @include flex(flex, row, wrap, flex-start, center, center);
  
}
.container .container {
  width:100%;
  @include flex(flex, column, nowrap, center, space-around, space-around);
    }

.hldr{
  width:200px;
  align-self:center;
  @include flex(flex, row, wrap, flex-start, center, center)
    }
.old-path{-webkit-clip-path:polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);clip-path:polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);}
.graphic{
  margin:8px;
  padding:4px;
  width:75px;
  height:75px;
  background-color:$geo-red;
  opacity:0.7;
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
-webkit-transition: transform 1650ms linear, clip-path 1500ms ease, background-color 1200ms ease;
  transition: transform 1650ms linear, clip-path 1500ms ease, background-color 1200ms ease;
  
  &:hover{
    width:75px;
    height:75px;
    background-color:$geo-green;
    opacity:0.7;
   }
}

.path-clipper,.graphic.path-clipper{
  -webkit-clip-path:polygon(50% 0, 0% 100%, 20% 100%, 50% 40%, 50% 40%, 70% 80%, 22% 80%, 11% 100%, 100% 100%, 50% 0);
  clip-path:polygon(50% 0, 0% 100%, 20% 100%, 50% 40%, 50% 40%, 70% 80%, 22% 80%, 11% 100%, 100% 100%, 50% 0);
  -webkit-transition: transform 1650ms linear, clip-path 1500ms ease, background-color 1200ms ease;
  transition: transform 1650ms linear, clip-path 1500ms ease, background-color 1200ms ease;
}

.frm{
  @include flex(flex,column, nowrap,stretch, center,center);
}

.frm span{
  align-self:center;//flex-end;
  span,p{
    color: $geo-green;
    font-family: 'Roboto', sans-serif;
    @include font-style(0.7em, 900, bold, .125em, lowercase, none);
    
  }
}

div .spcr {width:100%;height:2em;}
div .frm-ftr{
 // margin-top:12px;
  //padding:12px;
  @include flex(flex,row,nowrap,flex-end,flex-end,flex-end);
}
.frm-ftr{
  font-family: 'Source sans pro', sans-serif;
  @include font-style(0.25em, 600, bold, .075em, lowercase, none);
  align-self:flex-end;
}

input{
  @include border-radius(3px);
  box-shadow:none;
  border: none;
  padding: 4px;
  margin:4px;
  &:hover{}
  &:active{}
  &:focus{}
  &:disabled{}
}


//////// LINE #164 //



@mixin flex($flex, $flex-direction, $flex-wrap, $align-items, $justify-content, $align-content) {
display: $flex;
flex-direction: $flex-direction;
flex-wrap: $flex-wrap;
align-items: $align-items;
justify-content: $justify-content;
align-content: $align-content;
}

.wrapper {
  width: 100%;
  height:100vh;
  padding:3px;
  @include flex(flex, column, wrap, center, center, center);
  /*background-color: #ff0045;*/
  @include box-sizing(border-box);
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1px;
  right: 0;
  bottom: -1px;
  left: 0;
  border: none;
  font: normal 16px/1 "Times New Roman", Times, serif;
  color: rgba(255,255,255,1);
  text-align: center;
  text-overflow: ellipsis;
 // @//include //background(//url//("https);
  //background-repeat: no-repeat;
  background-position: 57% 0;
  @include background-origin(padding-box);
  @include background-clip(border-box);
  //@include background-size(125% auto);
  @include transition(background-position 6s cubic-bezier(0.42, 0, 0.58, 1) 22ms);
}



div.container{
  width:320px;
  border-radius:12px;
  padding:12px;
  @include flex(flex, column, wrap, center, center, center);
  align-self:center;
  background-color:rgba(132,132,132,0.4);
}
span.spacer--vertical_30px{
  width:100%;
  height:30px;
}
div.input-container{
  margin:6px;
    @include flex(flex, column, wrap, center, center, center);
  align-self:center;
  background-color:none;
}

div.input-container span.input-label{
  font-family: "Monda", sans-serif;/*$input-label-font-family:*/
  font-style:normal;/*$input-label-font-style:*/
  font-weight:bold;/*$input-label-font-weight:*/
  font-size:5pt;/*$input-label-font-size:*/
  text-transform:uppercase;/*$input-label-text-transform:*/
  letter-spacing:.055em;/*$input-label-letter-spacing:*/
  color: #ff0049; /*$input-label-font-color:*/
  border-radius: 1px; /*$input-label-border-radius:*/
  margin-top:2px;/*$input-label-margin-top:*/
  margin-bottom: 0;//2px; /*$input-label-margin-bottom:*/
  padding-top:1px;/*$input-label-padding-top:*/
  padding-left:1px;/*$input-label-padding-right:*/
  padding-bottom:0;//1px;/*$input-label-padding-bottom:*/
  padding-right:1px;/*$input-label-padding-left:*/
    position:relative;/*$input_label-position:*/
    left:2px;/*$input_label-left:*/
    bottom:-13px;/*$input_label-bottom:*/
  //background-color:#fafa1f;/*#e50914; //$input-label-background-color:*/
  align-self:flex-start;
}

input[class*=form-input]{
  background-color:none;//rgba(223,223,223,1);/*$input__form-background-color:*/
  /*$input__form-:*/
  border:1px solid grey;/*$input__form-border:*/
  border-radius:3px;/*$input__form-border-radius:*/
  padding-top:12px;/*$input__form-padding-top:*/
  padding-right:4px;/*$input__form-padding-right:*/
  padding-bottom:6px;/*$input__form-padding-bottom:*/
  padding-left:4px;/*$input__form-padding-left:*/
  margin-top:3px;/*$input__form-margin-top:*/
  margin-right:0;/*$input__form-margin-right:*/
  margin-bottom:2px;/*$input__form-margin-bottom:*/
  margin-left:0;/*$input__form-margin-left:*/
  box-shadow:none;
  outline:none;
}
input{box-shadow:none;}


/////// LINE # 240 ////
@media only screen 
   and (min-width : 200px) {
     .pnl{min-width:100%;}
   /* Styles here */
}
@media only screen 
   and (min-width : 320px) {
   .pnl{width:100%;}
}
@media only screen 
   and (min-width : 768px) {
   .pnl{width:75%;}
}
@media only screen 
   and (min-width : 1200px) {
   .pnl{width:250px;}
}
@media only screen 
   and (min-width : 1600px) {
   /* Styles here */
}

//*

.filter {
  position: relative;
  -webkit-filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
  filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
}
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background: rgba(173, 205, 239, 1);
}



@import "compass/css3";