cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-12 text-center">
    <div class="image"></div>
<h3 class="text">Walter Wright</h3><br>
<h4 class="text bio">HTML + CSS</h4>
<p class="bio-text">Lorem ipsum dolor sit amet, vestibulum mattis id et, urna ultrices enim nec dui in, nulla vivamus porta, wisi vitae eu, risus sed aliquet ut adipiscing est adipiscing. Massa congue. Ipsum volutpat.</p>
    </div>
    <div class="col-md-8 col-sm-12">
      <div class="col post">
        <div class="header text-center">Post Title 1</div>
        <p>Lorem ipsum dolor sit amet, vestibulum mattis id et, urna ultrices enim nec dui in, nulla vivamus porta, wisi vitae eu, risus sed aliquet ut adipiscing est adipiscing. Massa congue. Ipsum volutpat. Auctor augue magna esse turpis, pellentesque felis tempus non vestibulum aut, pariatur aliquet facilisi taciti, ut enim nec sollicitudin pellentesque lorem libero. Pede elit id donec eu vitae, magnis lorem in enim donec commodo consequat, feugiat dictum amet. Congue sodales nulla, voluptas erat dolor, eget mi est ipsum id aperiam. Arcu nullam sed elit dui, sollicitudin ante elit. Vestibulum vitae, potenti eu dolor, non est lobortis libero praesent, congue varius lorem id wisi, sapien ducimus vitae libero cras pretium.</p>
        <p class="date text-right">12/21/2017</p>
      </div>
        <div class="col post">
        <div class="header text-center">Post Title 2</div>
        <p>Ut lectus, molestie velit massa dignissim vitae gravida, nulla amet tempor fringilla sit. Eleifend fermentum et, lectus consectetuer vestibulum in at aenean, consectetuer ut egestas aliquet. Lectus proin quam tincidunt vel, cras ipsum scelerisque dolor sed gravida, mauris blandit nam mattis lacinia, blandit et quam in. Erat nunc facilisi ut dapibus nunc, tellus nullam sapien mollit, porttitor mi curabitur accumsan volutpat. Justo justo accumsan, pede tempor elit mauris, turpis turpis diam velit ullamcorper nam. Proin mauris at interdum tristique voluptatibus duis, ornare vivamus in alias, adipiscing et etiam quisque lacus ipsum elit, vel amet erat vulputate at ac, a et et enim convallis eleifend.</p>
       <p class="date text-right">12/15/2017</p>
      </div>
        <div class="col post">
        <div class="header text-center">Post Title 3</div>
        <p>Justo nam eget eu natoque massa elementum, nam sed mauris, tortor risus volutpat vitae sed eros, purus penatibus, non ac vestibulum ullamcorper posuere ullamcorper ac. Elit cras, sapien eget etiam sed praesent tincidunt lectus, porttitor tempor, mauris porttitor commodo nam turpis aliquet, donec vulputate velit leo. Suscipit purus curabitur gravida, litora quam cursus sodales conubia risus mauris, magna elementum lorem condimentum. Wisi eu amet eros, pellentesque fermentum, turpis rem vivamus posuere eos lacinia, posuere amet metus diam in, aliquam fames. Justo nam, sit ultricies. Nec vel vehicula, ut sint condimentum elit hendrerit dui purus. Consectetuer ligula vulputate, id aenean pharetra cupiditate faucibus, pellentesque lobortis pellentesque auctor nulla ipsum, gravida anim. Diam sed varius mi dui. Vivamus massa montes vel nibh non eu, sit scelerisque in egestas ligula massa. Rutrum nisl vitae nullam quis, est consequat sociosqu id facilisis mi, dignissim nulla pellentesque velit fermentum, nunc risus eget risus.</p>
<p class="date text-right">12/05/2017</p>
      </div>
        <div class="col post">
        <div class="header text-center">Post Title 4</div>
        <p>Massa volutpat sed integer ullamcorper ridiculus, dapibus nulla nunc commodo pellentesque sapien vel, bibendum taciti nam viverra sed eu nam, ligula ullamcorper vitae, ipsum vitae felis dolor. Vivamus justo pellentesque, massa pharetra commodo faucibus. Nibh duis, lectus tempus magna eget nunc euismod nunc. Lacinia wisi pellentesque aenean, nibh ultrices, elit morbi dolor in enim, et libero risus in turpis, tellus lorem. Libero at rhoncus magna. In ipsum nibh, quis egestas consectetuer sapien nec suspendisse nisl, vestibulum at proin orci, condimentum consectetuer viverra diam diam diam, justo placerat vivamus. Sem augue, sed magna ac parturient massa vel, egestas cum perspiciatis dui interdum.</p>
        <p class="date text-right">12/01/2017</p>
      </div>
</div>
            
          
!
            
              .body {
  margin: auto;
}

body {
  background: url('https://images.unsplash.com/photo-1428976412003-bcce81775695?fit=crop&fm=jpg&h=700&q=80&w=1225') no-repeat center center;
  background-size: 1400px 700px;
  background-position: 30%;
  background-attachment: fixed;
}

.text {
  font-family: raleway;
  font-size: 20px;
  position: absolute center;
  display: inline-block;
  text-align: center !important;
  color: #fff;
  margin-top: 46px;
}

.bio {
  font-family: raleway;
  font-weight:100;
  font-size: 11px;
  text-align: center;
  color: #fff;
  margin-top:-150px;
}

.image {
  text-align: center;
  width: 200px;
  /* Container's dimensions */
  height: 200px;
  -webkit-border-radius: 75%;
  -moz-border-radius: 75%;
  box-shadow: 0 0 0 1px #eee;
  background: url("https://images.unsplash.com/photo-1429114753120-0733a750d6c1?fit=crop&fm=jpg&h=725&q=80&w=1175") center center no-repeat;
  background-size: cover;
  margin: 8%;
  margin-top: 20px;
  margin-bottom: -30px;
  align-content: center;
  margin:0 auto;
  margin-top:50px;
}

.image:hover {
    box-shadow: 0px 0px 38px .9px #ccc;
  -webkit-transform: scale(1.10);
  transform: scale(1.10);
  -webkit-transition: 1.6s ease-in-out;
  transition: 1.6s ease-in-out;
}
.image {
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transition: 1.6s ease-out;
  transition: 1.6s ease-out;
}

.post{
  with:400px;
  margin:20px -40px 20px 20px;
  border-radius:15px;
  border-width:0px;
  border-color:white;
  border-style:solid;
  background-color:rgba(250, 250, 250, 0.75);
  padding:30px;
  font-weight:100;
  font-size:12px;
}
.header{
  font-size:20px;
  font-weight:400;
  letter-spacing:1.2px;
  padding-bottom:5px;
  margin-top:-15px;
}
.date{
  font-size:11px;
  margin-bottom:-10px;
}
.bio-text{
  font-size:12px;
  color:white;
  font-weight:100;
  font-family:raleway;
}
            
          
!
999px
Loading ..................

Console