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

Introduce BEM naming

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-03-19 14:20:05 +01:00
parent 93d3db0fdd
commit 4087a53940
10 changed files with 135 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/img/hero/img.png → src/img/header/img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 464 KiB

After

Width:  |  Height:  |  Size: 464 KiB

41
src/index.html
View File

@@ -23,44 +23,47 @@
</head>
<body>
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-lg sticky-top" id="nav">
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container-fluid">
<div class="navbar-header" id="navbar-header">
<img src="img/logo.svg" alt="Forkio logo">
<span class="navbar-brand">Fork<em>IO</em></span>
<div class="navbar__header navbar-header">
<img class="navbar__logo" src="img/logo.svg" alt="Forkio logo">
<span class="navbar__brand">Fork</span>
<span class="navbar__brand navbar__brand--emph">IO</span>
</div>
<ul class="navbar-nav" id="navbar-body">
<ul class="navbar__body navbar-nav">
<li class="nav-item">
<a class="default-link nav-link" href="#">Overview</a>
<a class="navbar__link nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="default-link nav-link" href="#">About fork</a>
<a class="navbar__link nav-link" href="#">About fork</a>
</li>
<li class="nav-item">
<a class="default-link nav-link" href="#">Buying options</a>
<a class="navbar__link nav-link" href="#">Buying options</a>
</li>
<li class="nav-item">
<a class="default-link nav-link" href="#">Support</a>
<a class="navbar__link nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="raised-button nav-link" href="#">Buy now</a>
<a href="#">
<button class="rounded-button rounded-button--strong">Buy now</button>
</a>
</li>
</ul>
</div>
</nav>
<header id="hero">
<!--<img src="img/hero/img.png">-->
<header class="header">
<div>
<h1>Fork app</h1>
<h2>A real gamechanger in the world of web development</h2>
<h3>V. 2.8 for Mac and Windows</h3>
<p class="header__h1">Fork app</p>
<p class="header__h2">A real gamechanger in the world of web development</p>
<p class="header__h3">V. 2.8 for Mac and Windows</p>
</div>
</header>
<section id="download">
<a href="#" class="raised-button">Download for free now</a>
<p>Unlimited 30-Days trial period</p>
<section class="download">
<a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">
Download for free now
</a>
<p class="download__description">Unlimited 30-Days trial period</p>
</section>
</div>

4
src/js/script.js
View File

@@ -5,9 +5,9 @@ $(document).ready(function () {
scrollTop = $(window).scrollTop();
if (scrollTop >= 100) {
$('#nav').addClass('shrink');
$('.navbar').addClass('navbar--shrink');
} else if (scrollTop < 100) {
$('#nav').removeClass('shrink');
$('.navbar').removeClass('navbar--shrink');
}
});
});

32
src/scss/_buttons.scss
View File

@@ -1,16 +1,28 @@
a.raised-button {
$hover-transition-duration: 0.4s;
.rounded-button {
padding: 7px 35px;
background-color: $primary;
font-family: Montserrat, sans-serif;
color: white;
border: none;
border-radius: 30px;
transition: $hover-transition-duration;
&:hover {
background-color: $primary-dark;
transition: $hover-transition-duration;
text-decoration: none;
}
transition: $hover-duration;
}
.rounded-button:hover {
background-color: $primary-light;
transition: $hover-duration;
text-decoration: none;
color: white;
cursor: pointer;
}
.rounded-button--strong {
font-weight: bold;
text-transform: capitalize;
}
.rounded-button--very-strong {
@extend .rounded-button--strong;
font-size: 21px;
padding: 15px 60px;
}

33
src/scss/_download.scss
View File

@@ -1,20 +1,17 @@
#download {
.download {
text-align: center;
a.raised-button {
position: absolute;
transform: translate(-50%, -50%);
font-size: 21px;
font-weight: bold;
text-transform: capitalize;
padding: 15px 60px;
}
p {
padding-top: 45px;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
text-transform: capitalize;
}
}
.download__rounded-button--translated {
position: absolute;
transform: translate(-50%, -50%);
}
.download__description {
padding-top: 45px;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: $regular-text;
text-transform: capitalize;
}

32
src/scss/_header.scss Normal file
View File

@@ -0,0 +1,32 @@
.header {
background: url(../img/header/img.png) no-repeat 50% 30% / cover;
height: 900px;
padding-top: 110px;
}
.header__h1 {
font-family: Montserrat, sans-serif;
font-size: 82px;
font-weight: bold;
color: white;
text-transform: capitalize;
text-align: center;
}
.header__h2 {
font-family: Lato, sans-serif;
font-size: 30px;
color: $primary;
text-align: center;
margin-bottom: 0;
}
.header__h3 {
margin-top: 20px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $regular-text;
text-transform: uppercase;
text-align: center;
}

32
src/scss/_hero.scss
View File

@@ -1,32 +0,0 @@
#hero {
background: url(../img/hero/img.png) no-repeat 50% 40% / contain;
height: 900px;
padding-top: 110px;
h1 {
font-family: Montserrat, sans-serif;
font-size: 82px;
font-weight: bold;
color: white;
text-transform: capitalize;
text-align: center;
}
h2 {
font-family: Lato, sans-serif;
font-size: 30px;
color: $primary;
text-align: center;
margin-bottom: 0;
}
h3 {
margin-top: 20px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $regular-text;
text-transform: uppercase;
text-align: center;
}
}

93
src/scss/_navbar.scss
View File

@@ -1,54 +1,53 @@
#nav {
$shrinking-duration: 0.4s;
$shrinking-duration: 0.4s;
.navbar {
margin: 0 0;
padding: 0 90px;
height: 100px;
background-color: white;
transition: height $shrinking-duration;
&.shrink {
height: 50px;
transition: height $shrinking-duration;
}
#navbar-header {
display: flex;
justify-content: center;
img {
height: 45px;
}
span {
margin-left: 17px;
font-family: Lato, sans-serif;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
em {
color: $primary;
font-style: normal;
}
}
}
#navbar-body {
a {
text-transform: capitalize;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: bolder;
}
a.default-link {
margin: 0 20px;
color: $primary-dark;
}
a.raised-button {
@extend .raised-button
}
}
}
.navbar--shrink {
height: 50px;
transition: height $shrinking-duration;
}
.navbar__header {
display: flex;
justify-content: center;
}
.navbar__logo {
height: 45px;
margin-right: 17px;
}
.navbar__brand {
font-family: Lato, sans-serif;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
display: inline-flex;
align-items: center;
}
.navbar__brand--emph {
color: $primary;
font-style: normal;
}
.navbar__link {
text-transform: capitalize;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: bolder;
margin: 0 20px;
color: $primary-dark;
transition: $hover-duration;
}
.navbar__link:hover {
color: $primary;
transition: $hover-duration;
}

3
src/scss/_variables.scss
View File

@@ -1,3 +1,6 @@
$primary: #8d81ac;
$primary-dark: #635c73;
$primary-light: #a599c8;
$regular-text: #848e97;
$hover-duration: 0.3s;

2
src/scss/style.scss
View File

@@ -1,5 +1,5 @@
@import "variables";
@import "buttons";
@import "navbar";
@import "hero";
@import "header";
@import "download";