Skip to content

Commit adb0f1f

Browse files
wesboswesbos
committedDec 19, 2017
bleed
1 parent 3d5e17d commit adb0f1f

File tree

2 files changed

+297
-0
lines changed

2 files changed

+297
-0
lines changed
 

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

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Full Bleed</title>
8+
</head>
9+
10+
<article class="post">
11+
<h2>This is a blog post about CSS Grid.</h2>
12+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, amet.</p>
13+
<p class="has-tip">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis recusandae vel fugit in voluptatem tempora minima eos enim impedit excepturi. Illo a nemo repudiandae recusandae minima dolore totam facilis adipisci, sed deleniti. Ratione, sint in repudiandae laudantium eius ducimus unde tenetur suscipit dolor culpa. Dicta rerum odit mollitia ex fugit unde praesentium cupiditate, quod, veniam aspernatur, alias nobis iusto aut qui excepturi neque! Laboriosam ea, exercitationem ut asperiores quos vel corrupti totam quidem nam doloribus eum ad ullam tempora at praesentium libero. Deserunt earum aspernatur voluptates nostrum eligendi debitis ratione fugit! Nihil, rerum! Necessitatibus quisquam, laudantium quod sapiente magni similique.</p>
14+
<div class="tip tip-right">
15+
<p>I'm a tip!</p>
16+
</div>
17+
18+
<figure>
19+
<img src="https://source.unsplash.com/1000x300" alt="Big Ass Image">
20+
<figcaption>Super Nice Photo</figcaption>
21+
</figure>
22+
23+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, similique?</p>
24+
25+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, ipsa. Corporis ratione culpa harum dolores, atque fugiat officiis autem velit nobis consequatur tempore voluptates aliquid, quod est blanditiis et voluptatum nemo accusamus inventore voluptatibus, aspernatur voluptate nam maxime? Iusto eaque veniam voluptate necessitatibus porro odio ad quam facilis dignissimos dolor.</p>
26+
27+
<blockquote>
28+
<p>"This is a hard hitting quote that spans the entire widths of the page"</p>
29+
</blockquote>
30+
31+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis maiores quibusdam accusantium odio, nesciunt alias eveniet explicabo voluptatum provident neque corrupti soluta.</p>
32+
33+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias deserunt, quae, velit error, reprehenderit impedit ut eius fuga in nulla quidem ullam harum. Doloribus ducimus delectus placeat neque accusamus, molestias eum similique magni sunt rem quasi culpa fugit voluptates quidem ipsam voluptate veniam, ratione consequatur deserunt ipsum assumenda eligendi! Inventore.</p>
34+
35+
<h2>A heading level 2</h2>
36+
37+
<p class="has-tip">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, reprehenderit?</p>
38+
39+
<p class="tip tip-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi hic, nam quae sapiente numquam animi expedita illum vitae id consequatur a temporibus! Iste est tempora ex omnis. Quos, aliquam quod?</p>
40+
41+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis perspiciatis fugiat aliquid temporibus expedita. Sequi a exercitationem placeat eum ducimus vel perspiciatis asperiores quas animi molestias ut et, incidunt ea id commodi similique odit repellendus consectetur, magnam impedit pariatur eos!</p>
42+
43+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, repudiandae?</p>
44+
45+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia ipsam repellendus placeat vero voluptas delectus harum nam recusandae repellat ut? Amet fugiat nam distinctio eos esse possimus, corrupti at? Molestias voluptas aperiam ut. Ullam doloremque nam quasi porro atque aliquid dolor incidunt reprehenderit officia odit repudiandae qui dolore dolorem, consequuntur eaque ratione ipsum. Odit, repellat. Natus nam soluta rem, commodi eveniet veritatis delectus labore ullam amet neque dolorem, fugit quod! Eos odit quos, quia asperiores optio rem obcaecati quis, voluptatum velit ipsa qui. Debitis, similique eos voluptatem, culpa sit ipsam quam, nostrum laudantium nisi tempore fugiat non aut error delectus!</p>
46+
47+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci autem ad voluptatem voluptates earum aut amet sit ab aliquam cumque.</p>
48+
49+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nesciunt soluta necessitatibus perspiciatis facilis impedit deserunt eveniet. Ducimus magni velit dolorem perspiciatis, delectus explicabo ad distinctio ipsa animi quasi! Autem veritatis distinctio aspernatur, obcaecati nesciunt modi numquam culpa sint, architecto praesentium illum quia vitae accusantium. Doloremque harum eaque dolorum possimus hic tempora cumque in excepturi minus, quod ullam, velit ipsam maiores! Non, voluptates. Fuga nisi inventore accusamus excepturi minima sit.</p>
50+
51+
<figure>
52+
<img src="https://source.unsplash.com/1000x700" alt="Big Ass Image">
53+
<figcaption>Super Nice Photo</figcaption>
54+
</figure>
55+
56+
57+
<p class="has-tip">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo ullam fuga non optio perferendis tempore quia nulla repellendus placeat consequuntur!</p>
58+
59+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, a. Mollitia nam praesentium atque cupiditate quidem tempore nostrum labore, laboriosam in ipsa exercitationem id expedita dolorum impedit optio minima perferendis eum perspiciatis veritatis doloremque! Atque sapiente earum hic libero ex id, pariatur officiis amet nam laudantium dolore quasi perferendis, doloremque eum quo quaerat animi? Minus necessitatibus ullam corporis dolor reiciendis. Qui amet voluptatem ex. Dolorum consectetur corrupti aut libero! Hic rem, voluptatum placeat illum vero consectetur eos debitis dolorum veniam pariatur dolores repellat distinctio, tempore tenetur dolore eum obcaecati dicta, labore quam! Amet ducimus nobis veniam molestiae aliquam beatae consequatur.</p>
60+
61+
<div class="tip tip-right">
62+
<img src="https://source.unsplash.com/200x200" alt="A Tip">
63+
<p>A tip with a photo</p>
64+
</div>
65+
66+
<blockquote>
67+
<p>Get it. Get in. What Is this? Who knows? Pure Motivation.</p>
68+
</blockquote>
69+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, voluptatum?</p>
70+
71+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat libero hic id eum vero praesentium cupiditate harum, deleniti quis magnam? Illum incidunt tempora dignissimos iste ex explicabo blanditiis reiciendis cum deserunt commodi fugit voluptates qui earum, quos totam culpa fugiat quam recusandae velit dolor ad tempore aspernatur quidem consectetur? Necessitatibus ducimus sapiente asperiores aperiam enim! Sapiente dicta obcaecati nihil, placeat autem id officiis? Atque culpa sed ea! Deleniti dolorem, sunt porro rerum et in veniam reprehenderit repudiandae amet aliquam numquam, architecto quaerat doloremque ratione unde quibusdam optio animi dicta mollitia quasi aperiam eaque maiores maxime labore. Necessitatibus laudantium saepe minima.</p>
72+
73+
<blockquote>
74+
<p>fin.</p>
75+
</blockquote>
76+
77+
</article>
78+
79+
<style>
80+
html {
81+
color: #444;
82+
font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;
83+
font-size: 20px;
84+
}
85+
86+
p {
87+
line-height: 1.8;
88+
}
89+
90+
img {
91+
max-width: 100%;
92+
}
93+
94+
95+
h1,h2 {
96+
font-size: 80px;
97+
font-style: italic;
98+
font-weight: 100;
99+
margin: 0;
100+
}
101+
102+
.post {
103+
display: grid;
104+
/* border:1px solid red; */
105+
max-width: 1000px;
106+
margin: 200px auto;
107+
grid-gap: 20px;
108+
grid-template-columns: 15% 60% 25%;
109+
}
110+
111+
.post > * {
112+
grid-column: 2 / -2;
113+
}
114+
115+
.post > figure {
116+
margin-right: 0;
117+
margin-left: 0;
118+
grid-column: 1 / -1;
119+
}
120+
121+
.tip {
122+
background: #FAFAFA;
123+
padding: 10px;
124+
}
125+
126+
.tip img {
127+
width: 100%;
128+
}
129+
.tip-right {
130+
border-left: 3px solid yellowgreen;
131+
grid-column: span 1 / -1;
132+
align-self: center;
133+
}
134+
135+
.tip-left {
136+
border-right: 3px solid yellowgreen;
137+
grid-column: 1 / span 1;
138+
grid-row: span 5;
139+
align-self: start;
140+
}
141+
142+
.tip p {
143+
margin: 0;
144+
}
145+
146+
.post > blockquote {
147+
font-size: 60px;
148+
grid-column: 1 / -1;
149+
font-style: italic;
150+
margin: 0;
151+
text-align: center;
152+
}
153+
154+
blockquote p {
155+
margin: 0;
156+
}
157+
158+
figcaption {
159+
font-size: 10px;
160+
}
161+
</style>
162+
163+
<body>
164+
165+
</body>
166+
167+
</html>

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

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../assets/style.css">
8+
<title>Full Bleed</title>
9+
</head>
10+
11+
<div class="wrapper">
12+
<section class="contained section1">
13+
<div class="inner">
14+
<h2>Section</h2>
15+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
16+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
17+
</div>
18+
</section>
19+
<section class="fullbleed section2">
20+
<div class="inner">
21+
<h2>Section</h2>
22+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
23+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
24+
</div>
25+
</section>
26+
<section class="contained section3">
27+
<div class="inner">
28+
<h2>Section</h2>
29+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
30+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
31+
</div>
32+
</section>
33+
<section class="contained section4">
34+
<div class="inner">
35+
<h2>Section</h2>
36+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
37+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
38+
</div>
39+
</section>
40+
<section class="section5 fullbleed">
41+
<div class="inner">
42+
<h2>Section</h2>
43+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
44+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
45+
</div>
46+
</section>
47+
<section class="contained section6">
48+
<div class="inner">
49+
<h2>Section</h2>
50+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
51+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
52+
</div>
53+
</section>
54+
<section class="fullbleed section7">
55+
<div class="inner">
56+
<h2>Section</h2>
57+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
58+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
59+
</div>
60+
</section>
61+
<section class="contained section8">
62+
<div class="inner">
63+
<h2>Section</h2>
64+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
65+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
66+
</div>
67+
</section>
68+
<section class="contained section9">
69+
<div class="inner">
70+
<h2>Section</h2>
71+
<p>Lorem ipsum dolor sit, amet consectetur adipisicingadipisicingadipisicingadipisicingadipisicingadipisicing adipisicing adipisicing adipisicingadipisicing adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
72+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
73+
</div>
74+
</section>
75+
<section class="contained section10">
76+
<div class="inner">
77+
<h2>Section</h2>
78+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae esse aut iure, saepe obcaecati nihil distinctio placeat
79+
est, quisquam inventore quis quaerat, officia aperiam optio natus iusto voluptates doloribus totam.</p>
80+
</div>
81+
</section>
82+
</div>
83+
84+
<style>
85+
body {
86+
margin: 0;
87+
--maxwidth: 1000px;
88+
}
89+
90+
.wrapper {
91+
display: grid;
92+
grid-template-columns: [fullbleed-start] 1fr [contained-start] auto [contained-end] 1fr [fullbleed-end];
93+
}
94+
95+
.contained {
96+
grid-column: contained-start / contained-end;
97+
background: white;
98+
}
99+
100+
.fullbleed {
101+
grid-column: fullbleed-start / fullbleed-end;
102+
background: white;
103+
display: grid;
104+
grid-template-columns: 1fr auto 1fr;
105+
}
106+
107+
.inner {
108+
padding: 20px;
109+
width: 1000px;
110+
}
111+
.fullbleed .inner {
112+
grid-column: 2;
113+
}
114+
115+
@media (max-width: var(--maxwidth)) {
116+
.fullbleed {
117+
grid-template-columns: 1fr;
118+
}
119+
.inner {
120+
width: 100%;
121+
}
122+
}
123+
124+
</style>
125+
126+
<body>
127+
128+
</body>
129+
130+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.