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

7 Commits
cross-brow ... 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
7 changed files with 119 additions and 45 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

67
src/index.html
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>

28
src/scss/_about.scss
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;
}
}
}

2
src/scss/_feature.scss
View File

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

9
src/scss/_header.scss
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;

44
src/scss/_navbar.scss
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 {

7
src/scss/_variables.scss
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;