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

Merge pull request #6 from bartlomiej-pluta/news

Browse Source 
Create news section
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-10 09:50:17 +02:00
committed by GitHub
parent 4bda64b9f7 0902ed2bc1
commit fc4b091d2f
5 changed files with 154 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/index.html
View File

@@ -107,6 +107,7 @@
</div>
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
@@ -405,6 +406,98 @@
</div>
</div>
</section>
<section class="news">
<div class="container">
<div class="row">
<div class="col-4">
<p class="news__title">
New in Release 2.8
</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>
</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>
</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
</p>
</div>
<button class="rect-button rect-button--small">Go to Release Log</button>
</div>
<div class="col-4">
<p class="news__title">
Popular Extensions
</p>
<div class="news-entry">
<a href="#" class="news-entry__title">Custom Themes 1.1</a>
<p class="news-entry__content">
Etiam viverra vulputate diam, pulvinar cursus augue egestas ullamcorper.
</p>
</div>
<div class="news-entry">
<a href="#" class="news-entry__title">Filter Forge</a>
<p class="news-entry__content">
Nulla purus quam, pulvinar sed et, feugiat maximus velit.
</p>
</div>
<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.
</p>
</div>
<div class="news-entry">
<a href="#" class="news-entry__title">Renamy</a>
<p class="news-entry__content">
Vivamus consectetur suscipit elit, ut lacinia diam elementum et.
</p>
</div>
<button class="rect-button rect-button--small">Go to Marketplace</button>
</div>
<div class="col-4">
<p class="news__title">
New From the Blog
</p>
<div class="news-entry">
<a href="#" class="news-entry__title">Morbi imperdiet, leo in interdum pretium.</a>
<p class="news-entry__content">
February 18, 2015
</p>
</div>
<div class="news-entry">
<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>
</div>
<div class="news-entry">
<a href="#" class="news-entry__title">Suspendisse egestas vulputate luctus.</a>
<p class="news-entry__content">
February 6, 2015
</p>
</div>
<div class="news-entry">
<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>
</div>
<div class="news-entry">
<a href="#" class="news-entry__title">Phasellus in augue risus.</a>
<p class="news-entry__content">
January 23, 2015
</p>
</div>
<button class="rect-button rect-button--small">Go to Blog</button>
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript -->

14
src/scss/_buttons.scss
View File

@@ -81,6 +81,20 @@
&--fixed-width {
width: 240px;
}
&--small {
background-color: $background-light;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 14px;
color: $primary;
transition: $hover-duration;
&:hover {
background-color: darken($background-light, $hover-threshold);
transition: $hover-duration;
}
}
}
.rect-button__icon {

44
src/scss/_news.scss Normal file
View File

@@ -0,0 +1,44 @@
.news {
padding-top: 70px;
}
.news__title {
margin-bottom: 50px;
font-family: Montserrat, sans-serif;
font-weight: bold;
font-size: 28px;
color: $lightgray-text;
}
.news-entry {
margin-bottom: 30px;
}
.news-entry__brief {
font-family: Montserrat, sans-serif;
font-size: 16px;
color: $dark-text;
font-weight: 600;
}
.news-entry__title {
font-family: Montserrat, sans-serif;
font-size: 16px;
color: $primary;
font-weight: 600;
transition: $hover-duration;
&:hover {
color: darken($primary, $hover-threshold);
transition: $hover-duration;
text-decoration: none;
}
}
.news-entry__content {
margin-top: 15px;
font-family: Montserrat, sans-serif;
font-size: 13px;
color: $regular-text;
font-weight: 500;
}

1
src/scss/_variables.scss
View File

@@ -5,6 +5,7 @@ $regular-text: #848e97;
$dark-text: #323232;
$light-text: #a291a5;
$gray-text: #c8cbcf;
$lightgray-text: #d3d1da;
$background-light: #f4f4f4;
$background-violet: #4a3b4e;

3
src/scss/style.scss
View File

@@ -13,4 +13,5 @@
@import "testimonials";
@import "pricing";
@import "newsletter";
@import "form";
@import "form";
@import "news";