LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


11:15
0 new messages!
LOGIN
Login successful
LOGOUT
CSS
@import url(https://fonts.googleapis.com/css?family=Quicksand);

html {
  width: 100%;
  height: 100%;
  background: url(http://crispme.com/wp-content/uploads/Retro_Clouds_by_Davinness.jpg);
  font-family: 'Quicksand', sans-serif;
  text-align:center;
}

body {
  top:0;
  left:0;
  text-align:center;
}



/*#gehaeuse {
  background: #000;
  padding: 15px;
  padding-left: 11px;
  width: 320px;
  height: 630px;
  top: 55px;
  border-top-left-radius:15px;
  border-top-right-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  left: 37%;
  position:fixed;
  text-align:center;
} */

#lautstaerke {
  position:absolute;
  background: #191919;
  width:10px;
  height: 80px;
  top:80px;
  left: -4.2%;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}

.led-green {
    margin: 20px auto;
    width: 15px;
    height: 15px;
    position:absolute;
    top: 540px;
    left: 49%;
    background-color: #690;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
    opacity:.1;
}

#kopfzeile {
  position:absolute;
  z-index: 1;
  top:0px;
  left:0;
  width:100%;
  height:20px;
  background: #333;
  opacity: 0.6;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  padding-top: 5px;
}

#kopfzeile:hover {
  
}

#nachricht {
  top: 25px;
  width: 100%;
  height: 50px;
  background: #333;
  opacity: 0.6;
  text-align:center;
  border-top: 1px solid #fff;
  position:absolute;
  display:none;
  padding-top: 10px;
}

#akku {
  position:absolute;
  float:right;
  left: 90%;
  top: 0px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

#wlan {
  position:absolute;
  float:left;
  left:7px;
  top:2px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.smartphone {
  width: 320px;
  height: 538px;
  background:#1F7A7A;
  top: 10px;
  margin: 2rem auto;
  position:relative;
  text-align:center;
  border-left:9px solid #191919;
  border-right:9px solid #191919;
  border-top: 50px solid #191919;
  border-bottom: 65px solid #191919;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/*#navigationsleiste {
  bottom:0;
  left:0;
  height:40px;
  background:#000;
  position:relative;
  float:left;
  
}*/

#button-close {
  width: 150px;
  height: 150px;
  background: #df5454;
  border-radius: 50%;
  left: 50%;
  margin-left: -75px;
  top: 23%;
  position: relative;
  -webkit-box-shadow: 2px 0px 28px -9px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 0px 28px -9px rgba(0,0,0,0.75);
  box-shadow: 2px 0px 28px -9px rgba(0,0,0,0.75);
  
}

#button-close img {
  margin-top: 24px;
  -webkit-filter: invert(100%);
  filter: invert(100%); 
}

form {
  top: 315px;
  position:absolute;
  left: 30px;
}

input {
  font-family: 'Quicksand', sans-serif;
  color: #fff; 
  font-size: 16px; 
  border: 2px solid #fff;
  background: none;
  height: 30px; 
  width: 250px; 
  padding: 3px;
  text-align:center;
}

input:focus {
  text-decoration:none;
  outline: 0 none;
  border:0;
  transition: all 0.3s ease-in 0.3s;
  -webkit-transition: all 0.3s ease-in 0.3s;
  -moz-transition: all 0.3s ease-in 0.3s;
  -o-transition: all 0.3s ease-in 0.3s; 
}

::-webkit-input-placeholder {
   color: #888;
   font-size: 15px;
   text-align:center;
}

:-moz-placeholder { 
   color: #fff;  
}

::-moz-placeholder { 
   color: #fff;  
}

:-ms-input-placeholder {  
   color: #fff;  
}

#login-button {
  border:2px solid #fff;
  width: 150px;
  height: 20px;
  color: #fff;
  left:50%;
  margin-left: -75px;
  position:absolute;
  top:425px;
  padding:3px;
  padding-top: 8px;
  font-family: 'Quicksand', sans-serif;
  cursor:pointer;
}


