Skip to content

Commit d6c1676

Browse files
author
Alex Labonne
committed
put the content of the blog into the body tags on the finished and start files (25)
1 parent f1179f4 commit d6c1676

File tree

2 files changed

+283
-287
lines changed

2 files changed

+283
-287
lines changed

‎25 - Full Bleed Blog Layout/full-bleed-blog-FINISHED.html

Lines changed: 174 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -7,203 +7,200 @@
77
<title>Full Bleed Blog Layout!</title>
88
</head>
99

10-
11-
<!--
10+
<body>
11+
<!--
1212
Thanks To Phillipp Rudloff for the .tip Idea
1313
https://codepen.io/kleinfreund/pen/aLQgYy
1414
-->
15-
<article class="post">
16-
<h2>Chapter Three: The Great American Game</h2>
17-
18-
<p>Dear Diary,</p>
15+
<article class="post">
16+
<h2>Chapter Three: The Great American Game</h2>
1917

20-
<p>Grandfather's creaky as his front porch, loads his shotgun beneath the awning, spittoon restless for rain, carpenter's
21-
chair against the whistling air. Rocking, back and forth, rocking snap shot picture - worth it, just like the movies</p>
18+
<p>Dear Diary,</p>
2219

23-
<div class="tip tip-right">
24-
<p>This is a song by
25-
<a href="http://levithepoet.net/">Levi The Poet</a>
26-
</p>
27-
</div>
20+
<p>Grandfather's creaky as his front porch, loads his shotgun beneath the awning, spittoon restless for rain, carpenter's
21+
chair against the whistling air. Rocking, back and forth, rocking snap shot picture - worth it, just like the movies</p>
2822

23+
<div class="tip tip-right">
24+
<p>This is a song by
25+
<a href="http://levithepoet.net/">Levi The Poet</a>
26+
</p>
27+
</div>
2928

30-
<p>She said that he loved baseball, and James Earl Jones; said that he's got god talking inside of his thoughts while he's
31-
rounding those bases on his way back home</p>
3229

33-
<blockquote>
34-
<p>"If you build it, they will come"</p>
35-
</blockquote>
30+
<p>She said that he loved baseball, and James Earl Jones; said that he's got god talking inside of his thoughts while he's
31+
rounding those bases on his way back home</p>
3632

37-
<p>If you build it, they will come (and baby listens to what the Lord say). But I've been getting pretty worn, building for
38-
nearly a decade</p>
33+
<blockquote>
34+
<p>"If you build it, they will come"</p>
35+
</blockquote>
3936

40-
<figure>
41-
<img src="https://source.unsplash.com/1000x300" alt="Big Ass Image">
42-
<figcaption>Super Nice Photo</figcaption>
43-
</figure>
37+
<p>If you build it, they will come (and baby listens to what the Lord say). But I've been getting pretty worn, building
38+
for nearly a decade</p>
4439

40+
<figure>
41+
<img src="https://source.unsplash.com/1000x300" alt="Big Ass Image">
42+
<figcaption>Super Nice Photo</figcaption>
43+
</figure>
4544

46-
<p>In a perfect world we shouldn’t have been allowed to lose sight of what it means to love wholly. I’ve got a Polaroid hanging
47-
on my wall that a friend took of me and my angel. I remember the day like it’s something I can touch, but it’s stuck
48-
in the square between the borders of the film, and I can run my fingers over our faces, but I can’t get back to the places
49-
we were</p>
5045

46+
<p>In a perfect world we shouldn’t have been allowed to lose sight of what it means to love wholly. I’ve got a Polaroid
47+
hanging on my wall that a friend took of me and my angel. I remember the day like it’s something I can touch, but it’s
48+
stuck in the square between the borders of the film, and I can run my fingers over our faces, but I can’t get back
49+
to the places we were</p>
5150

