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. 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

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

              
                - var glob = 
- [ 
- {
- l:"#home",
- n: "Home"
- },
- {
- l:"#about",
- n: "Team"
- },
- {
- l:"#services",
- n: "Services"
- },
- {
- l:"#testimonials",
- n: "Testimonials"
- },
- {
- l:"#news",
- n: "News"
- }
- ]

- var fig_url = 'https://source.unsplash.com/user/erondu/'
- var slider_one = [
- {
- s: "b_on",
- name: "Team lead",
- fig: "200x200?1"
- },
- {
- s: "b_tw",
- name: "Web Designer",
- fig: "200x200?2"
- },
- {
- s: "b_th",
- name: "Frontend developer",
- fig: "200x200?3"
- },
- {
- s: "b_fo",
- name: "Backend developer",
- fig: "200x200?4"
- },
- {
- s: "b_fi",
- name: "SEO marketer",
- fig: "200x200?5"
- }
- ]

- var bars = [
- {
- n: "Comunity",
- v: "77"
- },
- {
- n: "Team and Developers",
- v: "65"
- },
- {
- n: "Marketing",
- v: "88"
- },
- {
- n: "Design",
- v: "80"
- }
- ]

- var news = [
- {
- h: "News Company",
- d: "October 09, 2019",
- t: "Update"
- },
- {
- h: "News Company",
- d: "August 28, 2018",
- t: "Design"
- },
- {
- h: "News Company",
- d: "April 30, 2018",
- t: "Development"
- },
- {
- h: "News Company",
- d: "October 30, 2018",
- t: "Tricks"
- },
- {
- h: "News Company",
- d: "January 26, 2012",
- t: "Frontend"
- },
- {
- h: "News Company",
- d: "September 5, 2011",
- t: "Marketing"
- }
- ]

- var w_1 = [
- {
- icon: "fa fa-behance",
- link: "https://www.behance.net/gallery/86619879/Landing-Page-IOGO-MEDIA-(Concept-Update)",
- text: "Behance"
- },
- {
- icon: "fa fa-dribbble",
- link: "https://dribbble.com/andrejsharapov",
- text: "Dribbble"
- },
- {
- icon: "fa fa-codepen",
- link: "https://codepen.io/andrejsharapov",
- text: "CodePen"
- }, 
- {
- icon: "fa fa-twitter",
- link: "https://twitter.com/andrejsharapov",
- text: "Twitter"
- },
- {
- icon: "fa fa-github",
- link: "https://github.com/madeas",
- text: "GitHub"
- }
- ]

- var w_2 = [
- {
- h: "Heading",
- list: ["Forums", "License", "Guest Posting", "Advertise"]
- }
- ]

- var w_3 = [
- {
- h: "Heading",
- list: ["Subscribe", "Customers", "FAQ", "Support"]
- }
- ]

- var w_4 = [
- {
- icon: "fa fa-map-o",
- text: "County, Street name - number"
- },
- {
- icon: "fa fa-phone",
- text: "+7 999 999 00 00"
- },
- {
- icon: "fa fa-envelope-o",
- text: "company@name.com"
- },
- {
- icon: "fa fa-clock-o",
- text: "Mon.-Fri.: 10-20 Sun.: 12-16"
- }
- ]

