LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


MATT CHAN
not you?
I agree to the terms and conditions
CSS
.bgvideo { width: 100%; height: 100%; position: fixed; top: 0; z-index: -1;t op:0;left:0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);}


@import url(http://weloveiconfonts.com/api/?family=fontawesome);


[class*="fontawesome-"]:before {
  font-family: 'fontawesome', sans-serif;
}

html {
  color: #222;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  font-style, font-weight, letter-spacing, line-height, word-spacing: normal;
}

body {
  width: 100%;
  height: 100%;
}

.wrapper {
   position: fixed;
  top: 50%;
  left: 50%;
  margin: -230px -160px;

}

.box{
  position:relative;
  margin: 160px auto;
  width: 320px;
  height: 360px;
  background: #eee;
  border: 1px solid #bbb;
  border-radius: 8px;
  overflow: hidden;
  z-index:1;
}

.cover-pic {
  width: 360px;
  height: 120px;
  background: url(https://goo.gl/vg3mZ) 0 -10px;
  background-size: 100%;
}

.profile-name {
  position: relative;
  top: -50px;
  color: #fff;
  text-decoration:none;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-align: center;
  text-shadow: 0 0 5px #000;
}

.not-you {
  position: relative;
  top: -50px;
  color: #fff;
  text-decoration: underline;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 5px #000;
}

.connection-wrapper {
  position: relative;
  top: -25px;
  width: 300px;
  text-align: center;
}



.input-wrapper {
  position: relative;
  top: -25px;
  width: 300px;
}

.username-box {
  margin: 20px 30px 10px 30px;
  padding: 10px;
  width: 240px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: 0;
  font-size: 1.1rem;
  color: #CCCCCC;
  font-weight: 200;
}



.password-box {
  margin: 0px 30px 10px 30px;
  padding: 10px;
  width: 240px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: 0;
  font-size: 1.1rem;
  color: #CCCCCC;
  font-weight: 200;
}


.checkbox {
  margin:10px 15px 10px 30px;
  color: #9C9C9C;
  font-size: 1rem;
  font-weight: 400;
}

.send {
  margin: 10px 30px 20px 30px;
  padding: 10px;
  width: 260px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #00A9CB;
  border: 1px solid #089BAF;
  border-radius: 5px;
  cursor: pointer;
  
  color: #fff;
  font-weight: 200;
  letter-spacing: 0.1rem;
  text-align: center;
}


.profile-pic {
  position: relative;
  z-index: 5;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:-220px;
  width: 120px;
  height:120px;
  background: url(https://goo.gl/lFkur);
  border: 5px solid #fff;
  border-radius: 100%;
  box-shadow: inset 0 0 20px 0 #222;
  cursor: pointer;
}

.profile-pic:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;

  background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%);
  background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%);
  background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%);
  background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%);
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 55%);

  -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
      -ms-border-radius: 100%;
       -o-border-radius: 100%;
          border-radius: 100%;
}

.profile-pic:hover {
  ;
}
Host Instantly Drag and Drop Website Builder

 

Description

Login screen users will interact with once they have logged into the network before. Pictures will be pulled from profiles on the school website (cover photo will be pulled from student's most recent work).
Term
Wed, 11/29/2017 - 11:27

Related Codes

Pen ID
Pen ID
Pen ID