Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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="parallax">
  
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore">
        <div class="headtitle">
          <h1>music festivals</h1>
          <h2>Top 10 in Europe for 2016</h2>
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base"></div>
      <div class="parallax__layer parallax__layer--back"></div>
    </div>
  
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore">
        <img src="https://s22.postimg.cc/y3ll0amgx/driehoeken-01.png" />
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="paragraph">
          <p>When it comes to cool sounds in the summer sunshine, continental Europe is your playground.</p>
          <p>We pick the best (mostly) affordable parties from Iceland’s Secret Solstice to Croatia’s Love International.</p>
        </div>
      </div>
    </div>

  
<!-- NUMBER 1 -->
  
    <div id="group3" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">01.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group4" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="http://festival.hr/eng/wp-content/uploads/2016/03/11058054_1050221385001795_295251108238080773_o.jpg" />
            <img src="http://4c79id2ej5i11apui01ll2wc.wpengine.netdna-cdn.com/wp-content/uploads/2016/07/HNKC_160702_LOVEINTERNATIONAL_2016-5557.jpg" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Love International</h3>
            <h4>croatia</h4>
            <p>As the Croatian festival scene bidding farewell last summer to its founding father, the Garden Festival, which bowed out after 10 years of magic, it now falls to Love International to carry the torch. Run by the team behind Bristol’s Love Saves the Day (with the Garden’s Nick Colgan also involved), the festival takes place at the Garden Resort in Tisno, in a natural amphitheatre with a private bay for cooling dips. It also features the kind of line-up to generate heart-throbbing party moments, with some of the most discerning house and disco selectors around: Prosumer, Bicep, Horse Meat Disco … Just thinking about it is making us want to shoot confetti in the air and spill our drink hugging a stranger.</p>
            <p class="info">29 June-6 July, full week pass £120</p>
        </div>
      </div>
    </div>

<!-- NUMBER 2 -->
  
    <div id="group5" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">02.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group6" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="http://img.icelandreview.com/sites/default/files/styles/scale_720/public/secret_solstice_2014.jpg?itok=j2twILGv" />
            <img src="http://www.djvibe.com/content/wp-content/uploads/plexipr_ss2016FESTICKETHeaderImage_2.jpg" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Secret Solstice</h3>
            <h4>iceland</h4>
            <p>Maxing out on Iceland’s out-of-this world landscape, midnight-sun fest Secret Solstice has announced the world’s first live performance from inside a volcano as a side-event for this years’ festival weekend. OK, at £1,380 a ticket and with only 20 available, the volcano gig sounds like a ridiculously overpriced novelty. More affordable (though still not cheap at £80-£200) are a series of DJ shows in a glacier and a thermal pool . But the main festival itself is a lot of fun, with a line-up headlined by Radiohead (they’re back!) and freaky-as-you-like-it Die Antwoord. Now in its third year, the festival is a great opportunity to visit to Reykajavik – where it’s located - and the rest of the country.</p>
            <p class="info">16-19 June, weekend pass £144</p>
        </div>
      </div>
    </div>

<!-- NUMBER 3 -->
  
    <div id="group7" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">03.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group8" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="https://cdn.cdnfarecompare.com/resources/mcms/eventimages/696px-event-detail-EdgeoftheLake-1.jpg" />
            <img src="https://static1.squarespace.com/static/55b3e67ae4b06a14d457be75/t/561298c3e4b0671bb41e9331/1444059345473/?format=2500w" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Edge of the Lake</h3>
            <h4>switzerland</h4>
            <p>Celebrating its 10th anniversary, Edge of the Lake (Week-end au Bord l’Eau) remains an incredibly chilled-out proposition. Taking place on a beach on the Lac de Géronde, east of Sion and surrounded by hills and vineyards, it’s as much about hanging out and enjoying the setting as it is about the music. Though the line-up doesn’t compete with the bigger festivals, you’ll still find the likes of Lindstrom, Deetron and Ninja Tune DJs on the bill. At just £60 for the weekend, including camping, it’s one of the most affordable festivals around.</p>
            <p class="info">1-3 July, weekend pass €40, with camping €72</p>
        </div>
      </div>
    </div>
  
