bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix header

Browse Source
This commit is contained in:
Bartłomiej Pluta (PGS Software)
2018-05-17 09:55:39 +02:00
parent 5532b9e015
commit c18b26e613
6 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/img/header/img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 464 KiB

After

Width:  |  Height:  |  Size: 400 KiB

3
src/index.html
View File

@@ -63,11 +63,12 @@
</div> </div>
<header class="header"> <header class="header">
<div> <div class="header__text">
<p class="header__title">Fork app</p> <p class="header__title">Fork app</p>
<p class="header__subtitle">A real gamechanger in the world of web development</p> <p class="header__subtitle">A real gamechanger in the world of web development</p>
<p class="header__description">V. 2.8 for Mac and Windows</p> <p class="header__description">V. 2.8 for Mac and Windows</p>
</div> </div>
<div class="header__image">&nbsp;</div>
</header> </header>
<div class="download"> <div class="download">
<a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated"> <a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">

4
src/scss/_buttons.scss Normal file → Executable file
View File

@@ -24,6 +24,10 @@
@extend .rounded-button--strong; @extend .rounded-button--strong;
font-size: 21px; font-size: 21px;
padding: 15px 60px; padding: 15px 60px;
@media all and (max-width: $phone) {
font-size: 14px;
}
} }
&--uppercase { &--uppercase {

0
src/scss/_download.scss Normal file → Executable file
View File

40
src/scss/_header.scss Normal file → Executable file
View File

@@ -1,7 +1,21 @@
.header { .header {
background: black url(../img/header/img.png) no-repeat center 120px/ cover;
height: 100vh; height: 100vh;
padding-top: 110px; padding-top: 110px;
width: 100%;
display: table;
background: $hero-background;
min-width: 320px;
}
.header__text {
display: table-row;
background: $hero-background;
}
.header__image {
background: $hero-background url(../img/header/img.png) no-repeat center top / cover;
display: table-row;
height: 100%;
} }
.header__title { .header__title {
@@ -19,13 +33,7 @@
color: $primary; color: $primary;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
} padding: 0 10px;
@media all and (max-width: $phone) {
.header__subtitle {
font-size: 24px;
text-transform: capitalize;
}
} }
.header__description { .header__description {
@@ -37,3 +45,19 @@
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
} }
@media all and (max-width: $tablet) {
.header__title {
font-size: 60px;
}
.header__subtitle {
font-size: 20px;
text-transform: capitalize;
}
.header__description {
font-size: 14px;
}
}

2
src/scss/_variables.scss
View File

@@ -7,6 +7,8 @@ $light-text: #a291a5;
$gray-text: #c8cbcf; $gray-text: #c8cbcf;
$lightgray-text: #d3d1da; $lightgray-text: #d3d1da;
$hero-background: #010005;
$background-light: #f4f4f4; $background-light: #f4f4f4;
$background-violet: #4a3b4e; $background-violet: #4a3b4e;