.smooth
  header#top
    h3 iOGO
    nav
      ul
        each val in glob
          li
            a(href= val.l title= val.n) #{val.n}
            
  main
    section#home(style="background-image: url(https://source.unsplash.com/collection/190727/1600x1200?1)")
      .content
        div
          h1 iOGO MEDiA
          svg.title
            text(x="0" y="40") iOGO MEDiA
            path(d="M 0 66 50 61")
          p.lead
            | If you click on navigation links, smooth scrolling does not work, perhaps the functions are not supported by your browser. You can check the support on the
            | 
            a(class="leadlink" href="https://caniuse.com/#search=scroll-behavior" target="_blank") Can I use
            |  site.
          p.lead
            | And also added a parallax effect and logo animation, a sample of which you
            | 
            a(href="https://codepen.io/andrejsharapov/pen/PVJrLO" target="blank" class="leadlink") can find here.

        .blur
          form
            input(type="text", name="" placeholder="Email:")
            input(type="text", name="" placeholder="Password:")
            a(class="button" title="Behance" target="_blank" rel="noopener noreferrer" href="https://www.behance.net/gallery/86619879/Landing-Page-IOGO-MEDIA-(Concept-Update)") Click here

    section#about
      h2 TEAM OF EXPERTS
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nam fugit quis qui possimus eos asperiores laudantium, dicta nisi velit non culpa animi inventore necessitatibus a repudiandae! Cupiditate, nisi voluptates?

      .slider.autoplay
        each f in slider_one
          .block(class= f.s)
            figure
              img(src=fig_url + f.fig, alt="")
              figcaption Name Surname
            p= f.name
      
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, impedit, aut blanditiis officiis quisquam atque consequuntur laborum odit necessitatibus doloribus ab nam accusantium molestiae id veniam aspernatur nihil fugit eius.

    section#services
      .grid.g_two
        div
          h2 Services
          p Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nam fugit quis qui possimus eos asperiores laudantium, dicta nisi velit non culpa animi inventore necessitatibus a repudiandae! Cupiditate, nisi voluptates?
          p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem, odio. Consequatur ipsam eligendi debitis accusamus iure veniam aut eius maiores, obcaecati, recusandae fuga nostrum! Sint iure doloremque ipsum adipisci consequuntur.
          p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, impedit, aut blanditiis officiis quisquam atque consequuntur laborum odit necessitatibus doloribus ab nam accusantium molestiae id veniam aspernatur nihil fugit eius.
        .flex.column
          each v in bars
            .flex.column
              .flex.bar_val
                  h3= v.n
                  span= v.v + '%'
              progress(value=v.v max="100")

    section#testimonials
      h2 Testimonials
      p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem, odio. Consequatur ipsam eligendi debitis accusamus iure veniam aut eius maiores, obcaecati, recusandae fuga nostrum! Sint iure doloremque ipsum adipisci consequuntur.

      .slider.tes
        each f in slider_one
          div.blockquote
            img(src=fig_url + f.fig, alt="")
            .author Name Surname
            .pos Position
            blockquote
              p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita dolorum ea dolore adipisci.

    section#news
      h2 Market News
      .grid.g_three.news
        each b in news
          .post
            h3= b.h
            .date= b.d
            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cum mollitia autem ut, optio nisi nemo officia voluptatum corrupti doloremque accusamus ab impedit odit quod neque corporis deserunt magni incidunt!
            .tags
              a(href="#")= b.t

    section#letter
      h2 Subscribe to always be up to date in our latest news!
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium reprehenderit nihil eligendi ad nostrum! Necessitatibus impedit perferendis explicabo adipisci debitis fugiat quisquam aliquam non maiores aliquid, error, hic rem dolorem!Ducimus accusamus et id excepturi ad nemo, hic dolor, mollitia expedita tempora nulla quasi rerum voluptates ipsum sint distinctio,  perferendis quis. Placeat nam et cumque aut odio id possimus! Tempore.
      form.flex(action="")
        input(type="text", name="" placeholder="Enter your email...")
        input.button(type="submit", value="Subscribe")

  footer#bottom
    .widgets
      div.f_logo
        h3.foo_logo iOGO
        
      .widget
        h5 Follow me
        ul
          each w in w_1
            li
              i(class= w.icon aria-hidden="true") 
              a(href= w.link title= w.text target="_blank" rel="noopener noreferrer")  #{w.text}
        
      .widget
        each w in w_2
          h5= w.h
          ul
            li= w.list[0]
            li= w.list[1]
            li= w.list[2]
            li= w.list[3]
        
      .widget
        each w in w_3
          h5= w.h
          ul
            li= w.list[0]
            li= w.list[1]
            li= w.list[2]
            li= w.list[3]
        
      .widget
        h5 Contacts
        ul
          each w in w_4
            li
              i(class= w.icon aria-hidden="true") 
              |  #{w.text}      
      
    .copy
      p &copy; 2019 with 
        span.heart &#9829; 
        a(href="https://twitter.com/andrejsharapov" target="_blank" rel="noopener noreferrer")  Andrej Sharapov
      p
        a(href="#home") Back &#x2191; to top
              
            
!

CSS

              
                colone = #191a1d
coltwo = #1d1e22
heart = #df2359
light = #ffffff
bdr = #312d3c

.str-style
  stroke-dasharray 700
  stroke-dashoffset 1000
  animation dash 4s linear forwards
  