<!-- NUMBER 4 -->
  
    <div id="group9" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">04.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group10" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="https://i.guim.co.uk/img/media/85a87e96daf283e1b48def146fe79a8ffe42ff03/0_0_3316_1989/master/3316.jpg?w=620&q=20&auto=format&usm=12&fit=max&dpr=2&s=30958a97d30b02c1df3006e101fb34a9" />
            <img src="http://vickyflipfloptravels.com/wp-content/uploads/2015/08/P8050632-720x555.jpg" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>A Summer’s Tale</h3>
            <h4>germany</h4>
            <p>We had our eye on this low-key festival when it launched last year: it’s a tranquil village fête-style affair in the leafy north German countryside, not far from Hamburg. This year’s line-up shows that the organisers have ramped things up a bit: Sigur Rós, Garbage, Fat Freddy’s Drop and José Gonzalez are among the acts on a bill that leans towards dreamy, psychedelic, folksy acts. Billy Bragg, of course, will be in attendance. The festival – essentially a big family-friendly chill-out session – has a big performing arts contingent, too: dance, theatre and spoken word, as well as workshops from acro yoga and Japanese tea tasting to finger knitting and didgeridoo. Alles klar, dude, alles klar.</p>
            <p class="info">10-15 August, four-day pass with camping €169</p>
        </div>
      </div>
    </div>
  
<!-- NUMBER 5 -->
  
    <div id="group11" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">05.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group12" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="https://i.guim.co.uk/img/media/fed644dffe0bd5c26020fc624ba55167f3166e1e/0_448_2999_1800/master/2999.jpg?w=620&q=20&auto=format&usm=12&fit=max&dpr=2&s=ab190f7a8a96a0f4f8b4b5c5631420af" />
            <img src="https://i.guim.co.uk/img/media/2d166e58c3e979c0aab80ca444bfb4f60a4825d4/0_50_3000_1800/master/3000.jpg?w=1300&q=20&auto=format&usm=12&fit=max&dpr=2&s=6e16536cfec4d46f35404547dd92aacf" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Obonjan</h3>
            <h4>croatia</h4>
            <p>While the attraction of Croatian music festivals has always been a fusion of some kind of party + beach-chill holiday, it was probably only a matter of time before someone decided to up the “chill” element. Enter Obonjan. Co-founded by Dan Blackledge, who was behind Hideout and Unkown, this new event is part festival, part resort, with a two-month long programme of music, arts and workshops on a long-abandoned island in the Adriatic. Music headliners include Roy Ayers, DJ Shadow, Dilated Peoples and Matthew Herbert. It’s open from July-September and visitors can just explore the events around the island at their leisure. It’s like a pick-your-own adventure, but the adventures are always relaxing.</p>
            <p class="info">18 July-10 September, from €73pp pn, including accommodation in tents or lodges and entertainment</p>
        </div>
      </div>
    </div>
  
  <!-- NUMBER 6 -->
  
    <div id="group13" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">06.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group14" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="http://ostrava2017.eu/wp-content/uploads/2015/12/Hudebn°-festival-Colours-of-Ostrava.-Colours-of-Ostrava-music-festival..jpg" />
            <img src="http://theroadhouseprague.com/wp-content/uploads/2017/05/colours.jpg" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Colours of Ostrava</h3>
            <h4>czech republic</h4>
            <p>There’s nowhere like eastern Europe for partying in dramatic industrial ruins. There’s Tauron Nowa Muzyka in an old Polish coal mine, while in Germany – not far from Leipzig in the former GDR – Melt! is held in a huge open-air museum dominated by gigantic industrial machines. Let’s be honest, it goes pretty damn well with techno. Colours of Ostrava is run on similar (production) lines, transforming the Dolní Vítkovice ironworks into a spectacular festival venue. The line-up has broad appeal but focuses on artists with discerning sounds. Congolese electronic rhythm-makers Mbongwana Star are on the bill, as is LA punk band’s Bronx’s Mexicana’s side project, Mariachi el Bronx. Between performances, play among the heavy machinery (showing due care, naturally), and there’s also a climbing wall, bike rental, bars and cafes. The festival also deserves credit for the support it offers to disabled visitors to make sure everyone can enjoy the festival to the max.</p>
            <p class="info">14-17 July, four-day ticket €84, weekend camping €10</p>
        </div>
      </div>
    </div>
   
