Skip to content

Commit e1d0e08

Browse files
sarmsteadsarmstead
committed
feat(about): add history markup, assets, and styles
1 parent eb870f0 commit e1d0e08

File tree

5 files changed

+162
-1
lines changed

5 files changed

+162
-1
lines changed

‎about.hbs‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,57 @@
2727
</div>
2828
</div>
2929
</section>
30+
<section class='page-about__history'>
31+
<div class='page-about__history__inner'>
32+
<h2 class='page-about__history__title'>History</h2>
33+
<hr />
34+
<section class='page-about__history__section-one'>
35+
<img
36+
alt='Group of developers hugging and smiling together'
37+
class='page-about__history__section-one--image'
38+
src={{asset 'images/home__community__details--image.jpg'}}
39+
/>
40+
<div class='page-about__history__section-one--content'>
41+
{{#get 'pages' filter="title:'About::History::SectionOne - Body'" limit='1'}}
42+
{{#foreach pages}}
43+
{{content}}
44+
{{/foreach}}
45+
{{/get}}
46+
{{#get 'pages' filter="title:'About::History::SectionOne - Button'" limit='1'}}
47+
{{#foreach pages}}
48+
{{content}}
49+
{{/foreach}}
50+
{{/get}}
51+
</div>
52+
</section>
53+
<section class='page-about__history__section-two'>
54+
<img
55+
alt='Seated conference participants talking with one another'
56+
class='page-about__history__section-two--image'
57+
src={{asset 'images/about__history__section-two--image.jpg'}}
58+
/>
59+
<div class='page-about__history__section-two--content'>
60+
{{#get 'pages' filter="title:'About::History::SectionTwo - Body'" limit='1'}}
61+
{{#foreach pages}}
62+
{{content}}
63+
{{/foreach}}
64+
{{/get}}
65+
</div>
66+
</section>
67+
<section class='page-about__history__section-three'>
68+
<img
69+
alt='Crowded lobby with conference participants entering workshop rooms'
70+
class='page-about__history__section-three--image'
71+
src={{asset 'images/about__history__section-three--image.jpg'}}
72+
/>
73+
<div class='page-about__history__section-three--content'>
74+
{{#get 'pages' filter="title:'About::History::SectionThree - Body'" limit='1'}}
75+
{{#foreach pages}}
76+
{{content}}
77+
{{/foreach}}
78+
{{/get}}
79+
</div>
80+
</section>
81+
</div>
82+
</section>
3083
{{> 'get-involved' }}

‎assets/images/about__history__section-three--image.jpg‎

752 KB
Loading

‎assets/images/about__history__section-two--image.jpg‎

874 KB
Loading

‎src/css/base/colors.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
--green: #71c09e;
77
--yellow: #ffd065;
88
--white: #fffdf9;
9+
--offwhite: #f0f4fd;
910
--text: #3b3e44;
1011
--lightblue: #eff4f8;
1112
--navy: #292e37;

‎src/css/pages/about.css‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
}
3434

3535
.page-about__position {
36-
background: rgba(247, 249, 252, 1);
36+
background: var(--offwhite);
3737
margin: auto;
3838
}
3939

@@ -65,6 +65,79 @@
6565
width: 100%;
6666
}
6767

68+
.page-about__history {
69+
background-color: var(--navy);
70+
margin: auto;
71+
}
72+
73+
.page-about__history__inner {
74+
margin: auto;
75+
max-width: 1135px;
76+
padding: 70px 40px;
77+
}
78+
79+
.page-about__history__title {
80+
color: white;
81+
margin-bottom: 16px;
82+
text-transform: uppercase;
83+
}
84+
85+
.page-about__history__section-one,
86+
.page-about__history__section-two {
87+
margin-bottom: 48px;
88+
}
89+
90+
.page-about__history__section-one,
91+
.page-about__history__section-three {
92+
display: grid;
93+
gap: 48px;
94+
grid-template-columns: 1fr;
95+
}
96+
97+
.page-about__history__section-one--content,
98+
.page-about__history__section-three--content {
99+
color: white;
100+
101+
p:first-child {
102+
margin-top: 0;
103+
}
104+
}
105+
106+
.page-about__history__section-one--image,
107+
.page-about__history__section-three--image {
108+
border-radius: 8px;
109+
height: 400px;
110+
object-fit: cover;
111+
width: 100%;
112+
}
113+
114+
.page-about__history__section-two {
115+
background-color: var(--offwhite);
116+
border-radius: 8px;
117+
display: grid;
118+
gap: 48px;
119+
grid-template-columns: 1fr;
120+
padding: 40px;
121+
}
122+
123+
.page-about__history__section-two--content,
124+
.page-about__history__section-three--content {
125+
p:first-child {
126+
margin-top: 0;
127+
}
128+
129+
p:last-child {
130+
margin-bottom: 0;
131+
}
132+
}
133+
134+
.page-about__history__section-two--image {
135+
border-radius: 8px;
136+
height: 150px;
137+
object-fit: cover;
138+
width: 100%;
139+
}
140+
68141
@media (min-width: 834px) {
69142
.page-about__hero {
70143
min-height: 834px;
@@ -91,6 +164,26 @@
91164
.page-about__position--image {
92165
height: 100%;
93166
}
167+
168+
.page-about__history__section-one,
169+
.page-about__history__section-two {
170+
margin-bottom: 96px;
171+
}
172+
173+
.page-about__history__section-one,
174+
.page-about__history__section-three {
175+
grid-template-columns: 1fr 1fr;
176+
}
177+
178+
.page-about__history__section-one--image,
179+
.page-about__history__section-three--image {
180+
height: 100%;
181+
max-height: 550px;
182+
}
183+
184+
.page-about__history__section-two--image {
185+
height: 300px;
186+
}
94187
}
95188

96189
@media (min-width: 1440px) {
@@ -114,5 +207,19 @@
114207
max-height: 500px;
115208
max-width: 100%;
116209
}
210+
211+
.page-about__history__section-one,
212+
.page-about__history__section-three {
213+
grid-template-columns: 450px 1fr;
214+
}
215+
216+
.page-about__history__section-one--image,
217+
.page-about__history__section-three--image {
218+
max-height: 350px;
219+
}
220+
221+
.page-about__history__section-two--image {
222+
height: 375px;
223+
}
117224
}
118225
}

0 commit comments

Comments
 (0)