.cur
  cursor move
  cursor grab
  cursor -moz-grab
  cursor -webkit-grab
  // @extend .cur
  
.cur-act
  cursor -webkit-grabbing
  cursor -moz-grabbing
  cursor -o-grabbing
  cursor grabbing
  // @extend .cur-act

.before-style
    position absolute
    top calc(100% + 4px)
    left 0
    content ''
    width 20px
    height 2px
    background-color light
    transform-origin 0 100%
    transform rotate(-5deg)
    transition all 0.2s ease-out
    
*,
::before,
::after
  box-sizing border-box
  margin 0

::-webkit-scrollbar
  width 8px
  height 6px

::-webkit-scrollbar-track
  background-color colone

::-webkit-scrollbar-thumb
  border-radius 1em
  background-color bdr
  
  &:hover
    background-color heart

body
  height 100vh
  overflow hidden
  margin 0
  line-height 1.5
  font-family 'Inconsolata', monospace
  color light
  background-color colone

.smooth
  scroll-behavior smooth
  overflow-y scroll
  margin 0 auto
  width calc(100% - 1em)
  padding 0 1em
  height 100%
  
a
  text-decoration none
  color light
  
  &:hover,
  &.active
    color heart
    
ul
  list-style-type none
  margin 0
  padding 0
  
header,
footer
  position relative
  padding 2em 3em
  display flex
  align-items center
  font-size 1rem
  
header
  position sticky
  top 0
  z-index 4
  padding 1em
  min-height 10vh
  justify-content space-between
  background-color colone
  
  @media (max-width: 768px)
    flex-direction column

  h3
    position relative
    margin 0
    font-family 'Montserrat', sans-serif
    font-size 2rem
    color heart

    &::before
      @extend .before-style
      background-color heart
      width 30px

  ul
    margin 1em 0
    display flex
    width 100%
    justify-content flex-end
    align-items center

    li
      position relative
      margin 0 1em

      &::before
        @extend .before-style

      a
        text-transform uppercase
        font-family 'Montserrat', sans-serif
        font-weight 500

      &:hover
        &::before
          width 100%
          background-color heart

@media (max-width: 576px) {
  nav {
    display none
    }
}

input
  margin-bottom 1em
  min-height 3em
  width 45%
  font-size 1rem
  color light
  border 0
  border-bottom 2px solid light
  background none

  &::placeholder
    position relative
    top 0
    color inherit
    transition all 0.2s linear

  &:focus
    outline none

    &::placeholder
      top -1.25em
      font-size 0.825rem

.button
  position relative
  margin-top 1em
  padding 1em 3em
  text-transform uppercase
  display block
  font-size 1rem
  cursor pointer
  font-weight 600
  color light
  border 3px solid heart
  border-radius 0.35em
  background heart
  box-shadow 0 6px 40px rgba(colone, 0.25)

  &:hover
    color light

