Fix errors raported by W3C validator

Fix header
Fix Download button
2018-04-10 12:33:24 +02:00 · 2018-04-10 12:12:07 +02:00 · 2018-04-10 11:29:39 +02:00 · 2018-04-10 11:29:10 +02:00 · 2018-04-10 10:58:26 +02:00 · 2018-04-10 10:57:37 +02:00
8 changed files with 203 additions and 68 deletions
--- a/src/index.html
+++ b/src/index.html
@@ -28,12 +28,12 @@
 </head>
 <body>
 <div class="wrapper" id="wrapper">
-    <nav class="navbar navbar-expand-lg sticky-top">
+    <div class="navbar navbar-expand-lg fixed-top">
        <div class="container">
-            <div class="navbar__header navbar-header">
-                <img class="navbar__logo" src="img/logo.svg" alt="Forkio logo">
-                <span class="navbar__brand">Fork</span>
-                <span class="navbar__brand navbar__brand--emph">IO</span>
+            <div class="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">
@@ -49,13 +49,11 @@
                    <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>
+                    <button class="rounded-button rounded-button--strong">Buy now</button>
                </li>
            </ul>
        </div>
-    </nav>
+    </div>

    <header class="header">
        <div>
@@ -64,13 +62,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 +101,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 +127,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 +142,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 +157,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 +177,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 +234,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 +261,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 +320,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 +387,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 +402,8 @@
                </div>
            </div>
        </div>
-    </section>
-    <section class="news">
+    </div>
+    <div class="news">
        <div class="container">
            <div class="row">
                <div class="col-4">
@@ -415,16 +412,20 @@
                    </p>
                    <div class="news-entry">
                        <p class="news-entry__brief">Fully Available: Live Preview Support for Multiple Browsers</p>
-                        <p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
+                        <p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam
+                            tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl
+                            nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
                    </div>
                    <div class="news-entry">
                        <p class="news-entry__brief">Improved Support for Typing</p>
-                        <p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit. Donec eu elit mauris. </p>
+                        <p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit.
+                            Donec eu elit mauris. </p>
                    </div>
                    <div class="news-entry">
                        <p class="news-entry__brief">Improved Stability</p>
                        <p class="news-entry__content">
-                            Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel, iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
+                            Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel,
+                            iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
                        </p>
                    </div>
                    <button class="rect-button rect-button--small">Go to Release Log</button>
@@ -448,7 +449,8 @@
                    <div class="news-entry">
                        <a href="#" class="news-entry__title">WebZap</a>
                        <p class="news-entry__content">
-                            Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam vitae orci. Suspendisse interdum accumsan magna vitae commodo.
+                            Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam
+                            vitae orci. Suspendisse interdum accumsan magna vitae commodo.
                        </p>
                    </div>
                    <div class="news-entry">
@@ -470,7 +472,8 @@
                        </p>
                    </div>
                    <div class="news-entry">
-                        <a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit leo.</a>
+                        <a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit
+                            leo.</a>
                        <p class="news-entry__content">
                            February 12, 2015
                        </p>
@@ -482,7 +485,8 @@
                        </p>
                    </div>
                    <div class="news-entry">
-                        <a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a egestas.</a>
+                        <a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a
+                            egestas.</a>
                        <p class="news-entry__content">
                            February 2, 2015
                        </p>
@@ -497,7 +501,46 @@
                </div>
            </div>
        </div>
-    </section>
+    </div>
+    <div class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="footer__about col-4">
+                    <div class="brand">
+                        <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>
+                    <p class="footer__about__description">
+                        Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
+                    </p>
+                </div>
+                <div class="footer__nav col-2">
+                    <p class="footer__nav__title">Navigation</p>
+                    <ul class="footer__nav__navbar">
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Overview</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Buying options</a></li>
+                        <li><a href="#">Support</a></li>
+                    </ul>
+                </div>
+                <div class="footer__contact col-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">
+                    <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
+                        aliquip ex commodo consequat. Autem vel hendrerit iriure dolor in hendrerit.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>

 <!-- JavaScript -->
--- a/src/scss/_brand.scss
+++ b/src/scss/_brand.scss
@@ -0,0 +1,22 @@
+.brand {
+  display: flex;
+}
+
+.brand__logo {
+  height: 45px;
+  margin-right: 17px;
+}
+
+.brand__name {
+  font-family: Lato, sans-serif;
+  text-transform: uppercase;
+  font-size: 24px;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+
+  &--emph {
+    color: $primary;
+    font-style: normal;
+  }
+}
--- 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
@@ -0,0 +1,91 @@
+.footer {
+  margin-top: 65px;
+  padding-top: 65px;
+  border-top: solid 1px $background-light;
+  margin-bottom: 95px;
+
+  &__about {
+    &__description {
+      margin-top: 30px;
+      font-family: Montserrat, sans-serif;
+      font-size: 14px;
+      color: $regular-text;
+    }
+  }
+
+  &__nav {
+    &__title {
+      font-family: Montserrat, sans-serif;
+      font-weight: 600;
+      font-size: 16px;
+      color: $dark-text;
+    }
+
+    &__navbar {
+      padding-left: 0;
+      list-style-type: none;
+
+      & > li > a {
+        font-family: Montserrat, sans-serif;
+        font-weight: 500;
+        font-size: 15px;
+        color: $primary;
+        text-transform: capitalize;
+        transition: $hover-duration;
+
+        &:hover {
+          color: darken($primary, $hover-threshold);
+          transition: $hover-duration;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  &__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;
+      font-weight: 600;
+      font-size: 16px;
+      color: $dark-text;
+    }
+
+    &__description {
+      margin-top: 25px;
+      font-family: Montserrat, sans-serif;
+      font-size: 14px;
+      color: $regular-text;
+    }
+  }
+}
--- 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;
+  height: 100vh;
  padding-top: 110px;
 }

--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -13,30 +13,6 @@ $shrinking-duration: 0.4s;
  transition: height $shrinking-duration;
 }

-.navbar__header {
-  display: flex;
-  justify-content: center;
-}
-
-.navbar__logo {
-  height: 45px;
-  margin-right: 17px;
-}
-
-.navbar__brand {
-  font-family: Lato, sans-serif;
-  text-transform: uppercase;
-  font-size: 24px;
-  font-weight: bold;
-  display: inline-flex;
-  align-items: center;
-}
-
-.navbar__brand--emph {
-  color: $primary;
-  font-style: normal;
-}
-
 .navbar__link {
  text-transform: capitalize;
  font-family: Montserrat, sans-serif;
--- 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/style.scss
+++ b/src/scss/style.scss
@@ -3,6 +3,7 @@
@import "global";
@import "author";
@import "navbar";
+@import "brand";
@import "header";
@import "download";
@import "editor";
@@ -14,4 +15,5 @@
@import "pricing";
@import "newsletter";
@import "form";
-@import "news";
+@import "news";
+@import "footer";
Author	SHA1	Message	Date
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
Bartlomiej Pluta (PGS Software)	92016ebdc5	Create footer	2018-04-10 10:57:37 +02:00
Bartłomiej Przemysław Pluta	fc4b091d2f	Merge pull request #6 from bartlomiej-pluta/news Create news section	2018-04-10 09:50:17 +02:00