52-
<blockquote>
53-
<p>You’ve got a pain deep in your bones, son.</p>
54-
</blockquote>
55-
<p>"You’ve got a pain deep in your bones, son. It compels you forward like you’re tied to a slave master’s cruel hand, and
56-
it's the same pain that drives that oppressor’s heart of stone, so you’ve grown to love the man. You keep pouring yourself
57-
out, again and again, into legible lines through a crooked pen." Yeah, it’s painful, but it’s familiar – so habit breeds
58-
comfort, and I don’t know what I’d do without him</p>
5951

60-
<div class="tip tip-left">
61-
<p>You can listen to this song on
62-
<a href="https://www.youtube.com/watch?v=-gvpej9TT-g">YouTube</a>
63-
</p>
64-
</div>
52+
<blockquote>
53+
<p>You’ve got a pain deep in your bones, son.</p>
54+
</blockquote>
55+
<p>"You’ve got a pain deep in your bones, son. It compels you forward like you’re tied to a slave master’s cruel hand, and
56+
it's the same pain that drives that oppressor’s heart of stone, so you’ve grown to love the man. You keep pouring yourself
57+
out, again and again, into legible lines through a crooked pen." Yeah, it’s painful, but it’s familiar – so habit breeds
58+
comfort, and I don’t know what I’d do without him</p>
6559

66-
<p>So in the early morning, when you’ve fallen asleep in our home, I drift back into the memories that I’ve claimed as my
67-
own, and wonder if tonight will be a night I’ll hang on my wall like I did before we stopped taking photos, out of the
68-
habit of being comfortable with not trying at all</p>
60+
<div class="tip tip-left">
61+
<p>You can listen to this song on
62+
<a href="https://www.youtube.com/watch?v=-gvpej9TT-g">YouTube</a>
63+
</p>
64+
</div>
6965

70-
<p>In a perfect world, we’ll have albums labeled Seasons, with chapter headings, and we’ll staple them to the cork-board that
71-
hangs at the foot of the bed. There’s longevity in a memory spilt out in pen, and if a picture is worth a thousand words
72-
then I’ve written down every one of them</p>
66+
<p>So in the early morning, when you’ve fallen asleep in our home, I drift back into the memories that I’ve claimed as my
67+
own, and wonder if tonight will be a night I’ll hang on my wall like I did before we stopped taking photos, out of
68+
the habit of being comfortable with not trying at all</p>
7369

74-
<p>I work hard, scarred, toil through that soil for the youth I see in my friends, but these journals are moments in time,
75-
snapshots of our lives, and in retrospect, age is an overexposed photo that the memories can't mend</p>
70+
<p>In a perfect world, we’ll have albums labeled Seasons, with chapter headings, and we’ll staple them to the cork-board
71+
that hangs at the foot of the bed. There’s longevity in a memory spilt out in pen, and if a picture is worth a thousand
72+
words then I’ve written down every one of them</p>
7673