section
  position relative
  padding 1.25em 1em
  display flex
  width 100%
  min-height 100vh
  flex-direction column
  justify-content center
  align-items center
  border-radius 1em
  background-color colone
  
  &:nth-child(odd)
    background-color coltwo
    
  h2
    position relative
    text-transform uppercase
    margin-bottom 1em
    font-family 'Montserrat', sans-serif
    
    &::before
      @extend .before-style
      width 50px
      
  &#home
    background-position center center
    background-repeat no-repeat
    background-size cover
  
    &::before
      position absolute
      content ''
      top 0
      left 0
      z-index 0
      width 100%
      height 100%
      background-color colone
      opacity .5
      
    h1
      display none
    
    .content
      z-index 1
      
      @media (min-width: 991px)
        display grid
        grid-template-columns 1fr minmax(40%, auto)
        grid-gap 1em
        
      .title
        display block
        width 100%
        height 100px
        font-family 'Montserrat', sans-serif
        
        transform scale(0.9)
        font-size 2.5rem
      
        @media (min-width: 480px)
          font-size 3rem
          font-weight 600

        text
          fill none
          stroke light
          stroke-width 2
          stroke-linecap round

          stroke-dasharray 700
          stroke-dashoffset 1000
          animation dash 3s linear forwards

        path
          stroke light
          stroke-width 4
          stroke-dasharray 700
          stroke-dashoffset 1000
          animation dash 4s ease-in forwards
          
      .lead
        font-size 1.25rem
        
        a
          color heart
          
      .blur
        position relative
        margin 1em auto
        padding 1em
        overflow hidden
        width 100%
        border-radius 0.35em
        background-color rgba(white, .25)
        backdrop-filter blur(10px)

        form
          position relative
          margin auto
          padding 1em
          display flex
          width 100%
          height 100%
          flex-direction column
          align-items center
          border 2px solid light
          border-radius 0.35em
          
  &#services
    min-height 50vh
          
  &#about
    .block
      position relative
      margin 0.5em auto
      padding 50px
      overflow hidden
      display flex !important
      width 100%
      height 100%
      flex-direction column
      justify-content center
      align-items center
      text-align center
      border 4px solid bdr
      border-radius 0.75em
      transition all 0.2s linear
      will-change transform

      figure
        position relative
        z-index 1
        min-height 75px

        img
          margin auto
          border-radius .5em

        figcaption
          position relative
          padding-top 1em
          font-weight 700
          color heart

      p
        margin 0


      &.active,
      &:hover
        background-color bdr
        transform translateY(-10px)

  &#letter
    min-height 50vh

    form
      margin-top 1em
      width 80%
      flex-direction column
      justify-content space-around
      
      @media (min-width: 768px)
        flex-direction row
        align-items center
        justify-content space-between

      input
        margin .5em auto
        width 100%
        
        @media (min-width: 768px)
          width auto

      input[type='text']
        padding 1em 0.5em
        width 100%
        border 2px solid light
        border-radius .35em
        
        @media (min-width: 768px)
          width 45%
    
  &#testimonials
    .slick-slide
      text-align center
      
      &:focus
        outline none
      
      div
        div
          display flex
          flex-direction column
          justify-content center
      
          img
            margin 0 auto 1em
            border-radius .5em

      .blockquote
        position relative
        overflow hidden
        margin-top 1.5em
        padding 1em 2em
        border-radius 1em
        border 4px solid bdr
        transition all 0.2s linear
        
        &::before
          position absolute
          top -20px
          right 10px
          z-index 0
          content '\f10d'
          font-family 'FontAwesome'
          font-size 5rem
          color coltwo
          opacity 0.8

        .author
          position relative
          z-index 1
          display block
          font-size 1.25rem
          color heart
          font-weight 600

        .pos
          position relative
          z-index 1
          padding-bottom 0.25em
          display block
          font-size 1.25rem
          border-bottom 1px solid coltwo

        &:hover
          background-color bdr
    
  &#news
    .post
      padding: 0.25em 0.5em
      display: flex
      width: 100%
      flex-direction: column
      justify-content: space-between
      border: 4px solid transparent
      border-radius: 0.35em
      transition: transform 0.2s linear

      h3
        margin: 0

        &:hover
          color: heart

      .date
        color: darken(light, 60%)

      .tags
        position: relative
        padding: 0.5em 0
        padding-left: 30px
        border-top: 1px solid bdr
        color: darken(light, 60%)

        a
          color: darken(light, 60%)

        &::before
          position: absolute
          left: 0
          content: '\f02c'
          font-family: 'FontAwesome'

      p
        margin: 0

      &:hover
        transform: scale(0.98)
        background-color: colone

        &:hover
          h3
            color: heart

.grid
  display grid
  grid-gap 2em
  
  &.g_three
    @media (min-width: 991px)
      grid-template-columns repeat(3, 1fr)
    
  &.g_four
    @media (min-width: 991px)
      grid-template-columns repeat(4, 1fr)
  
  &.g_two
    @media (min-width: 991px)
      grid-template-columns 1fr minmax(300px, auto)

.flex
  display flex
  width 100%
  align-items center

  &.column
    flex-flow column wrap
    justify-content space-between

.bar_val
   justify-content flex-end
   
   h3
     margin-right 1em
   
   @media (min-width: 768px)
     justify-content space-between

progress
  position relative
  margin 1em 0
  
  &[value]
    -webkit-appearance none
    appearance none
    width 100%
    max-width 360px
    height 1px
    
  &::-webkit-progress-bar
    background-color darken(light, 60%)
    border-radius 1em
    
  &::-webkit-progress-value
    position absolute
    top -2px
    left 0
    background-color heart
    border-radius 1em
    height 5px

