Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="header">
  <img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/linkedin-512.png" class="logo" />
  <hr />
  <select>
    <option>Discover</option>
  </select>
  <div class="search">
    <i class="material-icons">search</i>
    <input type="text" placeholder="Search Linkedin" spellcheck="false"/>
  </div>
  <i class="material-icons">chat_bubble_outline</i>
  <i class="material-icons">flag</i>
  <img src="https://randomuser.me/api/portraits/women/52.jpg" class="profile-pic" />
</div>
<div class="tabs">
  <ul>
    <li class="selected"><a href="#">Posts</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Companies</a></li>
    <li><a href="#">Jobs</a></li>
  </ul>
</div>

<div class="row">
  <div class="col">
    <div class="profile card">
      <img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Caroline Belfort" class="profile-pic" />
      <h1>Caroline Belfort</h1>
      <p>Statton Oakmont</p>
      <div class="stats">
        <a href="#"><span>358</span><br /> Connections</a>
        <a href="#"><span>25</span><br /> Views</a>
      </div>
      <ul>
        <li><a href="#"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-grey/512/LINKEDIN-512.png" alt="LinkedIn" />Jordan Belfort</a></li>
        <li><a href="#"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-grey/512/TWITTER-512.png" alt="Twitter" />jordanbelfort</a></li>
        <li><a href="#"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-grey/512/SKYPE-512.png" alt="Skype" />jordanbelfort</a></li>
      </ul>
    </div>
  </div>
  <div class="col">
    <div class="card share">
      <a href="#" class="selected">Share an update</a>
      <a href="#">Upload a photo</a>
      <a href="#">Write an article</a>
      <div class="progress-bar">
        <div class="slider"></div>
      </div>
      <textarea placeholder="Write something..."></textarea>
    </div>
  </div>
  <div class="col">
    <div class="card friends">
      <h1>Keep in touch</h1>
      <hr />
      <ul>
        <li>
          <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Helen Johnson" />
          <h1>Helen Johnson</h1>
          <p>CEO and founder</p>
        </li>
        <li>
          <img src="https://randomuser.me/api/portraits/women/72.jpg" alt="Emily McLaren" />
          <h1>Emily McLaren</h1>
          <p>UI Designer</p>
        </li>
        <li>
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="James Johns" />
          <h1>James Johns</h1>
          <p>CTO</p>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="info" style="display: none;">
  For best result, please view in <a href="https://codepen.io/enahom99/full/mmdqBR/" target="_blank"> full screen</a>
</div>
              
            
!

CSS

              
                *
  font-family: "Roboto", sans-serif
  outline: none
  transition: all .3s
html, body
  height: 100%
body
  font-family: "Roboto", sans-serif
  background-color: #F7F8FA

.header
  display: flex
  align-items: center
  justify-content: center
  padding: 20px 100px
  background-color: white
  border-bottom: 2px solid #EFEFF1
  img.logo
    height: 32px
    width: 32px
    border-radius: 5px
    background-color: #007AB9
  hr
    height: 20px
    width: 1px
    background-color: #EFEFF1
    border: none
    margin: 0 10px 0 20px
  select
    background: none
    border: none
    font-weight: 600
  .search
    flex: 1
    display: flex
    align-items: center
    justify-content: center
    i, input[type="text"]
      background-color: #F7F8FA
      border: 1px solid #EBEBEB
      height: 20px
      padding: 10px
    i
      color: #BBB
      border-top-left-radius: 5px
      border-bottom-left-radius: 5px
      border-right: none
      padding-left: 20px
      margin: 0
    input[type="text"]
      border-top-right-radius: 5px
      border-bottom-right-radius: 5px
      border-left: none
      width: 400px
      padding-left: 0
      padding-top: 12px
      padding-bottom: 8px
      &::placeholder
        color: #B3B3B3
  i
    color: #ACACAC
    margin: 0 10px
    cursor: pointer
  img.profile-pic
    height: 32px
    width: 32px
    border-radius: 100%
    margin: 0 10px
    cursor: pointer
    
.tabs
  background-color: #F7F8FA
  border-bottom: 2px solid #E9EAEA
  padding: 20px
  ul
    display: flex
    align-items: stretch
    justify-content: center
    li
      padding: 10px
      margin: 0 20px
      border-bottom: 3px solid transparent
      cursor: pointer
      transition: all .05s
      &.selected, &:hover
        border-bottom: 3px solid #007FB1
        a
          color: black
      a
        text-decoration: none
        color: #A8A7A8
        font-weight: 500
      &:hover
        border-bottom: 3px solid #007FB1
        a
          color: black
        
.row
  display: flex
  margin: 50px 17%
  .col
    flex: 1
    min-width: calc(100%/3)
    &:nth-child(2)
      flex-grow: 4
      margin: 0 20px
    .card
      border: 2px solid #F1F1F1
      background-color: white
      //margin: 0 2.5%
      
