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

Compare commits

merge into: bartek:news
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:rwd-about
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

14 Commits
news ... rwd-about

Author SHA1 Message Date
Bartłomiej Pluta
a290809750 Enable RWD for about section 2018-04-16 11:10:29 +02:00
Bartlomiej Pluta (PGS Software)
a02b17a51b Fix header subtitle 2018-04-12 14:43:57 +02:00
Bartłomiej Przemysław Pluta
b60fe45d49 Merge pull request #10 from bartlomiej-pluta/rwd-navbar 
Enable RWD for navbar and header
 2018-04-12 13:44:22 +02:00
Bartlomiej Pluta (PGS Software)
83763013b8 Enable RWD for navbar and header 2018-04-12 13:27:14 +02:00
Bartłomiej Przemysław Pluta
1661de16a9 Merge pull request #9 from bartlomiej-pluta/rwd 
Create RWD breakpoints
 2018-04-12 09:40:39 +02:00
Bartlomiej Pluta (PGS Software)
1e01ceae3a Create RWD breakpoints 2018-04-12 09:39:38 +02:00
Bartłomiej Przemysław Pluta
dee7647f13 Merge pull request #8 from bartlomiej-pluta/cross-browser 
Cross browser
 2018-04-10 12:33:59 +02:00
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
12 changed files with 310 additions and 101 deletions
Expand all files Collapse all files

7
src/img/navbar/sandwich.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22" width="27" height="22">
<style>
tspan { white-space:pre }
.shp0 { fill: #333333 }
</style>
<path id="sandwich" class="shp0" d="M0,20.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM0,11.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM6,2.5c0,0.83 0.67,1.5 1.5,1.5h17c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-17c-0.83,0 -1.5,0.67 -1.5,1.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

180
src/index.html
View File

@@ -28,34 +28,36 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-lg sticky-top"> <div class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container"> <div class="container navbar__content">
<div class="navbar__header navbar-header"> <div class="brand navbar__content__brand navbar-header">
<img class="navbar__logo" src="img/logo.svg" alt="Forkio logo"> <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="navbar__brand">Fork</span> <span class="brand__name">Fork</span>
<span class="navbar__brand navbar__brand--emph">IO</span> <span class="brand__name brand__name--emph">IO</span>
</div> </div>
<ul class="navbar__body navbar-nav"> <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
<li class="nav-item"> aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
<a class="navbar__link nav-link" href="#">Overview</a> <img src="img/navbar/sandwich.svg" alt="">
</li> </button>
<li class="nav-item"> <div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
<a class="navbar__link nav-link" href="#">About fork</a> <ul class="navbar__content__body navbar-nav mr-0 ml-auto">
</li> <li class="nav-item">
<li class="nav-item"> <a class="navbar__link nav-link" href="#">Overview</a>
<a class="navbar__link nav-link" href="#">Buying options</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="navbar__link nav-link" href="#">About fork</a>
<a class="navbar__link nav-link" href="#">Support</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="navbar__link nav-link" href="#">Buying options</a>
<a href="#"> </li>
<button class="rounded-button rounded-button--strong">Buy now</button> <li class="nav-item">
</a> <a class="navbar__link nav-link" href="#">Support</a>
</li> </li>
</ul> </ul>
</div>
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
</div> </div>
</nav> </div>
<header class="header"> <header class="header">
<div> <div>
@@ -64,13 +66,13 @@
<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>
</header> </header>
<section 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">
Download for free now Download for free now
</a> </a>
<p class="download__description">Unlimited 30-Days trial period</p> <p class="download__description">Unlimited 30-Days trial period</p>
</section> </div>
<section class="editor"> <div class="editor">
<div class="container"> <div class="container">
<div class="editor__description"> <div class="editor__description">
<p class="editor__title">Revolutionary editor</p> <p class="editor__title">Revolutionary editor</p>
@@ -103,21 +105,21 @@
aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a> aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
</p> </p>
</div> </div>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="about"> <div class="about">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="about__features col-6"> <div class="about__features col-12 col-xl-6">
<p class="about__title about__title--desktop">&lt;Here is what you get&gt;</p>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/1.png"/> <img src="img/features/1.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Created to Make The Web Better Created to Make The Web Better
</p> </p>
@@ -129,10 +131,10 @@
</div> </div>
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/2.png"/> <img src="img/features/2.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Incredibly Powerful Tool Incredibly Powerful Tool
</p> </p>
@@ -144,10 +146,10 @@
</div> </div>
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/3.png"/> <img src="img/features/3.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Experimental Stuff Experimental Stuff
</p> </p>
@@ -159,10 +161,10 @@
</div> </div>
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/4.png"/> <img src="img/features/4.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Created to Make The Web Better Created to Make The Web Better
</p> </p>
@@ -174,14 +176,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="about__what-you-get col-6"> <div class="about__what-you-get col-12 col-xl-6">
<p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p> <p class="about__title about__title--no-wrap about__title--desktop-xl">&lt;Here is what you get&gt;</p>
<img src="img/features/editor.png" alt="Revolutionary editor"> <img src="img/features/editor.png" alt="Revolutionary editor">
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="reviews container"> <div class="reviews container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="reviews__content col-10"> <div class="reviews__content col-10">
<div class="review"> <div class="review">
@@ -237,8 +239,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="social container"> <div class="social container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="social__content col-10"> <div class="social__content col-10">
<div> <div>
@@ -264,8 +266,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="testimonials"> <div class="testimonials">
<p class="testimonials__h1">People are talking about fork</p> <p class="testimonials__h1">People are talking about fork</p>
<div class="testimonials__content container"> <div class="testimonials__content container">
<div class="testimonials__row row"> <div class="testimonials__row row">
@@ -323,8 +325,8 @@
<div class="testimonials__delimiter col-8"></div> <div class="testimonials__delimiter col-8"></div>
</div> </div>
</div> </div>
</section> </div>
<section class="pricing"> <div class="pricing">
<p class="pricing__title">Fork Subscription Pricing</p> <p class="pricing__title">Fork Subscription Pricing</p>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -390,8 +392,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="newsletter"> <div class="newsletter">
<div class="container"> <div class="container">
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="col-6 newsletter__title"> <div class="col-6 newsletter__title">
@@ -405,8 +407,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="news"> <div class="news">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
@@ -415,16 +417,20 @@
</p> </p>
<div class="news-entry"> <div class="news-entry">
<p class="news-entry__brief">Fully Available: Live Preview Support for Multiple Browsers</p> <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>
<div class="news-entry"> <div class="news-entry">
<p class="news-entry__brief">Improved Support for Typing</p> <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>
<div class="news-entry"> <div class="news-entry">
<p class="news-entry__brief">Improved Stability</p> <p class="news-entry__brief">Improved Stability</p>
<p class="news-entry__content"> <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> </p>
</div> </div>
<button class="rect-button rect-button--small">Go to Release Log</button> <button class="rect-button rect-button--small">Go to Release Log</button>
@@ -448,7 +454,8 @@
<div class="news-entry"> <div class="news-entry">
<a href="#" class="news-entry__title">WebZap</a> <a href="#" class="news-entry__title">WebZap</a>
<p class="news-entry__content"> <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> </p>
</div> </div>
<div class="news-entry"> <div class="news-entry">
@@ -470,7 +477,8 @@
</p> </p>
</div> </div>
<div class="news-entry"> <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"> <p class="news-entry__content">
February 12, 2015 February 12, 2015
</p> </p>
@@ -482,7 +490,8 @@
</p> </p>
</div> </div>
<div class="news-entry"> <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"> <p class="news-entry__content">
February 2, 2015 February 2, 2015
</p> </p>
@@ -497,7 +506,46 @@
</div> </div>
</div> </div>
</div> </div>
</section> </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> </div>
<!-- JavaScript --> <!-- JavaScript -->

28
src/scss/_about.scss
View File

@@ -1,7 +1,12 @@
.about { .about {
background-color: $background-light; background-color: $background-light;
padding: 75px 0 0 30px;
height: 710px; @media all and (max-width: $desktop-xl) {
.about {
padding: 75px 0 0 30px;
height: 710px;
}
}
} }
.about__title { .about__title {
@@ -13,4 +18,23 @@
&--no-wrap { &--no-wrap {
white-space: nowrap; white-space: nowrap;
} }
&--desktop-xl {
display: block;
}
&--desktop {
display: none;
text-align: center;
}
@media all and (max-width: $desktop-xl) {
&--desktop-xl {
display: none;
}
&--desktop {
display: block;
}
}
} }

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

7
src/scss/_download.scss
View File

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

2
src/scss/_feature.scss
View File

@@ -3,7 +3,7 @@
} }
.feature__icon { .feature__icon {
text-align: center; text-align: left;
} }
.feature__title { .feature__title {

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

11
src/scss/_header.scss
View File

@@ -1,6 +1,6 @@
.header { .header {
background: black url(../img/header/img.png) no-repeat 50% 30% / cover; background: black url(../img/header/img.png) no-repeat center 120px/ cover;
height: 900px; height: 100vh;
padding-top: 110px; padding-top: 110px;
} }
@@ -21,6 +21,13 @@
margin-bottom: 0; margin-bottom: 0;
} }
@media all and (max-width: $phone) {
.header__subtitle {
font-size: 24px;
text-transform: capitalize;
}
}
.header__description { .header__description {
margin-top: 20px; margin-top: 20px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;

50
src/scss/_navbar.scss
View File

@@ -1,40 +1,42 @@
$shrinking-duration: 0.4s; $shrinking-duration: 0.4s;
@media all and (min-width: $desktop) {
.navbar {
margin: 0 0;
padding: 0 90px;
height: 100px;
transition: height $shrinking-duration;
}
.navbar--shrink {
height: 50px;
transition: height $shrinking-duration;
}
}
.navbar { .navbar {
margin: 0 0;
padding: 0 90px;
height: 100px;
background-color: white; background-color: white;
transition: height $shrinking-duration;
} }
.navbar--shrink { .navbar__content {
height: 50px;
transition: height $shrinking-duration;
}
.navbar__header {
display: flex; display: flex;
justify-content: center;
} }
.navbar__logo { .navbar__content__header {
height: 45px; order: 1;
margin-right: 17px;
} }
.navbar__brand { .navbar__content__toggler {
font-family: Lato, sans-serif; order: 4;
text-transform: uppercase; border: none;
font-size: 24px;
font-weight: bold;
display: inline-flex;
align-items: center;
} }
.navbar__brand--emph { .navbar__content__body {
color: $primary; order: 2;
font-style: normal; }
.navbar__content__button {
order: 3;
} }
.navbar__link { .navbar__link {

2
src/scss/_social.scss
View File

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

7
src/scss/_variables.scss
View File

@@ -18,4 +18,9 @@ $hover-duration: 0.3s;
$github-color: #f3f3f3; $github-color: #f3f3f3;
$twitter-color: #26a6d1; $twitter-color: #26a6d1;
$facebook-color: #3b5998; $facebook-color: #3b5998;
$phone: 576px;
$tablet: 768px;
$desktop: 992px;
$desktop-xl: 1200px;

4
src/scss/style.scss
View File

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