77-
<div class="tip tip-right">
78-
<img src="https://f4.bcbits.com/img/a1057026609_16.jpg" alt="Correspondence Album Cover">
79-
<p>Buy the album on
80-
<a href="https://levithepoet.bandcamp.com/album/correspondence-a-fiction">BandCamp</a>
81-
</p>
82-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae totam quia vel eveniet porro, rem ducimus quam incidunt,
83-
dicta laborum quod earum tempore natus placeat neque aspernatur pariatur iusto quos.</p>
84-
</div>
85-
<p>I know my sweet seductress, and her name is Depression. I wrote best beneath that demon’s destructive oppression</p>
86-
87-
88-
<p>In those Polaroids, she drove the ink into the canvas like a slave beneath his master’s cruel hand, and I hated that whip
89-
but always wondered what I’d do without it, so I grew to love the man</p>
90-
91-
<p>Oh, I wept for change! I begged for movement and the good Lord, he answered my prayers, but you don’t know how to breathe
92-
easy when you let go of your habits, even if your comforts left you gasping for air</p>
93-
94-
95-
<figure>
96-
<img src="https://source.unsplash.com/1000x700" alt="Big Ass Image">
97-
<figcaption>Super Nice Photo</figcaption>
98-
</figure>
99-
100-
<h2>Dear Time</h2>
101-
102-
<p>Grandfather's as creaky as his front porch, scent like oil in the gun barrel, dip-can kicked over the railing, sandpaper
103-
hands stuck behind thumb tacks on my wall. I’ve got an ache in my chest for every season I miss and it gets worse when
104-
the snow starts to fall. There are butterflies alive in that couple’s eyes a few years since forgotten by all, and sometimes,
105-
if the phone starts to ring, I can still hear their wings when you call</p>
106-
107-
<p>But I begged for movement and I got what I asked for, and I can picture the answer like it came yesterday. And in the land
108-
of the gods, I think that things are timeless, but we are still prone to decay</p>
109-
110-
<p>You know I still lift up hope of certain smiles in those photos for us when I pray</p>
111-
112-
<blockquote>
113-
<p>"Idle hands build nothing that you can call your own"</p>
114-
</blockquote>
115-
116-
<p>Time is a cruel lover, and she breaks her house apart at its bones. You know comfort is no good reason for standing still,
117-
and idle hands build nothing that you can call your own.</p>
118-
119-
<blockquote>
120-
<p>— Levi The Poet</p>
121-
</blockquote>
122-
123-
</article>
124-
125-
<style>
126-
:root {
127-
--yellow: #ffc600;
128-
}
129-
130-
html {
131-
color: #444;
132-
font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;
133-
font-size: 20px;
134-
}
135-
136-
p {
137-
line-height: 1.8;
138-
}
139-
140-
img {
141-
max-width: 100%;
142-
}
143-
144-
a {
145-
color: black;
146-
text-decoration: underline wavy var(--yellow);
147-
}
148-
149-
h1,
150-
h2 {
151-
font-size: 80px;
152-
font-style: italic;
153-
font-weight: 100;
154-
margin: 0;
155-
}
156-
157-
.post {
158-
display: grid;
159-
max-width: 1000px;
160-
margin: 200px auto;
161-
grid-gap: 10px 50px;
162-
grid-template-columns: 3fr 12fr 5fr;
163-
}
164-
165-
.post>* {
166-
grid-column: 2 / -2;
167-
}
168-
169-
.post>figure {
170-
margin: 0;
171-
grid-column: 1 / -1;
172-
}
173-
174-
figcaption {
175-
font-size: 10px;
176-
}
177-
178-
.post>blockquote {
179-
grid-column: 1 / -1;
180-
font-size: 60px;
181-
font-style: italic;
182-
text-align: center;
183-
margin: 0;
184-
}
185-
186-
.tip {
187-
background: #FAFAFA;
188-
padding: 10px;
189-
grid-row: span 5;
190-
align-self: start;
191-
}
192-
193-
.tip-left {
194-
grid-column: 1 / span 1;
195-
text-align: right;
196-
border-right: 2px solid var(--yellow);
197-
}
198-
199-
.tip-right {
200-
grid-column: span 1 / -1;
201-
border-left: 2px solid var(--yellow);
202-
}
203-
</style>
204-
205-
<body>
74+
<p>I work hard, scarred, toil through that soil for the youth I see in my friends, but these journals are moments in time,
75+
snapshots of our lives, and in retrospect, age is an overexposed photo that the memories can't mend</p>
20676

