Skip to content

Commit e51920c

Browse files
emilbaehremilbaehr
committed
Styled navigation, adjusted font sizes, added background images and icon
1 parent ca29ab4 commit e51920c

File tree

10 files changed

+122
-26
lines changed

10 files changed

+122
-26
lines changed

‎_includes/header.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11

22
<header>
33
<div class="logo">
4-
<h3>Your App</h3>
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">
12+
<h4>Your App</h4>
513
</div>
614
<nav>
715
<ul>

‎_sass/base.scss‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
// Layout and grids
12
$content-width: 1170px;
3+
4+
// Colors
25
$accent-color: #00ff33;
36

7+
// Fonts and sizes
48
$font: 'Helvetica Neue', sans-serif;
59
$primary-text-color: #000;
6-
$secondary-text-color: #000;
7-
8-
$link-color: #00ff33;
9-
$link-color-hover: #00ff33;
1010

1111
*,
1212
*::before,
@@ -16,7 +16,31 @@ $link-color-hover: #00ff33;
1616
box-sizing: border-box;
1717
}
1818

19-
* {
20-
-webkit-font-smoothing: antialiased;
19+
html {
20+
font-size: 62.5%;
21+
}
22+
23+
body {
24+
font-size: 2rem;
25+
}
26+
27+
h1 {
28+
font-size: 6rem;
29+
}
30+
31+
h2 {
32+
font-size: 4rem;
33+
}
34+
35+
h3 {
36+
font-size: 3rem;
37+
}
38+
39+
h4 {
40+
font-size: 2rem;
41+
}
42+
43+
body {
44+
-webkit-font-smoothing: antialiased; // Better font rendering
2145
-moz-osx-font-smoothing: grayscale;
2246
}

‎_sass/layout.scss‎

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,29 @@ body {
22
box-sizing: border-box;
33
margin: 0;
44
font-family: $font;
5-
font-size: 1.1em;
5+
}
6+
7+
.imageWrapper {
8+
width: 100%;
9+
height: 500px;
10+
background:
11+
linear-gradient(
12+
rgba(#363b3d, 0.3),
13+
rgba(#363b3d, 0.3)
14+
),
15+
/* bottom, image */
16+
url("/assets/headerimage.png");
17+
18+
background-repeat: no-repeat;
19+
background-size: auto 100%;
20+
background-position: top;
21+
border-radius: 0px 0px 40px 40px;
22+
}
23+
24+
.headerBackground {
25+
width: 100%;
26+
height: 115px;
27+
background-color: rgba(#000000, 0.1);
628
}
729

830
.container {
@@ -13,7 +35,7 @@ body {
1335
padding-right: 15px;
1436
grid-column-gap: 50px;
1537
grid-template-columns: repeat(12, 1fr);
16-
grid-template-rows: 500px 1000px 200px;
38+
grid-template-rows: 590px 1000px 200px;
1739
grid-column-gap: 30px;
1840
grid-template-areas:
1941
"h h h h h h h h h h h h"
@@ -23,38 +45,60 @@ body {
2345

2446
header {
2547
grid-area: h;
26-
background-color:rgb(0, 255, 13);
27-
2848
display: grid;
29-
grid-template-columns: repeat(2, 1fr);
30-
grid-template-areas: "logo nav";
49+
grid-template-columns: repeat(12, 1fr);
50+
grid-template-rows: 115px 590px;
3151
}
3252

3353
.logo {
34-
grid-area: logo;
54+
grid-column: 1 / span 6;
3555
display: flex;
3656
justify-content: flex-start;
3757
align-items: center;
38-
height: 60px;
39-
background-color: rgb(56, 56, 56);
58+
color: #fff;
59+
height: 115px;
60+
}
61+
62+
.headerIcon {
63+
width: 50px;
64+
height: 50px;
65+
-webkit-clip-path: url(#shape);
66+
clip-path: url(#shape);
67+
margin-right: 15px;
4068
}
4169

4270
nav {
43-
grid-area: nav;
71+
grid-column: 7 / span 6;
4472
display: flex;
4573
justify-content: flex-end;
4674
align-items: center;
47-
height: 60px;
48-
background-color: #000;
75+
color: #fff;
76+
height: 115px;
4977
}
5078

5179
nav > ul {
5280
display: flex;
5381
list-style-type: none;
82+
padding: 0px;
83+
}
84+
85+
nav > ul li {
86+
padding-left: 50px;
87+
}
88+
89+
nav > ul li:first-child {
90+
padding-left: 0px;
91+
}
92+
93+
nav > ul li a {
94+
text-decoration: none;
95+
color: #fff;
5496
}
5597

56-
nav > ul li:nth-last-child(1n-1) {
57-
padding-left: 30px;
98+
.iphonePreview {
99+
grid-column: 1 / span 6;
100+
grid-row: 2 / span 1;
101+
background-color: #000000;
58102
}
59103

60104
.features {

‎assets/appicon-1024px.png‎

67.9 KB
Loading

‎assets/appstore.png‎

13.8 KB
Loading

‎assets/headerimage.png‎

1.9 MB
Loading

‎assets/layout.png‎

1.62 MB
Loading

‎assets/playstore.png‎

17.8 KB
Loading

‎assets/squircle.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,23 @@
77
{% include head.html %}
88

99
<body>
10-
<div class="container">
11-
{% include header.html %}
10+
<div class="imageWrapper">
11+
<div class="headerBackground">
12+
<div class="container">
13+
{% include header.html %}
1214

13-
<div class="features">
14-
</div>
15+
<div class="iphonePreview">
16+
</div>
17+
18+
<div class="appInfo">
19+
</div>
20+
21+
<div class="features">
22+
</div>
1523

16-
{% include footer.html %}
24+
{% include footer.html %}
25+
</div>
26+
</div>
1727
</div>
1828
</body>
1929

0 commit comments

Comments
 (0)