#login-button:hover {
  border: 2px solid #fff;
  color: #1F7A7A;
   font-weight:900;
   background: #fff;
}

#succes {
  background: #33AD5C;
  width: 200px;
  height: 200px;
  border-radius: 0%;
  opacity:0;
  left: 58px;
  top:5%;
  position:absolute;
  display:none;
  transform: rotate(0deg);
  -webkit-box-shadow: 2px 0px 28px -9px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 0px 28px -9px rgba(0,0,0,0.75);
  box-shadow: 2px 0px 28px -9px rgba(0,0,0,0.75);
}

#succesbild{
  top: 15px;
  position: relative;
  -webkit-filter: invert(100%);
  filter: invert(100%);
   z-index:1;
   display:none;
}

#succes-text {
  position:relative;
  text-align:center;
  color: #fff;
  font-size: 26px;
  top: 25%;
  display: none;
  font-family: 'Quicksand', sans-serif;
  font-weight:200;

  
}

#logout {
  position: absolute;
  top: 90%;
  left: 23%;
  width:150px;
  text-align:center;
  padding: 7px;
  display:none;
  cursor:pointer;
  color: #fff;
  border: 2px solid #fff;
  opacity:0;
  
}


#logout:hover {
  color: #1F7A7A;
  border: 2px solid #fff;
   background: #fff;
   font-weight: 900;
}
 #footer {
       margin: 2rem auto;
  position:relative;
 }

#footer a {
   text-decoration:none;
   color: #000;
 
     transition: all 0.2s ease-in 0.2s;
  -webkit-transition: all 0.2s ease-in 0.2s;
  -moz-transition: all 0.2s ease-in 0.2s;
  -o-transition: all 0.2s ease-in 0.2s; 
}

#footer a:hover {
   color: #fff;
   background: #000;
   padding: 5px;
}


JS
$( '#kopfzeile' ).mouseover(function() {
  $('#akku, #wlan').fadeOut(0);
  $('#nachricht').toggle(0);
  $('#button-close, form, #login-button, #succes-text, #logout').animate({opacity: 0.2},0);
});
$( '#kopfzeile' ).mouseout(function() {
  $('#kopfzeile').animate({"height": "20px"}, 50);
  $('#nachricht').fadeOut(0);
  $('#akku, #wlan').fadeIn(0);
  $('#button-close, form, #login-button, #succes-text, #logout').animate({opacity: 1},0);
});


$('input').on("click",function(){
  $('#button-close').animate({"border-radius": "0%", backgroundColor:"#D63333"}, 100).animate({"border-radius": "50%", backgroundColor:"#df5454"}, 300);
});

$('#login-button').click(function(){ 
   
   if ($("input").val() == "1234") {
      
	  $('#button-close').animate({"border-radius": "0%", "top":"60%" }, 1500);
     $('#button-close').animate({"top":"20%","border-radius":"50%", "width":"200px", "height":"200px", "margin-left":"-100px", backgroundColor:"#33AD5C"},900).delay(1000);
     $('#button-close img').delay(1000).fadeOut(500);
     $('.led-green').delay(1000).animate({"opacity": "1"}, 1500);
  
     $('#login-button, form').fadeOut(500, function(){
    
     $( "#succes-text" ).delay(2000).fadeIn(1000); 
     $('#succesbild').delay(1000).fadeIn(1000);
     $( "#logout" ).delay(2000).fadeIn(600).animate({"top":"85%", "opacity":"1"},800);   
    }); } else {
     $('#button-close').effect( "shake" );
  }
});



$('#logout').click(function(){   
 history.go(0);
});
Host Instantly Drag and Drop Website Builder

 

Description

Smartphone mockup with simple login animations. HTML, CSS, jQuery !
Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID