Enable RWD for navbar and header

Merge pull request #9 from bartlomiej-pluta/rwd
Create RWD breakpoints
2018-04-12 13:27:14 +02:00 · 2018-04-12 09:40:39 +02:00 · 2018-04-12 09:39:38 +02:00 · 2018-04-10 12:33:59 +02:00 · 2018-04-10 12:33:24 +02:00 · 2018-04-10 12:12:07 +02:00
8 changed files with 137 additions and 65 deletions
--- a/src/img/navbar/sandwich.svg
+++ b/src/img/navbar/sandwich.svg
@@ -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>
--- a/src/index.html
+++ b/src/index.html
@@ -28,34 +28,36 @@
 </head>
 <body>
 <div class="wrapper" id="wrapper">
-    <nav class="navbar navbar-expand-lg sticky-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">
-                    <a href="#">
-                        <button class="rounded-button rounded-button--strong">Buy now</button>
-                    </a>
-                </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>
-    </nav>
+    </div>

    <header class="header">
        <div>
@@ -64,13 +66,13 @@
            <p class="header__description">V. 2.8 for Mac and Windows</p>
        </div>
    </header>
-    <section class="download">
+    <div class="download">
        <a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">
            Download for free now
        </a>
        <p class="download__description">Unlimited 30-Days trial period</p>
-    </section>
-    <section class="editor">
+    </div>
+    <div class="editor">
        <div class="container">
            <div class="editor__description">
                <p class="editor__title">Revolutionary editor</p>
@@ -103,19 +105,18 @@
                                   aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
                            </p>
                        </div>
-                        </p>
                    </div>
                </div>
            </div>
        </div>
-    </section>
-    <section class="about">
+    </div>
+    <div class="about">
        <div class="container">
            <div class="row">
                <div class="about__features col-6">
                    <div class="row feature">
                        <div class="col-3 feature__icon">
-                            <img src="img/features/1.png"/>
+                            <img src="img/features/1.png" alt=""/>
                        </div>
                        <div class="col-9">
                            <p class="feature__title">
@@ -130,7 +131,7 @@
                    </div>
                    <div class="row feature">
                        <div class="col-3 feature__icon">
-                            <img src="img/features/2.png"/>
+                            <img src="img/features/2.png" alt=""/>
                        </div>
                        <div class="col-9">
                            <p class="feature__title">
@@ -145,7 +146,7 @@
                    </div>
                    <div class="row feature">
                        <div class="col-3 feature__icon">
-                            <img src="img/features/3.png"/>
+                            <img src="img/features/3.png" alt=""/>
                        </div>
                        <div class="col-9">
                            <p class="feature__title">
@@ -160,7 +161,7 @@
                    </div>
                    <div class="row feature">
                        <div class="col-3 feature__icon">
-                            <img src="img/features/4.png"/>
+                            <img src="img/features/4.png" alt=""/>
                        </div>
                        <div class="col-9">
                            <p class="feature__title">
@@ -180,8 +181,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <section class="reviews container">
+    </div>
+    <div class="reviews container">
        <div class="row justify-content-center">
            <div class="reviews__content col-10">
                <div class="review">
@@ -237,8 +238,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <section class="social container">
+    </div>
+    <div class="social container">
        <div class="row justify-content-center">
            <div class="social__content col-10">
                <div>
@@ -264,8 +265,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <section class="testimonials">
+    </div>
+    <div class="testimonials">
        <p class="testimonials__h1">People are talking about fork</p>
        <div class="testimonials__content container">
            <div class="testimonials__row row">
@@ -323,8 +324,8 @@
                <div class="testimonials__delimiter col-8"></div>
            </div>
        </div>
-    </section>
-    <section class="pricing">
+    </div>
+    <div class="pricing">
        <p class="pricing__title">Fork Subscription Pricing</p>
        <div class="container">
            <div class="row">
@@ -390,8 +391,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <section class="newsletter">
+    </div>
+    <div class="newsletter">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-6 newsletter__title">
@@ -405,8 +406,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <section class="news">
+    </div>
+    <div class="news">
        <div class="container">
            <div class="row">
                <div class="col-4">
@@ -504,8 +505,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <footer class="footer">
+    </div>
+    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="footer__about col-4">
@@ -537,13 +538,13 @@
                <div class="footer__info col-3">
                    <p class="footer__info__title">Info</p>
                    <p class="footer__info__description">
-                        Wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+                        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>
-    </footer>
+    </div>
 </div>

 <!-- JavaScript -->
--- a/src/scss/_download.scss
+++ b/src/scss/_download.scss
@@ -1,14 +1,15 @@
 .download {
  text-align: center;
+  width: 100%;
 }

 .download__rounded-button--translated {
-  position: absolute;
-  transform: translate(-50%, -50%);
+  position: relative;
+  bottom: 15px;
 }

 .download__description {
-  padding-top: 45px;
+  padding-top: 15px;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 500;
--- a/src/scss/_footer.scss
+++ b/src/scss/_footer.scss
@@ -30,6 +30,7 @@
        font-weight: 500;
        font-size: 15px;
        color: $primary;
+        text-transform: capitalize;
        transition: $hover-duration;

        &:hover {
@@ -41,6 +42,37 @@
    }
  }

+  &__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;
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@@ -1,6 +1,6 @@
 .header {
-  background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
-  height: 900px;
+  background: black url(../img/header/img.png) no-repeat center 120px/ cover;
+  height: 100vh;
  padding-top: 110px;
 }

--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -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 {
--- a/src/scss/_social.scss
+++ b/src/scss/_social.scss
@@ -3,7 +3,7 @@
  padding-top: 50px;
  padding-bottom: 80px;
  display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
 }

 .social__stats {
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -19,3 +19,8 @@ $hover-duration: 0.3s;
 $github-color: #f3f3f3;
 $twitter-color: #26a6d1;
 $facebook-color: #3b5998;
+
+$phone: 576px;
+$tablet: 768px;
+$desktop: 992px;
+$desktop-xl: 1200px;
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
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