Remix CodePen Challenge

index.html

<!-- 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">
  
  <header>
    
    <!-- here’s the avatar -->
    <a href="http://tutsplus.com">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/avatar.png">
    </a>

    <!-- the username -->
    <h1>Terence Loaf</h1>
    
    <!-- and role or location -->
    <h2>Dental Assistant</h2>
    
  </header>
  
  <!-- 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>
    
  </div>
  
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    
    <!-- twitter - el clásico  -->
    <li>
      <a href="http://twitter.com/tutsplus">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>
    
    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://envato.com">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
      </a>
    </li>
    
    <!-- codepen - your codepen profile-->
    <li>
      <a href="http://codepen.io/tutsplus">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
      </a>
    </li>
    
    <!-- add or remove social profiles as you see fit -->
    
  </ul>
  
</aside>
<!-- that’s all folks! -->

Remix CodePen Challenge.markdown

Remix CodePen Challenge

Check out the Remix competition page for details of prizes and updates of the winners!

A Pen by Tuts+ on CodePen.

License.

style.css

/* go on then, styles go here.. knock yourself out! */