.slider
    width 90%

    .slick-track
      display flex
      align-items center
      justify-content center

    .slick-arrow
      width 40px
      height 100%
      text-align center

      &::before
        width inherit
        height inherit
        font-size 36px
        color bdr
        transition color 200ms linear
        
      &:hover        
        &::before
          color heart

    .slick-slide
      display flex
      padding 15px
      @extend .cur
      
      &:focus
        outline none

      div
        text-align center
        display flex
        width 100%
        align-items stretch
        
        .block
          position relative
          white-space nowrap

          &::before
            position absolute
            top -25%
            right -25%
            z-index 0
            width 100%
            height 100%
            content '\f219'
            font-family 'FontAwesome'
            font-size 12rem
            color coltwo
            opacity 0.05

          &.b_tw
            &::before
              content '\f121'

          &.b_th
            &::before
              content '\f05b'

          &.b_fo
            &::before
              content '\f25b'

          &.b_fi
           &:before
             content '\f201'

          &:focus
            outline none
          &:active
            @extend .cur-act

.slick-dots
    position relative
    margin-top 0.5em

    li
      position relative
      margin 0 .5em 1.5em
      width 20px
      height 20px
      cursor pointer
      border 2px solid bdr
      border-radius 50%
      background-color coltwo

      &:hover,
      &.slick-active
        background-color bdr
        transform scale(1.2)

      button
        &::before
          display none

footer
  padding-bottom 1em
  width 100%
  min-height 35vh
  flex-direction column
  justify-content space-around
  border-top 2px solid bdr
  background-color colone

  .widgets    
    @media (min-width: 480px)
      display grid
      width 100%
      grid-gap 1em    
      grid-template-areas 'l l' 'w1 w2' 'w3 w4'
    
    @media (min-width: 768px)
      grid-template-areas 'l w1 w2' 'w3 w4 w4'
      
    @media (min-width: 1024px)
      grid-template-areas 'l w1 w2 w3 w4'      
    
    .f_logo
      grid-area l
      
      margin-bottom 1em
      
      display flex
      justify-content center
      align-items center
      
    .widget
      margin-bottom 1.5em
      
      &:nth-of-type(2)
        grid-area w1
      &:nth-of-type(3)
        grid-area w2
      &:nth-of-type(4)
        grid-area w3
      &:last-child
        grid-area w4

  .copy
    display flex
    width 100%
    justify-content space-between
    align-items center
    
    @media (max-width: 576px)
      flex-direction column
      text-align center
      
      a
        display block

  .foo_logo
    position relative
    font-family 'Montserrat', sans-serif
    color heart

    &::before
      @extend .before-style
      background-color heart

  h5
    margin-bottom 1em
    text-transform uppercase
    font-family 'Montserrat', sans-serif

    &.follow
      color heart

  li
    will-change transform
    transition transform 200ms ease-in

    i
      opacity 0.5

    &:hover,
    &.active
      transform translateX(5px)

  .copy
    margin-top 1em
    border-top 2px solid bdr

    p
      margin 0.75em 0 0


    .heart
      position relative
      display inline-block
      color heart
      animation hearts 0.6s cubic-bezier(0.18, 0.89, 0.29, 1.05) infinite

@keyframes dash
  to
    stroke-dashoffset 0
    fill white

@keyframes hearts
    50%
      transform scale(1.4)
              
            
!

JS

              
                function scrollh() {
  $(".smooth").on("scroll", function() {
    let scrollPos = $(this).scrollTop();
    $(".content").css({
      opacity: 1 - scrollPos / 400
    });
  });
}
scrollh();

$(".autoplay").on("init", function(slick) {
    $(".slick-dots").on("click", function() {
      $(".autoplay").slick("slickPause");
    });
  }).slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    autoplay: true,
    autoplaySpeed: 2000,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

$(".tes").on("init", function(slick) {
    $(".slick-dots").on("click", function() {
      $(".tes").slick("slickPause");
    });
  }).slick({
    slidesToShow: 2,
    slidesToScroll: 2,
    dots: true,
    autoplay: true,
    autoplaySpeed: 2000,
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

$('.widget:first > ul > li:first').addClass('active');
$('.widget:first > ul > li > a:first').addClass('active');
              
            
!
999px

Console