HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
/* 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;
}
}
Also see: Tab Triggers