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

Create footer

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-04-10 10:57:37 +02:00
parent fc4b091d2f
commit 92016ebdc5
5 changed files with 140 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/index.html
View File

@@ -30,10 +30,10 @@
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<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 class="brand navbar-header">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span>
<span class="brand__name brand__name--emph">IO</span>
</div>
<ul class="navbar__body navbar-nav">
<li class="nav-item">
@@ -415,16 +415,20 @@
</p>
<div class="news-entry">
<p class="news-entry__brief">Fully Available: Live Preview Support for Multiple Browsers</p>
<p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
<p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam
tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl
nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
</div>
<div class="news-entry">
<p class="news-entry__brief">Improved Support for Typing</p>
<p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit. Donec eu elit mauris. </p>
<p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit.
Donec eu elit mauris. </p>
</div>
<div class="news-entry">
<p class="news-entry__brief">Improved Stability</p>
<p class="news-entry__content">
Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel, iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel,
iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
</p>
</div>
<button class="rect-button rect-button--small">Go to Release Log</button>
@@ -448,7 +452,8 @@
<div class="news-entry">
<a href="#" class="news-entry__title">WebZap</a>
<p class="news-entry__content">
Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam vitae orci. Suspendisse interdum accumsan magna vitae commodo.
Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam
vitae orci. Suspendisse interdum accumsan magna vitae commodo.
</p>
</div>
<div class="news-entry">
@@ -470,7 +475,8 @@
</p>
</div>
<div class="news-entry">
<a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit leo.</a>
<a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit
leo.</a>
<p class="news-entry__content">
February 12, 2015
</p>
@@ -482,7 +488,8 @@
</p>
</div>
<div class="news-entry">
<a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a egestas.</a>
<a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a
egestas.</a>
<p class="news-entry__content">
February 2, 2015
</p>
@@ -498,6 +505,45 @@
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer__about col-4">
<div class="brand">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span>
<span class="brand__name brand__name--emph">IO</span>
</div>
<p class="footer__about__description">
Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
</p>
</div>
<div class="footer__nav col-2">
<p class="footer__nav__title">Navigation</p>
<ul class="footer__nav__navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Buying options</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="footer__contact col-3">
<p class="footer__contact__phone">347 567 78 90</p>
<p class="footer__contact__availability">Available from 12PM - 18PM</p>
<p class="footer__contact__city">New York, NY</p>
<p class="footer__contact__address">560 Judah St & 15th Ave, Apt 5<br/>San Francisco, CA, 230903</p>
</div>
<div class="footer__info col-3">
<p class="footer__info__title">Info</p>
<p class="footer__info__description">
Wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex commodo consequat. Autem vel hendrerit iriure dolor in hendrerit.
</p>
</div>
</div>
</div>
</footer>
</div>
<!-- JavaScript -->

22
src/scss/_brand.scss Normal file
View File

@@ -0,0 +1,22 @@
.brand {
display: flex;
}
.brand__logo {
height: 45px;
margin-right: 17px;
}
.brand__name {
font-family: Lato, sans-serif;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
display: inline-flex;
align-items: center;
&--emph {
color: $primary;
font-style: normal;
}
}

59
src/scss/_footer.scss Normal file
View File

@@ -0,0 +1,59 @@
.footer {
margin-top: 65px;
padding-top: 65px;
border-top: solid 1px $background-light;
margin-bottom: 95px;
&__about {
&__description {
margin-top: 30px;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}
}
&__nav {
&__title {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 16px;
color: $dark-text;
}
&__navbar {
padding-left: 0;
list-style-type: none;
& > li > a {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 15px;
color: $primary;
transition: $hover-duration;
&:hover {
color: darken($primary, $hover-threshold);
transition: $hover-duration;
text-decoration: none;
}
}
}
}
&__info {
&__title {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 16px;
color: $dark-text;
}
&__description {
margin-top: 25px;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}
}
}

24
src/scss/_navbar.scss
View File

@@ -13,30 +13,6 @@ $shrinking-duration: 0.4s;
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;

4
src/scss/style.scss
View File

@@ -3,6 +3,7 @@
@import "global";
@import "author";
@import "navbar";
@import "brand";
@import "header";
@import "download";
@import "editor";
@@ -14,4 +15,5 @@
@import "pricing";
@import "newsletter";
@import "form";
@import "news";
@import "news";
@import "footer";