- var headlines = [
- 'Explore our world',
- 'View all its beauty',
- 'Take lots of photos',
- 'Each one of them pretty'
- ]
each headline, index in headlines
section.hero
.hero-inner(id="section-" + index)
figure
h2.hero__title= headline
section.content
article.content__inner
h1.content__title Some Happy Little Text
h3.content__author By Bob Ross
p A thin paint will stick to a thick paint. The shadows are just like the highlights, but we're going in the opposite direction. When you do it your way you can go anywhere you choose.
p You have to make almighty decisions when you're the creator. When you buy that first tube of paint it gives you an artist license. There we go. The little tiny Tim easels will let you down. Let's just drop a little Evergreen right here.
p Trees grow in all kinds of ways. They're not all perfectly straight. Not every limb is perfect. I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush. Just pretend you are a whisper floating across a mountain. This is your world, whatever makes you happy you can put in it. Go crazy.
p The first step to doing anything is to believe you can do it. See it finished in your mind before you ever start. We'll play with clouds today. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals. Don't kill all your dark areas - you need them to show the light. We don't want to set these clouds on fire. Every day I learn.
blockquote When you do it your way you can go anywhere you choose.
p Let's get wild today. Once you learn the technique, ohhh! Turn you loose on the world; you become a tiger. This is probably the greatest thing to happen in my life - to be able to share this with you.
p I'm a water fanatic. I love water. This is gonna be a happy little seascape. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. Let's put a touch more of the magic here. I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent Red, and a little bit of Prussian Blue.
p And that's when it becomes fun - you don't have to spend your time thinking about what's happening - you just let it happen. Let all these things just sort of happen. Don't fight it, use what happens. Let's put some happy little bushes on the other side now.
blockquote Don't fight it, use what happens.
p If we're going to have animals around we all have to be concerned about them and take care of them. I'll go over the colors one more time that we use: Titanium white, Thalo green, Prussian blue, Van Dyke brown, Alizarin crimson, Sap green, Cad yellow, and Permanent red. Anytime you learn something your time and energy are not wasted. This is your world. We want to use a lot pressure while using no pressure at all. Just let go - and fall like a little waterfall.
p Let's build some happy little clouds up here. Everyone is going to see things differently - and that's the way it should be. Let's do that again. A tree needs to be your friend if you're going to paint him. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it.
View Compiled
@import url('https://fonts.googleapis.com/css?family=Courgette|Roboto');
$ff-serif: 'Courgette', serif;
$ff-sans-serif: 'Roboto', sans-serif;
$color-accent: #A9DFBF;
$assets: (
1: '1506260408121-e353d10b87c7',
2: '1506744038136-46273834b3fb',
3: '1523712999610-f77fbcfc3843',
4: '1501785888041-af3ef285b470'
);
@function image($key) {
$id: map-get($assets, $key);
@return url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/photo-' + $id + '.jpg');
}
// Global styles
* { box-sizing: border-box; }
p {
font-family: $ff-sans-serif;
font-size: 1.25rem;
line-height: 1.5;
}
blockquote {
position: relative;
padding-left: 1.5rem;
font-family: $ff-serif;
font-size: 2rem;
line-height: 1.25;
letter-spacing: -0.05rem;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background-color: $color-accent;
border-radius: 60px;
}
}
// Fixed background image element
figure {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
}
// Hero section
.hero {
position: relative;
width: 100vw;
height: 100vh;
@each $asset in $assets {
$i: index($assets, $asset);
&:nth-child(#{$i}) figure {
background-image: image($i);
}
}
}
.hero-inner {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
clip: rect(0, auto, auto, 0);
@supports (-webkit-overflow-scrolling: touch) {
clip: unset;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
.hero__title {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
padding: 0 1rem;
width: 100%;
height: 100%;
color: white;
font-family: $ff-serif;
font-size: 8vw;
letter-spacing: -0.125rem;
text-align: center;
@media (min-width: 1200px) {
font-size: 6rem;
}
}
// Content section
.content {
position: relative;
margin: 0 auto 8rem;
padding: 2rem;
&:before {
content: '';
display: block;
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background-color: white;
z-index: 99;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
}
.content__inner {
margin: 0 auto;
max-width: 700px;
> * + * { margin-top: 1.5rem; }
> blockquote { margin: 3rem 0; }
}
.content__title {
font-family: $ff-serif;
font-size: 3rem;
line-height: 1.25;
letter-spacing: -0.125rem;
text-align: center;
@media (min-width: 600px) {
font-size: 4rem;
}
}
.content__author {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4rem;
width: 100%;
font-family: $ff-serif;
font-size: 1.5rem;
letter-spacing: -0.125rem;
text-align: center;
&:before,
&:after {
content: '';
flex: 1;
height: 2px;
background-color: $color-accent;
}
&:before { margin-right: 1rem; }
&:after { margin-left: 1rem; }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.