LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Raeesh Alam (UI Developer)

I am a passionate UI Developer with 5+ years of work experience. Having graduated in Computer Sceince Engineering. I am good at problem solving, analysis and project handling.

Ataur Rahman (UI Developer)

Lorem ipsum dolor sit amet, consec tetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code Pen (Services)

CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.

CSS
body{
  background: #676810;
}
.container{
  width: 100%;
  max-width: 500px;
  display: block;
  position: relative;
  margin: 20px auto;
  padding: 50px 20px 10px 20px;
  background: #fff;
  box-sizing: border-box;
}
.testi-box{
  width: 100%;
  max-width: 360px;
  padding-left: 82px;
  position: relative;
  font-family: "Arial";
  display: block;
  box-sizing: border-box;
  margin: 0px auto;
  margin-bottom: 40px;
}
.testi-img{
  width: 80px;
  height: 80px;
  display: block;
  background-position: 0 0!important;
  background-size: cover!important;
  border-radius: 50%;
  border: 2px solid orange;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  box-shadow: -5px 10px 15px #ccc; 
}
.testi-text{
  position: relative;
  width: auto;
  min-height: 150px;
  background: #f1f1f1;
  padding: 14px 14px 16px 20px;
  border: 2px solid orange;
  border-left: none;
  box-sizing: border-box;
  border-radius: 0px 8px 8px 8px;
  z-index: 1;
  box-shadow: 0px 10px 15px #ccc; 
}
.testi-text:before{
  content: '';
  position: absolute;
  top: 40px;
  height: calc(100% - 39px);
  width: 100%;
  z-index: 1;
  border-left: 2px solid orange;
  border-radius: 0px 0px 0px 8px;
  left: 0px;
  pointer-events: none;
}
.testi-text:after{
  content: '';
  position: absolute;
  border-top: 2px solid orange;
  width: 50px;
  height: 50px;
  background: #f1f1f1;
  top: -2px;
  left: -40px;
}
.testi-text h3{
  margin-top: 0px;
  margin-bottom: 12px;
  font-size: 17px;
  color: #444;
}
.testi-text h3 small{
  color: #666;
  font-weight: normal;
  font-size: 12px;
  display: inline-block;
  margin-left: 6px;
}
.testi-text p{
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 15px;
  line-height: 22px;
  color: #666;
  position: relative;
}
.testi-text p:after{
  content: '\201C';
  position: absolute;
  font-size: 80px;
  line-height: 60px;
  color: #ccc;
  left: -1px;
  top: 0px;
  z-index: -1;
}
.testi-text p::first-letter{
  padding-left: 35px;
}
Host Instantly Drag and Drop Website Builder

 

Tue, 12/26/2017 - 09:44

Related Codes

Pen ID
Pen ID
Pen ID