Skip to content

Commit e904ae9

Browse files
JoeGermuskaJoeGermuska
committed
improve product grid, maybe not final
1 parent d686905 commit e904ae9

File tree

1 file changed

+119
-31
lines changed

1 file changed

+119
-31
lines changed

‎website/_storytelling_tools.njk‎

Lines changed: 119 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,123 @@
11
<section class="moth--product">
22
<h3>Storytelling Tools</h3>
33
<p class="product-tagline">We build easy-to-use tools that can help you tell better stories.</p>
4-
<div class="grid grid-size-4 grid-size-2-tablet grid-size-1-phone">
5-
<div class="grid-item">
6-
<a href="http://timeline.knightlab.com/" class="button button-dark">
7-
<img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png">
8-
<h4 class="product-logo product-logo-small">Timeline <span>JS</span></h4>
9-
<p class="product-tagline">Easy-to-make, beautiful timelines.</p>
10-
</a>
11-
</div>
12-
<div class="grid-item">
13-
<a href="http://storymap.knightlab.com/" class="button button-dark">
14-
<img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-storymap.png">
15-
<h4 class="product-logo product-logo-small">StoryMap <span>JS</span></h4>
16-
<p class="product-tagline">Maps that tell stories.</p>
17-
</a>
18-
</div>
19-
<div class="grid-item">
20-
<a href="http://juxtapose.knightlab.com/" class="button button-dark">
21-
<img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-juxtapose.jpg">
22-
<h4 class="product-logo product-logo-small">Juxtapose <span>JS</span></h4>
23-
<p class="product-tagline">Easy-to-make frame comparisons.</p>
24-
</a>
25-
</div>
26-
<div class="grid-item">
27-
<a href="http://soundcite.knightlab.com/" class="button button-dark">
28-
<img class="img-rounded" src="https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-soundcite.png">
29-
<h4 class="product-logo product-logo-small">Soundcite <span>JS</span></h4>
30-
<p class="product-tagline">Seamless inline audio.</p>
31-
</a>
32-
</div>
33-
</div>
34-
<a href="http://knightlab.northwestern.edu/projects/" class="button button-dark" style="margin-top:1rem;z-index:22;">View More</a>
4+
<div class="container-fluid">
5+
<div class="cards cards--3">
6+
<div class="card">
7+
<a
8+
href="http://juxtapose.knightlab.com/?_gl=1*yif1ti*_ga*MTIwMjk5MTM1Ni4xNzQxMTAzMDUx*_ga_8F4WPDMPL5*czE3NDkwNTc1NDUkbzIwJGcwJHQxNzQ5MDU3NTQ1JGo2MCRsMCRoMA.."
9+
>
10+
<header class="header-image">
11+
<div
12+
class="header-image-background"
13+
style="
14+
background-image: url(https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-juxtapose.jpg);
15+
"
16+
></div>
17+
</header>
18+
<article>
19+
<h3 class="product-logo product-logo-smaller">
20+
Juxtapose <span>JS</span>
21+
</h3>
22+
<p class="product-tagline">Easy-to-make frame comparisons.</p>
23+
</article>
24+
</a>
25+
</div>
26+
27+
<div class="card">
28+
<a href="https://scene.knightlab.com/">
29+
<header class="header-image">
30+
<div
31+
class="header-image-background"
32+
style="
33+
background-image: url(https://media.knightlab.com/scenevr/screenshot-scenevr.jpg);
34+
"
35+
></div>
36+
</header>
37+
<article>
38+
<h3 class="product-logo product-logo-smaller">Scene <span>VR</span></h3>
39+
<p class="product-tagline">Easy-to-make VR stories.</p>
40+
</article>
41+
</a>
42+
</div>
43+
44+
<div class="card">
45+
<a href="http://soundcite.knightlab.com/">
46+
<header class="header-image">
47+
<div
48+
class="header-image-background"
49+
style="
50+
background-image: url(https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-soundcite.png);
51+
"
52+
></div>
53+
</header>
54+
<article>
55+
<h3 class="product-logo product-logo-smaller">
56+
Soundcite <span>JS</span>
57+
</h3>
58+
<p class="product-tagline">Seamless inline audio.</p>
59+
</article>
60+
</a>
61+
</div>
62+
63+
<div class="card">
64+
<a href="http://storyline.knightlab.com/">
65+
<header class="header-image">
66+
<div
67+
class="header-image-background"
68+
style="
69+
background-image: url(https://storyline.knightlab.com/screenshot-storyline.png);
70+
"
71+
></div>
72+
</header>
73+
<article>
74+
<h3 class="product-logo product-logo-smaller">
75+
Storyline <span>JS</span>
76+
</h3>
77+
<p class="product-tagline">Tell the story behind the numbers.</p>
78+
</article>
79+
</a>
80+
</div>
81+
82+
<div class="card">
83+
<a href="http://storymap.knightlab.com/">
84+
<header class="header-image">
85+
<div
86+
class="header-image-background"
87+
style="
88+
background-image: url(https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-storymap.png);
89+
"
90+
></div>
91+
</header>
92+
<article>
93+
<h3 class="product-logo product-logo-smaller">
94+
StoryMap <span>JS</span>
95+
</h3>
96+
<p class="product-tagline">Maps that tell stories.</p>
97+
</article>
98+
</a>
99+
</div>
100+
101+
<div class="card">
102+
<a href="http://timeline.knightlab.com/">
103+
<header class="header-image">
104+
<div
105+
class="header-image-background"
106+
style="
107+
background-image: url(https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-timeline.png);
108+
"
109+
></div>
110+
</header>
111+
<article>
112+
<h3 class="product-logo product-logo-smaller">
113+
Timeline <span>JS</span>
114+
</h3>
115+
<p class="product-tagline">Easy-to-make, beautiful timelines.</p>
116+
</article>
117+
</a>
118+
</div>
119+
</div>
120+
</div>
121+
122+
<a href="https://knightlab.northwestern.edu/projects/" class="button button-dark" style="margin-top:1rem;z-index:22;">View More</a>
35123
</section>

0 commit comments

Comments
 (0)