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 id="app">
<div id="atmosphere"></div>
<div id="particles-js"></div>
<transition name="fade">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.802 231.646" id="logo" preserveAspectRatio="none" v-if="!expanded"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.4 26.64c2.77-.37 5.33-.75 7.9-1.05 2.8-.34 5.6.55 5.27 3.54-.17 1.6-2.97 3.67-4.92 4.13-2.95.7-6.2.2-10.66.2 0 7.5-.03 14.56 0 21.6 0 4.48 3.72 6.43 9.6 5.1 5.1-1.13 5.1-1.13 7.74 3 .67-1.7 1.52-2.86 1.56-4.06.4-12.53 1.13-25.08.8-37.6-.15-5.2.1-11.6-6.58-14.32-.6-.25-.9-1.27-2.06-3.04C36.23 2.58 40.8.97 45.5 0c.9-.17 3.23 2.18 3.32 3.48.4 5.52.1 11.1.23 16.64.06 2.8.45 5.6.66 7.98 5.55-1 10-2.2 14.52-2.52 7.68-.52 12.65 5.55 12.47 14.23-.12 5.12.17 10.24.28 15.35.1 3.6-.5 7.52 4.88 8.13.8.1 2.02 2.04 1.9 3-.1.83-1.8 2.13-2.77 2.12-6.13-.07-12.25-.36-18.36-.8-.96-.08-1.84-1.32-2.76-2 .73-.97 1.4-2.7 2.2-2.77 5.03-.47 5.15-3.72 4.88-7.53-.4-5.7-.2-11.47-1.08-17.08-.8-5.1-11.15-8.52-15.1-5.24-1.02.85-1.95 2.52-1.92 3.8.2 7.6.56 15.23 1.2 22.82.12 1.33 1.84 2.5 2.8 3.76.68.9 2.05 2.14 1.82 2.67-.44 1.02-1.73 2.17-2.8 2.3-2.6.36-5.3.1-7.97.2-6.14.28-12.32 1.1-18.44.78-4.15-.22-9.33-.9-12-3.5-2.55-2.48-3-7.64-3.38-11.72-.43-4.57.32-9.24.47-13.87.1-3.15.37-6.42-4.2-6.97-.82-.1-2.07-1.5-2.08-2.3-.02-.8 1.22-1.7 2.05-2.4 2.6-2.14 5.2-4.28 7.93-6.28 1.86-1.38 3.9-2.52 5.87-3.76.64 1.9 1.3 3.8 1.9 5.74.18.6.2 1.26.4 2.4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M120.63 56.5c-1.18 2.27-1.8 5.2-3.62 6.7-13.82 11.5-33.73 4.24-36.73-13.48C79 42.27 82.1 30.96 95.9 25.18c6.25-2.62 18.94.42 23.15 6.32 1.53 2.13 1.8 5.16 2.66 7.78-2.38.75-4.76 2.03-7.18 2.15-6.57.3-13.17.13-19.76.15-4.7 0-6 2.15-4.08 6.78 3.44 8.34 11.82 12.2 20.9 9.55 2.48-.72 4.9-1.76 7.33-2.65.58.4 1.16.83 1.73 1.25zm-30.1-18.55c5.82-.34 10.87-.45 15.86-1.03 1.38-.16 2.6-1.72 3.9-2.64-1.2-1.4-2.13-3.4-3.67-4.12-5.9-2.77-11.98.04-16.1 7.8zM259.4 186c1.4-8.62 6.35-15.04 2.8-22.8-.38-.84-.13-1.97-.14-2.97-.05-5.43-.1-10.86-.1-16.3 0-11.1-.32-22.23.18-33.32.3-6.5-2.18-10.44-8-12.72-2.15-.84-4.24-1.93-6.47-2.57-3.36-.96-5.65-3.38-4.7-6.4.65-2 3.8-4.24 6.05-4.5 5.25-.62 10.64-.34 15.95 0 14.83.97 29.63 3.27 44.53.7 6.58-1.13 11.72 1.66 16.73 5.86 12.25 10.3 15.64 23.62 12.02 38.2-1.57 6.33-6.77 12.1-11.3 17.24-4.16 4.72-5.42 8.24-1.94 13.53 1 1.52 2.4 2.77 3.6 4.14 5.02 5.7 10 11.4 15.07 17.04 1.77 1.97 3.62 3.9 5.68 5.53 3.28 2.58 7.32.93 7.95-3.22.3-1.95.02-4 .1-5.98.43-8.95 1.14-17.9 1.27-26.85.1-6.95-.8-13.92-.67-20.86.16-9.1 1.04-18.22 1.35-27.34.2-5.94-2.33-9.03-8.14-10.82-5.5-1.7-6.53-2.56-8.55-7.87 5.06-1.02 9.94-2.6 14.9-2.88 12.43-.73 24.9-.97 37.36-1.17 3.47-.05 7.08.27 10.35 1.27 1.52.47 3.4 3.08 3.28 4.58-.12 1.43-2.4 3.23-4.1 3.88-4.25 1.63-8.82 2.44-13.04 4.13-1.47.58-3.13 2.74-3.25 4.3-.7 8.85-.93 17.74-1.4 26.62-.57 10.96-1.18 21.92-1.86 32.88-.45 7.1-.92 14.2-1.62 21.3-.35 3.6 1.25 5.42 4.48 5.85 5.9.8 11.85 1.46 17.8 1.92 4.92.38 9.9.8 14.82.47 8.57-.57 13.46-7.18 19.28-12.36 3.65-3.26 5.4-6.3 4.15-11.45-3.14-12.98-.5-26.08-.1-39.15.24-8.12.1-16.4-1.36-24.34-.5-2.77-5.24-5.1-8.44-6.92-2.2-1.26-5.13-1.17-7.64-1.98-3.58-1.15-5.34-4.2-4.08-7.38.7-1.76 3.9-3.42 6.07-3.53 8.15-.4 16.32-.2 24.5-.14 1.12 0 2.24.45 3.37.52 3.84.24 7.94 1.34 11.5.4 7.77-2.07 15.27-2.37 23.1-.5 3.26.77 6.95.42 10.32-.16 6.73-1.17 16.87 3.05 19.84 9.28 2.4 5.03 4.53 10.3 5.82 15.7.5 2.1-1.05 6.36-2.7 7-3.5 1.34-8 2.03-11.03-1.7-3.5-4.3-6.6-8.92-10-13.34-.76-1-1.8-2.06-2.93-2.5-7.98-3.13-16.28-4.46-24.83-3.56-4.05.42-8.95 5.93-9.2 11.27-.4 8.63-.34 17.3.1 25.93.26 5.45 2.18 6.38 7.64 5.1.65-.14 1.3-.5 1.93-.44 10.42 1.26 15.8-4.47 18.98-13.46.48-1.37 1.3-2.9 2.42-3.7 1.64-1.2 3.78-2.57 5.54-2.38 1.16.13 2.87 2.9 2.88 4.48.1 12.28-.15 24.56-.34 36.85-.04 2.47-.26 4.96-.47 7.44-.4 4.83-3.33 7.63-8.2 7.32-4.57-.3-4.54-4-4.72-7.34-.1-1.66-.02-3.33-.02-5 0-8.03-1.44-9.74-9.35-10.14-4.14-.22-8.32 0-12.45.3-3.48.25-4.78 2.58-4.6 5.9.48 8.28.84 16.6 1.45 24.87.5 6.82 2.78 9.17 9.52 9.64 9.06.62 18.15 1.03 27.23 1.35 5.52.2 9.73-2.67 13.65-6.28 4.12-3.8 8.6-7.2 12.68-11.05 1.2-1.13 1.16-3.5 2.3-4.74 1.54-1.7 3.53-3.58 5.6-3.96 1.2-.23 3.28 2.06 4.37 3.62 4.13 5.98 7.22 12.9 12.18 18.03 9.1 9.37 26.92 3.58 30.06-9.23 1.3-5.35.35-10.5-3.83-14.2-6.77-6.05-14.44-10.7-22.3-15.37-9.78-5.8-19.93-12.43-22.9-25.97-2.7-12.4-1.53-23.6 7.12-31.94 7.06-6.8 16.83-10.83 25.52-15.88 1.1-.64 3.04-.4 4.4.04 6.32 2 12.74 3.83 18.82 6.42 9.56 4.06 12.18 21.95 4.48 29.07-2.02 1.9-3.73 2.13-5.6-.68-3.2-4.82-6.44-9.77-10.44-13.9-7.52-7.8-18.23-7.27-24.77.65-6.9 8.36-5.47 19.62 3.47 25.66 2.72 1.83 5.8 3.48 8.96 4.23 12.75 3.03 21.98 11.37 30.57 20.36 2.64 2.75 3.44 7.35 4.83 11.2 1.2 3.3.98 7.3 6.06 7.87 1.2.13 2.26 2.54 3.22 4 3.8 5.82 7.1 12.04 11.46 17.4 3.68 4.54 9.16 7.4 15.13 4.83 6.97-3 14.32-6.17 15.65-15.18.72-4.87-.32-9.55-4-12.8-6.8-6-14.2-10.95-22.33-15.38-8.04-4.4-16.86-9.87-20.72-19.3-4.87-11.9-5.9-24.06 2.04-35.18 2.57-3.6 6.5-6.35 10.18-9 4.3-3.1 8.98-5.68 13.52-8.45 3.8-2.3 7.74-2.63 11.95-1.1 5 1.83 10.15 3.22 15.08 5.18 10.54 4.2 13.73 21.68 5.42 29.56-2.12 2-3.94 2.13-5.86-1.06-2.8-4.68-5.96-9.32-9.83-13.1-2.68-2.64-6.6-4.7-10.3-5.43-7.93-1.57-13.96 2.22-17.52 9.78-3.5 7.45-2.33 14.58 4.15 19.77 3.4 2.72 7.6 4.84 11.77 6.16 13 4.1 23 12.24 31.54 22.4 1.5 1.77 1.8 4.55 2.65 6.87 1.2 3.23 2.67 6.4 3.53 9.72.92 3.53 2.55 7.6 1.62 10.78-5.18 17.53-19.96 31.02-40.26 31.42-16.78.33-24.3-2.85-38.23-14.37-1.2.98-2.53 1.93-3.7 3.05-13.44 12.8-37.45 15.5-53.22 5.8-2.6-1.58-4.54-1.54-7.32-.33-3.38 1.48-7.2 2.6-10.85 2.65-22.15.23-44.32-.12-66.48.24-7.32.12-14.6 1.92-21.93 2.63-2.4.23-4.9-.52-7.35-.9-3.9-.58-7.77-1.77-11.65-1.76-13.47.06-27.07-.52-40.35 1.24-6.53.87-12.73 1.54-19.2.77-.87-.1-1.95.43-2.74.95-7.3 4.8-15.23 2.3-22.8 1.42-2.25-.27-4.63-4.04-5.96-6.7-2.8-5.64-4.54-11.82-7.5-17.35-1.6-2.95-4.8-5.06-7.35-7.48-1.2-1.12-2.46-2.16-3.78-3.12-5.03-3.63-9.92-7.5-15.2-10.73-4.1-2.5-6.95-.8-8.7 3.77-2.75 7.18-.55 22.14 4.68 27.2 1.74 1.7 4.25 2.56 6.13 4.12 1.83 1.5 3.73 3.2 4.85 5.22 1.37 2.5-.07 4.3-2.8 4.4-10.57.42-21.14.7-31.7.98-2.33.07-4.65.03-6.97.02-1.82 0-4.15.66-5.4-.2-8.8-6.2-19.2-3.55-28.75-5.3-3.66-.68-6.52-1.37-7.45-5.16-.97-3.96.3-6.88 4.04-9.17 6.76-4.14 8.3-8.2 5.72-15-.76-2.02-3.02-4.7-4.8-4.9-7.23-.7-14.58-1.15-21.78-.48-3.14.3-6.02 3.48-10.38 6.2 9.44 4.08 7.8 11.9 9.23 18.37 1.5 6.77-1.86 10.6-9.37 10.7-15.46.2-30.92.1-46.38.1-13.16.02-26.32-.1-39.48.06-6.97.08-13.93.56-20.9.97-3.62.22-6.63-.87-6.9-4.7-.26-3.43 1.78-5.9 5.47-6.6 2.6-.5 5.17-1.23 7.77-1.7 6.45-1.22 7.55-2.14 7.5-8.9-.05-7.62-.9-15.24-.97-22.87-.1-10.76-.32-21.56.5-32.27.6-7.67-.38-13.63-7.22-18.4-5.18-3.6-9.22-8.77-14.14-12.8-4.25-3.5-9.37-3.8-14.65-2.22-1.9.56-3.9.8-5.9.9-6.06.3-7.67 1.4-8.4 7.42-.68 5.76-1.06 11.58-1.1 17.4-.06 8.05 3 10.45 11.08 10.33 7.3-.1 12.66-2.65 16.3-9.27 1.82-3.3 4-8.5 8.5-6.86 2.4.88 4.4 6 4.6 9.33.64 11.9.5 23.88.52 35.82 0 4.1-2.94 5.05-6.43 5.4-3.62.35-5.7-.5-6.76-4.52-2.34-8.94-11.72-14.4-20.73-12.68-5.1.98-7.25 3.36-7.1 8.47.2 7.3.48 14.6 1.08 21.86.5 6.08 3.83 10.34 9.42 13 3.85 1.83 7.1 4.52 4.1 9.27-1 1.63-3.27 3.25-5.13 3.47-11.06 1.25-22.13 2.46-33.23 2.9-4.83.2-9.84-1.06-14.57-2.36-3.04-.84-4.35-3.63-1.5-6.1 3.17-2.74 6.67-5.26 10.4-7.15 3.84-1.92 5.46-4.13 5.57-8.7.52-23.27 1.66-46.5 2.3-69.76.33-11.84-.9-13.04-12-16.77-2.6-.88-5.02-2.48-7.3-4.05-3.33-2.27-2.33-4.28.74-5.87.45-.23.92-.53 1.4-.55 11.13-.43 21.86-4.45 33.48-1.9 7.9 1.74 16.5.66 24.8.38 13.18-.44 26.37-1.32 39.56-1.84 2.06-.1 4.13 1 6.23 1.13 3.22.2 6.7.8 9.66-.1 7.73-2.3 15.26-2.55 23.12-.75 3.27.75 6.86.1 10.3.1 1.64 0 3.3-.23 4.9 0 14.44 2.26 16.96 9.03 21.35 23.95.94 3.18.46 7.3-3.05 8-3.37.68-8.24.3-10.58-1.75-4.2-3.7-6.98-9.02-10.46-13.58-.76-1-1.9-1.97-3.05-2.4-7.86-2.93-16-4.6-24.36-3.47-5.22.72-8.6 4.95-8.94 9.55-.73 9.9-.32 19.88.02 29.8.04 1.2 2.5 2.48 4.05 3.34.7.38 1.92-.38 2.9-.3 11.6.8 18.36-5.1 22.02-15.58.46-1.32 1.67-2.52 2.8-3.44 3.43-2.76 6.82-1.63 6.9 2.78.24 12.77-.05 25.55-.2 38.32-.04 2.3-.64 4.6-.6 6.9.07 5.05-3.02 6.4-7.27 6.97-4.83.65-5-3.26-5.56-5.98-.66-3.2-.27-6.63-.18-9.96.1-3.42-1.4-5.5-4.8-5.73-5.3-.35-10.6-.75-15.9-.58-3.9.12-5.8 2.47-5.5 6.7.57 7.45.78 14.94 1.18 22.42.43 8.14 2.98 10.7 11.08 11.6 2.63.28 5.23 1.45 7.82 1.37 4.14-.14 8.28-.88 12.4-1.58 1.93-.34 3.74-1.48 5.68-1.72 7.97-.98 13.04-5.98 16.08-12.67 2.76-6.1 4.3-12.76 6.27-19.2 3.17-10.44 6.18-20.93 9.4-31.35 2.62-8.55 5.7-16.96 8.1-25.56 1.86-6.63 9.82-14.67 16.56-14.8 2.1-.04 5.03 2.14 6.2 4.1 2.83 4.85 5.32 10 7.13 15.3 4.12 12.1 8.3 24.2 11.45 36.56 3.48 13.6 11.3 25.2 16.3 38.05 1.3 3.32 4.6 5.86 7.92 9.92zm32.37-42.36c2.2-.42 6.37-1.5 10.63-2 4.44-.5 7.3-2.83 9.28-6.55 2.84-5.32 5.3-10.6 3.25-17-1.2-3.7-.42-8.6-2.6-11.35-3.67-4.67-8.6-8.68-13.7-11.83-6.83-4.22-15.75 1.12-16.05 9.15-.4 10.5-.56 21.03-.7 31.54-.1 5.86 2.23 8.13 9.9 8.04zm-83 4.1c6.6-.26 7.4-1.8 4.5-7.53-1.77-3.48-3.03-7.24-4.3-10.96-1.24-3.64-5.23-5.77-6.43-3.27-2.3 4.74-3.86 9.94-4.9 15.12-.26 1.37 2.2 3.92 4 4.92 2.04 1.15 4.72 1.2 7.13 1.7z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M596.5 61.98c1.7-7.16 3.5-14.3 5.1-21.5.9-4.04 1.3-8.2 2.27-12.24 1.6-6.84 3.44-13.92 10.8-16.72 2.7-1.02 6.35-.28 9.35.5 8.3 2.1 16.35 5.47 24.74 6.85 9.45 1.55 19.15 1.8 28.76 2.04 14.2.37 28.42-.32 42.57.55 6.18.37 12.53 2.8 18.2 5.56 4.6 2.25 5.43 10.2 3.6 15.86-3.77 11.74-8.9 23.16-9.22 35.84-.06 2.57-1.2 5.13-1.97 7.67-1.1 3.74-2.5 7.4-3.44 11.18-1.53 6.27-2.96 12.58-4.07 18.93-.57 3.2-1.3 6.93-.22 9.77 1.4 3.68-.07 5.54-1.82 8.26-2.07 3.2-3.57 6.9-4.63 10.6-4.1 14.28-7.95 28.64-11.9 42.97-2.6 9.52-5.64 18.95-7.72 28.58-2.22 10.33-6.87 15.2-15.92 15-6.16-.15-13.96-12.33-11.6-18.03 2.1-5.13 4-10.33 6.12-15.46 4.15-10.04 8.82-19.9 12.47-30.1 4.4-12.34 8.18-24.9 11.83-37.5 2.4-8.25 3.62-16.86 6.2-25.05 2.8-8.78 5.9-17.58 10.1-25.77 4.28-8.4 2.33-16.85 1.9-25.3-.06-1.32-3.67-3.46-5.7-3.55-12.8-.57-25.6-.77-38.4-.87-6.48-.05-12.97.63-19.45.42-4-.12-7.94-1.84-11.92-1.87-8.1-.08-14.62 3.07-19.3 10.2-4 6.1-8.6 11.86-13.53 17.23-1.53 1.67-5.23 2.63-7.44 2.04-1.86-.5-3.76-3.53-4.27-5.76-.73-3.16-.2-6.62-.2-9.94l-1.3-.34z"/></svg>
</transition>
<div id="content">
<ul class="the-seven">
<person v-for="person in fellowship" v-bind:key="person" :person="person"></person>
</ul>
</div>
</div>
<template id="template-person">
<transition name="person-show">
<li v-if="show" class="person" :id="caption" :class="{'person-expanded' : expanded, 'person-hover' : hover}">
<div class="person-content">
<transition name="fade">
<div class="person-caption" v-if="!expanded">
<h2>{{ caption }}</h2>
</div>
</transition>
<transition name="fade">
<div class="content" v-if="expanded">
<div class="person-title">
<h1 >{{ person.firstname }} {{ person.lastname }}</h1>
<h2>{{ person.alias }}</h2>
<p>{{ person.bio }}</p>
<p v-if="person.bioextended">{{ person.bioextended }}</p>
</div>
</div>
</transition>
<a href="#"
v-if="expanded"
@click.prevent="expand(person)">X Close</a>
<a href="#"
v-if="!expanded"
@click.prevent="expand(person)"
@mouseenter="hoverPerson(person)"
@mouseleave="hoverPerson(person)" v-bind="{'title' : 'More about ' + caption }"></a>
</div>
<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 618 560" class="image">
<defs>
<mask :id="caption + '-mask'">
<image width="618" height="560" v-bind="{'xlink:href' : person.mask}"></image>
</mask>
</defs>
<image width="618" height="560" v-bind="{'mask' : 'url(#' + caption + '-mask)', 'xlink:href' : person.image}"></image>
</svg>
</li>
</transition>
</template>
$smallScreen: 550px;
$largeScreen: 1600px;
@function between($to, $from, $toWidth, $fromWidth) {
$slope: ($to - $from) / ($toWidth - $fromWidth);
$base: $from - $slope * $fromWidth;
@return calc(#{$base} + #{100vw * $slope});
}
@mixin between($property, $to, $from, $toWidth: $smallScreen, $fromWidth: $largeScreen) {
#{$property}: $to;
@media (min-width: $toWidth) {
#{$property}: between($to, $from, $smallScreen, $largeScreen);
}
@media (min-width: $fromWidth) {
#{$property}: $from;
}
}
:root {
@include between(font-size, 15px, 24px);
}
html {
height: 100%;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
backface-visibility: hidden;
}
body,
#app,
canvas,
#atmosphere,
#particles-js,
#content {
display: flex;
position: absolute;
min-height: 100%;
width: 100%;
}
body {
background: #395e7f
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-bg.jpg)
top
center
no-repeat
;
background-size: cover;
background-attachment: fixed;
}
canvas {
z-index: -1;
}
#app {
background: #395e7f
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-bg.jpg)
top
center
no-repeat
;
background-size: cover;
background-attachment: fixed;
z-index: 1;
}
#particles-js {
position: fixed;
top: 0;
bottom: 0;
background-color: transparent;
// z-index: 2;
}
#atmosphere {
background: radial-gradient(
ellipse farthest-corner at 35% 25%,
white,
rgba(white, 0)
);
opacity: .4;
mix-blend-mode: overlay;
animation: stormyskies 8s linear infinite;
}
@keyframes stormyskies {
0% { opacity: .4 }
@for $i from 1 through 19 {
$limit: 4;
$percent: 0% + ($i * 5);
#{$percent} {
opacity: random($limit) * .1;
}
}
100% { opacity: .4 }
}
#logo {
position: absolute;
top: 2rem;
left: 2rem;
display: block;
fill: white;
width: 30vw;
min-width: 16rem;
height: auto;
mix-blend-mode: soft-light;
}
#content {
flex-direction: row;
align-items: stretch;
}
.the-seven {
margin: 0;
padding: 0;
list-style: none;
display: flex;
width: 100%;
overflow-x: hidden;
flex-direction: row-reverse;
}
.person {
flex-grow: 1;
position: relative;
transition: opacity .8s cubic-bezier(0.13, 0.88, 0.89, 1), flex .8s cubic-bezier(0.13, 0.88, 0.89, 1);
// seemes like there's a flexbox bug when changing viewport size. This fixes it... ¯\_(ツ)_/¯
border: 1px solid transparent;
font-size: 1rem;
&.person-hover {
flex-grow: 1.6;
.person-caption {
opacity: 1;
h2 {
text-shadow: .25rem 0rem .5rem white;
}
}
}
a {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
// opacity: 0;
}
}
.person-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.person-caption {
position: absolute;
bottom: 2rem;
display: inline-block;
right: -1rem;
z-index: 100;
transition: opacity .8s cubic-bezier(0.13, 0.88, 0.89, 1);
opacity: .8;
h2 {
font-size: 3rem;
font-weight: normal;
writing-mode: vertical-rl;
text-orientation: upright;
line-height: 0;
letter-spacing: -2.25rem;
color: #fffaee;
transition: text-shadow .8s cubic-bezier(0.13, 0.88, 0.89, 1);
text-shadow: 0rem 0rem 0rem rgba(white,0);
}
}
.person-show-enter-active {
$ease: cubic-bezier(0.13, 0.88, 0.89, 1);
transition: opacity .8s $ease, flex .8s $ease;
height: 100vh;
}
.person-show-leave-active {
$ease: cubic-bezier(.48, .91, .27, 1);
transition: opacity .6s $ease, flex .6s $ease;
height: 100vh;
}
.person-show-enter, .person-show-leave-to {
opacity: 0;
flex-grow: 0 !important;
}
h1,
h2,
h3 {
font-family: 'IM Fell DW Pica SC', serif;
color: white;
}
.person .image {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: auto;
mask: linear-gradient(to top right, transparent 25% , black 50%);
transition: all .8s ease-in-out;
z-index: -20;
}
#Snow {
a { height: 23rem; }
.image {
left: 42%;
height: 23em;
}
}
#Mormont {
a { height: 24rem; }
.image {
left: 60%;
height: 24em;
}
}
#Tormund {
a { height: 25rem; }
.image {
left: 65%;
height: 25em;
}
}
#Clegane {
a { height: 25rem; }
.image {
left: 40%;
height: 25em;
}
}
#Dondarrion {
a { height: 24rem; }
.image {
left: 68%;
height: 24em;
}
}
#Thoros {
a { height: 23.5rem; }
.image {
left: 55%;
height: 23.5em;
}
}
#Gendry {
a { height: 23rem; }
.image {
left: 58%;
height: 23em;
}
}
.person-expanded {
min-height: 100%;
.image {
position: fixed;
bottom: 0;
height: 80vh!important;
left: 100%!important;
transform: translateX(-80%) translateZ(1px);
}
a {
color: white;
font-family: 'IM Fell DW Pica SC', serif;
text-decoration: none;
position: absolute;
font-size: 1.5rem;
top: 2rem;
left: initial!important;
right: 2rem;
height: auto!important;
display: inline-block;
width: auto;
bottom: initial!important;
animation: name-reveal 2s ease-in-out forwards;
opacity: 0;
animation-delay: 1.2s;
}
&.person-hover {
.person-caption {
opacity: 0;
}
}
}
.content {
left: 0;
width: 70vw;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.person-title {
min-width: 60%;
margin-left: auto;
padding: 2rem;
h1,
h2,
p {
transform: translate3d(2rem,0,0);
animation: name-reveal 2s ease-in-out forwards;
opacity: 0;
}
h1 {
font-size: 4rem;
// animation-delay: .2s;
margin: 0;
}
h2 {
font-size: 2rem;
animation-delay: .3s;
margin: 0 0 0 3rem;
}
p {
animation-delay: 1s;
color: white;
width: 55vw;
line-height: 1.6;
font-size: 1.4rem;
text-align: center;
font-family: 'IM Fell English', serif;
}
}
@keyframes name-reveal {
0% {
transform: translate3d(2rem,0,0);
opacity: 0;
filter: blur(2rem)
}
100% {
transform: translate3d(0,0,0);
opacity: 1;
filter: blur(0rem)
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .4s ease-in-out;
opacity: 1;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
@media (max-width: $smallScreen) {
.the-seven {
left: 0;
padding-top: 10rem;
flex-wrap: wrap-reverse;
justify-content: space-between;
align-content: space-between;
overflow-x: hidden;
padding-left: 1rem;
padding-right: 1rem;
}
.person {
font-size: .75rem;
height: 10rem;
border: none;
margin-right: 50%;
width: 50%;
flex-grow: 0;
a {
height: 100%!important;
}
}
.image {
mask: linear-gradient(to top, transparent, black 50%)!important;
}
.person-caption {
left: .5rem;
h2 {
text-orientation: initial;
writing-mode: initial;
letter-spacing: -.2rem;
}
}
.person:nth-child(2n) {
margin-right: 0;
margin-left: 50%;
.person-caption {
left: initial;
right: .8rem
}
}
#logo {
min-width: 10rem;
top: 1rem;
left: 50%;
transform: translateX(-50%)
}
.person-expanded {
position: initial;
width: 100%;
.image {
position: absolute;
height: 40vh!important;
bottom: initial;
top: .5rem;
left: 50%!important;
transform: translateX(-50%);
}
.content {
padding-top: 40vh;
width: 100%;
}
p {
width: 100%;
}
}
}
const data = [
{
firstname: 'Gendry',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-gendry.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-gendry_mask.jpeg',
alias: 'Bastard of King Robert Baratheon',
bio: "Robert Baratheon's bastard son, Gendry trained as a blacksmith in King’s Landing. Upon leaving the city to join the Night’s Watch, he met and befriended Arya Stark on the road north. The two separated when Melisandre brought Gendry back to Dragonstone as a sacrifice for Stannis Baratheon. He escaped death when Davos Seaworth set him free. Davos rediscovered Gendry back in King’s Landing, and enlisted him to join the mission beyond the Wall."
},
{
firstname: 'Thoros',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-thoros.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-thoros_mask.jpeg',
alias: 'of Myr',
bio: "A native of the Free City of Myr and a Red priest for the Lord of Light Thoros was dispatched to the Seven Kingdoms to convert the Westerosi king. Fond of drink, he soon abandoned his faith and became renowned as a tourney fighter, warrior, and carouser. He joined Beric Dondarrion on his mission to arrest Gregor Clegane and became Beric's right-hand man in the Brotherhood. His faith in the Lord of Light was renewed when he was able to resurrect Beric – multiple times.He encouraged Sandor “The Hound” Clegane to travel with the Brotherhood and now heads beyond the Wall to help Jon Snow."
},
{
firstname: 'Beric', lastname: 'Dondarrion',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-dondarrion.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-dondarrion_mask.jpeg',
alias: 'The Lightning Lord',
bio: "Lord of Blackhaven, Beric Dondarrion arrived in King’s Landing to compete in the Tournament of the Hand given in honor of Ned Stark then Hand of the King. After Gregor Clegane terrorized the Riverlands, Lord Beric was tasked by Ned to bring him justice. A follower of the Lord of Light, Beric has been brought back to life several times by a Red Priest, Thoros of Myr After hanging the men who raided Brother Ray’s community, he offered Sandor “The Hound” Clegane to travel north with the Brotherhood. The group now plans to help Jon Snow beyond the Wall."
},
{
firstname: 'Sandor', lastname: 'Clegane',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-clegane.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-clegane_mask.jpeg',
alias: 'The Hound',
bio: "The Hound was the personal bodyguard to King Joffrey and carried out his commands, no matter how monstrous. He abandoned the king and his post when the Blackwater was set on fire in battle, and traveled alongside Arya Stark after finding her in the Riverlands. Brienne of Tarth wounded the Hound severely when she tried to fulfill her promise to reclaim Arya for Catelyn Stark. Arya left the Hound alone to die; he was discovered by Brother Ray who nursed him back to health. The Hound found a home in Brother Ray’s community and after the village was raided and Ray murdered, the Hound hunted down and killed the men responsible. During this mission, The Hound re-encountered Beric Dondarrion and is now accompanying him, Thoros, Jorah Mormont, Tormund and Jon Snow beyond the Wall in search of a wight."
},
{
firstname: 'Tormund',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-tormund.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-tormund_mask.jpeg',
alias: 'Giantsbane',
bio: "A legendary wildling leader who supported Mance Rayder, Tormund is also known as “Giantsbane.” Swayed by John Snow's promise that the remaining wildlings would have safe passage through the Wall, he traveled with Jon to Hardhome to make their case before the Free Folk elders. The two narrowly escaped when the camp was attacked by White Walkers and the Army of the Dead, who added the wildlings slaughtered at Hardhome to its ranks. Tormund fought alongside Jon at the Battle of the Bastards, and now heads back beyond the Wall with him in search of a wight."
},
{
firstname: 'Jorah', lastname: 'Mormont',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-mormont.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-mormont_mask.jpeg',
alias: 'The Andal',
bio: 'The son of the late Lord Commander of the Night’s Watch, Jorah originally joined Daenerys Targaryen’s company to spy on her in exchange for a pardon. He became committed to her cause and her person, but was banished when the queen learned of his betrayal. Jorah came across Tyrion Lannister in Volantis and presented him to Daenerys in an attempt to earn back her trust. After helping save her from an attack by the Sons of the Harpy, he traveled north with Daario in search of their queen, all the while hiding his infection of greyscale. Once Dany secured command of the Dothraki, Jorah revealed his disease and was sent away to find a cure. He arrived at the Citadel where Samwell Tarly attempted a difficult and prohibited treatment for his infection. Returning to Daenerys, Jorah is on a mission with Jon Snow to capture a wight from beyond the Wall.'
},
{
firstname: 'John', lastname: 'Snow',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-snow.jpg',
mask: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/fearless-seven-snow_mask.jpeg',
alias: 'King in the North',
bio: "Son of Lyanna Stark and Rhaegar Targaryen, Jon is unaware of his true parentage, as Lyanna’s brother Ned raised Jon as his bastard son. Jon joined the Night's Watch where he served as steward to Lord Commander Mormont. After Mormont’s death, Jon was elected Lord Commander of the Watch, and made the unpopular decision to ally with the wildlings and save them from the White Walkers. For that, he was murdered at Castle Black by his own men, but to the awe of everyone, Jon was brought back to life by the Red Priestess Melisandre.",
bioextended: "Restored as Lord Commander, Jon executed his murderers before abdicating his command and passing it on to Edd Tollett. He swore off all fighting, until a reunion with his long-lost sister Sansa persuaded him to retake Winterfell. With a rag-tag army of Northern allies and the crucial last-minute support of the Vale, Jon led the Starks to victory in the Battle of the Bastards and reclaimed their childhood home. Impressed with his leadership, the Northern houses proclaimed him King in the North. Jon met with Daenerys Targaryen in hopes of forming an alliance, and has returned to the North armed with the dragonglass Dany permitted him to mine. To convince Cersei Lannister of the looming threat, Jon plans to lead a small band of men beyond the Wall and return with a wight to prove the existence of the army of the dead."
},
]
const EventBus = new Vue()
Vue.component('person', {
props: ['person'],
template: '#template-person',
data() {
return {
show: true,
expanded: false,
hover: false
}
},
computed: {
caption() {
if (this.person.lastname) {
return this.person.lastname
} else {
return this.person.firstname
}
}
},
methods: {
hoverPerson() {
this.hover = !this.hover;
},
expand() {
this.expanded = !this.expanded;
if (this.expanded) {
EventBus.$emit('item-expanded')
} else {
EventBus.$emit('item-collapsed')
}
}
},
created() {
EventBus.$on('item-expanded', () => {
if (!this.expanded) {
this.show = false;
}
});
EventBus.$on('item-collapsed', () => {
this.show = true;
});
}
});
var app = new Vue({
el: '#app',
data() {
return {
fellowship: data,
world: 'mars',
expanded: false
}
},
created() {
EventBus.$on('item-expanded', () => {
if (!this.expanded) {
this.expanded = true;
}
});
EventBus.$on('item-collapsed', () => {
this.expanded = false;
});
},
mounted() {
particlesJS("particles-js",{
"particles": {
"number": {
"value": 600,
"density": {
"enable": true,
"value_area": 4577.056321467182
}
},
"color": {
"value": "#fff"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": true,
"speed": 0.4,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 2,
"random": true,
"anim": {
"enable": false,
"speed": 10,
"size_min": 0,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 4,
"direction": "bottom",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 9075.197878771136,
"rotateY": 8443.879765465317
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
}
})
Also see: Tab Triggers