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.profile-page
div.content
div.content__cover
div.content__avatar
div.content__bull
- for(var i = 0; i < 5; i++)
span
div.content__actions
a(href="#")
svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512")
path(fill="currentColor" d="M192 256A112 112 0 1 0 80 144a111.94 111.94 0 0 0 112 112zm76.8 32h-8.3a157.53 157.53 0 0 1-68.5 16c-24.6 0-47.6-6-68.5-16h-8.3A115.23 115.23 0 0 0 0 403.2V432a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48v-28.8A115.23 115.23 0 0 0 268.8 288z")
path(fill="currentColor" d="M480 256a96 96 0 1 0-96-96 96 96 0 0 0 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592a48 48 0 0 0 48-48 111.94 111.94 0 0 0-112-112z")
span Connect
a(href="#")
svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512")
path(fill="currentColor" d="M208 352c-41 0-79.1-9.3-111.3-25-21.8 12.7-52.1 25-88.7 25a7.83 7.83 0 0 1-7.3-4.8 8 8 0 0 1 1.5-8.7c.3-.3 22.4-24.3 35.8-54.5-23.9-26.1-38-57.7-38-92C0 103.6 93.1 32 208 32s208 71.6 208 160-93.1 160-208 160z")
path(fill="currentColor" d="M576 320c0 34.3-14.1 66-38 92 13.4 30.3 35.5 54.2 35.8 54.5a8 8 0 0 1 1.5 8.7 7.88 7.88 0 0 1-7.3 4.8c-36.6 0-66.9-12.3-88.7-25-32.2 15.8-70.3 25-111.3 25-86.2 0-160.2-40.4-191.7-97.9A299.82 299.82 0 0 0 208 384c132.3 0 240-86.1 240-192a148.61 148.61 0 0 0-1.3-20.1C522.5 195.8 576 253.1 576 320z")
span Message
div.content__title
h1 Samantha Jones
span New York, United States
div.content__description
p Web Producer - Web Specialist
p Columbia University - New York
ul.content__list
li
span 65
| Friends
li
span 43
| Photos
li
span 21
| Comments
div.content__button
a(href="#" class="button")
div.button__border
div.button__bg
p.button__text Show more
div.bg
div
- for(var i = 0; i < 7; i++)
span
div#theme-switcher-wrapper.theme-switcher-wrapper
span Themes color
ul
li
em(data-theme="orange").is-active
li
em(data-theme="green")
li
em(data-theme="purple")
li
em(data-theme="blue")
div#theme-switcher-button.theme-switcher-button
svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512")
path(fill="currentColor" d="M352 0H32C14.33 0 0 14.33 0 32v224h384V32c0-17.67-14.33-32-32-32zM0 320c0 35.35 28.66 64 64 64h64v64c0 35.35 28.66 64 64 64s64-28.65 64-64v-64h64c35.34 0 64-28.65 64-64v-32H0v32zm192 104c13.25 0 24 10.74 24 24 0 13.25-10.75 24-24 24s-24-10.75-24-24c0-13.26 10.75-24 24-24z")
break-point = 990px
*
margin: 0
padding: 0
box-sizing: border-box
body
background: #fff
font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
color: hsla(0,0%,0%,.6)
.profile-page
display: flex
min-height: 100vh
padding-top: 5rem
@media (max-width: break-point)
padding-top: 0
.content
display: flex
flex-direction: column
max-width: 800px
width: 100%
position: relative
z-index: 2
margin: auto
padding: 2rem
background: #fff
border-radius: 2rem
box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)
@media (max-width: break-point)
max-width: 420px
padding: 0
border-radius: 0
&__cover
position: relative
background: linear-gradient(150deg, #1d8cf8 20%,#3358f4 100%)
.theme-orange &
background: linear-gradient(150deg, #ff4086 20%,#fd8d76 100%)
.theme-purple &
background: linear-gradient(150deg, #8700ff 20%,#f000ff 100%)
.theme-green &
background: linear-gradient(150deg, #1dcc45 20%,#42b883 100%)
.theme-blue &
background: linear-gradient(150deg, #0098f0 20%,#00f2c3 100%)
&__bull
display: none
height: 12rem
position: relative
overflow: hidden
@media (max-width: break-point)
display: block
for i in (1..5)
span:nth-child({i})
display: block
position: absolute
z-index: 1
border-radius: 50%
span
&:nth-child(1)
width: 5rem
height: 5rem
top: -6%
left: -3%
background: hsla(0,0%,100%,.12)
&:nth-child(2)
width: 8rem
height: 8rem
top: 18%
left: 18%
background: hsla(0,0%,100%,.05)
&:nth-child(3)
width: 3rem
height: 3rem
top: 8%
right: 2%
background: hsla(0,0%,100%,.05)
&:nth-child(4)
width: 6rem
height: 6rem
top: 28%
right: 12%
background: hsla(0,0%,100%,.1)
&:nth-child(5)
width: 4rem
height: 4rem
top: 70%
left: -6%
background: hsla(0,0%,100%,.04)
&__avatar
width: 12rem
height: 12rem
position: absolute
bottom: 0
left: 50%
z-index: 2
transform: translate(-50%,50%)
background: #8f6ed5 url(https://image.freepik.com/free-photo/friendly-brunette-looking-camera_23-2147774849.jpg) center center no-repeat
background-size: cover
border-radius: 50%
box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)
&::before
content: ""
position: absolute
top: 0
bottom: 0
left: 0
right: 0
border-radius: 50%
@media (max-width: break-point)
width: 11rem
height: 11rem
border: .3rem solid #fff
box-shadow: none
&__actions
display: flex
justify-content: space-between
padding: .2rem
@media (max-width: break-point)
padding: .8rem 2rem
a
display: flex
flex-flow: row nowrap
align-items: center
justify-content: center
height: 3rem
padding: .2rem 1rem
border-radius: 2rem
text-decoration: none
font-size: .9rem
@media (max-width: break-point)
padding: .5rem
span
@media (max-width: break-point)
display: none
svg
width: 2rem
margin-right: .4rem
@media (max-width: break-point)
margin: 0
path
&:last-child
opacity: .5
&:first-child
color: #ff4086
.theme-orange &
color: #ff4086
.theme-purple &
color: #8700ff
.theme-green &
color: #1dcc45
.theme-blue &
color: #0098f0
&:last-child
color: #d782d9
.theme-orange &
color: #fd8d76
.theme-purple &
color: #f000ff
.theme-green &
color: #42b883
.theme-blue &
color: #00f2c3
&:hover
&:first-child
background: #1d8cf8
color: #fff
.theme-orange &
background: #ff4086
.theme-purple &
background: #8700ff
.theme-green &
background: #1dcc45
.theme-blue &
background: #0098f0
&:last-child
background: #1d8cf8
color: #fff
.theme-orange &
background: #fd8d76
.theme-purple &
background: #f000ff
.theme-green &
background: #42b883
.theme-blue &
background: #00f2c3
&__title
margin-top: 4.5rem
text-align: center
order: 1
@media (max-width: break-point)
margin-top: 1.5rem
h1
margin-bottom: .1rem
font-size: 2.4rem
@media (max-width: break-point)
font-size: 1.8rem
span
font-size: 1rem
@media (max-width: break-point)
font-size: .9rem
&__description
margin-top: 2.5rem
text-align: center
order: 2
@media (max-width: break-point)
margin-top: 1.5rem
order: 3
p
margin-bottom: .2rem
font-size: 1.2rem
@media (max-width: break-point)
font-size: 1rem
&__list
display: flex
justify-content: center
margin-top: 2rem
list-style-type: none
order: 3
@media (max-width: break-point)
margin-top: 1.5rem
order: 2
li
padding: 0 1.5rem
text-align: center
font-size: 1rem
@media (max-width: break-point)
font-size: .8rem
span
display: block
margin-bottom: .1rem
font-weight: bold
font-size: 1.6rem
@media (max-width: break-point)
font-size: 1.2rem
&__button
margin: 3rem 0 2rem
text-align: center
order: 4
@media (max-width: break-point)
margin: 1.5rem 0 2.2rem
.button
display: inline-block
padding: 1.2rem 1.8rem
text-align: center
text-decoration: none
background: linear-gradient(100deg, #1d8cf8 30%,#3358f4 100%)
border-radius: 2rem
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)
font-size: 1rem
color: #fff
cursor: pointer
.theme-orange &
background: linear-gradient(100deg, #ff4086 10%,#fd8d76 100%)
.theme-purple &
background: linear-gradient(100deg, #8700ff 10%,#f000ff 100%)
.theme-green &
background: linear-gradient(100deg, #1dcc45 10%,#42b883 100%)
.theme-blue &
background: linear-gradient(100deg, #0098f0 10%,#00f2c3 100%)
&:hover
color: #fff
@media (max-width: break-point)
padding: 1rem 1.4rem
font-size: .9rem
.bg
width: 100%
height: 50%
position: absolute
top: 0
left: 0
z-index: 1
div
content: ""
width: 100%
height: 100%
position: absolute
top: 0
left: 0
z-index: 1
overflow: hidden
background: linear-gradient(150deg, #1d8cf8 20%,#3358f4 100%)
.theme-orange &
background: linear-gradient(150deg, #ff4086 20%,#fd8d76 100%)
.theme-purple &
background: linear-gradient(150deg, #8700ff 20%,#f000ff 100%)
.theme-green &
background: linear-gradient(150deg, #1dcc45 20%,#42b883 100%)
.theme-blue &
background: linear-gradient(150deg, #0098f0 20%,#00f2c3 100%)
for i in (1..7)
span:nth-child({i})
display: block
position: absolute
z-index: 2
border-radius: 50%
animation: floating 34s infinite
span
&:nth-child(1)
width: 11rem
height: 11rem
top: 30%
left: 16%
background: hsla(0,0%,100%,.05)
animation-duration: 34s
&:nth-child(2)
width: 8rem
height: 8rem
top: 18%
left: 1%
background: hsla(0,0%,100%,.12)
animation-duration: 40s
&:nth-child(3)
width: 8rem
height: 8rem
top: 34%
right: 10%
background: hsla(0,0%,100%,.1)
animation-duration: 38s
&:nth-child(4)
width: 4rem
height: 4rem
top: 34%
right: 3%
background: hsla(0,0%,100%,.2)
animation-duration: 34s
&:nth-child(5)
width: 12rem
height: 12rem
top: 42%
right: 28%
background: hsla(0,0%,100%,.1)
animation-duration: 40s
&:nth-child(6)
width: 8rem
height: 8rem
top: 72%
left: 6%
background: hsla(0,0%,100%,.05)
animation-duration: 38s
&:nth-child(7)
width: 4rem
height: 4rem
top: 82%
right: 8%
background: hsla(0,0%,100%,.05)
animation-duration: 34s
@keyframes floating
0%
-webkit-transform: rotate(0deg) translate(-10px) rotate(0deg)
transform: rotate(0deg) translate(-10px) rotate(0deg)
100%
-webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg)
transform: rotate(360deg) translate(-10px) rotate(-360deg)
.theme-switcher
&-button
position: fixed
top: calc(50% - 3.6rem)
right: 0
z-index: 2;
padding: 1rem
background: hsla(0,0%,0%,.6)
border-top-left-radius: 1rem
border-bottom-left-radius: 1rem
font-size: inherit
color: #fd7686
cursor: pointer
.theme-orange &
color: #fd7686
.theme-purple &
color: #8800ff
.theme-green &
color: #42b883
.theme-blue &
color: #1d8cf8
svg
width: 1.1rem
&-wrapper
width: 200px
position: fixed
top: calc(50% - 5rem)
right: 5rem
z-index: 2
padding: 1.5rem 0
background: linear-gradient(#222a42,#1d253b)
box-shadow: 0 10px 50px 0 rgba(0,0,0,.2)
border-radius: .25rem
opacity: 0
text-align: center
font-size: 1rem
color: inherit
visibility: hidden
transform: translateY(-15%) translateZ(0)
transform-origin: 0 0
transition: transform .15s cubic-bezier(0.430,0.195,0.020,1.000)
&.is-open
opacity: 1
visibility: visible
transform: translate3d(0,1px,0)
span
display: block
font-size: .8rem
color: hsla(0,0%,100%,.9)
cursor: default
ul
margin-top: .8rem
list-style-type: none
font-size: 0
li
display: inline-block
vertical-align: middle
padding: 0 .2rem
font-size: .8rem
color: hsla(0,0%,100%,.9)
cursor: pointer
em
display: block
border-radius: 1rem
[data-theme]
width: 20px
height: 20px
[data-theme="orange"]
background: #ff4086
[data-theme="purple"]
background: #8800ff
[data-theme="green"]
background: #42b883
[data-theme="blue"]
background: #1d8cf8
(() => {
'use-strict'
const themeSwiter = {
init: function() {
this.wrapper = document.getElementById('theme-switcher-wrapper')
this.button = document.getElementById('theme-switcher-button')
this.theme = this.wrapper.querySelectorAll('[data-theme]')
this.themes = ['theme-orange', 'theme-purple', 'theme-green', 'theme-blue']
this.events()
this.start()
},
events: function() {
this.button.addEventListener('click', this.displayed.bind(this), false)
this.theme.forEach(theme => theme.addEventListener('click', this.themed.bind(this), false))
},
start: function() {
let theme = this.themes[Math.floor(Math.random() * this.themes.length)]
document.body.classList.add(theme)
},
displayed: function() {
(this.wrapper.classList.contains('is-open'))
? this.wrapper.classList.remove('is-open')
: this.wrapper.classList.add('is-open')
},
themed: function(e) {
this.themes.forEach(theme => {
if(document.body.classList.contains(theme))
document.body.classList.remove(theme)
})
return document.body.classList.add(`theme-${e.currentTarget.dataset.theme}`)
}
}
themeSwiter.init()
})()
Also see: Tab Triggers