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="relative w-screen h-screen" id="app">
<div
v-for="item in items"
class="imageContainer"
:key="item.image"
:style="{ backgroundImage: `linear-gradient( rgba(0,0,0, .1), rgba(0,0,0, .1)),url('${item.image}')`,
opacity:item.tclz === 't-filled'? 1:0,
}"
></div>
<div
v-for="(item, index) in items"
:key="item.key"
:style="{left:`${item.left}%`}"
class="litem"
>
<div>
<div :class="[item.tclz,'title-text']">
{{item.key}}
</div>
<div class="flex justify-center items-center">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="w-6 h-6 text-white mr-3"
fill="currentColor"
>
<path
d="M425.951 89.021C386.864 32.451 324.917 0 256.006 0S125.148 32.451 86.061 89.021c-38.895 56.284-47.876 127.541-24.072 190.496 6.367 17.192 16.488 33.895 30.01 49.547l150.378 176.634A17.895 17.895 0 00256.006 512a17.892 17.892 0 0013.629-6.302l150.336-176.586c13.582-15.742 23.69-32.427 30.004-49.481 23.852-63.069 14.871-134.326-24.024-190.61zm-9.5 178.072c-4.869 13.158-12.818 26.167-23.613 38.68-.03.03-.06.06-.084.096L256.006 466.487 119.174 305.768c-10.789-12.502-18.738-25.51-23.655-38.794-19.686-52.065-12.215-110.981 19.991-157.592 32.307-46.76 83.519-73.578 140.496-73.578 56.976 0 108.182 26.817 140.49 73.578 32.212 46.611 39.689 105.527 19.955 157.711z"
/>
<path
d="M256.006 106.219c-55.276 0-100.252 44.97-100.252 100.252s44.97 100.252 100.252 100.252 100.252-44.97 100.252-100.252c0-55.276-44.976-100.252-100.252-100.252zm0 164.699c-35.536 0-64.448-28.912-64.448-64.448 0-35.536 28.912-64.448 64.448-64.448 35.536 0 64.448 28.912 64.448 64.448s-28.912 64.448-64.448 64.448z"
/>
</svg>
</div>
<span class="location-text">{{item.loc}}</span>
</div>
</div>
</div>
<header class="fixed flex inset-x-0 top-0 h-24 ">
<div class="w-2/5 flex items-center pl-10">
<button
class="mr-20 w-12 h-10 bg-white flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="w-5 h-5 text-gray-500"
fill="currentColor"
>
<path
d="M492 236H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 76H20C8.954 76 0 84.954 0 96s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 396H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20z"
/>
</svg>
</button>
<ul class="flex">
<li class="mr-10 text-lg">
<a href="">About</a>
</li>
<li class="mr-10 text-lg">
<a href="">Places</a>
</li>
<li class="mr-10 text-lg">
<a href="">Equipment</a>
</li>
</ul>
</div>
<div class="w-1/5 flex items-center justify-center text-3xl">
<a href="">Free Style</a>
</div>
<div class="w-2/5 flex items-center justify-end pr-10">
<div class="flex items-end">
<form class="">
<input
class="x text-white border-b-2 border-white bg-transparent"
id="search"
type="text"
placeholder=""
/>
</form>
<div class="ml-2">
<svg
class="w-6 h-6 text-white"
viewBox="0 0 515.558 515.558"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M378.344 332.78c25.37-34.645 40.545-77.2 40.545-123.333C418.889 93.963 324.928.002 209.444.002S0 93.963 0 209.447s93.961 209.445 209.445 209.445c46.133 0 88.692-15.177 123.337-40.547l137.212 137.212 45.564-45.564L378.344 332.78zm-168.899 21.667c-79.958 0-145-65.042-145-145s65.042-145 145-145 145 65.042 145 145-65.043 145-145 145z"
/>
</svg>
</div>
</div>
</div>
</header>
<div class="fixed inset-x-0 bottom-0 h-20 flex justify-between ">
<div class="flex items-center p-10">
<div class=" w-10 h-10 relative overflow-hidden">
<div
v-for="(item, index) in items"
class="absolute w-10 h-10 text-2xl left-0 num flex items-center justify-center"
:key="item.ix"
:style="{ top: `${(index-1)*40}px`}"
>
<span>{{item.ix}}</span>
</div>
</div>
<div class="h-2 w-48 bg-bar mr-3 relative rounded-sm">
<div
class="absolute inset-y-0 w-4 bg-white rounded-sm bar-in"
:style="{left:`${(parseInt(items[1].ix)-1)*48}px`}"
></div>
</div>
<div class="text-2xl">04</div>
</div>
<div class="flex items-center bg-white p-6">
<div class="mr-3 text-gray-500 text-3xl">explore more</div>
<div class="w-20 bg-gray-500 play"></div>
<div
class="w-10 h-10 border border-gray-500 flex justify-center items-center rounded-full"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 494.148 494.148"
class="w-3 h-3 text-gray-500"
fill="currentColor"
>
<path
d="M405.284 201.188L130.804 13.28C118.128 4.596 105.356 0 94.74 0 74.216 0 61.52 16.472 61.52 44.044v406.124c0 27.54 12.68 43.98 33.156 43.98 10.632 0 23.2-4.6 35.904-13.308l274.608-187.904c17.66-12.104 27.44-28.392 27.44-45.884.004-17.48-9.664-33.764-27.344-45.864z"
/>
</svg>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
@import url("https://fonts.googleapis.com/css?family=Teko&display=swap");
html,
body {
font-family: "Odibee Sans", cursive;
color: white;
}
#app {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.imageContainer {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
background-size: cover;
background-position: center top;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.litem {
position: absolute;
top: 0;
width: 50vw;
height: 100vh;
transition: left 2s;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-weight: bold;
}
.t-filled {
background-position: 0 100%;
}
.t-empty {
background-position: 0 0;
}
/*Based on: https://codepen.io/zitrusfrisch/full/fjbal */
.title-text {
background-image: -webkit-linear-gradient(transparent 50%, white 50%);
background-repeat: repeat;
transition: background-position 2.5s;
background-size: 100% 200%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
white-space: nowrap;
text-transform: uppercase;
font: bold 5vmax "Teko", Impact;
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: #ffffffaa;
}
.bg-bar {
background-color: #ffffff55;
}
.num {
transition: top 2s;
}
.bar-in {
transition: left 2s;
}
.location-text {
font-family: "Nunito", sans-serif;
font-size: 1.25rem;
}
var app = new Vue({
el: "#app",
data: {
items: [
{
ix: "01",
tclz: "t-empty",
key: "junifer resort",
loc: "Mammoth Lakes, Califonia",
left: -25,
image: "https://images.unsplash.com/photo-1482867996988-29ec3a0f1aac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
},
{
ix: "02",
tclz: "t-filled",
key: "tamback lodge",
loc: "Bear Valley, California",
left: 25,
image: "https://images.unsplash.com/photo-1507492147080-3d1b3e5cd0aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
},
{
ix: "03",
tclz: "t-empty",
key: "alphenhof lodge",
loc: "Bear Valley, California",
left: 75,
image: "https://images.unsplash.com/photo-1563444276-0ef016ff4ae5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"
},
{
ix: "04",
tclz: "t-empty",
key: "china pick ski",
loc: "China Pick Mountain, California",
left: 125,
image: "https://images.unsplash.com/photo-1504827274833-7db1774520e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
}
]
},
methods: {
next: function() {
this.items = this.items.map((item, index) => ({
...item,
left: item.left - 50,
tclz: index === 2 ? "t-filled" : "t-empty"
}));
setTimeout(() => {
const [st, ...rest] = this.items;
this.items = [...rest, { ...st, left: 125 }];
setTimeout(() => this.next(), 500);
}, 2200);
}
},
created: function() {
this.next();
}
});
Also see: Tab Triggers