LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    
    
    
    
      

  
  
  
  
  
    CodePen Login Form Test

   

  

Robbie Green


  • Advantage Screen Printing
  • Creative Director
  • BFA In Graphic Arts
3640
CSS
body {
  background: #fff url('https://subtlepatterns.com/patterns/gplaypattern.png') repeat; 
}

hr {
  border: solid;
  border-width: 1px;
  border-color: #0B86C3;
}

.info_icon {
  color: #0B86C3;
  font-size: 18px;
  padding: 3px;
}

.user_social_icon {
  float: right;
  margin-right: 5px;
  color: #fff;
}

.user_social_icon:hover {
  color: #0B86C3;
}

#user_header {
  width: 1000px;
  height: 100px;
  margin: auto;
  padding: 10px;
  background: #222 url('https://subtlepatterns.com/patterns/use_your_illusion.png') repeat;
  padding: 10px;
}

#user {
  width: 700px;
  height: 100px;
  float: left;
  
}


#user_picture {
  float: left;
  padding-right: 20px;
}

#user_info {
  width: 770px;
  height: 90px;
  background-color: rgba(60, 60, 60, 0.4);
  padding-top: 10px;
}

.user_name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin: 0;
  color: #fff;
  letter-spacing: 1.75px;
}

.verified {
  color: #0B86C3;
}

#user_info ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

#user_list {
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  font-size: 14px;
  color: #fff;
}

#user_list li {
  display: inline;
  margin-right: 20px;
  letter-spacing: 1px;
}


#scorebox {
  background: #222 url('https://subtlepatterns.com/patterns/use_your_illusion.png') repeat; 
  width: 200px;
  height: 65px;
  padding: 8px;
  box-shadow: 2px 2px 20px #222;
  float: right;
  margin-top: 9px;
  margin-right: 5px;
}

#score {
  background-color: rgba(60, 60, 60, 0.4);
  width: 135px;
  height: 65px;
  float: left;
}

.score {
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 36px;
  margin: 9px 20%;
  display: block;
  letter-spacing: 5px;
  text-shadow: 3px 3px 5px #000;
}

.score:hover {
  color: #0B86C3;
  text-shadow: 3px 3px 20px #000;
}

#points {
  width: 42px;
  height: 45px;
  padding: 10px;
  margin-left: 3px;
  background: #0B86C3;
  float: right;
  color: #fff;
  
}

#points:hover {
  background: #005782;
}

.pts {
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 20px;
  display: block;
}


Description

This is the top section of the users profile page for a learning site that I am currently working on building. Basic information, just trying to lay everything out to look nice. The number box on the right is a score counter. I'm liking this so far, I just need to make it responsive now!
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv