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

Compare commits

merge into: bartek:testimonials
Branches Tags
bartek:master bartek:review-improvement bartek:rwd-footer bartek:rwd-news bartek:rwd-newsletter bartek:rwd-pricing bartek:rwd-testimonials bartek:rwd-social bartek:rwd-about bartek:rwd-navbar bartek:rwd bartek:cross-browser bartek:footer bartek:news bartek:newsletter bartek:pricing bartek:testimonials bartek:review-1
...
pull from: bartek:cross-browser
Branches Tags
bartek:master bartek:review-improvement bartek:rwd-footer bartek:rwd-news bartek:rwd-newsletter bartek:rwd-pricing bartek:rwd-testimonials bartek:rwd-social bartek:rwd-about bartek:rwd-navbar bartek:rwd bartek:cross-browser bartek:footer bartek:news bartek:newsletter bartek:pricing bartek:testimonials bartek:review-1

17 Commits
testimonia ... cross-brow

Author SHA1 Message Date
Bartlomiej Pluta (PGS Software)
ac9d30253c Fix errors raported by W3C validator 2018-04-10 12:33:24 +02:00
Bartlomiej Pluta (PGS Software)
2a10237171 Fix header 2018-04-10 12:12:07 +02:00
Bartlomiej Pluta (PGS Software)
f29c45d28b Fix Download button 2018-04-10 11:29:39 +02:00
Bartlomiej Pluta (PGS Software)
09d7258400 Fix footer 2018-04-10 11:29:10 +02:00
Bartłomiej Przemysław Pluta
815d8ba7d3 Merge pull request #7 from bartlomiej-pluta/footer 
Create footer
 2018-04-10 10:58:26 +02:00
Bartlomiej Pluta (PGS Software)
92016ebdc5 Create footer 2018-04-10 10:57:37 +02:00
Bartłomiej Przemysław Pluta
fc4b091d2f Merge pull request #6 from bartlomiej-pluta/news 
Create news section
 2018-04-10 09:50:17 +02:00
Bartlomiej Pluta (PGS Software)
0902ed2bc1 Create news section 2018-04-10 09:44:52 +02:00
Bartlomiej Pluta (PGS Software)
4bda64b9f7 Fix features section 2018-04-10 09:44:30 +02:00
Bartłomiej Przemysław Pluta
4bb13d82c6 Merge pull request #5 from bartlomiej-pluta/newsletter 
Create newsletter section
 2018-04-09 12:14:40 +02:00
Bartlomiej Pluta (PGS Software)
251436500c Create newsletter section 2018-04-09 12:13:36 +02:00
Bartłomiej Przemysław Pluta
beb1929445 Merge pull request #4 from bartlomiej-pluta/pricing 
Pricing
 2018-04-09 10:52:11 +02:00
Bartlomiej Pluta (PGS Software)
06c9f15746 Fix buttons padding 2018-04-09 10:49:32 +02:00
Bartlomiej Pluta (PGS Software)
a5bdf1fcf6 Add footer to pricing section 2018-04-09 10:27:58 +02:00
Bartlomiej Pluta (PGS Software)
d8ff782ad9 Add hover effect 2018-04-09 10:18:40 +02:00
Bartlomiej Pluta (PGS Software)
d3eb3b7ec3 Create pricing section 2018-04-03 15:26:05 +02:00
Bartłomiej Przemysław Pluta
7985979bc2 Merge pull request #2 from bartlomiej-pluta/testimonials 
Create testimonials section
 2018-04-03 13:22:02 +02:00
14 changed files with 588 additions and 59 deletions
Expand all files Collapse all files

276
src/index.html
View File

@@ -28,12 +28,12 @@
</head>
<body>
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-lg sticky-top">
<div class="navbar navbar-expand-lg fixed-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">
@@ -49,13 +49,11 @@
<a class="navbar__link nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a href="#">
<button class="rounded-button rounded-button--strong">Buy now</button>
</a>
<button class="rounded-button rounded-button--strong">Buy now</button>
</li>
</ul>
</div>
</nav>
</div>
<header class="header">
<div>
@@ -64,13 +62,13 @@
<p class="header__description">V. 2.8 for Mac and Windows</p>
</div>
</header>
<section class="download">
<div 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>
<section class="editor">
</div>
<div class="editor">
<div class="container">
<div class="editor__description">
<p class="editor__title">Revolutionary editor</p>
@@ -103,18 +101,18 @@
aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
</p>
</div>
</p>
</div>
</div>
</div>
</section>
<section class="about">
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="about__features col-6">
<div class="row feature">
<div class="col-3 feature__icon">
<img src="img/features/1.png"/>
<img src="img/features/1.png" alt=""/>
</div>
<div class="col-9">
<p class="feature__title">
@@ -127,9 +125,9 @@
</p>
</div>
</div>
<div class="row about__feature">
<div class="row feature">
<div class="col-3 feature__icon">
<img src="img/features/2.png"/>
<img src="img/features/2.png" alt=""/>
</div>
<div class="col-9">
<p class="feature__title">
@@ -142,9 +140,9 @@
</p>
</div>
</div>
<div class="row about__feature">
<div class="row feature">
<div class="col-3 feature__icon">
<img src="img/features/3.png"/>
<img src="img/features/3.png" alt=""/>
</div>
<div class="col-9">
<p class="feature__title">
@@ -157,9 +155,9 @@
</p>
</div>
</div>
<div class="row about__feature">
<div class="row feature">
<div class="col-3 feature__icon">
<img src="img/features/4.png"/>
<img src="img/features/4.png" alt=""/>
</div>
<div class="col-9">
<p class="feature__title">
@@ -179,8 +177,8 @@
</div>
</div>
</div>
</section>
<section class="reviews container">
</div>
<div class="reviews container">
<div class="row justify-content-center">
<div class="reviews__content col-10">
<div class="review">
@@ -236,8 +234,8 @@
</div>
</div>
</div>
</section>
<section class="social container">
</div>
<div class="social container">
<div class="row justify-content-center">
<div class="social__content col-10">
<div>
@@ -263,8 +261,8 @@
</div>
</div>
</div>
</section>
<section class="testimonials">
</div>
<div class="testimonials">
<p class="testimonials__h1">People are talking about fork</p>
<div class="testimonials__content container">
<div class="testimonials__row row">
@@ -322,7 +320,227 @@
<div class="testimonials__delimiter col-8"></div>
</div>
</div>
</section>
</div>
<div class="pricing">
<p class="pricing__title">Fork Subscription Pricing</p>
<div class="container">
<div class="row">
<div class="col-3">
<div class="price">
<p class="price__title">Students</p>
<p class="price__value">$29</p>
<p class="price__period">Per month</p>
<hr class="price__splitter">
<p class="price__description">Personal License</p>
<a href="#" class="rounded-button price__rounded-button--purchase">
Purchase
</a>
</div>
</div>
<div class="col-3">
<div class="price">
<p class="price__title">Professional</p>
<p class="price__value">$59</p>
<p class="price__period">Per month</p>
<hr class="price__splitter">
<p class="price__description">Professional License<br/>Email Support</p>
<a href="#" class="rounded-button price__rounded-button--purchase">
Purchase
</a>
</div>
</div>
<div class="col-3">
<div class="price">
<p class="price__title">Agency</p>
<p class="price__value">$99</p>
<p class="price__period">Per month</p>
<hr class="price__splitter">
<p class="price__description">1-12 Team Members<br/>Phone Support</p>
<a href="#" class="rounded-button price__rounded-button--purchase">
Purchase
</a>
</div>
</div>
<div class="col-3">
<div class="price">
<p class="price__title">Enterprise</p>
<p class="price__value">$159</p>
<p class="price__period">Per month</p>
<hr class="price__splitter">
<p class="price__description">Unlimited Team Members<br/>24/7 Phone Support</p>
<a href="#" class="rounded-button price__rounded-button--purchase">
Purchase
</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-10">
<p class="pricing__footer">
Duis lobortis arcu sed arcu tincidunt feugiat. Nulla nisi mauris, facilisis vitae aliquet id,
imperdiet quis
nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum sociis natoque
penatibus
et
magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</div>
</div>
<div class="newsletter">
<div class="container">
<div class="row justify-content-between">
<div class="col-6 newsletter__title">
Subscribe to our newsletter
</div>
<div class="col-6 oneline__form">
<input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
<button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
type="submit">Subscribe
</button>
</div>
</div>
</div>
</div>
<div 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>
</div>
<div 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">
Wisia 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>
</div>
</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;
}
}

19
src/scss/_buttons.scss
View File

