header#header.header
.header-inner.max-700
h1.logo Logo
nav.main-nav
ul.nav-menu
li Item 1
li Item 2
li Item 3
section#hero.hero
.hero-inner.max-500
h1 Some Headline Goes Here
p The Nellie, a cruising yawl, swung to her anchor without a flutter of the sails, and was at rest. The flood had made, the wind was nearly calm, and being bound down the river, the only thing for it was to come to and wait for the turn of the tide.
button Click Me
section#section.section
.section-inner.max-700
.section-image
img(src="https://source.unsplash.com/800x800/?texture")
.section-text
h1 Some Headline Goes Here
p The Nellie, a cruising yawl, swung to her anchor without a flutter of the sails, and was at rest. The flood had made, the wind was nearly calm, and being bound down the river, the only thing for it was to come to and wait for the turn of the tide.
button Click Me
View Compiled
img
width: 100%
.max-500
max-width: 500px
margin: 0 auto
.max-700
max-width: 700px
margin: 0 auto
.header
background:
color: #ddd
.header-inner
display: flex
justify-content: space-between
align-items: center
padding: 1rem
.logo
margin: 0
padding: 0
.nav-menu
list-style: none
padding: 0
margin: 0
display: flex
li
margin-left: 1rem
.hero
background:
image: url(https://source.unsplash.com/1600x900/?person)
size: cover
position: center
repeat: no-repeat
height: 50vh
color: white
display: flex
justify-content: center
align-items: center
.hero-inner
text-align: center
.section
background:
color: pink
padding: 3rem 0
@media (min-width: 500px)
display: flex
.section-inner
@media (min-width: 500px)
display: flex
.section-text
padding: 0 0 0 1.5rem
h1
margin: 0
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.