20 Commits

Author SHA1 Message Date
Bartlomiej Pluta (PGS Software)
5a0c860c75 Enable RWD for footer 2018-04-19 11:43:26 +02:00
Bartlomiej Pluta (PGS Software)
658886fe22 Fix navbar 2018-04-19 11:34:25 +02:00
Bartłomiej Przemysław Pluta
5e00e803bd Merge pull request #16 from bartlomiej-pluta/rwd-news
Enable RWD in news section
2018-04-16 14:44:45 +02:00
Bartłomiej Pluta
39532aacf7 Enable RWD in news section 2018-04-16 14:44:05 +02:00
Bartłomiej Przemysław Pluta
abb149b383 Merge pull request #15 from bartlomiej-pluta/rwd-newsletter
Enable RWD in Newsletter section
2018-04-16 14:35:53 +02:00
Bartłomiej Pluta
325a0b5e3e Enable RWD in Newsletter section 2018-04-16 14:34:53 +02:00
Bartłomiej Przemysław Pluta
494bf4d2c3 Merge pull request #14 from bartlomiej-pluta/rwd-pricing
Enable RWD on pricing section
2018-04-16 14:21:35 +02:00
Bartłomiej Pluta
59dd5095b1 Enable RWD on pricing section 2018-04-16 14:20:29 +02:00
Bartłomiej Przemysław Pluta
d2f03f2ca6 Merge pull request #13 from bartlomiej-pluta/rwd-testimonials
Enable RWD for testimonials
2018-04-16 12:19:25 +02:00
Bartłomiej Pluta
39f6316897 Enable RWD for testimonials 2018-04-16 12:18:38 +02:00
Bartłomiej Przemysław Pluta
eb04cb6a08 Merge pull request #12 from bartlomiej-pluta/rwd-social
Enable RWD for social buttons
2018-04-16 12:00:59 +02:00
Bartłomiej Pluta
719906d227 Enable RWD for social buttons 2018-04-16 12:00:17 +02:00
Bartłomiej Przemysław Pluta
4b5d2198d2 Merge pull request #11 from bartlomiej-pluta/rwd-about
Enable RWD for about section
2018-04-16 11:21:08 +02:00
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
14 changed files with 220 additions and 79 deletions

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>

After

Width:  |  Height:  |  Size: 568 B

View File