@@ -25,6 +25,11 @@
font-size: 21px;
padding: 15px 60px;
}
&--uppercase {
text-transform: uppercase;
font-weight: 500;
}
}
.rect-button {
@@ -76,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 {

7
src/scss/_download.scss
View File

@@ -1,14 +1,15 @@
.download {
text-align: center;
width: 100%;
}
.download__rounded-button--translated {
position: absolute;
transform: translate(-50%, -50%);
position: relative;
bottom: 15px;
}
.download__description {
padding-top: 45px;
padding-top: 15px;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;

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

@@ -0,0 +1,91 @@
.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;
text-transform: capitalize;
transition: $hover-duration;
&:hover {
color: darken($primary, $hover-threshold);
transition: $hover-duration;
text-decoration: none;
}
}
}
}
&__contact {
&__phone {
margin-bottom: 5px;
font-family: Montserrat, sans-serif;
font-weight: bold;
font-size: 30px;
color: #3f3f3f;
}
&__availability {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 12px;
color: $regular-text;
text-transform: uppercase;
}
&__city {
margin-top: 20px;
font-family: Montserrat, sans-serif;
font-size: 16px;
color: $dark-text;
}
&__address {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}
}
&__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;
}
}
}

29
src/scss/_form.scss Normal file
View File

@@ -0,0 +1,29 @@
.textfield {
padding: 7px 25px;
border: none;
border-radius: 30px;
background-color: white;
color: $regular-text;
&::placeholder {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: $gray-text;
}
}
.oneline__form {
display: flex;
align-content: space-between;
align-items: center;
}
.oneline__form__component--growing {
width: 100%;
margin: 0 20px;
}
.oneline__form__component--fixed {
white-space: nowrap;
}

2
src/scss/_header.scss
View File

@@ -1,6 +1,6 @@
.header {
background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
height: 900px;
height: 100vh;
padding-top: 110px;
}

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;

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;
}

15
src/scss/_newsletter.scss Normal file
View File

@@ -0,0 +1,15 @@
.newsletter {
padding: 55px 0;
background-color: #f4f4f4;
}
.newsletter__title {
display: flex;
align-items: center;
font-family: Montserrat, sans-serif;
font-weight: bold;
font-size: 30px;
color: $primary-dark;
text-transform: capitalize;
}

105
src/scss/_pricing.scss Normal file
View File

@@ -0,0 +1,105 @@
.pricing {
background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
padding-top: 90px;
padding-bottom: 75px;
}
.pricing__title {
font-family: Montserrat, sans-serif;
font-size: 48px;
font-weight: bold;
color: white;
text-transform: capitalize;
text-align: center;
}
.price {
position: relative;
margin-top: 110px;
margin-bottom: 125px;
background-color: rgba(255, 255, 255, 0.06);
height: 450px;
transition: $hover-duration;
&:hover {
margin-top: 70px;
margin-bottom: 75px;
background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration;
height: 530px;
& > .price__title {
background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration;
}
}
}
.price__title {
background-color: rgba(255, 255, 255, 0.06);
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: 500;
color: white;
text-transform: uppercase;
padding: 30px 0;
text-align: center;
transition: $hover-duration;
}
.price__value {
font-family: Montserrat, sans-serif;
font-size: 60px;
font-weight: bold;
color: white;
text-align: center;
}
.price__period {
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
color: white;
opacity: 0.3;
text-transform: uppercase;
text-align: center;
}
.price__splitter {
margin: 30px auto;
color: $primary;
border: none;
width: 60px;
height: 5px;
background-color: $primary;
}
.price__description {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
color: white;
text-transform: capitalize;
text-align: center;
}
.price__rounded-button--purchase {
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(255, 255, 255, 0.15);
position: absolute;
bottom: 35px;
left: 20%;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
}
.pricing__footer {
font-family: Source Sans Pro, sans-serif;
font-size: 14px;
font-weight: 300;
color: $light-text;
text-align: center;
}

2
src/scss/_social.scss
View File

@@ -3,7 +3,7 @@
padding-top: 50px;
padding-bottom: 80px;
display: flex;
justify-content: space-evenly;
justify-content: space-between;
}
.social__stats {

3
src/scss/_variables.scss
View File

@@ -3,6 +3,9 @@ $primary-dark: #635c73;
$primary-light: #a599c8;
$regular-text: #848e97;
$dark-text: #323232;
$light-text: #a291a5;
$gray-text: #c8cbcf;
$lightgray-text: #d3d1da;
$background-light: #f4f4f4;
$background-violet: #4a3b4e;

8
src/scss/style.scss
View File

@@ -3,6 +3,7 @@
@import "global";
@import "author";
@import "navbar";
@import "brand";
@import "header";
@import "download";
@import "editor";
@@ -10,4 +11,9 @@
@import "feature";
@import "reviews";
@import "social";
@import "testimonials";
@import "testimonials";
@import "pricing";
@import "newsletter";
@import "form";
@import "news";
@import "footer";