<!-- NUMBER 7 -->
  
    <div id="group15" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">07.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group16" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="https://i.ytimg.com/vi/mTUi-AvPYP0/maxresdefault.jpg" />
            <img src="https://www.resources.festicket.com/media/photos/WeatherFestival2016_V4.png" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Weather Festival</h3>
            <h4>france</h4>
            <p>When it comes to Europe’s city-based electronic festivals, Barcelona’s Sonar usually gets most of the attention. But over the past four years Weather has been building its profile and attracting the biggest names in techno and house, while also injecting new energy into Paris’s club scene. Taking place at Le Bourget airport, in the north-east of the city, it will welcome campers for the first time this year, which will no doubt foster a stronger sense of community among the crowd. As for the line-up, expect the best of Berlin techno (Marcel Dettmann, Dixon, Ben Klock, Len Faki); underground party starters Motor City Drum Ensemble and The Black Madonna; and a whole lot more DJs who know exactly what they’re doing. It’s run by the team behind Paris venue Concrete, so it’s no surprise the curation of artists is so good.</p>
            <p class="info">3-5 June, three-day ticket €84</p>
        </div>
      </div>
    </div>
   
<!-- NUMBER 8 -->
  
    <div id="group17" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">08.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group18" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="http://www.mushroom-magazine.com/site/wp-content/uploads/2014/02/Boom.jpg" />
            <img src="http://travelersmagazine.nl/wp-content/uploads/Tickets-naar-het-BOOM-Festival-in-Portugal-7.png" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Boom</h3>
            <h4>portugal</h4>
            <p>From psychedelic trance implosion to Europe’s leading alt-eco gathering, Boom festival brings a touch of the Burning Man spirit to Europe. Taking place every two years, Boom creates a spiritual, shamanic community that fosters unity and respect. There’s also a lot of people on acid, and the physical environment is very much geared up for a tripped-out mindset: expect warped art, visually stimulating installations and all kinds of creations to play around with/think very, very deeply about. The programme goes way beyond trance (and music, for that matter); the talks, yoga classes and healing workshops are as much a part of Boom as the dancing with thousands of beautiful people dressed as mythical creatures. </p>
            <p class="info">11-18 August, €180</p>
        </div>
      </div>
    </div>
  
 <!-- NUMBER 9 -->
  
    <div id="group19" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">09.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group20" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="https://www.resources.festicket.com/media/photos/PrimaveraSoundThumb6.jpg" />
            <img src="http://www.hotelandia.pt/wp-content/uploads/primavera-sound.jpg" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Primavera Sound</h3>
            <h4>spain</h4>
            <p>While Sonar has, over 22 years, built a vast international reputation for pulling together the best of the world’s electronic music, Barcelona’s other major festival, Primavera Sound, has been rapidly growing as a broad-spectrum festival with an enviable programme of international acts. In 15 years it has gone from a two-day event attended by 8,000 to a five-day party for 190,000. In many ways it has followed a similar expansion to Sonar, launching a smaller off-shoot – NOS Primavera Sound in Porto – as well as a programme of meetings, workshops and conferences in the form of PrimaveraPro. This year’s headliners are Radiohead, LCD Soundsystem and PJ Harvey, and the bill ranges from garage rockers Parquet Courts to Balkan brass folksters Beirut. All this is backed by a solid list of electronic acts and DJs from Hudson Mohawke, Floating Points and Optimo.</p>
            <p class="info">1-5 June, week ticket €195, day tickets €80</p>
        </div>
      </div>
    </div>
  
  <!-- NUMBER 10 -->
  
    <div id="group21" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="number">10.</div>
      </div>
      <div class="parallax__layer parallax__layer--back achtergrond"></div>
    </div>
    <div id="group22" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore fotolayer">
        <div class="imgwrapper">
            <img src="https://www.exitfest.org/sites/default/files/2017/adventure/35738174190_ae94fbf3ce_o-2_0.jpg" />
            <img src="http://www.hftravel.com/assets/img/tours/big//exit-festival-2015_4.jpg" />
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base infolayer">
        <div class="content">
            <h3>Exit Festival</h3>
            <h4>serbia</h4>
            <p>Formed by Serbia’s student movement as the country moved into the post-Milošević era, Exit has grown into an astonishing international event that transforms Novi Sad’s Petrovaradin Fortress into a party site for 200,000 people. The award-winning festival, which retains a social mission to support young people in the Balkans, has dozens of stages and sound systems around the castle site. This year’s line-up has acts from Ellie Goulding to Stormzy, Bastille to Wiz Khalifa – and be sure to get sucked into the notorious dance arena, too. Be prepared to party hard in the Balkan sun and – trust us – remember to pack sunscreen.</p>
            <p class="info">7-10 July, four-day pass from £79, camping pass £25</p>
        </div>
      </div>
    </div>
   
  
  <!-- EIND SLIDE -->
  
      <div id="group23" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <p>Source: <a href="https://www.theguardian.com/travel/2016/apr/04/top-10-music-festivals-summer-2016-europe">The Guardian</a>
          Website made by Kimberly Dijkmans</p>  
      </div>
      <div class="parallax__layer parallax__layer--back"></div>
    </div>