@@ -28,30 +28,34 @@
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="navbar navbar-expand-lg fixed-top">
<div class="container">
<div class="brand navbar-header">
<div class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container navbar__content">
<div class="brand navbar__content__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">
<a class="navbar__link nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="navbar__link nav-link" href="#">About fork</a>
</li>
<li class="nav-item">
<a class="navbar__link nav-link" href="#">Buying options</a>
</li>
<li class="nav-item">
<a class="navbar__link nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<button class="rounded-button rounded-button--strong">Buy now</button>
</li>
</ul>
<button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
<img src="img/navbar/sandwich.svg" alt="">
</button>
<div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
<ul class="navbar__content__body navbar-nav mr-0 ml-auto">
<li class="nav-item">
<a class="navbar__link nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="navbar__link nav-link" href="#">About fork</a>
</li>
<li class="nav-item">
<a class="navbar__link nav-link" href="#">Buying options</a>
</li>
<li class="nav-item">
<a class="navbar__link nav-link" href="#">Support</a>
</li>
</ul>
</div>
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
</div>
</div>
@@ -109,12 +113,13 @@
<div class="about">
<div class="container">
<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="col-3 feature__icon">
<div class="col-4 col-md-3 feature__icon">
<img src="img/features/1.png" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Created to Make The Web Better
</p>
@@ -126,10 +131,10 @@
</div>
</div>
<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" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Incredibly Powerful Tool
</p>
@@ -141,10 +146,10 @@
</div>
</div>
<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" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Experimental Stuff
</p>
@@ -156,10 +161,10 @@
</div>
</div>
<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" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Created to Make The Web Better
</p>
@@ -171,8 +176,8 @@
</div>
</div>
</div>
<div class="about__what-you-get col-6">
<p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
<div class="about__what-you-get col-12 col-xl-6">
<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">
</div>
</div>
@@ -238,21 +243,21 @@
<div class="social container">
<div class="row justify-content-center">
<div class="social__content col-10">
<div>
<div class="social__github">
<button class="rect-button rect-button--github rect-button--fixed-width">
<span class="rect-button__icon fab fa-github"></span>
GitHub
</button>
<p class="social__stats">7 352 Followers</p>
</div>
<div>
<div class="social__twitter">
<button class="rect-button rect-button--twitter rect-button--fixed-width">
<span class="rect-button__icon fab fa-twitter"></span>
Twitter
</button>
<p class="social__stats">136 312 Followers</p>
</div>
<div>
<div class="social__facebook">
<button class="rect-button rect-button--facebook rect-button--fixed-width">
<span class="rect-button__icon fab fa-facebook-f"></span>
Facebook
@@ -266,7 +271,7 @@
<p class="testimonials__h1">People are talking about fork</p>
<div class="testimonials__content container">
<div class="testimonials__row row">
<div class="testimonial col-4">
<div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
<p class="testimonial__text">
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -274,14 +279,14 @@
Sed varius urna et pulvinar venenatis.
</p>
</div>
<div class="testimonial col-4">
<div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
<p class="testimonial__text">
Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
mollis eleifend nibh.
</p>
</div>
<div class="testimonial col-4">
<div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
<p class="testimonial__text">
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -291,7 +296,7 @@
</div>
</div>
<div class="testimonials__row row">
<div class="testimonial col-4">
<div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
<img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
<p class="testimonial__text">
@@ -300,7 +305,7 @@
Sed varius urna et pulvinar venenatis.
</p>
</div>
<div class="testimonial col-4">
<div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
<p class="testimonial__text">
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -308,7 +313,7 @@
consequat faucibus.
</p>
</div>
<div class="testimonial col-4">
<div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
<p class="testimonial__text">
Fusce pharetra erat id odio blandit, nec
@@ -324,8 +329,8 @@
<div class="pricing">
<p class="pricing__title">Fork Subscription Pricing</p>
<div class="container">
<div class="row">
<div class="col-3">
<div class="row justify-content-center">
<div class="col-8 col-xl-3">
<div class="price">
<p class="price__title">Students</p>
<p class="price__value">$29</p>
@@ -337,7 +342,7 @@
</a>
</div>
</div>
<div class="col-3">
<div class="col-8 col-xl-3">
<div class="price">
<p class="price__title">Professional</p>
<p class="price__value">$59</p>
@@ -349,7 +354,7 @@
</a>
</div>
</div>
<div class="col-3">
<div class="col-8 col-xl-3">
<div class="price">
<p class="price__title">Agency</p>
<p class="price__value">$99</p>
@@ -361,7 +366,7 @@
</a>
</div>
</div>
<div class="col-3">
<div class="col-8 col-xl-3">
<div class="price">
<p class="price__title">Enterprise</p>
<p class="price__value">$159</p>
@@ -391,10 +396,10 @@
<div class="newsletter">
<div class="container">
<div class="row justify-content-between">
<div class="col-6 newsletter__title">
<div class="col-12 col-xl-6 newsletter__title">
Subscribe to our newsletter
</div>
<div class="col-6 oneline__form">
<div class="col-12 col-xl-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
@@ -406,7 +411,7 @@
<div class="news">
<div class="container">
<div class="row">
<div class="col-4">
<div class="news__news col-12 col-sm-4">
<p class="news__title">
New in Release 2.8
</p>
@@ -430,7 +435,7 @@
</div>
<button class="rect-button rect-button--small">Go to Release Log</button>
</div>
<div class="col-4">
<div class="news__extensions col-12 col-sm-4">
<p class="news__title">
Popular Extensions
</p>
@@ -461,7 +466,7 @@
</div>
<button class="rect-button rect-button--small">Go to Marketplace</button>
</div>
<div class="col-4">
<div class="news__blog col-12 col-sm-4">
<p class="news__title">
New From the Blog
</p>
@@ -505,7 +510,7 @@
<div class="footer">
<div class="container">
<div class="row">
<div class="footer__about col-4">
<div class="footer__about col-12 col-md-4">
<div class="brand">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span>
@@ -515,7 +520,7 @@
Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
</p>
</div>
<div class="footer__nav col-2">
<div class="footer__nav col-12 col-md-2">
<p class="footer__nav__title">Navigation</p>
<ul class="footer__nav__navbar">
<li><a href="#">Home</a></li>
@@ -525,13 +530,13 @@
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="footer__contact col-3">
<div class="footer__contact col-12 col-md-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">
<div class="footer__info col-12 col-md-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

View File

@@ -1,7 +1,12 @@
.about {
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 {
@@ -13,4 +18,23 @@
&--no-wrap {
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;
}
}
}

View File

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

View File

