Skip to content

Commit 1f98975

Browse files
emilbaehremilbaehr
committed
Added a features section
1 parent 1f3af37 commit 1f98975

File tree

6 files changed

+176
-20
lines changed

6 files changed

+176
-20
lines changed

‎_includes/features.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<div class="features">
2+
<div class="feature">
3+
<div class="featureIcon">
4+
<span class="fa-stack fa-1x">
5+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
6+
<i class="iconTop fas fa-mobile fa-stack-1x"></i>
7+
</span>
8+
</div>
9+
<div class="featureText">
10+
<h4>
11+
Feature 1
12+
</h4>
13+
<p>
14+
Use Siri Shortcuts and x-callback-url for automation.
15+
</p>
16+
</div>
17+
</div>
18+
19+
<div class="feature">
20+
<div class="featureIcon">
21+
<span class="fa-stack fa-1x">
22+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
23+
<i class="iconTop fas fa-adjust fa-stack-1x"></i>
24+
</span>
25+
</div>
26+
<div class="featureText">
27+
<h4>
28+
Feature 2
29+
</h4>
30+
<p>
31+
Kiwi that well dolphin alas this the mindfully jeepers.
32+
</p>
33+
</div>
34+
</div>
35+
36+
<div class="feature">
37+
<div class="featureIcon">
38+
<span class="fa-stack fa-1x">
39+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
40+
<i class="iconTop fas fa-cloud fa-stack-1x"></i>
41+
</span>
42+
</div>
43+
<div class="featureText">
44+
<h4>
45+
Feature 3
46+
</h4>
47+
<p>
48+
One preparatory up less therefore hello oh amid.
49+
</p>
50+
</div>
51+
</div>
52+
53+
<div class="feature">
54+
<div class="featureIcon">
55+
<span class="fa-stack fa-1x">
56+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
57+
<i class="iconTop fas fa-expand-arrows-alt fa-stack-1x"></i>
58+
</span>
59+
</div>
60+
<div class="featureText">
61+
<h4>
62+
Feature 3
63+
</h4>
64+
<p>
65+
Use Siri Shortcuts and x-callback-url for automation.
66+
</p>
67+
</div>
68+
</div>
69+
70+
<div class="feature">
71+
<div class="featureIcon">
72+
<span class="fa-stack fa-1x">
73+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
74+
<i class="iconTop fas fa-history fa-stack-1x"></i>
75+
</span>
76+
</div>
77+
<div class="featureText">
78+
<h4>
79+
Feature 5
80+
</h4>
81+
<p>
82+
Use Siri Shortcuts and x-callback-url for automation.
83+
</p>
84+
</div>
85+
</div>
86+
87+
<div class="feature">
88+
<div class="featureIcon">
89+
<span class="fa-stack fa-1x">
90+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
91+
<i class="iconTop fas fa-database fa-stack-1x"></i>
92+
</span>
93+
</div>
94+
<div class="featureText">
95+
<h4>
96+
Feature 6
97+
</h4>
98+
<p>
99+
Use Siri Shortcuts and x-callback-url for automation.
100+
</p>
101+
</div>
102+
</div>
103+
</div>

‎_includes/footer.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
<footer>
2-
<p class="footerText">Made by <a href="http://emilbaehr.com">Emil Baehr</a> in Copenhagen</p>
2+
<p class="footerText">Designed and developed by <a href="http://emilbaehr.com">Emil Baehr</a> in Copenhagen</p>
3+
<div class="footerIcons">
4+
<div class="facebookIcon">
5+
<span class="fa-stack fa-1x">
6+
<i class="iconBack fas fa-circle fa-stack-2x"></i>
7+
<i class="iconTop fab fa-facebook fa-stack-1x"></i>
8+
</span>
9+
</div>
10+
</div>
311
</footer>

‎_includes/head.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
77

8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
89
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
910
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
1011
</head>

‎_includes/header.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11