.profile
  display: flex
  flex-direction: column
  width: 300px
  margin: auto
  img.profile-pic, h1, p
    align-self: center
  img.profile-pic
    height: 128px
    width: 128px
    border-radius: 100%
    margin: 20px 0
  h1
    font-weight: 500
    font-size: 1em
    margin: 10px 0
  p
    color: #B4B4B4
    font-size: .9em
  .stats
    border-top: 2px solid #F1F1F1
    border-bottom: 2px solid #F1F1F1
    margin: 20px 0
    display: flex
    align-items: stretch
    justify-content: center
    a
      text-align: center
      width: 50%
      padding: 20px 0
      text-decoration: none
      color: #000
      &:nth-child(1)
        border-right: 1px solid #F1F1F1
      &:nth-child(2)
        border-left: 1px solid #F1F1F1
      span
        font-weight: bold
  ul
    padding: 20px 40px
    li
      margin-bottom: 20px
      a
        text-decoration: none
        color: #A3A6A9
        img
          height: 16px
          width: 16px
          margin-right: 20px
              
.share
  border: 2px solid #EEEEEE
  background-color: white
  padding: 20px 10px
  overflow: hidden
  a
    text-decoration: none
    color: #BDBDBD
    margin: 40px 5px
    padding: 0 2px
    &:nth-child(1)
      margin-left: 25px
    &.selected
      font-weight: 500
      padding: 0
      color: black
  .progress-bar
    height: 2px
    background: #EEEEEE
    margin: 10px 10px 0 10px
    .slider
      background-color: #2962FF
      width: calc(100%/3)
      height: 100%
      transition: all .2s
      &.slider-1
        margin-left: 0
      &.slider-2
        margin-left: calc(100%/3)
      &.slider-3
        margin-left: calc(200%/3)
  textarea
    border: none
    border-bottom: 1px solid #E0E0E0
    margin: 20px 0 0 10px
    width: 300px
    height: 24px
    padding-left: 5px
    resize: none
    &::placeholder
      font-family: "Poppins", sans-serif
      font-size: 16px
      color: #E0E0E0
      
.friends
  &:after
    content: ''
    display: table
    clear: both
  h1
    font-weight: 500
    font-size: 1em
    margin: 10px 0
  hr
    
  img
    height: 64px
    width: 64px
    border-radius:  100%
    

    
.info
  display: none
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background-color: #D32F2F
  color: white
  font-size: 24px
  display: flex
  align-items: center
  justify-content: center
  a
    text-decoration: none
    color: #2196F3
    color: white
    margin-left: 5px
    &:after
      content: ''
      display: block
      position: relative
      width: 0%
      margin-left: 50%
      height: 3px
      background-color: white
    &:hover:after
      width: 100%
      margin-left: 0%
@media screen and (max-width: 920px)
  .row
    margin: 50px 0
@media screen and (max-width: 1000px)
  .row
    margin: 50px 21vw
@media screen and (min-width: 1200px)
  .row
    margin: 50px 0vw
  .info
    display: none
              
            
!

JS

              
                $(document).ready(function() {
  $(".tabs a").on("click", function() {
    $(this).parent().siblings().removeClass("selected");
    $(this).parent().addClass("selected");
  });
  
  $(".share a").on("click", function() {
    $(".share a").removeClass("selected");
    $(this).addClass("selected");
    if($(".share a:nth-child(1)").hasClass("selected")) {
      $(".progress-bar .slider").removeClass("slider-2");
      $(".progress-bar .slider").removeClass("slider-3");
      $(".progress-bar .slider").addClass("slider-1");
      // $(".share .slide").removeClass("slide-2");
      // $(" .share .slide").removeClass("slide-3");
      // $(".share .slide").addClass("slide-1");
    }
    else if($(".share a:nth-child(2)").hasClass("selected")) {
      $(".progress-bar .slider").removeClass("slider-1");
      $(".progress-bar .slider").removeClass("slider-3");
      $(".progress-bar .slider").addClass("slider-2");
      // $(".share .slide").removeClass("slide-1");
      // $(".share .slide").removeClass("slide-3");
      // $(".share .slide").addClass("slide-2");
    }
    else if($(".share a:nth-child(3)").hasClass("selected")) {
      $(".progress-bar .slider").removeClass("slider-1");
      $(".progress-bar .slider").removeClass("slider-2");
      $(".progress-bar .slider").addClass("slider-3");
      // $(".share .slide").removeClass("slide-1");
      // $(".share .slide").removeClass("slide-2");
      // $(".share .slide").addClass("slide-3");
    }
  });
});
              
            
!
999px

Console