@@ -88,4 +88,13 @@
color: $regular-text;
}
}
@media all and (max-width: $phone) {
&__about,
&__nav,
&__contact,
&__info {
padding: 0 30px;
}
}
}

View File

@@ -5,6 +5,7 @@
background-color: white;
color: $regular-text;
&::placeholder {
font-family: Montserrat, sans-serif;
font-size: 14px;
@@ -21,9 +22,11 @@
.oneline__form__component--growing {
width: 100%;
margin: 0 20px;
min-width: 100px;
margin: 0 10px;
}
.oneline__form__component--fixed {
white-space: nowrap;
margin: 0 10px;
}

View File

@@ -1,5 +1,5 @@
.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: 100vh;
padding-top: 110px;
}
@@ -21,6 +21,13 @@
margin-bottom: 0;
}
@media all and (max-width: $phone) {
.header__subtitle {
font-size: 24px;
text-transform: capitalize;
}
}
.header__description {
margin-top: 20px;
font-family: Montserrat, sans-serif;

View File

@@ -1,16 +1,42 @@
$shrinking-duration: 0.4s;
.navbar {
margin: 0 0;
padding: 0 90px;
height: 100px;
background-color: white;
transition: height $shrinking-duration;
@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--shrink {
height: 50px;
transition: height $shrinking-duration;
.navbar {
background-color: white;
}
.navbar__content {
display: flex;
}
.navbar__content__header {
order: 1;
}
.navbar__content__toggler {
order: 4;
border: none;
}
.navbar__content__body {
order: 2;
}
.navbar__content__button {
order: 3;
}
.navbar__link {
@@ -18,9 +44,13 @@ $shrinking-duration: 0.4s;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: bolder;
margin: 0 20px;
color: $primary-dark;
transition: $hover-duration;
margin: 0 20px;
@media all and (max-width: $desktop-xl) {
margin: 0 5px;
}
}
.navbar__link:hover {

View File

@@ -41,4 +41,17 @@
font-size: 13px;
color: $regular-text;
font-weight: 500;
}
@media all and (max-width: $phone) {
.news__news,
.news__extensions,
.news__blog {
padding: 0 30px;
}
.news__extensions,
.news__blog {
margin-top: 50px;
}
}

View File

@@ -4,12 +4,15 @@
}
.newsletter__title {
display: flex;
align-items: center;
font-family: Montserrat, sans-serif;
font-weight: bold;
font-size: 30px;
color: $primary-dark;
text-transform: capitalize;
text-align: center;
@media all and (max-width: $desktop-xl) {
margin-bottom: 50px;
}
}

View File

@@ -21,12 +21,19 @@
height: 450px;
transition: $hover-duration;
@media all and (max-width: $desktop-xl) {
margin-top: 7px;
margin-bottom: 7px;
}
&:hover {
margin-top: 70px;
margin-bottom: 75px;
@media all and (min-width: $desktop-xl) {
margin-top: 70px;
margin-bottom: 75px;
height: 530px;
}
background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration;
height: 530px;
& > .price__title {
background-color: rgba(0, 0, 0, 0.06);
@@ -88,8 +95,13 @@
padding-bottom: 10px;
background-color: rgba(255, 255, 255, 0.15);
position: absolute;
left: 0;
text-align: center;
right: 0;
bottom: 35px;
left: 20%;
margin: auto;
display: block;
width: 80%;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 16px;

View File

@@ -4,6 +4,10 @@
padding-bottom: 80px;
display: flex;
justify-content: space-between;
@media all and (max-width: $tablet) {
flex-direction: column;
}
}
.social__stats {
@@ -13,4 +17,13 @@
font-size: 14px;
color: $regular-text;
text-align: center;
}
.social__github,
.social__twitter,
.social__facebook {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

View File

@@ -1,6 +1,6 @@
.testimonials {
position: relative;
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 0;
}
.testimonials__h1 {
@@ -15,12 +15,20 @@
.testimonials__row {
padding-bottom: 100px;
@media all and (max-width: $desktop) {
padding: 0 10px;
margin: 0;
}
}
.testimonial {
position: relative;
text-align: center;
min-height: 170px;
@media all and (max-width: $desktop) {
margin-bottom: 50px;
}
}
.testimonial__logo {
@@ -28,8 +36,10 @@
}
.testimonial__text {
position: absolute;
bottom: 0;
@media all and (min-width: $desktop-xl) {
position: absolute;
bottom: 0;
}
font-family: Source Sans Pro, sans-serif;
font-size: 16px;
font-weight: bold;

View File

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