</div>
              
            
!

CSS

              
                /* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--fore {
    transform: translateZ(90px) scale(.7);
    z-index: 10;
  }

  .parallax__layer--base {
    transform: translateZ(0);
    z-index: 0;
  }

  .parallax__layer--back {
    transform: translateZ(-300px) scale(2);
    z-index: -5;
  }

  .parallax__layer--deep {
    transform: translateZ(-600px) scale(3);
    z-index: -10;
  }

  /* demo styles
  --------------------------------------------- */

  body, html {
    overflow: hidden;
  }

  body {
    font-size: 100%;   
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    color: white;
    scroll-behavior: smooth;
  }

  * {
    margin:0;
    padding:0;
  }

  .parallax {
    font-size: 200%;
    scroll-behavior: smooth;
    scroll-snap-destination: 0% 0%;
    scroll-snap-type: mandatory;
  }

  .parallax__group {
    scroll-snap-coordinate: 0% 0%;
  }

  /* style the groups
  --------------------------------------------- */

  #group1 {
    z-index: 0;
    text-align: right;
  }
  #group1 .headtitle {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0%);
  }
  #group1 h1 {
    margin: 1em auto .5em auto;
    font-size: 2em;
    font-family: 'Pacifico', cursive;
    text-shadow: 2px 2px crimson;
  }
  #group1 h2 {
    font-size: .6em;
    font-style: italic;
  }
  #group1 .parallax__layer--base {
    background: linear-gradient(to bottom, rgba(200,20,50,0) 0%, rgba(50,5,20,.9) 100%);
  }
  #group1 .parallax__layer--back {
    background: black;
    background-image: url("https://s22.postimg.cc/n40dorocx/coachella.jpg");
    background-size: cover;
    background-position: center;
    filter: grayscale(20%);
  }


  #group2 {
    z-index: 3;
  }
  #group2 img {
    width: 120%;
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  #group2 .parallax__layer--base {
    background: indianred;
    border-top: 20px double white;
    border-bottom: 20px double white;
  }
  #group2 .paragraph {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, 0%);
    font-size: .6em;
    line-height: 1.2em;
  }
  #group2 .paragraph p {
    margin-bottom: 1em;
  }


