From e68c49a3e47d703a155583a7fb79c55d73e39305 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Wed, 16 Jan 2019 21:26:13 +0000
Subject: [PATCH 01/19] Initial commit

---
 css/style.css | 516 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  42 ++++
 2 files changed, 558 insertions(+)
 create mode 100644 css/style.css
 create mode 100644 index.html

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..36eee1a
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,516 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
+    background-attachment: fixed;
+}
+
+.wrapper {
+    position: relative;
+    width: 320px;
+    height: 568px;
+    margin: 0 auto;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    .wrapper {
+        position: relative;
+        width: 768px;
+        height: 1024px;
+    }
+}
+
+/* Header */
+header {
+    position: absolute;
+    width: 320px;
+    height: 50px;
+    left: 0px;
+    top: 176px;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    header {
+        position: absolute;
+        width: 768px;
+        height: 100px;
+        left: 0%;
+        right: 0%;
+        top: 34.96%;
+        bottom: 55.27%;
+    }
+}
+
+/* CODE ACADEMY */
+header h1 {
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 0%;
+    bottom: 0%;
+    padding-top: 10px;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    font-size: 30px;
+    text-align: center;
+    letter-spacing: 5px;
+    color: #FFFFFF;
+    text-transform: uppercase;
+    mix-blend-mode: normal;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    header h1 {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 0%;
+        bottom: 0%;
+        padding-top: 70px;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+        font-size: 60px;
+        text-align: center;
+        letter-spacing: 5px;
+        text-transform: uppercase;
+
+        color: #FFFFFF;
+
+        mix-blend-mode: normal;
+    }
+}
+
+header img {
+    position: absolute;
+    width: 286px;
+    left: 5.31%;
+    right: 5.31%;
+    top: -294%;
+    bottom: 86%;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    header img {
+        position: absolute;
+        left: 5.31%;
+        right: 5.31%;
+        top: -294%;
+        bottom: 86%;
+        width: 686px;
+    }
+}
+
+.ribbon {
+    display: none;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    .ribbon {
+        position: absolute;
+        display: block;
+        left: 83.85%;
+        right: 0%;
+        top: 0.1%;
+        bottom: 81.45%;
+        width: 124px;
+        height: 198px;
+        background: url(/assets/coming-soon-ribbon.png);
+        background-repeat: no-repeat;
+    }
+}
+
+/* Form */
+form {
+    position: absolute;
+    width: 320px;
+    height: 197.12px;
+    left: 0px;
+    top: 229.88px;
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    form {
+        position: absolute;
+        width: 768px;
+        height: 197.12px;
+        left: 0.52%;
+        right: -0.52%;
+        top: 45.8%;
+        bottom: 34.95%;
+        transform: translateY(34.95%);
+    }
+}
+
+/* Form Title */
+label {
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 0%;
+    bottom: 75.03%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 18px;
+    text-align: center;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    label {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 0%;
+        bottom: 75.03%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 24px;
+        text-align: center;
+
+        color: #FFFFFF;
+    }
+}
+
+input {
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 2.04%;
+    bottom: 2.04%;
+    width: 250px;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    font-size: 16px;
+    text-indent: 10px;
+
+    color: #A0A0A0;
+    background: #FFFFFF;
+    border-radius: 9px;
+}
+
+@media (min-width: 768px) {
+    input {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 0%;
+        bottom: 2.04%;
+        width: 250px;
+        height: 48px;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+        font-size: 16px;
+        text-indent: 10px;
+
+        color: #A0A0A0;
+    }
+}
+
+input[type=email] {
+    /* Input-email */
+
+    position: absolute;
+    left: 10.94%;
+    right: 10.94%;
+    top: 32.97%;
+    bottom: 42.68%;
+
+    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+@media (min-width: 768px) {
+    input[type=email] {
+        position: absolute;
+        left: 15.62%;
+        right: 51.82%;
+        top: 33.48%;
+        bottom: 42.17%;
+
+        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+    }
+}
+
+input:focus {
+    outline: none;
+    border: 2px solid #5AAF65;
+    color: #070707;
+}
+
+input[text=email]:invalid {
+    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.beforeText:hover::before {
+    position: absolute;
+    content: "E-mail";
+    left: 11.88%;
+    right: 10.94%;
+    top: 21.37%;
+    bottom: 66.46%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 16px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    .beforeText:hover::before {
+        position: absolute;
+        content: "E-mail";
+        left: 15.70%;
+        right: 51.82%;
+        top: 21.37%;
+        bottom: 66.46%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 16px;
+
+        color: #FFFFFF;
+    }
+}
+
+/* Button */
+button {
+    position: absolute;
+    left: 10.94%;
+    right: 10.94%;
+    top: 65.95%;
+    bottom: 9.7%;
+    width: 250px;
+    font-family: Lato;
+    font-style: normal;
+    font-weight: bold;
+    line-height: normal;
+    font-size: 16px;
+    text-align: center;
+    text-transform: uppercase;
+
+    color: #FFFFFF;
+
+    background: #0297EC;
+    border-radius: 9px;
+    transition: .2s;
+}
+
+@media (min-width: 768px) {
+    button {
+        position: absolute;
+        left: 51.82%;
+        right: 15.62%;
+        top: 33.48%;
+        bottom: 42.17%;
+        width: 250px;
+        height: 48px;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: bold;
+        line-height: normal;
+        font-size: 16px;
+        text-align: center;
+        text-transform: uppercase;
+
+        color: #FFFFFF;
+
+        background: #0297EC;
+        border-radius: 9px;
+        transition: .2s;
+    }
+}
+
+button:hover {
+    position: absolute;
+    outline: none;
+    top: 63.41%;
+    bottom: 12.24%;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+@media (min-width: 768px) {
+    button:hover {
+        outline: none;
+        top: 30.94%;
+        bottom: 44.71%;
+        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+        cursor: pointer;
+    }
+}
+
+/* Footer */
+footer {
+    position: absolute;
+    width: 320px;
+    height: 150px;
+    left: 0px;
+    top: 418px;
+}
+
+@media (min-width: 768px) {
+    footer {
+        position: absolute;
+        width: 768px;
+        height: 150px;
+        left: 0.52%;
+        right: -0.52%;
+        top: 84.96%;
+        bottom: 0.39%;
+    }
+}
+
+footer p:nth-child(1) {
+    /* User © 2019. */
+
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 33.33%;
+    bottom: 53.33%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    footer p:nth-child(1) {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 33.33%;
+        bottom: 48%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 28px;
+        font-size: 24px;
+        text-align: center;
+        text-indent: 10px;
+
+        color: #FFFFFF;
+    }
+}
+
+footer p:nth-child(2) {
+    /* Made with in Poland */
+
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 46.67%;
+    bottom: 40%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width:768px) {
+    footer p:nth-child(2) {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 54%;
+        bottom: 27.33%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 28px;
+        font-size: 24px;
+        text-align: center;
+        text-indent: 10px;
+
+        color: #FFFFFF;
+
+    }
+}
+
+footer p:nth-child(3) {
+    /* We're using cookies to improve your experience. */
+
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 60%;
+    bottom: 13.33%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    footer p:nth-child(3) {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 73.33%;
+        bottom: 8%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 28px;
+        font-size: 24px;
+        text-align: center;
+        text-indent: 10px;
+
+        color: #FFFFFF;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9b51b2a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
+
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="ribbon"></div>
+        <header>
+            <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
+
+            <h1>code academy</h1>
+        </header>
+
+        <main>
+            <form>
+                <label for="email">Leave your email</label>
+                <div class="beforeText">
+                    <input type="email" id="email" placeholder="E-mail" required>
+                </div>
+                <button>Get early access</button>
+            </form>
+        </main>
+
+        <footer>
+            <p>ctarx © 2019.</p>
+            <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
+            <p>We're using cookies to improve your experience.</p>
+
+        </footer>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

From 4bf31e96392ffa9e57e11b7c1e53d93ef4d1e6db Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Wed, 16 Jan 2019 23:07:46 +0000
Subject: [PATCH 02/19] Container removed

---
 css/style.css |  7 ++++---
 index.html    | 47 ++++++++++++++++++++++-------------------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/css/style.css b/css/style.css
index 36eee1a..3dc2b4f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,12 +4,12 @@
     box-sizing: border-box;
 }
 
-body {
+html {
     background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
     background-attachment: fixed;
 }
 
-.wrapper {
+body {
     position: relative;
     width: 320px;
     height: 568px;
@@ -18,7 +18,7 @@ body {
 
 /* large-screen */
 @media (min-width: 768px) {
-    .wrapper {
+    body {
         position: relative;
         width: 768px;
         height: 1024px;
@@ -201,6 +201,7 @@ input {
     top: 2.04%;
     bottom: 2.04%;
     width: 250px;
+    height: 48px;
 
     font-family: Lato;
     font-style: normal;
diff --git a/index.html b/index.html
index 9b51b2a..02e1082 100644
--- a/index.html
+++ b/index.html
@@ -12,31 +12,28 @@
 </head>
 
 <body>
-    <div class="wrapper">
-        <div class="ribbon"></div>
-        <header>
-            <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
-
-            <h1>code academy</h1>
-        </header>
-
-        <main>
-            <form>
-                <label for="email">Leave your email</label>
-                <div class="beforeText">
-                    <input type="email" id="email" placeholder="E-mail" required>
-                </div>
-                <button>Get early access</button>
-            </form>
-        </main>
-
-        <footer>
-            <p>ctarx © 2019.</p>
-            <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
-            <p>We're using cookies to improve your experience.</p>
-
-        </footer>
-    </div>
+
+    <div class="ribbon"></div>
+    <header>
+        <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
+
+        <h1>code academy</h1>
+    </header>
+
+    <form>
+        <label for="email">Leave your email</label>
+        <div class="beforeText">
+            <input type="email" id="email" placeholder="E-mail" required>
+        </div>
+        <button>Get early access</button>
+    </form>
+
+    <footer>
+        <p>ctarx © 2019.</p>
+        <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
+        <p>We're using cookies to improve your experience.</p>
+    </footer>
+
 </body>
 
 </html>
\ No newline at end of file

From c00a2dd455cda644f479a9f18a5563822213b4be Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Thu, 17 Jan 2019 23:22:07 +0000
Subject: [PATCH 03/19] Cleaning the code

---
 css/style.css | 237 ++++++++------------------------------------------
 index.html    |  10 +--
 2 files changed, 40 insertions(+), 207 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3dc2b4f..b60cf73 100644
--- a/css/style.css
+++ b/css/style.css
@@ -13,10 +13,13 @@ body {
     position: relative;
     width: 320px;
     height: 568px;
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    color: #FFFFFF;
     margin: 0 auto;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     body {
         position: relative;
@@ -26,28 +29,24 @@ body {
 }
 
 /* Header */
+
 header {
     position: absolute;
     width: 320px;
     height: 50px;
-    left: 0px;
     top: 176px;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     header {
         position: absolute;
         width: 768px;
         height: 100px;
-        left: 0%;
-        right: 0%;
         top: 34.96%;
         bottom: 55.27%;
     }
 }
 
-/* CODE ACADEMY */
 header h1 {
     position: absolute;
     left: 0%;
@@ -55,9 +54,6 @@ header h1 {
     top: 0%;
     bottom: 0%;
     padding-top: 10px;
-
-    font-family: Lato;
-    font-style: normal;
     font-weight: 300;
     line-height: normal;
     font-size: 30px;
@@ -68,7 +64,6 @@ header h1 {
     mix-blend-mode: normal;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     header h1 {
         position: absolute;
@@ -77,19 +72,7 @@ header h1 {
         top: 0%;
         bottom: 0%;
         padding-top: 70px;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
         font-size: 60px;
-        text-align: center;
-        letter-spacing: 5px;
-        text-transform: uppercase;
-
-        color: #FFFFFF;
-
-        mix-blend-mode: normal;
     }
 }
 
@@ -102,14 +85,8 @@ header img {
     bottom: 86%;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     header img {
-        position: absolute;
-        left: 5.31%;
-        right: 5.31%;
-        top: -294%;
-        bottom: 86%;
         width: 686px;
     }
 }
@@ -118,7 +95,6 @@ header img {
     display: none;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     .ribbon {
         position: absolute;
@@ -135,6 +111,7 @@ header img {
 }
 
 /* Form */
+
 form {
     position: absolute;
     width: 320px;
@@ -148,7 +125,6 @@ form {
     form {
         position: absolute;
         width: 768px;
-        height: 197.12px;
         left: 0.52%;
         right: -0.52%;
         top: 45.8%;
@@ -157,54 +133,26 @@ form {
     }
 }
 
-/* Form Title */
-label {
+legend {
     position: absolute;
     left: 0%;
     right: 0%;
     top: 0%;
     bottom: 75.03%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
     line-height: normal;
     font-size: 18px;
     text-align: center;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
-    label {
-        position: absolute;
-        left: 0%;
-        right: 0%;
-        top: 0%;
-        bottom: 75.03%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: normal;
+    legend {
         font-size: 24px;
-        text-align: center;
-
-        color: #FFFFFF;
     }
 }
 
 input {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 2.04%;
-    bottom: 2.04%;
     width: 250px;
     height: 48px;
-
-    font-family: Lato;
-    font-style: normal;
     font-weight: 300;
     line-height: normal;
     font-size: 16px;
@@ -218,33 +166,16 @@ input {
 @media (min-width: 768px) {
     input {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 0%;
-        bottom: 2.04%;
-        width: 250px;
-        height: 48px;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
-        font-size: 16px;
-        text-indent: 10px;
-
-        color: #A0A0A0;
     }
 }
 
 input[type=email] {
-    /* Input-email */
-
     position: absolute;
     left: 10.94%;
     right: 10.94%;
     top: 32.97%;
     bottom: 42.68%;
-
     box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
@@ -255,8 +186,6 @@ input[type=email] {
         right: 51.82%;
         top: 33.48%;
         bottom: 42.17%;
-
-        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
     }
 }
 
@@ -266,47 +195,29 @@ input:focus {
     color: #070707;
 }
 
-input[text=email]:invalid {
-    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+label {
+    display: none;
 }
 
-.beforeText:hover::before {
+input:focus+label {
+    display: block;
     position: absolute;
-    content: "E-mail";
     left: 11.88%;
     right: 10.94%;
     top: 21.37%;
     bottom: 66.46%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
     line-height: normal;
     font-size: 16px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
-    .beforeText:hover::before {
+    input:focus+label {
         position: absolute;
-        content: "E-mail";
-        left: 15.70%;
+        left: 15.80%;
         right: 51.82%;
-        top: 21.37%;
-        bottom: 66.46%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: normal;
-        font-size: 16px;
-
-        color: #FFFFFF;
     }
 }
 
-/* Button */
 button {
     position: absolute;
     left: 10.94%;
@@ -314,19 +225,17 @@ button {
     top: 65.95%;
     bottom: 9.7%;
     width: 250px;
-    font-family: Lato;
-    font-style: normal;
+    height: 48px;
     font-weight: bold;
     line-height: normal;
     font-size: 16px;
     text-align: center;
     text-transform: uppercase;
-
-    color: #FFFFFF;
-
     background: #0297EC;
     border-radius: 9px;
-    transition: .2s;
+    font-family: Lato;
+    color: #FFFFFF;
+    /* transition: .2s; */
 }
 
 @media (min-width: 768px) {
@@ -336,22 +245,7 @@ button {
         right: 15.62%;
         top: 33.48%;
         bottom: 42.17%;
-        width: 250px;
-        height: 48px;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: bold;
-        line-height: normal;
-        font-size: 16px;
-        text-align: center;
-        text-transform: uppercase;
-
-        color: #FFFFFF;
-
-        background: #0297EC;
-        border-radius: 9px;
-        transition: .2s;
+        /* transition: .2s; */
     }
 }
 
@@ -369,12 +263,11 @@ button:hover {
         outline: none;
         top: 30.94%;
         bottom: 44.71%;
-        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-        cursor: pointer;
     }
 }
 
 /* Footer */
+
 footer {
     position: absolute;
     width: 320px;
@@ -383,6 +276,22 @@ footer {
     top: 418px;
 }
 
+footer p {
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    footer p {
+        line-height: 28px;
+        font-size: 24px;
+    }
+}
+
 @media (min-width: 768px) {
     footer {
         position: absolute;
@@ -396,122 +305,48 @@ footer {
 }
 
 footer p:nth-child(1) {
-    /* User © 2019. */
-
     position: absolute;
     left: 0%;
     right: 0%;
     top: 33.33%;
     bottom: 53.33%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 16px;
-    text-align: center;
-    text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(1) {
         position: absolute;
-        left: 0%;
-        right: 0%;
-        top: 33.33%;
         bottom: 48%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 28px;
-        font-size: 24px;
-        text-align: center;
-        text-indent: 10px;
-
-        color: #FFFFFF;
     }
 }
 
 footer p:nth-child(2) {
-    /* Made with in Poland */
-
     position: absolute;
     left: 0%;
     right: 0%;
     top: 46.67%;
     bottom: 40%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 16px;
-    text-align: center;
-    text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width:768px) {
     footer p:nth-child(2) {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 54%;
         bottom: 27.33%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 28px;
-        font-size: 24px;
-        text-align: center;
-        text-indent: 10px;
-
-        color: #FFFFFF;
-
     }
 }
 
 footer p:nth-child(3) {
-    /* We're using cookies to improve your experience. */
-
     position: absolute;
     left: 0%;
     right: 0%;
     top: 60%;
     bottom: 13.33%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 16px;
-    text-align: center;
-    text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(3) {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 73.33%;
         bottom: 8%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 28px;
-        font-size: 24px;
-        text-align: center;
-        text-indent: 10px;
-
-        color: #FFFFFF;
     }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 02e1082..1121550 100644
--- a/index.html
+++ b/index.html
@@ -15,16 +15,14 @@
 
     <div class="ribbon"></div>
     <header>
-        <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
-
+        <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo with a man in front of the laptop">
         <h1>code academy</h1>
     </header>
 
     <form>
-        <label for="email">Leave your email</label>
-        <div class="beforeText">
-            <input type="email" id="email" placeholder="E-mail" required>
-        </div>
+        <legend>Leave your email</legend>
+        <input type="email" id="email" placeholder="E-mail" required>
+        <label for="email">E-mail</label>
         <button>Get early access</button>
     </form>
 

From e4263a22551ce8607d8bc270dc4997065cc2358d Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Fri, 18 Jan 2019 21:49:52 +0000
Subject: [PATCH 04/19] Email validate and pseudo-element

---
 css/style.css | 33 +++++++++++++++++++++++++++++++--
 index.html    |  2 +-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index b60cf73..902c35d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -199,7 +199,34 @@ label {
     display: none;
 }
 
-input:focus+label {
+label:before {
+    content: '';
+}
+
+input:focus:invalid+label:before {
+    content: 'Invalid ';
+}
+
+input:focus:valid+label {
+    display: block;
+    position: absolute;
+    left: 11.88%;
+    right: 10.94%;
+    top: 21.37%;
+    bottom: 66.46%;
+    line-height: normal;
+    font-size: 16px;
+}
+
+@media (min-width: 768px) {
+    input:focus:valid+label {
+        position: absolute;
+        left: 15.80%;
+        right: 51.82%;
+    }
+}
+
+input:focus:invalid+label {
     display: block;
     position: absolute;
     left: 11.88%;
@@ -208,13 +235,15 @@ input:focus+label {
     bottom: 66.46%;
     line-height: normal;
     font-size: 16px;
+    color: #FF3333;
 }
 
 @media (min-width: 768px) {
-    input:focus+label {
+    input:focus:invalid+label {
         position: absolute;
         left: 15.80%;
         right: 51.82%;
+        color: #FF3333;
     }
 }
 
diff --git a/index.html b/index.html
index 1121550..6454834 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@ <h1>code academy</h1>
 
     <form>
         <legend>Leave your email</legend>
-        <input type="email" id="email" placeholder="E-mail" required>
+        <input type="email" id="email" placeholder="E-mail" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required>
         <label for="email">E-mail</label>
         <button>Get early access</button>
     </form>

From 52285da0abd7923e4f4efec4285a96914a7eea38 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Fri, 18 Jan 2019 23:55:39 +0000
Subject: [PATCH 05/19] Footer img resized

---
 css/style.css | 38 +++++++++++++++++++++++++-------------
 index.html    |  2 +-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/css/style.css b/css/style.css
index 902c35d..60d93aa 100644
--- a/css/style.css
+++ b/css/style.css
@@ -264,7 +264,6 @@ button {
     border-radius: 9px;
     font-family: Lato;
     color: #FFFFFF;
-    /* transition: .2s; */
 }
 
 @media (min-width: 768px) {
@@ -274,7 +273,6 @@ button {
         right: 15.62%;
         top: 33.48%;
         bottom: 42.17%;
-        /* transition: .2s; */
     }
 }
 
@@ -305,6 +303,17 @@ footer {
     top: 418px;
 }
 
+@media (min-width: 768px) {
+    footer {
+        position: absolute;
+        width: 768px;
+        height: 150px;
+        left: 0.52%;
+        right: -0.52%;
+        top: 84.96%;
+    }
+}
+
 footer p {
     line-height: 20px;
     font-size: 16px;
@@ -318,20 +327,11 @@ footer p {
     footer p {
         line-height: 28px;
         font-size: 24px;
+        top: 33.33%;
+        bottom: 8%;
     }
 }
 
-@media (min-width: 768px) {
-    footer {
-        position: absolute;
-        width: 768px;
-        height: 150px;
-        left: 0.52%;
-        right: -0.52%;
-        top: 84.96%;
-        bottom: 0.39%;
-    }
-}
 
 footer p:nth-child(1) {
     position: absolute;
@@ -378,4 +378,16 @@ footer p:nth-child(3) {
         top: 73.33%;
         bottom: 8%;
     }
+}
+
+footer p img {
+    height: 15px;
+    width: 16px;
+}
+
+@media (min-width: 768px) {
+    footer p img {
+        height: 20px;
+        width: 24px;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6454834..b25d308 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@ <h1>code academy</h1>
 
     <footer>
         <p>ctarx © 2019.</p>
-        <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
+        <p>Made with <img class="love_img" src="/assets/love.png" alt="hearth"> in Poland</p>
         <p>We're using cookies to improve your experience.</p>
     </footer>
 

From bd7aa6eff60ae944becc71ac1c87e5bf896cc4d9 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Sat, 19 Jan 2019 19:47:29 +0000
Subject: [PATCH 06/19] Code reduced, css normalized and ribbon fixed
 positioned

---
 css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++++
 css/style.css     | 118 ++++------------
 index.html        |   2 +-
 3 files changed, 381 insertions(+), 88 deletions(-)
 create mode 100644 css/normalize.css

diff --git a/css/normalize.css b/css/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/css/style.css b/css/style.css
index 60d93aa..146a960 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,3 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 html {
     background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
     background-attachment: fixed;
@@ -35,6 +29,7 @@ header {
     width: 320px;
     height: 50px;
     top: 176px;
+    left: 0px;
 }
 
 @media (min-width: 768px) {
@@ -49,17 +44,14 @@ header {
 
 header h1 {
     position: absolute;
-    left: 0%;
-    right: 0%;
     top: 0%;
-    bottom: 0%;
-    padding-top: 10px;
+    left: 0%;
     font-weight: 300;
     line-height: normal;
     font-size: 30px;
+    width: 100%;
     text-align: center;
     letter-spacing: 5px;
-    color: #FFFFFF;
     text-transform: uppercase;
     mix-blend-mode: normal;
 }
@@ -67,11 +59,9 @@ header h1 {
 @media (min-width: 768px) {
     header h1 {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 0%;
-        bottom: 0%;
-        padding-top: 70px;
+        left: 0%;
+        padding-top: 50px;
         font-size: 60px;
     }
 }
@@ -97,16 +87,15 @@ header img {
 
 @media (min-width: 768px) {
     .ribbon {
-        position: absolute;
+        position: fixed;
         display: block;
-        left: 83.85%;
         right: 0%;
         top: 0.1%;
-        bottom: 81.45%;
         width: 124px;
         height: 198px;
         background: url(/assets/coming-soon-ribbon.png);
         background-repeat: no-repeat;
+        z-index: 1;
     }
 }
 
@@ -118,27 +107,22 @@ form {
     height: 197.12px;
     left: 0px;
     top: 229.88px;
-    margin-top: 14px;
 }
 
 @media (min-width: 768px) {
     form {
         position: absolute;
         width: 768px;
-        left: 0.52%;
-        right: -0.52%;
-        top: 45.8%;
-        bottom: 34.95%;
-        transform: translateY(34.95%);
+        left: 0%;
+        top: 55%;
     }
 }
 
 legend {
     position: absolute;
     left: 0%;
-    right: 0%;
-    top: 0%;
-    bottom: 75.03%;
+    top: 10%;
+    width: 100%;
     line-height: normal;
     font-size: 18px;
     text-align: center;
@@ -146,46 +130,33 @@ legend {
 
 @media (min-width: 768px) {
     legend {
+        top: 0%;
         font-size: 24px;
     }
 }
 
 input {
+    position: absolute;
+    left: 10.94%;
+    top: 32.97%;
     width: 250px;
     height: 48px;
     font-weight: 300;
     line-height: normal;
     font-size: 16px;
     text-indent: 10px;
-
+    padding: 0;
     color: #A0A0A0;
     background: #FFFFFF;
+    border: none;
     border-radius: 9px;
-}
-
-@media (min-width: 768px) {
-    input {
-        position: absolute;
-        top: 0%;
-    }
-}
-
-input[type=email] {
-    position: absolute;
-    left: 10.94%;
-    right: 10.94%;
-    top: 32.97%;
-    bottom: 42.68%;
     box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
 @media (min-width: 768px) {
-    input[type=email] {
-        position: absolute;
+    input {
         left: 15.62%;
-        right: 51.82%;
         top: 33.48%;
-        bottom: 42.17%;
     }
 }
 
@@ -250,9 +221,7 @@ input:focus:invalid+label {
 button {
     position: absolute;
     left: 10.94%;
-    right: 10.94%;
     top: 65.95%;
-    bottom: 9.7%;
     width: 250px;
     height: 48px;
     font-weight: bold;
@@ -261,6 +230,7 @@ button {
     text-align: center;
     text-transform: uppercase;
     background: #0297EC;
+    border: none;
     border-radius: 9px;
     font-family: Lato;
     color: #FFFFFF;
@@ -268,19 +238,14 @@ button {
 
 @media (min-width: 768px) {
     button {
-        position: absolute;
         left: 51.82%;
-        right: 15.62%;
         top: 33.48%;
-        bottom: 42.17%;
     }
 }
 
 button:hover {
-    position: absolute;
     outline: none;
     top: 63.41%;
-    bottom: 12.24%;
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
     cursor: pointer;
 }
@@ -289,7 +254,6 @@ button:hover {
     button:hover {
         outline: none;
         top: 30.94%;
-        bottom: 44.71%;
     }
 }
 
@@ -299,8 +263,9 @@ footer {
     position: absolute;
     width: 320px;
     height: 150px;
-    left: 0px;
     top: 418px;
+    left: 0px;
+    text-align: center;
 }
 
 @media (min-width: 768px) {
@@ -308,75 +273,54 @@ footer {
         position: absolute;
         width: 768px;
         height: 150px;
-        left: 0.52%;
-        right: -0.52%;
+        left: 0%;
         top: 84.96%;
     }
 }
 
 footer p {
+    position: absolute;
+    left: 0px;
+    right: 0px;
     line-height: 20px;
     font-size: 16px;
-    text-align: center;
     text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
     footer p {
         line-height: 28px;
         font-size: 24px;
-        top: 33.33%;
-        bottom: 8%;
     }
 }
 
-
 footer p:nth-child(1) {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 33.33%;
-    bottom: 53.33%;
+    top: 32.33%;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(1) {
-        position: absolute;
-        bottom: 48%;
+        top: 31.33%;
     }
 }
 
 footer p:nth-child(2) {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 46.67%;
-    bottom: 40%;
+    top: 46.33%;
 }
 
 @media (min-width:768px) {
     footer p:nth-child(2) {
-        position: absolute;
-        top: 54%;
-        bottom: 27.33%;
+        top: 47.33%;
     }
 }
 
 footer p:nth-child(3) {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 60%;
-    bottom: 13.33%;
+    top: 58.33%;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(3) {
-        position: absolute;
-        top: 73.33%;
-        bottom: 8%;
+        top: 63.33%;
     }
 }
 
diff --git a/index.html b/index.html
index b25d308..33a9eaa 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
+    <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="/css/style.css">
-
 </head>
 
 <body>

From 4cac1414ddc5d64885b27d4f50faec3ea6f4ec56 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Sat, 19 Jan 2019 19:55:49 +0000
Subject: [PATCH 07/19] p nth-child(1) moved

---
 css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 146a960..8503208 100644
--- a/css/style.css
+++ b/css/style.css
@@ -300,7 +300,7 @@ footer p:nth-child(1) {
 
 @media (min-width: 768px) {
     footer p:nth-child(1) {
-        top: 31.33%;
+        top: 30.33%;
     }
 }
 

From cc727091b3fe6508076d2ec91ee4f03e04c1dc2d Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Wed, 16 Jan 2019 21:26:13 +0000
Subject: [PATCH 08/19] Initial commit

---
 css/style.css | 516 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  42 ++++
 2 files changed, 558 insertions(+)
 create mode 100644 css/style.css
 create mode 100644 index.html

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..36eee1a
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,516 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
+    background-attachment: fixed;
+}
+
+.wrapper {
+    position: relative;
+    width: 320px;
+    height: 568px;
+    margin: 0 auto;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    .wrapper {
+        position: relative;
+        width: 768px;
+        height: 1024px;
+    }
+}
+
+/* Header */
+header {
+    position: absolute;
+    width: 320px;
+    height: 50px;
+    left: 0px;
+    top: 176px;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    header {
+        position: absolute;
+        width: 768px;
+        height: 100px;
+        left: 0%;
+        right: 0%;
+        top: 34.96%;
+        bottom: 55.27%;
+    }
+}
+
+/* CODE ACADEMY */
+header h1 {
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 0%;
+    bottom: 0%;
+    padding-top: 10px;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    font-size: 30px;
+    text-align: center;
+    letter-spacing: 5px;
+    color: #FFFFFF;
+    text-transform: uppercase;
+    mix-blend-mode: normal;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    header h1 {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 0%;
+        bottom: 0%;
+        padding-top: 70px;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+        font-size: 60px;
+        text-align: center;
+        letter-spacing: 5px;
+        text-transform: uppercase;
+
+        color: #FFFFFF;
+
+        mix-blend-mode: normal;
+    }
+}
+
+header img {
+    position: absolute;
+    width: 286px;
+    left: 5.31%;
+    right: 5.31%;
+    top: -294%;
+    bottom: 86%;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    header img {
+        position: absolute;
+        left: 5.31%;
+        right: 5.31%;
+        top: -294%;
+        bottom: 86%;
+        width: 686px;
+    }
+}
+
+.ribbon {
+    display: none;
+}
+
+/* large-screen */
+@media (min-width: 768px) {
+    .ribbon {
+        position: absolute;
+        display: block;
+        left: 83.85%;
+        right: 0%;
+        top: 0.1%;
+        bottom: 81.45%;
+        width: 124px;
+        height: 198px;
+        background: url(/assets/coming-soon-ribbon.png);
+        background-repeat: no-repeat;
+    }
+}
+
+/* Form */
+form {
+    position: absolute;
+    width: 320px;
+    height: 197.12px;
+    left: 0px;
+    top: 229.88px;
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    form {
+        position: absolute;
+        width: 768px;
+        height: 197.12px;
+        left: 0.52%;
+        right: -0.52%;
+        top: 45.8%;
+        bottom: 34.95%;
+        transform: translateY(34.95%);
+    }
+}
+
+/* Form Title */
+label {
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 0%;
+    bottom: 75.03%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 18px;
+    text-align: center;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    label {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 0%;
+        bottom: 75.03%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 24px;
+        text-align: center;
+
+        color: #FFFFFF;
+    }
+}
+
+input {
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 2.04%;
+    bottom: 2.04%;
+    width: 250px;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    font-size: 16px;
+    text-indent: 10px;
+
+    color: #A0A0A0;
+    background: #FFFFFF;
+    border-radius: 9px;
+}
+
+@media (min-width: 768px) {
+    input {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 0%;
+        bottom: 2.04%;
+        width: 250px;
+        height: 48px;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
+        font-size: 16px;
+        text-indent: 10px;
+
+        color: #A0A0A0;
+    }
+}
+
+input[type=email] {
+    /* Input-email */
+
+    position: absolute;
+    left: 10.94%;
+    right: 10.94%;
+    top: 32.97%;
+    bottom: 42.68%;
+
+    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+@media (min-width: 768px) {
+    input[type=email] {
+        position: absolute;
+        left: 15.62%;
+        right: 51.82%;
+        top: 33.48%;
+        bottom: 42.17%;
+
+        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+    }
+}
+
+input:focus {
+    outline: none;
+    border: 2px solid #5AAF65;
+    color: #070707;
+}
+
+input[text=email]:invalid {
+    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.beforeText:hover::before {
+    position: absolute;
+    content: "E-mail";
+    left: 11.88%;
+    right: 10.94%;
+    top: 21.37%;
+    bottom: 66.46%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 16px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    .beforeText:hover::before {
+        position: absolute;
+        content: "E-mail";
+        left: 15.70%;
+        right: 51.82%;
+        top: 21.37%;
+        bottom: 66.46%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: normal;
+        font-size: 16px;
+
+        color: #FFFFFF;
+    }
+}
+
+/* Button */
+button {
+    position: absolute;
+    left: 10.94%;
+    right: 10.94%;
+    top: 65.95%;
+    bottom: 9.7%;
+    width: 250px;
+    font-family: Lato;
+    font-style: normal;
+    font-weight: bold;
+    line-height: normal;
+    font-size: 16px;
+    text-align: center;
+    text-transform: uppercase;
+
+    color: #FFFFFF;
+
+    background: #0297EC;
+    border-radius: 9px;
+    transition: .2s;
+}
+
+@media (min-width: 768px) {
+    button {
+        position: absolute;
+        left: 51.82%;
+        right: 15.62%;
+        top: 33.48%;
+        bottom: 42.17%;
+        width: 250px;
+        height: 48px;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: bold;
+        line-height: normal;
+        font-size: 16px;
+        text-align: center;
+        text-transform: uppercase;
+
+        color: #FFFFFF;
+
+        background: #0297EC;
+        border-radius: 9px;
+        transition: .2s;
+    }
+}
+
+button:hover {
+    position: absolute;
+    outline: none;
+    top: 63.41%;
+    bottom: 12.24%;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+@media (min-width: 768px) {
+    button:hover {
+        outline: none;
+        top: 30.94%;
+        bottom: 44.71%;
+        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+        cursor: pointer;
+    }
+}
+
+/* Footer */
+footer {
+    position: absolute;
+    width: 320px;
+    height: 150px;
+    left: 0px;
+    top: 418px;
+}
+
+@media (min-width: 768px) {
+    footer {
+        position: absolute;
+        width: 768px;
+        height: 150px;
+        left: 0.52%;
+        right: -0.52%;
+        top: 84.96%;
+        bottom: 0.39%;
+    }
+}
+
+footer p:nth-child(1) {
+    /* User © 2019. */
+
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 33.33%;
+    bottom: 53.33%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    footer p:nth-child(1) {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 33.33%;
+        bottom: 48%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 28px;
+        font-size: 24px;
+        text-align: center;
+        text-indent: 10px;
+
+        color: #FFFFFF;
+    }
+}
+
+footer p:nth-child(2) {
+    /* Made with in Poland */
+
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 46.67%;
+    bottom: 40%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width:768px) {
+    footer p:nth-child(2) {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 54%;
+        bottom: 27.33%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 28px;
+        font-size: 24px;
+        text-align: center;
+        text-indent: 10px;
+
+        color: #FFFFFF;
+
+    }
+}
+
+footer p:nth-child(3) {
+    /* We're using cookies to improve your experience. */
+
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 60%;
+    bottom: 13.33%;
+
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    footer p:nth-child(3) {
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        top: 73.33%;
+        bottom: 8%;
+
+        font-family: Lato;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 28px;
+        font-size: 24px;
+        text-align: center;
+        text-indent: 10px;
+
+        color: #FFFFFF;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9b51b2a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
+
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="ribbon"></div>
+        <header>
+            <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
+
+            <h1>code academy</h1>
+        </header>
+
+        <main>
+            <form>
+                <label for="email">Leave your email</label>
+                <div class="beforeText">
+                    <input type="email" id="email" placeholder="E-mail" required>
+                </div>
+                <button>Get early access</button>
+            </form>
+        </main>
+
+        <footer>
+            <p>ctarx © 2019.</p>
+            <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
+            <p>We're using cookies to improve your experience.</p>
+
+        </footer>
+    </div>
+</body>
+
+</html>
\ No newline at end of file

From d6574f6038378f50c935cca3413ac8a733dfd305 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Wed, 16 Jan 2019 23:07:46 +0000
Subject: [PATCH 09/19] Container removed

---
 css/style.css |  7 ++++---
 index.html    | 47 ++++++++++++++++++++++-------------------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/css/style.css b/css/style.css
index 36eee1a..3dc2b4f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,12 +4,12 @@
     box-sizing: border-box;
 }
 
-body {
+html {
     background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
     background-attachment: fixed;
 }
 
-.wrapper {
+body {
     position: relative;
     width: 320px;
     height: 568px;
@@ -18,7 +18,7 @@ body {
 
 /* large-screen */
 @media (min-width: 768px) {
-    .wrapper {
+    body {
         position: relative;
         width: 768px;
         height: 1024px;
@@ -201,6 +201,7 @@ input {
     top: 2.04%;
     bottom: 2.04%;
     width: 250px;
+    height: 48px;
 
     font-family: Lato;
     font-style: normal;
diff --git a/index.html b/index.html
index 9b51b2a..02e1082 100644
--- a/index.html
+++ b/index.html
@@ -12,31 +12,28 @@
 </head>
 
 <body>
-    <div class="wrapper">
-        <div class="ribbon"></div>
-        <header>
-            <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
-
-            <h1>code academy</h1>
-        </header>
-
-        <main>
-            <form>
-                <label for="email">Leave your email</label>
-                <div class="beforeText">
-                    <input type="email" id="email" placeholder="E-mail" required>
-                </div>
-                <button>Get early access</button>
-            </form>
-        </main>
-
-        <footer>
-            <p>ctarx © 2019.</p>
-            <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
-            <p>We're using cookies to improve your experience.</p>
-
-        </footer>
-    </div>
+
+    <div class="ribbon"></div>
+    <header>
+        <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
+
+        <h1>code academy</h1>
+    </header>
+
+    <form>
+        <label for="email">Leave your email</label>
+        <div class="beforeText">
+            <input type="email" id="email" placeholder="E-mail" required>
+        </div>
+        <button>Get early access</button>
+    </form>
+
+    <footer>
+        <p>ctarx © 2019.</p>
+        <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
+        <p>We're using cookies to improve your experience.</p>
+    </footer>
+
 </body>
 
 </html>
\ No newline at end of file

From 984e50fb1b5827440a868714c1387d2b67f12836 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Thu, 17 Jan 2019 23:22:07 +0000
Subject: [PATCH 10/19] Cleaning the code

---
 css/style.css | 237 ++++++++------------------------------------------
 index.html    |  10 +--
 2 files changed, 40 insertions(+), 207 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3dc2b4f..b60cf73 100644
--- a/css/style.css
+++ b/css/style.css
@@ -13,10 +13,13 @@ body {
     position: relative;
     width: 320px;
     height: 568px;
+    font-family: Lato;
+    font-style: normal;
+    font-weight: normal;
+    color: #FFFFFF;
     margin: 0 auto;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     body {
         position: relative;
@@ -26,28 +29,24 @@ body {
 }
 
 /* Header */
+
 header {
     position: absolute;
     width: 320px;
     height: 50px;
-    left: 0px;
     top: 176px;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     header {
         position: absolute;
         width: 768px;
         height: 100px;
-        left: 0%;
-        right: 0%;
         top: 34.96%;
         bottom: 55.27%;
     }
 }
 
-/* CODE ACADEMY */
 header h1 {
     position: absolute;
     left: 0%;
@@ -55,9 +54,6 @@ header h1 {
     top: 0%;
     bottom: 0%;
     padding-top: 10px;
-
-    font-family: Lato;
-    font-style: normal;
     font-weight: 300;
     line-height: normal;
     font-size: 30px;
@@ -68,7 +64,6 @@ header h1 {
     mix-blend-mode: normal;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     header h1 {
         position: absolute;
@@ -77,19 +72,7 @@ header h1 {
         top: 0%;
         bottom: 0%;
         padding-top: 70px;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
         font-size: 60px;
-        text-align: center;
-        letter-spacing: 5px;
-        text-transform: uppercase;
-
-        color: #FFFFFF;
-
-        mix-blend-mode: normal;
     }
 }
 
@@ -102,14 +85,8 @@ header img {
     bottom: 86%;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     header img {
-        position: absolute;
-        left: 5.31%;
-        right: 5.31%;
-        top: -294%;
-        bottom: 86%;
         width: 686px;
     }
 }
@@ -118,7 +95,6 @@ header img {
     display: none;
 }
 
-/* large-screen */
 @media (min-width: 768px) {
     .ribbon {
         position: absolute;
@@ -135,6 +111,7 @@ header img {
 }
 
 /* Form */
+
 form {
     position: absolute;
     width: 320px;
@@ -148,7 +125,6 @@ form {
     form {
         position: absolute;
         width: 768px;
-        height: 197.12px;
         left: 0.52%;
         right: -0.52%;
         top: 45.8%;
@@ -157,54 +133,26 @@ form {
     }
 }
 
-/* Form Title */
-label {
+legend {
     position: absolute;
     left: 0%;
     right: 0%;
     top: 0%;
     bottom: 75.03%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
     line-height: normal;
     font-size: 18px;
     text-align: center;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
-    label {
-        position: absolute;
-        left: 0%;
-        right: 0%;
-        top: 0%;
-        bottom: 75.03%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: normal;
+    legend {
         font-size: 24px;
-        text-align: center;
-
-        color: #FFFFFF;
     }
 }
 
 input {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 2.04%;
-    bottom: 2.04%;
     width: 250px;
     height: 48px;
-
-    font-family: Lato;
-    font-style: normal;
     font-weight: 300;
     line-height: normal;
     font-size: 16px;
@@ -218,33 +166,16 @@ input {
 @media (min-width: 768px) {
     input {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 0%;
-        bottom: 2.04%;
-        width: 250px;
-        height: 48px;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
-        font-size: 16px;
-        text-indent: 10px;
-
-        color: #A0A0A0;
     }
 }
 
 input[type=email] {
-    /* Input-email */
-
     position: absolute;
     left: 10.94%;
     right: 10.94%;
     top: 32.97%;
     bottom: 42.68%;
-
     box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
@@ -255,8 +186,6 @@ input[type=email] {
         right: 51.82%;
         top: 33.48%;
         bottom: 42.17%;
-
-        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
     }
 }
 
@@ -266,47 +195,29 @@ input:focus {
     color: #070707;
 }
 
-input[text=email]:invalid {
-    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+label {
+    display: none;
 }
 
-.beforeText:hover::before {
+input:focus+label {
+    display: block;
     position: absolute;
-    content: "E-mail";
     left: 11.88%;
     right: 10.94%;
     top: 21.37%;
     bottom: 66.46%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
     line-height: normal;
     font-size: 16px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
-    .beforeText:hover::before {
+    input:focus+label {
         position: absolute;
-        content: "E-mail";
-        left: 15.70%;
+        left: 15.80%;
         right: 51.82%;
-        top: 21.37%;
-        bottom: 66.46%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: normal;
-        font-size: 16px;
-
-        color: #FFFFFF;
     }
 }
 
-/* Button */
 button {
     position: absolute;
     left: 10.94%;
@@ -314,19 +225,17 @@ button {
     top: 65.95%;
     bottom: 9.7%;
     width: 250px;
-    font-family: Lato;
-    font-style: normal;
+    height: 48px;
     font-weight: bold;
     line-height: normal;
     font-size: 16px;
     text-align: center;
     text-transform: uppercase;
-
-    color: #FFFFFF;
-
     background: #0297EC;
     border-radius: 9px;
-    transition: .2s;
+    font-family: Lato;
+    color: #FFFFFF;
+    /* transition: .2s; */
 }
 
 @media (min-width: 768px) {
@@ -336,22 +245,7 @@ button {
         right: 15.62%;
         top: 33.48%;
         bottom: 42.17%;
-        width: 250px;
-        height: 48px;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: bold;
-        line-height: normal;
-        font-size: 16px;
-        text-align: center;
-        text-transform: uppercase;
-
-        color: #FFFFFF;
-
-        background: #0297EC;
-        border-radius: 9px;
-        transition: .2s;
+        /* transition: .2s; */
     }
 }
 
@@ -369,12 +263,11 @@ button:hover {
         outline: none;
         top: 30.94%;
         bottom: 44.71%;
-        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-        cursor: pointer;
     }
 }
 
 /* Footer */
+
 footer {
     position: absolute;
     width: 320px;
@@ -383,6 +276,22 @@ footer {
     top: 418px;
 }
 
+footer p {
+    line-height: 20px;
+    font-size: 16px;
+    text-align: center;
+    text-indent: 10px;
+
+    color: #FFFFFF;
+}
+
+@media (min-width: 768px) {
+    footer p {
+        line-height: 28px;
+        font-size: 24px;
+    }
+}
+
 @media (min-width: 768px) {
     footer {
         position: absolute;
@@ -396,122 +305,48 @@ footer {
 }
 
 footer p:nth-child(1) {
-    /* User © 2019. */
-
     position: absolute;
     left: 0%;
     right: 0%;
     top: 33.33%;
     bottom: 53.33%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 16px;
-    text-align: center;
-    text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(1) {
         position: absolute;
-        left: 0%;
-        right: 0%;
-        top: 33.33%;
         bottom: 48%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 28px;
-        font-size: 24px;
-        text-align: center;
-        text-indent: 10px;
-
-        color: #FFFFFF;
     }
 }
 
 footer p:nth-child(2) {
-    /* Made with in Poland */
-
     position: absolute;
     left: 0%;
     right: 0%;
     top: 46.67%;
     bottom: 40%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 16px;
-    text-align: center;
-    text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width:768px) {
     footer p:nth-child(2) {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 54%;
         bottom: 27.33%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 28px;
-        font-size: 24px;
-        text-align: center;
-        text-indent: 10px;
-
-        color: #FFFFFF;
-
     }
 }
 
 footer p:nth-child(3) {
-    /* We're using cookies to improve your experience. */
-
     position: absolute;
     left: 0%;
     right: 0%;
     top: 60%;
     bottom: 13.33%;
-
-    font-family: Lato;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 16px;
-    text-align: center;
-    text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(3) {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 73.33%;
         bottom: 8%;
-
-        font-family: Lato;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 28px;
-        font-size: 24px;
-        text-align: center;
-        text-indent: 10px;
-
-        color: #FFFFFF;
     }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 02e1082..1121550 100644
--- a/index.html
+++ b/index.html
@@ -15,16 +15,14 @@
 
     <div class="ribbon"></div>
     <header>
-        <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo">
-
+        <img src="/assets/undraw_developer_activity_bv83.svg" alt="logo with a man in front of the laptop">
         <h1>code academy</h1>
     </header>
 
     <form>
-        <label for="email">Leave your email</label>
-        <div class="beforeText">
-            <input type="email" id="email" placeholder="E-mail" required>
-        </div>
+        <legend>Leave your email</legend>
+        <input type="email" id="email" placeholder="E-mail" required>
+        <label for="email">E-mail</label>
         <button>Get early access</button>
     </form>
 

From e1a9f2d183e60f6dae7fb2f496062a9f0d5b8f70 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Fri, 18 Jan 2019 21:49:52 +0000
Subject: [PATCH 11/19] Email validate and pseudo-element

---
 css/style.css | 33 +++++++++++++++++++++++++++++++--
 index.html    |  2 +-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index b60cf73..902c35d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -199,7 +199,34 @@ label {
     display: none;
 }
 
-input:focus+label {
+label:before {
+    content: '';
+}
+
+input:focus:invalid+label:before {
+    content: 'Invalid ';
+}
+
+input:focus:valid+label {
+    display: block;
+    position: absolute;
+    left: 11.88%;
+    right: 10.94%;
+    top: 21.37%;
+    bottom: 66.46%;
+    line-height: normal;
+    font-size: 16px;
+}
+
+@media (min-width: 768px) {
+    input:focus:valid+label {
+        position: absolute;
+        left: 15.80%;
+        right: 51.82%;
+    }
+}
+
+input:focus:invalid+label {
     display: block;
     position: absolute;
     left: 11.88%;
@@ -208,13 +235,15 @@ input:focus+label {
     bottom: 66.46%;
     line-height: normal;
     font-size: 16px;
+    color: #FF3333;
 }
 
 @media (min-width: 768px) {
-    input:focus+label {
+    input:focus:invalid+label {
         position: absolute;
         left: 15.80%;
         right: 51.82%;
+        color: #FF3333;
     }
 }
 
diff --git a/index.html b/index.html
index 1121550..6454834 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@ <h1>code academy</h1>
 
     <form>
         <legend>Leave your email</legend>
-        <input type="email" id="email" placeholder="E-mail" required>
+        <input type="email" id="email" placeholder="E-mail" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required>
         <label for="email">E-mail</label>
         <button>Get early access</button>
     </form>

From d5bb527b3214c58833c1133be7f6b8f02a845f07 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Fri, 18 Jan 2019 23:55:39 +0000
Subject: [PATCH 12/19] Footer img resized

---
 css/style.css | 38 +++++++++++++++++++++++++-------------
 index.html    |  2 +-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/css/style.css b/css/style.css
index 902c35d..60d93aa 100644
--- a/css/style.css
+++ b/css/style.css
@@ -264,7 +264,6 @@ button {
     border-radius: 9px;
     font-family: Lato;
     color: #FFFFFF;
-    /* transition: .2s; */
 }
 
 @media (min-width: 768px) {
@@ -274,7 +273,6 @@ button {
         right: 15.62%;
         top: 33.48%;
         bottom: 42.17%;
-        /* transition: .2s; */
     }
 }
 
@@ -305,6 +303,17 @@ footer {
     top: 418px;
 }
 
+@media (min-width: 768px) {
+    footer {
+        position: absolute;
+        width: 768px;
+        height: 150px;
+        left: 0.52%;
+        right: -0.52%;
+        top: 84.96%;
+    }
+}
+
 footer p {
     line-height: 20px;
     font-size: 16px;
@@ -318,20 +327,11 @@ footer p {
     footer p {
         line-height: 28px;
         font-size: 24px;
+        top: 33.33%;
+        bottom: 8%;
     }
 }
 
-@media (min-width: 768px) {
-    footer {
-        position: absolute;
-        width: 768px;
-        height: 150px;
-        left: 0.52%;
-        right: -0.52%;
-        top: 84.96%;
-        bottom: 0.39%;
-    }
-}
 
 footer p:nth-child(1) {
     position: absolute;
@@ -378,4 +378,16 @@ footer p:nth-child(3) {
         top: 73.33%;
         bottom: 8%;
     }
+}
+
+footer p img {
+    height: 15px;
+    width: 16px;
+}
+
+@media (min-width: 768px) {
+    footer p img {
+        height: 20px;
+        width: 24px;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6454834..b25d308 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@ <h1>code academy</h1>
 
     <footer>
         <p>ctarx © 2019.</p>
-        <p>Made with <img src="/assets/love.png" alt="hearth"> in Poland</p>
+        <p>Made with <img class="love_img" src="/assets/love.png" alt="hearth"> in Poland</p>
         <p>We're using cookies to improve your experience.</p>
     </footer>
 

From 5c449e79b461349776c989eb283991cb937f5e35 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Sat, 19 Jan 2019 19:47:29 +0000
Subject: [PATCH 13/19] Code reduced, css normalized and ribbon fixed
 positioned

---
 css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++++
 css/style.css     | 118 ++++------------
 index.html        |   2 +-
 3 files changed, 381 insertions(+), 88 deletions(-)
 create mode 100644 css/normalize.css

diff --git a/css/normalize.css b/css/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/css/style.css b/css/style.css
index 60d93aa..146a960 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,3 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 html {
     background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
     background-attachment: fixed;
@@ -35,6 +29,7 @@ header {
     width: 320px;
     height: 50px;
     top: 176px;
+    left: 0px;
 }
 
 @media (min-width: 768px) {
@@ -49,17 +44,14 @@ header {
 
 header h1 {
     position: absolute;
-    left: 0%;
-    right: 0%;
     top: 0%;
-    bottom: 0%;
-    padding-top: 10px;
+    left: 0%;
     font-weight: 300;
     line-height: normal;
     font-size: 30px;
+    width: 100%;
     text-align: center;
     letter-spacing: 5px;
-    color: #FFFFFF;
     text-transform: uppercase;
     mix-blend-mode: normal;
 }
@@ -67,11 +59,9 @@ header h1 {
 @media (min-width: 768px) {
     header h1 {
         position: absolute;
-        left: 0%;
-        right: 0%;
         top: 0%;
-        bottom: 0%;
-        padding-top: 70px;
+        left: 0%;
+        padding-top: 50px;
         font-size: 60px;
     }
 }
@@ -97,16 +87,15 @@ header img {
 
 @media (min-width: 768px) {
     .ribbon {
-        position: absolute;
+        position: fixed;
         display: block;
-        left: 83.85%;
         right: 0%;
         top: 0.1%;
-        bottom: 81.45%;
         width: 124px;
         height: 198px;
         background: url(/assets/coming-soon-ribbon.png);
         background-repeat: no-repeat;
+        z-index: 1;
     }
 }
 
@@ -118,27 +107,22 @@ form {
     height: 197.12px;
     left: 0px;
     top: 229.88px;
-    margin-top: 14px;
 }
 
 @media (min-width: 768px) {
     form {
         position: absolute;
         width: 768px;
-        left: 0.52%;
-        right: -0.52%;
-        top: 45.8%;
-        bottom: 34.95%;
-        transform: translateY(34.95%);
+        left: 0%;
+        top: 55%;
     }
 }
 
 legend {
     position: absolute;
     left: 0%;
-    right: 0%;
-    top: 0%;
-    bottom: 75.03%;
+    top: 10%;
+    width: 100%;
     line-height: normal;
     font-size: 18px;
     text-align: center;
@@ -146,46 +130,33 @@ legend {
 
 @media (min-width: 768px) {
     legend {
+        top: 0%;
         font-size: 24px;
     }
 }
 
 input {
+    position: absolute;
+    left: 10.94%;
+    top: 32.97%;
     width: 250px;
     height: 48px;
     font-weight: 300;
     line-height: normal;
     font-size: 16px;
     text-indent: 10px;
-
+    padding: 0;
     color: #A0A0A0;
     background: #FFFFFF;
+    border: none;
     border-radius: 9px;
-}
-
-@media (min-width: 768px) {
-    input {
-        position: absolute;
-        top: 0%;
-    }
-}
-
-input[type=email] {
-    position: absolute;
-    left: 10.94%;
-    right: 10.94%;
-    top: 32.97%;
-    bottom: 42.68%;
     box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
 @media (min-width: 768px) {
-    input[type=email] {
-        position: absolute;
+    input {
         left: 15.62%;
-        right: 51.82%;
         top: 33.48%;
-        bottom: 42.17%;
     }
 }
 
@@ -250,9 +221,7 @@ input:focus:invalid+label {
 button {
     position: absolute;
     left: 10.94%;
-    right: 10.94%;
     top: 65.95%;
-    bottom: 9.7%;
     width: 250px;
     height: 48px;
     font-weight: bold;
@@ -261,6 +230,7 @@ button {
     text-align: center;
     text-transform: uppercase;
     background: #0297EC;
+    border: none;
     border-radius: 9px;
     font-family: Lato;
     color: #FFFFFF;
@@ -268,19 +238,14 @@ button {
 
 @media (min-width: 768px) {
     button {
-        position: absolute;
         left: 51.82%;
-        right: 15.62%;
         top: 33.48%;
-        bottom: 42.17%;
     }
 }
 
 button:hover {
-    position: absolute;
     outline: none;
     top: 63.41%;
-    bottom: 12.24%;
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
     cursor: pointer;
 }
@@ -289,7 +254,6 @@ button:hover {
     button:hover {
         outline: none;
         top: 30.94%;
-        bottom: 44.71%;
     }
 }
 
@@ -299,8 +263,9 @@ footer {
     position: absolute;
     width: 320px;
     height: 150px;
-    left: 0px;
     top: 418px;
+    left: 0px;
+    text-align: center;
 }
 
 @media (min-width: 768px) {
@@ -308,75 +273,54 @@ footer {
         position: absolute;
         width: 768px;
         height: 150px;
-        left: 0.52%;
-        right: -0.52%;
+        left: 0%;
         top: 84.96%;
     }
 }
 
 footer p {
+    position: absolute;
+    left: 0px;
+    right: 0px;
     line-height: 20px;
     font-size: 16px;
-    text-align: center;
     text-indent: 10px;
-
-    color: #FFFFFF;
 }
 
 @media (min-width: 768px) {
     footer p {
         line-height: 28px;
         font-size: 24px;
-        top: 33.33%;
-        bottom: 8%;
     }
 }
 
-
 footer p:nth-child(1) {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 33.33%;
-    bottom: 53.33%;
+    top: 32.33%;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(1) {
-        position: absolute;
-        bottom: 48%;
+        top: 31.33%;
     }
 }
 
 footer p:nth-child(2) {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 46.67%;
-    bottom: 40%;
+    top: 46.33%;
 }
 
 @media (min-width:768px) {
     footer p:nth-child(2) {
-        position: absolute;
-        top: 54%;
-        bottom: 27.33%;
+        top: 47.33%;
     }
 }
 
 footer p:nth-child(3) {
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 60%;
-    bottom: 13.33%;
+    top: 58.33%;
 }
 
 @media (min-width: 768px) {
     footer p:nth-child(3) {
-        position: absolute;
-        top: 73.33%;
-        bottom: 8%;
+        top: 63.33%;
     }
 }
 
diff --git a/index.html b/index.html
index b25d308..33a9eaa 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
+    <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="/css/style.css">
-
 </head>
 
 <body>

From 6b505c9759b64f3f8c25ccd414fb28b201b2818d Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Sat, 19 Jan 2019 19:55:49 +0000
Subject: [PATCH 14/19] p nth-child(1) moved

---
 css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 146a960..8503208 100644
--- a/css/style.css
+++ b/css/style.css
@@ -300,7 +300,7 @@ footer p:nth-child(1) {
 
 @media (min-width: 768px) {
     footer p:nth-child(1) {
-        top: 31.33%;
+        top: 30.33%;
     }
 }
 

From d7f72c7b9f4bebd9c738f9e48f1aa42a3c8db47e Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Thu, 31 Jan 2019 22:57:32 +0000
Subject: [PATCH 15/19] Header and animation

---
 challenge2.html    |  43 ++++++++++++++
 css/challenge2.css | 140 +++++++++++++++++++++++++++++++++++++++++++++
 scripts/script.js  |   6 ++
 3 files changed, 189 insertions(+)
 create mode 100644 challenge2.html
 create mode 100644 css/challenge2.css
 create mode 100644 scripts/script.js

diff --git a/challenge2.html b/challenge2.html
new file mode 100644
index 0000000..a536926
--- /dev/null
+++ b/challenge2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Challenge 2</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
+        crossorigin="anonymous">
+    <link rel="stylesheet" href="css/challenge2.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="header">
+            <img src="assets2/logo.jpg" alt="code academy" class="header__logo">
+            <div class="header__btn">
+                <p class="btn__text">menu <i class="fas fa-bars fa-fw btn__icon--show"></i><i class="fas fa-times fa-fw"></i></p>
+            </div>
+            <nav class="header__nav">
+                <ul class="nav__list">
+                    <li class="nav__item nav__item-big"><a href="#" class="nav__link nav__link-big">Zaloguj</a></li>
+                    <li class="nav__item"><a href="#" class="nav__link">Wyzwania</a></li>
+                    <li class="nav__item"><a href="#" class="nav__link">O nas</a></li>
+                    <li class="nav__item"><a href="#" class="nav__link">Uczestnicy</a></li>
+                    <li class="nav__item"><a href="#" class="nav__link">FAQ</a></li>
+                    <li class="nav__item"><a href="#" class="nav__link">Kontakt</a></li>
+                    <li class="nav__item"><a href="#" class="nav__link">Dołącz</a></li>
+                </ul>
+            </nav>
+        </header>
+        <section class="section">
+            <h1 class="section__h1">
+                Podejmij wyzwanie
+            </h1>
+        </section>
+    </div>
+    <script src="scripts/script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/challenge2.css b/css/challenge2.css
new file mode 100644
index 0000000..2dd03f2
--- /dev/null
+++ b/css/challenge2.css
@@ -0,0 +1,140 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700');
+
+.wrapper {
+    display: flex;
+    height: 80vh;
+    flex-direction: column;
+    background-color: #30C2FF;
+}
+
+.header {
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+}
+
+.header__logo {
+    margin-left: 10px;
+    flex-basis: 90px;
+    height: 40px;
+}
+
+.header__btn {
+    margin: 5px 10px;
+    border: 2px solid white;
+    border-radius: 5px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.btn__text {
+    font-size: 22px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 24px;
+    color: #FAFAFA;
+    font-family: 'Roboto', sans-serif;
+    margin: 0 0 0 5px;
+}
+
+.fas {
+    display: none;
+}
+
+.btn__icon--show {
+    display: inline-block;
+    vertical-align: bottom;
+    animation: fas-spinning .5s linear both;
+    animation-play-state: paused;
+}
+
+@keyframes fas-spinning {
+
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.header__nav {
+    position: fixed;
+    right: -180px;
+    top: 40px;
+    height: 220px;
+    width: 180px;
+    background: #FAFAFA;
+    transition: .5s;
+}
+
+.header__nav--active {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 40px;
+    height: 220px;
+    width: 180px;
+    background: #FAFAFA;
+}
+
+.nav__list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.nav__item {
+    height: 30px;
+    border-top: 1px solid #30C2FF;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+}
+
+.nav__item-big {
+    flex-grow: 1;
+    text-align: center;
+    border: none;
+}
+
+.nav__link {
+    display: block;
+    padding-left: 10px;
+    text-decoration: none;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    color: #000;
+    line-height: 30px;
+}
+
+.nav__link-big {
+    padding: 0;
+    font-weight: bold;
+    font-size: 20px;
+    text-transform: uppercase;
+    line-height: 40px;
+}
+
+.section {
+    height: 320px;
+    width: 100%;
+    text-align: center;
+}
+
+.section__h1 {
+    margin: 20px 0 40px 0;
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 26px;
+    font-size: 24px;
+    color: #FAFAFA;
+}
\ No newline at end of file
diff --git a/scripts/script.js b/scripts/script.js
new file mode 100644
index 0000000..b28ba52
--- /dev/null
+++ b/scripts/script.js
@@ -0,0 +1,6 @@
+document.querySelector('.header__btn').addEventListener('click', function () {
+    document.querySelector('.header__nav').classList.toggle('header__nav--active');
+    document.querySelector('.fa-times').classList.toggle('btn__icon--show');
+    document.querySelector('.fa-bars').classList.toggle('btn__icon--show');
+    document.querySelector('.btn__icon--show').style.webkitAnimationPlayState = "running"
+})
\ No newline at end of file

From 2f101d8ce961bc1a230a8d3bb35ee379a8d765db Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Thu, 31 Jan 2019 23:42:44 +0000
Subject: [PATCH 16/19] Larger 1st menu item

---
 css/challenge2.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/css/challenge2.css b/css/challenge2.css
index 2dd03f2..77586f6 100644
--- a/css/challenge2.css
+++ b/css/challenge2.css
@@ -63,7 +63,7 @@
     position: fixed;
     right: -180px;
     top: 40px;
-    height: 220px;
+    /* height: 220px; */
     width: 180px;
     background: #FAFAFA;
     transition: .5s;
@@ -74,14 +74,13 @@
     position: absolute;
     right: 0;
     top: 40px;
-    height: 220px;
-    width: 180px;
     background: #FAFAFA;
 }
 
 .nav__list {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     list-style: none;
     height: 100%;
     padding: 0;
@@ -98,7 +97,7 @@
 }
 
 .nav__item-big {
-    flex-grow: 1;
+    height: 50px;
     text-align: center;
     border: none;
 }
@@ -120,7 +119,7 @@
     font-weight: bold;
     font-size: 20px;
     text-transform: uppercase;
-    line-height: 40px;
+    line-height: 50px;
 }
 
 .section {

From b4372f9b591538281fc9554d29108c8f8f13d7ee Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Mon, 4 Feb 2019 00:02:54 +0000
Subject: [PATCH 17/19] New section without js and checkbox colors

---
 challenge2.html    | 28 ++++++++++++++++-
 css/challenge2.css | 77 ++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 102 insertions(+), 3 deletions(-)

diff --git a/challenge2.html b/challenge2.html
index a536926..d4c68a9 100644
--- a/challenge2.html
+++ b/challenge2.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pl">
 
 <head>
     <meta charset="UTF-8">
@@ -31,12 +31,38 @@
                 </ul>
             </nav>
         </header>
+
         <section class="section">
             <h1 class="section__h1">
                 Podejmij wyzwanie
             </h1>
+            <p class="section__p--title">Home Page #2</p>
+
+            <form class="section__form">
+
+                <div class="form__box">
+                    <input type="checkbox" class="section__input input--left" id="input--left">
+                    <label for="input--left" class="form__label">Header</label>
+                </div>
+
+
+                <div class="form__box form__box--blue">
+                    <input type="checkbox" class="section__input input--mid" id="input--mid">
+                    <label for="input--mid" class="form__label form__label--white">Section</label>
+                </div>
+
+
+                <div class="form__box">
+                    <input type="checkbox" class="section__input input--right" id="input--right">
+                    <label for="input--right" class="form__label">JavaScript</label>
+                </div>
+
+            </form>
+            <p class="section__p--bottom">Do końca zostało:</p>
         </section>
+        <p class="footer__p-days">14 dni</p>
     </div>
+
     <script src="scripts/script.js"></script>
 </body>
 
diff --git a/css/challenge2.css b/css/challenge2.css
index 77586f6..8f204a4 100644
--- a/css/challenge2.css
+++ b/css/challenge2.css
@@ -2,7 +2,6 @@
 
 .wrapper {
     display: flex;
-    height: 80vh;
     flex-direction: column;
     background-color: #30C2FF;
 }
@@ -63,7 +62,6 @@
     position: fixed;
     right: -180px;
     top: 40px;
-    /* height: 220px; */
     width: 180px;
     background: #FAFAFA;
     transition: .5s;
@@ -75,6 +73,7 @@
     right: 0;
     top: 40px;
     background: #FAFAFA;
+    z-index: 1;
 }
 
 .nav__list {
@@ -126,6 +125,7 @@
     height: 320px;
     width: 100%;
     text-align: center;
+    color: #FAFAFA;
 }
 
 .section__h1 {
@@ -135,5 +135,78 @@
     font-weight: 300;
     line-height: 26px;
     font-size: 24px;
+}
+
+.section__p--title {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 20px;
+    font-size: 18px;
+    text-align: center;
+}
+
+.section__form {
+    display: flex;
+    justify-content: center;
+}
+
+.form__label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 18px;
+    font-size: 16px;
+    text-align: center;
+    color: black;
+}
+
+.form__label--white {
+    color: #FAFAFA;
+}
+
+.form__box {
+    flex-basis: 100px;
+    height: 115px;
+    background-color: #FAFAFA;
+    position: relative;
+    border: 1px solid #FAFAFA;
+    padding-top: 10px;
+}
+
+.form__box--blue {
+    background-color: #30C2FF;
+    color: #FAFAFA;
+}
+
+.section__input {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    zoom: 3;
+}
+
+.section__p--bottom {
+    transform: translateX(-90px);
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 18px;
+    font-size: 16px;
+    text-decoration-line: underline;
+
     color: #FAFAFA;
+
+}
+
+.footer__p-days {
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 18px;
+    font-size: 48px;
+    text-align: center;
+    margin: 15px;
+    color: #000000;
 }
\ No newline at end of file

From 652a417440ddd5182bf158533f501620de95c662 Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Thu, 7 Feb 2019 09:47:16 +0000
Subject: [PATCH 18/19] Section 2 and comments

---
 challenge2.html    | 107 +++++++++--------
 css/challenge2.css | 284 +++++++++++++++++++++++++--------------------
 scripts/script.js  |   9 +-
 3 files changed, 217 insertions(+), 183 deletions(-)

diff --git a/challenge2.html b/challenge2.html
index d4c68a9..69293b9 100644
--- a/challenge2.html
+++ b/challenge2.html
@@ -2,68 +2,75 @@
 <html lang="pl">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Challenge 2</title>
-    <link rel="stylesheet" href="css/normalize.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
-        crossorigin="anonymous">
-    <link rel="stylesheet" href="css/challenge2.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Challenge 2</title>
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
+    crossorigin="anonymous">
+  <link rel="stylesheet" href="css/challenge2.css">
 </head>
 
 <body>
-    <div class="wrapper">
-        <header class="header">
-            <img src="assets2/logo.jpg" alt="code academy" class="header__logo">
-            <div class="header__btn">
-                <p class="btn__text">menu <i class="fas fa-bars fa-fw btn__icon--show"></i><i class="fas fa-times fa-fw"></i></p>
-            </div>
-            <nav class="header__nav">
-                <ul class="nav__list">
-                    <li class="nav__item nav__item-big"><a href="#" class="nav__link nav__link-big">Zaloguj</a></li>
-                    <li class="nav__item"><a href="#" class="nav__link">Wyzwania</a></li>
-                    <li class="nav__item"><a href="#" class="nav__link">O nas</a></li>
-                    <li class="nav__item"><a href="#" class="nav__link">Uczestnicy</a></li>
-                    <li class="nav__item"><a href="#" class="nav__link">FAQ</a></li>
-                    <li class="nav__item"><a href="#" class="nav__link">Kontakt</a></li>
-                    <li class="nav__item"><a href="#" class="nav__link">Dołącz</a></li>
-                </ul>
-            </nav>
-        </header>
+  <div class="wrapper">
 
-        <section class="section">
-            <h1 class="section__h1">
-                Podejmij wyzwanie
-            </h1>
-            <p class="section__p--title">Home Page #2</p>
+    <!-- header with logo and menu button -->
+    <header class="header">
+      <img src="assets2/logo.jpg" alt="code academy" class="header__logo">
+      <div class="header__btn">
+        <p class="btn__text">menu <i class="fas fa-bars fa-fw btn__icon--show"></i><i class="fas fa-times fa-fw"></i></p>
+      </div>
 
-            <form class="section__form">
+      <!-- Navigation menu -->
+      <nav class="header__nav">
+        <ul class="nav__list">
+          <li class="nav__item nav__item-big"><a href="#" class="nav__link nav__link-big">Zaloguj</a></li>
+          <li class="nav__item"><a href="#" class="nav__link">Wyzwania</a></li>
+          <li class="nav__item"><a href="#" class="nav__link">O nas</a></li>
+          <li class="nav__item"><a href="#" class="nav__link">Uczestnicy</a></li>
+          <li class="nav__item"><a href="#" class="nav__link">FAQ</a></li>
+          <li class="nav__item"><a href="#" class="nav__link">Kontakt</a></li>
+          <li class="nav__item"><a href="#" class="nav__link">Dołącz</a></li>
+        </ul>
+      </nav>
+    </header>
 
-                <div class="form__box">
-                    <input type="checkbox" class="section__input input--left" id="input--left">
-                    <label for="input--left" class="form__label">Header</label>
-                </div>
+    <!-- checkbox's section -->
+    <section class="section">
+      <h1 class="section__h1">
+        Podejmij wyzwanie
+      </h1>
+      <p class="section__p--title">Home Page #2</p>
 
+      <form class="section__form">
 
-                <div class="form__box form__box--blue">
-                    <input type="checkbox" class="section__input input--mid" id="input--mid">
-                    <label for="input--mid" class="form__label form__label--white">Section</label>
-                </div>
+        <div class="form__box">
+          <input type="checkbox" class="section__input" id="input--left">
+          <label for="input--left" class="form__label">Header</label>
+        </div>
 
 
-                <div class="form__box">
-                    <input type="checkbox" class="section__input input--right" id="input--right">
-                    <label for="input--right" class="form__label">JavaScript</label>
-                </div>
+        <div class="form__box form__box--blue">
+          <input type="checkbox" class="section__input section__input--white" id="input--mid">
+          <label for="input--mid" class="form__label form__label--white">Section</label>
+        </div>
 
-            </form>
-            <p class="section__p--bottom">Do końca zostało:</p>
-        </section>
-        <p class="footer__p-days">14 dni</p>
-    </div>
 
-    <script src="scripts/script.js"></script>
+        <div class="form__box">
+          <input type="checkbox" class="section__input" id="input--right">
+          <label for="input--right" class="form__label">JavaScript</label>
+        </div>
+
+      </form>
+
+      <!-- counting script -->
+      <p class="section__p--bottom">Do końca zostało:</p>
+    </section>
+    <p class="footer__p-days">14 dni</p>
+  </div>
+
+  <script src="scripts/script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/css/challenge2.css b/css/challenge2.css
index 8f204a4..bc1c08a 100644
--- a/css/challenge2.css
+++ b/css/challenge2.css
@@ -1,212 +1,238 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700');
 
 .wrapper {
-    display: flex;
-    flex-direction: column;
-    background-color: #30C2FF;
+  display: flex;
+  flex-direction: column;
+  background-color: #30C2FF;
 }
 
+/* header with logo and menu button */
 .header {
-    display: flex;
-    height: 40px;
-    justify-content: space-between;
+  display: flex;
+  height: 40px;
+  justify-content: space-between;
 }
 
 .header__logo {
-    margin-left: 10px;
-    flex-basis: 90px;
-    height: 40px;
+  margin-left: 10px;
+  flex-basis: 90px;
+  height: 40px;
 }
 
 .header__btn {
-    margin: 5px 10px;
-    border: 2px solid white;
-    border-radius: 5px;
-    cursor: pointer;
-    user-select: none;
+  margin: 5px 10px;
+  border: 2px solid white;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .btn__text {
-    font-size: 22px;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 24px;
-    color: #FAFAFA;
-    font-family: 'Roboto', sans-serif;
-    margin: 0 0 0 5px;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+  color: #FAFAFA;
+  font-family: 'Roboto', sans-serif;
+  margin: 0 0 0 5px;
 }
 
 .fas {
-    display: none;
+  display: none;
 }
 
 .btn__icon--show {
-    display: inline-block;
-    vertical-align: bottom;
-    animation: fas-spinning .5s linear both;
-    animation-play-state: paused;
+  display: inline-block;
+  vertical-align: bottom;
+  animation: fas-spinning .5s linear both;
+  animation-play-state: paused;
 }
 
 @keyframes fas-spinning {
 
-    from {
-        transform: rotate(0deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
 
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
+/* Navigation menu */
 .header__nav {
-    position: fixed;
-    right: -180px;
-    top: 40px;
-    width: 180px;
-    background: #FAFAFA;
-    transition: .5s;
+  position: fixed;
+  right: -180px;
+  top: 40px;
+  width: 180px;
+  background: #FAFAFA;
+  transition: .5s;
+  z-index: 1;
 }
 
 .header__nav--active {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 40px;
-    background: #FAFAFA;
-    z-index: 1;
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 40px;
+  background: #FAFAFA;
+  z-index: 1;
 }
 
 .nav__list {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    list-style: none;
-    height: 100%;
-    padding: 0;
-    margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  list-style: none;
+  height: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 .nav__item {
-    height: 30px;
-    border-top: 1px solid #30C2FF;
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
+  height: 30px;
+  border-top: 1px solid #30C2FF;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
 }
 
 .nav__item-big {
-    height: 50px;
-    text-align: center;
-    border: none;
+  height: 50px;
+  text-align: center;
+  border: none;
 }
 
 .nav__link {
-    display: block;
-    padding-left: 10px;
-    text-decoration: none;
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    color: #000;
-    line-height: 30px;
+  display: block;
+  padding-left: 10px;
+  text-decoration: none;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  color: #000;
+  line-height: 30px;
 }
 
 .nav__link-big {
-    padding: 0;
-    font-weight: bold;
-    font-size: 20px;
-    text-transform: uppercase;
-    line-height: 50px;
+  padding: 0;
+  font-weight: bold;
+  font-size: 20px;
+  text-transform: uppercase;
+  line-height: 50px;
 }
 
+/* checkbox's section */
 .section {
-    height: 320px;
-    width: 100%;
-    text-align: center;
-    color: #FAFAFA;
+  height: 320px;
+  width: 100%;
+  text-align: center;
+  color: #FAFAFA;
 }
 
 .section__h1 {
-    margin: 20px 0 40px 0;
-    font-family: Open Sans;
-    font-style: normal;
-    font-weight: 300;
-    line-height: 26px;
-    font-size: 24px;
+  margin: 20px 0 40px 0;
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 26px;
+  font-size: 24px;
 }
 
 .section__p--title {
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 20px;
-    font-size: 18px;
-    text-align: center;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 20px;
+  font-size: 18px;
+  text-align: center;
 }
 
 .section__form {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .form__label {
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 18px;
-    font-size: 16px;
-    text-align: center;
-    color: black;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 18px;
+  font-size: 16px;
+  text-align: center;
+  color: black;
 }
 
 .form__label--white {
-    color: #FAFAFA;
+  color: #FAFAFA;
 }
 
 .form__box {
-    flex-basis: 100px;
-    height: 115px;
-    background-color: #FAFAFA;
-    position: relative;
-    border: 1px solid #FAFAFA;
-    padding-top: 10px;
+  flex-basis: 100px;
+  height: 115px;
+  background-color: #FAFAFA;
+  position: relative;
+  border: 1px solid #FAFAFA;
+  padding-top: 10px;
 }
 
 .form__box--blue {
-    background-color: #30C2FF;
-    color: #FAFAFA;
+  background-color: #30C2FF;
+  color: #FAFAFA;
 }
 
 .section__input {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    zoom: 3;
+  display: none;
 }
 
+.section__input+label::before {
+  position: absolute;
+  font-family: "Font Awesome 5 Free";
+  font-weight: regular;
+  content: "\f0c8";
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #30C2FF;
+  zoom: 2.5;
+}
+
+.section__input--white+label::before {
+  color: #FAFAFA;
+}
+
+.section__input:checked+label::before {
+  content: "\f14a";
+  font-weight: bold;
+}
+
+.form__label {
+  user-select: none;
+}
+
+/* counting script */
 .section__p--bottom {
-    transform: translateX(-90px);
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 18px;
-    font-size: 16px;
-    text-decoration-line: underline;
+  transform: translateX(-90px);
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 18px;
+  font-size: 16px;
+  text-decoration-line: underline;
 
-    color: #FAFAFA;
+  color: #FAFAFA;
 
 }
 
 .footer__p-days {
-    font-family: Open Sans;
-    font-style: normal;
-    font-weight: 300;
-    line-height: 18px;
-    font-size: 48px;
-    text-align: center;
-    margin: 15px;
-    color: #000000;
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 18px;
+  font-size: 48px;
+  text-align: center;
+  margin: 15px;
+  color: #000000;
 }
\ No newline at end of file
diff --git a/scripts/script.js b/scripts/script.js
index b28ba52..46eb208 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1,6 +1,7 @@
+// navigation menu and icons animation trigger
 document.querySelector('.header__btn').addEventListener('click', function () {
-    document.querySelector('.header__nav').classList.toggle('header__nav--active');
-    document.querySelector('.fa-times').classList.toggle('btn__icon--show');
-    document.querySelector('.fa-bars').classList.toggle('btn__icon--show');
-    document.querySelector('.btn__icon--show').style.webkitAnimationPlayState = "running"
+  document.querySelector('.header__nav').classList.toggle('header__nav--active');
+  document.querySelector('.fa-times').classList.toggle('btn__icon--show');
+  document.querySelector('.fa-bars').classList.toggle('btn__icon--show');
+  document.querySelector('.btn__icon--show').style.webkitAnimationPlayState = "running"
 })
\ No newline at end of file

From 2cba0928029a013a21ac63da62a46d4afff790cd Mon Sep 17 00:00:00 2001
From: ctarx <ctarx@protonmail.com>
Date: Thu, 7 Feb 2019 10:58:40 +0000
Subject: [PATCH 19/19] Navigation fixed and transform changed

---
 css/challenge2.css | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/css/challenge2.css b/css/challenge2.css
index bc1c08a..2133834 100644
--- a/css/challenge2.css
+++ b/css/challenge2.css
@@ -55,7 +55,7 @@
   }
 
   to {
-    transform: rotate(360deg);
+    transform: rotate(180deg);
   }
 }
 
@@ -71,12 +71,7 @@
 }
 
 .header__nav--active {
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 40px;
-  background: #FAFAFA;
-  z-index: 1;
+  transform: translateX(-180px);
 }
 
 .nav__list {
@@ -194,9 +189,8 @@
   content: "\f0c8";
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%) scale(2);
   color: #30C2FF;
-  zoom: 2.5;
 }
 
 .section__input--white+label::before {