77+
<div class="tip tip-right">
78+
<img src="https://f4.bcbits.com/img/a1057026609_16.jpg" alt="Correspondence Album Cover">
79+
<p>Buy the album on
80+
<a href="https://levithepoet.bandcamp.com/album/correspondence-a-fiction">BandCamp</a>
81+
</p>
82+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae totam quia vel eveniet porro, rem ducimus quam incidunt,
83+
dicta laborum quod earum tempore natus placeat neque aspernatur pariatur iusto quos.</p>
84+
</div>
85+
<p>I know my sweet seductress, and her name is Depression. I wrote best beneath that demon’s destructive oppression</p>
86+
87+
88+
<p>In those Polaroids, she drove the ink into the canvas like a slave beneath his master’s cruel hand, and I hated that
89+
whip but always wondered what I’d do without it, so I grew to love the man</p>
90+
91+
<p>Oh, I wept for change! I begged for movement and the good Lord, he answered my prayers, but you don’t know how to breathe
92+
easy when you let go of your habits, even if your comforts left you gasping for air</p>
93+
94+
95+
<figure>
96+
<img src="https://source.unsplash.com/1000x700" alt="Big Ass Image">
97+
<figcaption>Super Nice Photo</figcaption>
98+
</figure>
99+
100+
<h2>Dear Time</h2>
101+
102+
<p>Grandfather's as creaky as his front porch, scent like oil in the gun barrel, dip-can kicked over the railing, sandpaper
103+
hands stuck behind thumb tacks on my wall. I’ve got an ache in my chest for every season I miss and it gets worse when
104+
the snow starts to fall. There are butterflies alive in that couple’s eyes a few years since forgotten by all, and
105+
sometimes, if the phone starts to ring, I can still hear their wings when you call</p>
106+
107+
<p>But I begged for movement and I got what I asked for, and I can picture the answer like it came yesterday. And in the
108+
land of the gods, I think that things are timeless, but we are still prone to decay</p>
109+
110+
<p>You know I still lift up hope of certain smiles in those photos for us when I pray</p>
111+
112+
<blockquote>
113+
<p>"Idle hands build nothing that you can call your own"</p>
114+
</blockquote>
115+
116+
<p>Time is a cruel lover, and she breaks her house apart at its bones. You know comfort is no good reason for standing still,
117+
and idle hands build nothing that you can call your own.</p>
118+
119+
<blockquote>
120+
<p>— Levi The Poet</p>
121+
</blockquote>
122+
123+
</article>
124+
125+
<style>
126+
:root {
127+
--yellow: #ffc600;
128+
}
129+
130+
html {
131+
color: #444;
132+
font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;
133+
font-size: 20px;
134+
}
135+
136+
p {
137+
line-height: 1.8;
138+
}
139+
140+
img {
141+
max-width: 100%;
142+
}
143+
144+
a {
145+
color: black;
146+
text-decoration: underline wavy var(--yellow);
147+
}
148+
149+
h1,
150+
h2 {
151+
font-size: 80px;
152+
font-style: italic;
153+
font-weight: 100;
154+
margin: 0;
155+
}
156+
157+
.post {
158+
display: grid;
159+
max-width: 1000px;
160+
margin: 200px auto;
161+
grid-gap: 10px 50px;
162+
grid-template-columns: 3fr 12fr 5fr;
163+
}
164+
165+
.post>* {
166+
grid-column: 2 / -2;
167+
}
168+
169+
.post>figure {
170+
margin: 0;
171+
grid-column: 1 / -1;
172+
}
173+
174+
figcaption {
175+
font-size: 10px;
176+
}
177+
178+
.post>blockquote {
179+
grid-column: 1 / -1;
180+
font-size: 60px;
181+
font-style: italic;
182+
text-align: center;
183+
margin: 0;
184+
}
185+
186+
.tip {
187+
background: #FAFAFA;
188+
padding: 10px;
189+
grid-row: span 5;
190+
align-self: start;
191+
}
192+
193+
.tip-left {
194+
grid-column: 1 / span 1;
195+
text-align: right;
196+
border-right: 2px solid var(--yellow);
197+
}
198+
199+
.tip-right {
200+
grid-column: span 1 / -1;
201+
border-left: 2px solid var(--yellow);
202+
}
203+
</style>
207204
</body>
208205

209206
</html>

0 commit comments

Comments
 (0)