/* style the groups -> TOP 10 nummersecties
  --------------------------------------------- */

  .number {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 8em;
    text-shadow: 6px 6px pink;
  }
  #group5 .number {
    text-shadow: 6px 6px gold;
  }
  #group7 .number {
    text-shadow: 6px 6px lightskyblue;
  }
  #group9 .number {
    text-shadow: 6px 6px violet;
  }
  #group11 .number {
    text-shadow: 6px 6px mediumspringgreen;
  }
  #group13 .number {
    text-shadow: 6px 6px darkorange;
  }
  #group15 .number {
    text-shadow: 6px 6px indianred;
  }
  #group17 .number {
    text-shadow: 6px 6px lightskyblue;
  }
  #group19 .number {
    text-shadow: 6px 6px pink;
  }
  #group21 .number {
    text-shadow: 6px 6px gold;
  }
  .achtergrond {
    background: #010D1B;
  }
  .achtergrond::after {
    content: "";
    background: url("https://smhttp-ssl-33667.nexcesscdn.net/manual/wp-content/uploads/2016/01/love-international-festival-1050x700.jpg");
    background-size: cover;
    background-position: center;
    opacity: .8;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
    filter: blur(4px);
  }
  #group5 .achtergrond::after {
    background: url("https://s22.postimg.cc/kmomhojxt/Iceland-_Secret-_Solstice-_Festival-million-dollar.jpg");
    background-size: cover;
    background-position: center;
  }
  #group7 .achtergrond::after {
    background: url("https://i.guim.co.uk/img/media/55160504a3ad30fdd1bb80c9d1693c9302b721dc/0_0_7146_4287/master/7146.jpg?w=860&q=20&auto=format&usm=12&fit=max&dpr=2&s=1168a3e8c84c4ffbd7fddec974ee8e5c");
    background-size: cover;
    background-position: center;
  }
  #group9 .achtergrond::after {
    background: url("http://www.fatfreddysdrop.com/sites/default/files/20160812_abrossimow_summerstale2016IMG_9497.jpg");
    background-size: cover;
    background-position: center;
  }
  #group11 .achtergrond::after {
    background: url("http://www.dummymag.com/media/uploads/reviews/unknown1.jpg");
    background-size: cover;
    background-position: center;
  }
  #group13 .achtergrond::after {
    background: url("https://i.guim.co.uk/img/media/5095474066a5b33e3e6b27956f19d881a462a850/28_0_1388_832/master/1388.jpg?w=860&q=20&auto=format&usm=12&fit=max&dpr=2&s=628be1e535f20552ae618ecfd18ff2ba");
    background-size: cover;
    background-position: center;
  }
  #group15 .achtergrond::after {
    background: url("http://www.tourisme93.com/Local/gus/files/12768/weather-festival_droits-inconnus.jpg");
    background-size: cover;
    background-position: center;
  }
  #group17 .achtergrond::after {
    background: url("https://i.guim.co.uk/img/media/79d6e808a8466004331f7ba0ffb5b833ec968848/0_368_5801_3480/master/5801.jpg?w=620&q=20&auto=format&usm=12&fit=max&dpr=2&s=dfaf9ef8ce5a95b138a1e9189fe4ede9");
    background-size: cover;
    background-position: center;
  }
  #group19 .achtergrond::after {
    background: url("http://www.barcelonahairacademy.com/wp-content/uploads/2015/05/hair-academy-primavera-sound-barcelona-.jpg");
    background-size: cover;
    background-position: center;
  }
  #group21 .achtergrond::after {
    background: url("https://i.guim.co.uk/img/media/50f18c40272d95cefbe2512672b7f171ffbd7b9b/0_0_3000_1799/master/3000.jpg?w=620&q=20&auto=format&usm=12&fit=max&dpr=2&s=04a8140f00612186b648d6f31b70f675");
    background-size: cover;
    background-position: center;
  }

