<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->

<aside class="profile-card">
    <!-- here’s the avatar -->
    <a href="https://tutsplus.com">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/avatar.png">

    <!-- the username -->
    <h1>Terence Loaf</h1>
    <!-- and role or location -->
    <h2>Dental Assistant</h2>
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    <p>Terence is an avid reader of science fiction, especially anything to do with aliens and tweed jackets. Most weekends, he can be found cataloguing his collection of rodent skeletons.</p>
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    <!-- twitter - el clásico  -->
      <a href="https://twitter.com/tutsplus">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
    <!-- envato – use this one to link to your marketplace profile -->
      <a href="https://envato.com">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
    <!-- codepen - your codepen profile-->
      <a href="https://codepen.io/tutsplus">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
    <!-- add or remove social profiles as you see fit -->
<!-- that’s all folks! -->
/* go on then, styles go here.. knock yourself out! */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.