Miniprofile (Odds and Ends)

In this example below you will see how to do a Miniprofile (Odds and Ends) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Kuroya, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kuroya ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Miniprofile (Odds and Ends)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<center><div class="mpall">
  <img src="http://ultraimg.com/images/26-NICONICOSINGERvalshe3724f.png" class="mplarge">
  <div class="mpunder">
    <div class="mptop">
    <img src="http://www.ultraimg.com/images/102-YPLoxGt.png">
      <i style="margin-top: 5px;">0000</i>
      <b>posts</b>
      <b>marks</b>
      <i>00000</i>
    </div>
  </div>
  <div class="mpname">Firstname "Alias" Lastname</div>
  <div class="mpgroup">( administrator )</div>
  
</div></center>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Kuroya/miniprofile-odds-and-ends-qZKgLm */
.mpall {
  width: 250px;
}

.mpname {
  font-family: 'Josefin Sans';
  font-size: 15pt;
  background-color: rgba(255,255,255,.8);
  border-bottom: 2px solid #000;
  padding: 5px 0px;
  margin-top: -225px;
  position: relative;
  z-index: 3;
}

.mpgroup {
  font-family: 'droid sans';
  font-size: 12pt;
  background-color: rgba(255,255,255,.8);
  padding: 3px 0px;
  margin-bottom: 160px;
  position: relative;
  z-index: 3;
}

.mplarge {
  position: relative;
  z-index: 1;
}

.mpunder {
  margin-top: -354px;
  height: 350px;
}

.mpunder .mptop {
  height: 0px;
  overflow: hidden;
  transition: .6s;
  background-color: rgba(255,255,255,.8);
  position: relative;
  z-index: 5;
}

.mpall:hover .mpunder .mptop {
  height: 125px;
}

.mpunder .mptop img {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  border: 5px solid #fff;
  float: left;
  margin-left: 10px;
}

.mpunder .mptop i {
  font-family: oswald;
  font-size: 16pt;
  display: block;
  font-style: normal;
}

.mpunder .mptop b {
  font-family: oswald;
  font-size: 10pt;
  line-height: 20px;
  font-weight: normal;
  display: block;
  background-color: #000;
  color: #fff;
  width: 110px;
  float: right;
  margin: 2.5px 0px;
  margin-right: 10px;
}

Comments