/* style the groups -> TOP 10 infosecties
  --------------------------------------------- */

  .fotolayer {
    width: 40%;
    margin: 3em;
    position: absolute;
    right: 0;
    left: auto;
  }
  .imgwrapper {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
  }
  .imgwrapper img {
    width: 80%;
    box-shadow:  0px 3px 3px 1px rgba(0, 0, 0, 0.25);
  }
  .imgwrapper img:first-child {
    margin-bottom: 1em;
  }
  .infolayer { 
    border-top: 20px double white;
    border-bottom: 20px double white;
    background: pink;
  }
  #group6 .infolayer {
    background: gold;
  }
  #group8 .infolayer {
    background: lightskyblue;
  }
  #group10 .infolayer {
    background: violet;
  }
  #group12 .infolayer {
    background: mediumspringgreen;
  }
  #group14 .infolayer {
    background: darkorange;
  }
  #group16 .infolayer {
    background: indianred;
  }
  #group18 .infolayer {
    background: lightskyblue;
  }
  #group20 .infolayer {
    background: pink;
  }
  #group22 .infolayer {
    background: gold;
  }
  .content {
    width: 50%;
    margin: 2em;
    text-align: left;
  }
  h3 {
    font-weight: bold;
    font-size: 1.7em;
    font-family: 'Pacifico', cursive;
    text-shadow: 2px 2px lightskyblue;
    margin-bottom: .2em;
  }
  #group6 h3 {
    text-shadow: 2px 2px tomato;
  }
  #group8 h3 {
    text-shadow: 2px 2px violet;
  }
  #group10 h3 {
    text-shadow: 2px 2px orange;
  }
  #group12 h3 {
    text-shadow: 2px 2px salmon;
  }
  #group14 h3 {
    text-shadow: 2px 2px darkturquoise;
  }
  #group16 h3 {
    text-shadow: 2px 2px palegreen;
  }
  #group18 h3 {
    text-shadow: 2px 2px violet;
  }
  #group20 h3 {
    text-shadow: 2px 2px lightskyblue;
  }
  #group22 h3 {
    text-shadow: 2px 2px tomato;
  }
  h4 {
    font-style: italic;
    font-weight: bold;
    font-size: .8em;
    margin-bottom: 1.8em;
  }
  .infolayer p {
    font-size: .5em;
    line-height: 1.2em;
  }
  .infolayer p.info {
    font-weight: bold;
    font-style: italic;
    font-size: .5em;
    margin-top: 2em;
  }

/* ---- FOOTER ----*/

  #group23 p {
    color: #010D1B;
    font-size: .6em;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
  #group23 a {
    display: block;
    margin: .5em auto 1em auto;
    color: #010D1B; 
    font-family: 'Pacifico', cursive;
    font-size: 2em;
    text-shadow: 2px 2px pink;
  }
  #group23 .parallax__layer--back {
    background: indianred;
    background-image: url('https://png.pngtree.com/thumb_back/fw800/back_pic/03/90/42/3457dce0f21d524.jpg');
    background-size: cover;
  }
  


/* Media queries
  --------------------------------------------- */

@media screen and (max-width: 900px) {
    .content {
    width: 40%;
    }
}

@media screen and (max-width: 750px) {
    .content {
    font-size: 90%;
    }
    .fotolayer {
    width: 35%;
    }
}

@media screen and (max-width: 650px) {
    .content {
    font-size: 90%;
    margin: 1.5em;
    }
    .fotolayer {
    margin: 2em;
    }
}

              
            
!

JS

              
                
              
            
!
999px

Console