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="container" id="app">
  <header>
    <h1>Contents</h1>
  </header>
  
  <div class="content">
    <section>
      <img src="http://www.baltana.com/files/wallpapers-3/Guardians-Of-The-Galaxy-Vol.-2-Rocket-Raccoon-And-Groot-Wallpaper-11123.jpg" alt="" />
      <section class="main">
        <article>
          <h2><span class="red">Pre.</span>view</h2>
          <ul class="preview">
            <li v-for="item in Preview">
              <h3>{{ item.num }}</h3>
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </li>
          </ul>
        </article>
        <article>
          <h2><span class="yellow">On.</span>screen</h2>
          <ul class="onscreen">
            <li v-for="item in OnScreen">
              <h4 class="yellow">{{ item.num }}</h4>
              <ul v-if="item.movie.length > 0">
                <li v-for="m in item.movie">
                  {{ m.title }}
                  <ratings :stars="m.rating"></ratings>
                </li>
              </ul>
            </li>
          </ul>
        </article>
      </section>
    </section>

    <section class="side">
      <article>
        <h2><span class="blue">Features</h2>
          <ul class="features">
            <li v-for="item in Features">
              <h3>{{ item.num }}</h3>
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </li>
          </ul>
      </article>
      <article>
        <h2><span class="blue">Re.</span>view</h2>
        <ul class="review">
            <li v-for="item in Review">
              <h3>{{ item.num }}</h3>
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </li>
          </ul>
      </article>
    </section>
  </div>

</div>

<template id="ratings">
  <div class="ratings">
    <ul>
      <li v-for="star in stars">
        <i class="fa fa-star"></i>
      </li>
    </ul>
  </div>
</template>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Bungee|Pathway+Gothic+One');

* {
  box-sizing: border-box;
}
body {
  background-color: #040001;
  color: #FFFFFF;
}

header {
  margin: 20px 0;
}
header h1 {
  font-size: 10em;
  letter-spacing: .1em;
  font-family: 'Bungee', cursive;
  text-align: center;
}

section {
/*   width: 300px; */
}
section h2 {
  font-size: 1.7em;
  font-family: 'Bungee', cursive;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 2px solid #FFFFFF;
}

img {
  width: 700px;
  margin-left: -100px;
}

.container {
  padding: 50px;
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;;
}

.content {
  display: flex;
  overflow: hidden;
}

.ratings {
  margin: 4px 0 0 8px;
}
.ratings ul {
  display: flex;
}
.ratings ul li {
  border: none;
}
.ratings i {
  font-size: .5em;
  padding: 0 2px;
}

.main {
  margin-top: 30px;
  display: flex;
}
.main article {
  width: 320px;
  padding-right: 30px;
}

.features p, .review p {
  line-height: 1.5em;
}

.preview {
  padding: 20px 0;
}
.preview li {
  margin-bottom: 20px;
}
.preview h3 {
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  float: left;
  margin-right: 10px;
}
.preview h4 {
  text-transform: uppercase;
  margin: 2px 0 5px 0;
}

.onscreen {
  padding: 20px 0;
  font-family: 'Pathway Gothic One', sans-serif;
  text-transform: uppercase;
}
.onscreen h4 {
  margin-right: 10px;
}
.onscreen li {
  margin-bottom: 10px;
  display: flex;
}
.onscreen li ul li {
  margin-bottom: 0;
  padding-bottom: 5px;
}


.side article {
  width: 320px;
  padding-right: 30px;
}

.features {
  padding: 20px 0;
}
.features li {
  margin-bottom: 20px;
}
.features h3 {
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  float: left;
  margin-right: 10px;
}
.features h4 {
  text-transform: uppercase;
  margin: 2px 0 5px 0;
}

.review {
  padding: 20px 0;
}
.review li {
  margin-bottom: 20px;
}
.review h3 {
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  float: left;
  margin-right: 10px;
}
.review h4 {
  text-transform: uppercase;
  margin: 2px 0 5px 0;
}

.red {
  color: #FF3200;
}
.yellow {
  color: #FFC700;
}
.blue {
  color: #0185B5;
}
              
            
!

JS

              
                /*jshint esversion: 6 */