22
<header>
33
<div class="logo">
4-
<svg width="0" height="0">
5-
<defs>
6-
<clipPath id="shape">
7-
<path id="Rectangle" class="cls-1" d="M6181.23,233.709v-1.792c0-.5-0.02-1-0.02-1.523a24.257,24.257,0,0,0-.28-3.3,11.207,11.207,0,0,0-1.04-3.132,10.683,10.683,0,0,0-1.95-2.679,10.384,10.384,0,0,0-2.68-1.943,10.806,10.806,0,0,0-3.13-1.038,19.588,19.588,0,0,0-3.3-.285c-0.5-.017-1-0.017-1.52-0.017h-22.39c-0.51,0-1.01.017-1.53,0.017a24.041,24.041,0,0,0-3.3.285,11.009,11.009,0,0,0-3.13,1.038,10.491,10.491,0,0,0-4.62,4.622,10.893,10.893,0,0,0-1.04,3.132,19.2,19.2,0,0,0-.28,3.3c-0.02.5-.02,1-0.02,1.523v22.392c0,0.5.02,1,.02,1.524a24.257,24.257,0,0,0,.28,3.3,10.9,10.9,0,0,0,1.04,3.132,10.491,10.491,0,0,0,4.62,4.622,11.04,11.04,0,0,0,3.13,1.038,19.891,19.891,0,0,0,3.3.285c0.51,0.017,1.01.017,1.53,0.017h22.39c0.5,0,1-.017,1.52-0.017a24.221,24.221,0,0,0,3.3-.285,10.836,10.836,0,0,0,3.13-1.038,10.408,10.408,0,0,0,2.68-1.943,10.683,10.683,0,0,0,1.95-2.679,11.217,11.217,0,0,0,1.04-3.132,20.257,20.257,0,0,0,.28-3.3c0.02-.5.02-1,0.02-1.524v-20.6h0Z" transform="translate(-6131 -218)"/>
8-
</clipPath>
9-
</defs>
10-
</svg>
11-
<img class="headerIcon" src="/assets/appicon-1024px.png">
4+
<div class="appIconShadow">
5+
<svg width="0" height="0">
6+
<defs>
7+
<clipPath id="shape">
8+
<path id="Rectangle" class="cls-1" d="M6181.23,233.709v-1.792c0-.5-0.02-1-0.02-1.523a24.257,24.257,0,0,0-.28-3.3,11.207,11.207,0,0,0-1.04-3.132,10.683,10.683,0,0,0-1.95-2.679,10.384,10.384,0,0,0-2.68-1.943,10.806,10.806,0,0,0-3.13-1.038,19.588,19.588,0,0,0-3.3-.285c-0.5-.017-1-0.017-1.52-0.017h-22.39c-0.51,0-1.01.017-1.53,0.017a24.041,24.041,0,0,0-3.3.285,11.009,11.009,0,0,0-3.13,1.038,10.491,10.491,0,0,0-4.62,4.622,10.893,10.893,0,0,0-1.04,3.132,19.2,19.2,0,0,0-.28,3.3c-0.02.5-.02,1-0.02,1.523v22.392c0,0.5.02,1,.02,1.524a24.257,24.257,0,0,0,.28,3.3,10.9,10.9,0,0,0,1.04,3.132,10.491,10.491,0,0,0,4.62,4.622,11.04,11.04,0,0,0,3.13,1.038,19.891,19.891,0,0,0,3.3.285c0.51,0.017,1.01.017,1.53,0.017h22.39c0.5,0,1-.017,1.52-0.017a24.221,24.221,0,0,0,3.3-.285,10.836,10.836,0,0,0,3.13-1.038,10.408,10.408,0,0,0,2.68-1.943,10.683,10.683,0,0,0,1.95-2.679,11.217,11.217,0,0,0,1.04-3.132,20.257,20.257,0,0,0,.28-3.3c0.02-.5.02-1,0.02-1.524v-20.6h0Z" transform="translate(-6131 -218)"/>
9+
</clipPath>
10+
</defs>
11+
</svg>
12+
<img class="headerIcon" src="/assets/appicon-1024px.png">
13+
</div>
1214
<h4>Your App</h4>
1315
</div>
1416
<nav>

‎_sass/layout.scss

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ body {
99
height: 768px;
1010
background:
1111
linear-gradient(
12-
rgba(#363b3d, 0.3),
13-
rgba(#363b3d, 0.3)
12+
rgba(#363b3d, 0.6),
13+
rgba(#363b3d, 0.6)
1414
),
1515
/* bottom, image */
1616
url("/assets/headerimage.png");
@@ -35,7 +35,7 @@ body {
3535
padding-right: 15px;
3636
grid-column-gap: 50px;
3737
grid-template-columns: repeat(12, 1fr);
38-
grid-template-rows: 115px 960px 1000px 200px;
38+
grid-template-rows: 115px 960px auto auto;
3939
grid-column-gap: 30px;
4040
grid-template-areas:
4141
"h h h h h h h h h h h h"
@@ -112,7 +112,7 @@ nav > ul li a {
112112
margin: 0px;
113113
padding: 0px;
114114
display: flex;
115-
filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1));
115+
filter: drop-shadow(0px 5px 10px rgba(#000, 0.1)) drop-shadow(0px 1px 1px rgba(#000, 0.2));
116116
}
117117

118118
.appIconLarge {
@@ -162,10 +162,6 @@ nav > ul li a {
162162
margin-left: 24px;
163163
}
164164

165-
.appStore > img {
166-
box-shadow: 0px 0px 1px 3px rgba(0, 0, 0, 1), 0px 0px 5px 10px rgba(0, 0, 0, 1);
167-
}
168-
169165
.playStore {
170166
}
171167

@@ -186,15 +182,62 @@ box-shadow: 0px 0px 1px 3px rgba(0, 0, 0, 1), 0px 0px 5px 10px rgba(0, 0, 0, 1);
186182

187183
.features {
188184
grid-area: c;
189-
background-color:rgb(255, 208, 0);
185+
display: flex;
186+
flex: 0 1 auto;
187+
align-content: flex-start;
188+
justify-content: space-between;
189+
flex-grow: 1;
190+
flex-wrap: wrap;
191+
}
192+
193+
.feature {
194+
display: flex;
195+
padding-top: 93px;
196+
width: calc(100%/3 - 30px);
197+
}
198+
199+
.featureIcon {
200+
font-size: 40px;
201+
}
202+
203+
.iconBack {
204+
color: rgba(#000000, 0.1);
205+
}
206+
207+
.iconTop {
208+
color: #1d63ea;
209+
}
210+
211+
.featureText {
212+
margin-left: 18px;
213+
}
214+
215+
.featureText > p {
216+
margin-top: 8px;
217+
line-height: 1.5;
218+
}
219+
220+
.featureText * {
221+
margin: 0px;
222+
padding: 0px;
190223
}
191224

192225
footer {
193226
grid-area: f;
194227
display: flex;
228+
flex-wrap: wrap;
229+
flex: 0 1 auto;
195230
justify-content: center;
231+
align-content: center;
196232
}
197233

198234
.footerText {
235+
width: 100%;
236+
padding-top: 100px;
237+
padding-bottom: 100px;
199238
margin: 0px;
239+
}
240+
241+
.footerIcons {
242+
display: flex;
200243
}

‎index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@ <h4 class ="appDescription">
5454
</div>
5555
</div>
5656

57-
<div class="features">
58-
</div>
57+
{% include features.html %}
5958

6059
{% include footer.html %}
6160
</div>

0 commit comments

Comments
 (0)