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

Compare commits

merge into: 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
...
pull from: bartek:rwd-social
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

9 Commits
cross-brow ... rwd-social

Author SHA1 Message Date
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
8 changed files with 135 additions and 48 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

73
src/index.html
View File

@@ -28,30 +28,34 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<div class="navbar navbar-expand-lg fixed-top"> <div class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container"> <div class="container navbar__content">
<div class="brand navbar-header"> <div class="brand navbar__content__brand navbar-header">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo"> <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span> <span class="brand__name">Fork</span>
<span class="brand__name brand__name--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>
<button class="rounded-button rounded-button--strong">Buy now</button> </li>
</li> <li class="nav-item">
</ul> <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>
</div> </div>
@@ -109,12 +113,13 @@
<div 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" alt=""/> <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>
@@ -126,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" alt=""/> <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>
@@ -141,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" alt=""/> <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>
@@ -156,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" alt=""/> <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>
@@ -171,8 +176,8 @@
</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>
@@ -238,21 +243,21 @@
<div 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 class="social__github">
<button class="rect-button rect-button--github rect-button--fixed-width"> <button class="rect-button rect-button--github rect-button--fixed-width">
<span class="rect-button__icon fab fa-github"></span> <span class="rect-button__icon fab fa-github"></span>
GitHub GitHub
</button> </button>
<p class="social__stats">7 352 Followers</p> <p class="social__stats">7 352 Followers</p>
</div> </div>
<div> <div class="social__twitter">
<button class="rect-button rect-button--twitter rect-button--fixed-width"> <button class="rect-button rect-button--twitter rect-button--fixed-width">
<span class="rect-button__icon fab fa-twitter"></span> <span class="rect-button__icon fab fa-twitter"></span>
Twitter Twitter
</button> </button>
<p class="social__stats">136 312 Followers</p> <p class="social__stats">136 312 Followers</p>
</div> </div>
<div> <div class="social__facebook">
<button class="rect-button rect-button--facebook rect-button--fixed-width"> <button class="rect-button rect-button--facebook rect-button--fixed-width">
<span class="rect-button__icon fab fa-facebook-f"></span> <span class="rect-button__icon fab fa-facebook-f"></span>
Facebook Facebook

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

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 {

9
src/scss/_header.scss
View File

@@ -1,5 +1,5 @@
.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: 100vh; 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;

44
src/scss/_navbar.scss
View File

@@ -1,16 +1,42 @@
$shrinking-duration: 0.4s; $shrinking-duration: 0.4s;
.navbar { @media all and (min-width: $desktop) {
margin: 0 0; .navbar {
padding: 0 90px; margin: 0 0;
height: 100px; padding: 0 90px;
background-color: white; height: 100px;
transition: height $shrinking-duration; transition: height $shrinking-duration;
}
.navbar--shrink {
height: 50px;
transition: height $shrinking-duration;
}
} }
.navbar--shrink { .navbar {
height: 50px; background-color: white;
transition: height $shrinking-duration; }
.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 { .navbar__link {

13
src/scss/_social.scss
View File

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

5
src/scss/_variables.scss
View File

@@ -19,3 +19,8 @@ $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;