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

4 Commits
cross-brow ... rwd-navbar

Author SHA1 Message Date
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
5 changed files with 73 additions and 31 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

18
src/index.html
View File

@@ -28,14 +28,19 @@
</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"
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"> <li class="nav-item">
<a class="navbar__link nav-link" href="#">Overview</a> <a class="navbar__link nav-link" href="#">Overview</a>
</li> </li>
@@ -48,11 +53,10 @@
<li class="nav-item"> <li class="nav-item">
<a class="navbar__link nav-link" href="#">Support</a> <a class="navbar__link nav-link" href="#">Support</a>
</li> </li>
<li class="nav-item">
<button class="rounded-button rounded-button--strong">Buy now</button>
</li>
</ul> </ul>
</div> </div>
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
</div>
</div> </div>
<header class="header"> <header class="header">

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

34
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) {
.navbar {
margin: 0 0; margin: 0 0;
padding: 0 90px; padding: 0 90px;
height: 100px; height: 100px;
background-color: white;
transition: height $shrinking-duration; transition: height $shrinking-duration;
} }
.navbar--shrink { .navbar--shrink {
height: 50px; height: 50px;
transition: height $shrinking-duration; 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 { .navbar__link {

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;