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

              
                #app
  .menu.top.top-shadow.large
    .row.no-wrap.middle-align
      .col
        nav.padding
          a
            img(src="https://raw.githack.com/beercss/beercss/v1.1.0/dist/netflix.png")
          button.none.white-text.small-device(data-ui="#dropdown-menu")
            i menu
            #dropdown-menu.dropdown.no-wrap(data-ui="#dropdown-menu")
              a.row.no-wrap(@click="scroll('#home')")
                .col.min
                  i home
                .col Home
              a.row.no-wrap(@click="scroll('#series')")
                .col.min
                  i subscriptions
                .col Series
              a.row.no-wrap(@click="scroll('#movies')")
                .col.min
                  i subscriptions
                .col Movies
              a.row.no-wrap(@click="scroll('#hot')")
                .col.min
                  i whatshot
                .col Hot
              a.row.no-wrap(@click="scroll('#my-list')")
                .col.min
                  i video_library
                .col My list
          button.none.white-text.capitalize.medium-device.large-device(
            @click="scroll('#home')"
          ) Home
          button.none.white-text.capitalize.medium-device.large-device(
            @click="scroll('#series')"
          ) Series
          button.none.white-text.capitalize.medium-device.large-device(
            @click="scroll('#movies')"
          ) Movies
          button.none.white-text.capitalize.medium-device.large-device(
            @click="scroll('#hot')"
          ) Hot
          button.none.white-text.capitalize.medium-device.large-device(
            @click="scroll('#my-list')"
          ) My list
      .col
        nav.right-align
          button.none.white-text(data-ui="#modal-search")
            i search
          button.none.white-text(data-ui="#dropdown-notifications")
            i notifications
            #dropdown-notifications.dropdown.left.no-wrap(
              data-ui="#dropdown-notifications"
            )
              a.row.no-wrap
                .col.min
                  img.round(src="https://raw.githack.com/beercss/beercss/v1.1.0/dist/alok-001.jpg")
                .col 
                  div Alok 01/2021
                  label 10k views
              a.row.no-wrap
                .col.min
                  img.round(src="https://raw.githack.com/beercss/beercss/v1.1.0/dist/vintage-001.jpg")
                .col 
                  div The best of 2021
                  label 10k views
              a.row.no-wrap
                .col.min
                  img.round(src="https://raw.githack.com/beercss/beercss/v1.1.0/dist/ocean-001.jpg")
                .col 
                  div Alok, Zebra, Iro - Ocean
                  label 10k views
          a(href="https://beercss.com", target="_blank")
            img.small.circle(src="https://raw.githack.com/beercss/beercss/v1.1.0/dist/favicon.png")

  #modal-search.modal.top.transparent.flat
    .row.no-wrap
      .col.medium-device.large-device
      .col
        .field.round.sufix.prefix.small.no-margin
          i.front search
          input.white.black-text(type="text")
          i.front mic
      .col.medium-device.large-device

  #home
    video.responsive(width="100%", height="600", autoplay, loop, muted)
      source(src="https://raw.githack.com/beercss/beercss/v1.1.0/dist/dance.mp4", type="video/mp4")
    .absolute.top.bottom.left.middle-align.small.left-shadow
      .large-padding
        h5.bold Started in 1983
        div Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        nav
          button.large.white.black-text 
            i play_arrow
            span &nbsp;Watch
          button.large.border.white-border.white-text
            i info_outline
            span &nbsp;More info
  
  .large-margin
    .page.right.active
      .large-space
      h5.bold Today's ranking
      .row
        .col.s12.m6.l3(v-for="(item, i) in todaysRanking")
          .card.no-padding(@mouseover="showDetails", @mouseout="hideDetails")
            a.wave
              img.responsive(:src="item.image")
            button.circle.small.absolute.right.top.margin.black.white-text
              h5.no-margin.center-align {{ i + 1 }}
            .page
              .padding.absolute.left.right.bottom
                nav
                  button.circle.border.small.white-border.white-text
                    i play_arrow
                  button.circle.border.small.white-border.white-text
                    i add
                  button.circle.border.small.white-border.white-text
                    i thumb_up
      #series.large-space.page.active
      h5.bold Series
      .row.no-wrap.scroll
        .col(v-for="item in series")
          .card.no-padding.small-width
            a.wave
              img.responsive(:src="item.image")

      #movies.large-space.page.active
      h5.bold Movies
      .row.no-wrap.scroll
        .col(v-for="item in movies")
          .card.no-padding.small-width
            a.wave
              img.responsive(:src="item.image")

      #hot.large-space.page.active
      h5.bold Hot
      .row.no-wrap.scroll
        .col(v-for="item in hot")
          .card.no-padding.small-width
            a.wave
              img.responsive(:src="item.image")

      #my-list.large-space.page.active
      h5.bold My list
      .row.no-wrap.scroll
        .col(v-for="item in myList")
          .card.no-padding.small-width
            a.wave
              img.responsive(:src="item.image")
              
            
!

CSS

              
                .is-netflix {
  --color-1: #ef5350;
  --color-1a: #ef535080;
  --color-1b: #ef535000;
  --color-2: #ffffff;
  --color-2a: #ffffff10;
  --color-2b: #ffffff20;
  --color-3: #ff9800;
  --color-4: #263238;
  --color-4a: rgba(55, 71, 79, 0.9);
  --color-5: #212121;
}
              
            
!

JS

              
                let app = new Vue({
  el: "#app",
  data() {
    return {
      todaysRanking: [
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/radio-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/ocean-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
      ],
      series: [
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/radio-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/ocean-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
      ],
      movies: [
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/radio-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/ocean-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/radio-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/ocean-001.jpg" },
      ],
      hot: [
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/radio-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/ocean-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
      ],
      myList: [
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/radio-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/ocean-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/alok-002.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-001.jpg" },
        { image: "https://raw.githack.com/beercss/beercss/v1.0.0/dist/vintage-002.jpg" },
      ],
    };
  },
  mounted() {
    this.updateTheme();
    ui();
  },
  methods: {
    updateTheme() {
      document.body.className = "is-netflix";
    },
    scroll(selector) {
      let element = document.querySelector(selector);
      element.scrollIntoView({ behavior: "smooth", block: "start" });
    },  
    showDetails(event) {
      event.currentTarget.querySelector(".page").className =
        "page right active";
    },
    hideDetails(event) {
      event.currentTarget.querySelector(".page").className = "page right";
    },
  },
});
              
            
!
999px

Console