css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section class="timeline">
  <div class="container">
    <div class="top-side">
      <h4 class="title">WHAT I DID</h4>
      <h2>TIMELINE</h2>
    </div>
    <div class="timeline-inner">
      <ul>
        <li class="first">
          <div class="center">
            <h3 class="dark-bg">EXPERIENCE</h3>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2016 - Present
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Front-end Developer</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2015 - 2016
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Web Desinger</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2013 - 2015
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Web Developer</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Graphic Designer</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li class="first">
          <div class="center">
            <h3 class="dark-bg">EDUCATION</h3>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Computer Teacher</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Computer Teacher</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Computer Teacher</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Computer Teacher</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li class="first">
          <div class="center">
            <h3 class="dark-bg">EDUCATION</h3>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Computer Teacher</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
        <li>
          <div class="left">
            <div class="time">
              2010 - 2013
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <h3>Computer Teacher</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptatibus, maiores suscipit sequi veritatis saepe aspernatur.
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>
            
          
!
            
              //Furkan Konyali
//furkan.konyali@gmail.com
ul li
  list-style: none
  
.dark-bg
  background: #333
  color: #FFF
  display: inline-block
  padding: 2px 10px 4px
  font-weight: 400
  font-size: 23px
  margin: 0
  
.timeline
  padding: 30px 0
  color: #333
  
  .top-side
    text-align: center
  
    .title
      font-weight: 500
      font-size: 15px
      display: inline-block
    
      &:after
        content: ''
        display: block
        width: 50%
        border-bottom: 1px solid #494949
        margin: 8px auto
    
    h2
      font-weight: 700
      
  .timeline-inner
    ul
      padding: 0
      width: 66%
      margin: auto
      
      li
        position: relative
        padding-bottom: 40px
        
        &:nth-child(even)
          .left
            float: right
            padding-left: 20px
            text-align: left
            width: 50%
            box-sizing: border-box
          
          .right
            float: left
            padding-right: 20px
            width: 50%
            box-sizing: border-box
            text-align: right
        
        &:nth-child(odd)
          .right
            float: left
            padding-left: 20px
            width: 50%
            box-sizing: border-box
            text-align: left
            
          .left
            float: left
            padding-right: 20px
            width: 50%
            box-sizing: border-box
            text-align: right
        
        .time
          font-size: 14px
        
        &:hover
          .line
            &:before
              background: #FFF
              border: 3px solid #333
              transition: background .3s ease-in-out,border .3s ease-in-out
        
        p
          font-size: 15px
          color: #808080
          margin: 0
          
        h3
          font-size: 20px
        
        &:after
          content: ''
          display: block
          clear: both
        
        &:last-child
          .line
            &:after
              display: none
          
        &.first
          padding-top: 40px
        
          &:hover
            .line
              &:before
                border: 0
                border-top: 3px solid #333
                //border-bottom: 3px solid #333
                transition: background .3s ease-in-out,border .3s ease-in-out
        
          .line
            &:before
              background: none
              height: auto
              //border-bottom: 3px solid #333
              border-top: 3px solid #333
              border-radius: 0
              margin-top: -4px
            
            &:after
              top: 65px
              height: 39px
        
        .center
          text-align: center
          
        &:first-child
          .line
            &:before
              border-top: 0
          
          &:hover
            .line
              &:before
                border-top: 0
          
        .line
          position: absolute
          left: 50%
          height: 100%
          top: 3px
          
          &:before
            content: ''
            display: block
            width: 15px
            height: 15px
            border-radius: 50%
            background: #333
            margin-left: -6px
            transition: background .3s ease-in-out,border .3s ease-in-out
          
          &:after
            content: ''
            display: block
            width: 3px
            background: #333
            position: absolute
            top: 19px
            bottom: 4px
          
@media (max-width: 992px)
  .timeline .timeline-inner ul li .line
    left: 6px
    
  .timeline .timeline-inner ul li.first .line.nt-border:before, .timeline .timeline-inner ul li.first .line:before
    border-top: 3px solid #333
    position: absolute
    border-bottom: 3px solid #333
    top: -40px
    bottom: 7px
    
  .timeline .timeline-inner ul li:nth-child(even) .left, .timeline .timeline-inner ul li:nth-child(even) .right,.timeline .timeline-inner ul li:nth-child(odd) .left,.timeline .timeline-inner ul li:nth-child(odd) .right
    width: 100%
    text-align: left
    padding: 0 0 0 30px
    
  .timeline .timeline-inner ul li .center
    text-align: left
    
  .timeline .timeline-inner ul
    width: 100%
    
  .timeline .timeline-inner ul li.first
    margin: 40px 0 30px
    padding-top: 5px
    
  .timeline .timeline-inner ul li.first .line:after
    height: 34px
    
  .timeline .timeline-inner ul li:first-child .line:before
    border-top: 0
    
  .timeline .timeline-inner ul li:hover.first .line:before
    border-bottom: 3px solid #333
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console