Profile Info With Ribbon

Profile Info With Ribbon

DEMO 4 - Profile Info With Ribbon

<style>
@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
.boxProfile{
  text-align: justify;
  padding: 1px 15px;
  background: #FFCCFF;
  color:#111;
  border:1px solid #ccc;
  margin:40px auto;
  width:650px;
  border-left:solid 5px #FF0090
}

.textInfo{margin-top:30px;font:normal 18px/normal 'Aladin',cursive}
.bottom{text-align:center;font:bold 21px 'Aladin',cursive;letter-spacing:1.5px;height:65px;margin:-25px auto}
.bottom p::before,.bottom p::after {
  display: inline-block;
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 1px 20px;
  background: #FF0090;
  box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
  border-bottom: 1px solid #fff
}

.ribbon1 p {
  background:#FF0090;
  box-shadow: 0 2px 7px rgba(0,0,0,0.5);
  color:#fff;
  font:bold italic 18px/35px Verdana,sans-serif;
  text-shadow:1px 2px 1px #111;
  padding: 4px 30px;
  right:326px;
  top:137px;
  position: absolute;
  border-radius:3px 0 0 3px
}

.ribbon1 p:after {
  border-width: 7px;
  border-style: solid;
  border-color: #134 transparent transparent #134;
  content: "";
  position: absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px
}
</style>

<div class="boxProfile">
    <div class="ribbon1">
        <p>Information</p>
    </div>
           <div class="textInfo">
             ...
             Text In Here
             ...
           </div>
<hr/>
     <div class="bottom">
        <p>DEVY INDRIYANI</p>
     </div>
</div>