const preview = [
  {
    'num': 10,
    'title': 'Logan',
    'desc': "He's the best at what he does...and what he does is get super-old, grey and wrinkly." 
  },
  {
    'num': 14,
    'title': 'Beauty and the Beast',
    'desc': 'Guess which one Emma Watson is?'
  },
  {
    'num': 16,
    'title': 'Fences',
    'desc': "Denzel Washington won an award back when this was a play. Can he win another now that it's a movie"
  },
  {
    'num': 20,
    'title': 'Gillian Anderson',
    'desc': 'How is it that Scully looks wonderful with each passing year, while we fall to bits?'
  },
  {
    'num': 24,
    'title': 'Ghost in the Shell',
    'desc': "That's what happens when oysters die."
  }
];

const onscreen = [
  {
    'num': 28,
    'movie': [
      {
        'title': 'Manchester by the Sea',
        'rating': 5
      }
    ]
  },
  {
    'num': 30,
    'movie': [
      {
        'title': 'Collateral Beauty',
        'rating': 2
      },
      {
        'title': 'Moonlight',
        'rating': 4
      }
    ]
  },
  {
    'num': 31,
    'movie': [
      {
        'title': 'Lion',
        'rating': 4
      }
    ]
  },
  {
    'num': 32,
    'movie': [
      {
        'title': 'Rogue One',
        'rating': 4
      }
    ]
  },
  {
    'num': 34,
    'movie': [
      {
        'title': 'A Monster Calls',
        'rating': 4
      }
    ]
  },
  {
    'num': 35,
    'movie': [
      {
        'title': 'Monster Trucks',
        'rating': 2
      },
      {
        'title': "Rules Don't Apply",
        'rating': 2
      },
      {
        'title': 'Split',
        'rating': 4
      }
    ]
  },
  {
    'num': 36,
    'movie': [
      {
        'title': 'Assassins Creed',
        'rating': 3
      }
    ]
  },
  {
    'num': 37,
    'movie': [
      {
        'title': 'Live By Night',
        'rating': 2
      }
    ]
  },
  {
    'num': 38,
    'movie': [
      {
        'title': 'Jackie',
        'rating': 4
      }
    ]
  },
  {
    'num': 39,
    'movie': [
      {
        'title': 'Passengers',
        'rating': 4
      }
    ]
  }
];

const features = [
  {
    'num': 40,
    'title': 'T2 Trainspotting',
    'desc': "The Danny Boyle classic has spawned a sequel. Choose life. Choose a film magazine. Choose the 'Contents' page. Choose so-called witticisms instead of useful information. Choose choosing. Choose... oh, forget it." 
  },
  {
    'num': 48,
    'title': 'A Monster Calls',
    'desc': "Liam Neeson voices a walking, talking tree. It's the first time we've congratulated someone for their wooden acting."
  },
  {
    'num': 54,
    'title': "Assassin's Creed",
    'desc': "Going by the game, an assassin's creed centres on murder, strenous exercise and the importance of layering with a really fetching hood. So, basically, death and fashion - like The Neon Demon later in this issue..."
  },
  {
    'num': 60,
    'title': 'Micheal Fassbender',
    'desc': "County Kerry's best export, apart from Kerrygold butter. Which, judging by these pictures, Fassbender has never eaten in his life."
  },
  {
    'num': 64,
    'title': 'The Ultimate 2017 Preview',
    'desc': "As if 2017 wasn't already exciting enough with an orange-faced loon looking to upend civilization as we know it, there's also these excellent films to look forward to - check out our sneak peek at this year's greatest-to-come"
  },
  {
    'num': 80,
    'title': 'Casey Affleck',
    'desc': "The younger Batfleck is very good in Manchester By The Sea, but imagine how good he could've been in Sheets By The Water or Tablecloths By The Stream"
  }
];

const review = [
  {
    'num': 88,
    'title': 'The Neon Demon',
    'desc': "The best bits of the cannibal models"
  },
  {
    'num': 94,
    'title': "How to Make a Horror Movie",
    'desc': "The writer and director of Don't Breathe, Rodo Sayagues and Fede Alvarez, on how to create the perfect screamfest"
  },
  {
    'num': 106,
    'title': "Thrill of the Chase",
    'desc': "Behind the making of William Friedkin's classic car chase in To Live and Die in L.A."
  },
  {
    'num': 114,
    'title': "Classic Scene",
    'desc': "Peter Strickland gets depressive."
  }
];

const Ratings = Vue.component('ratings', {
  
  // TEMPLATE
  template: '#ratings',
  
  // PROPS
  props: ['stars']
  
});

new Vue({
  
  // ELEMENT
  el: '#app',
  
  // DATA
  data: {
    Preview: preview,
    OnScreen: onscreen,
    Features: features,
    Review: review
  }
  
});
              
            
!
999px

Console