From d6c95e20475c87020acb8f7992f43e72c415f09f Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 14:47:02 +0100 Subject: [PATCH 01/18] Create basic file structure --- index.html | 15 +++++++++++++++ main.js | 0 style.css | 6 ++++++ 3 files changed, 21 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9bbc576 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + Code Academy + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..2089ff1 --- /dev/null +++ b/style.css @@ -0,0 +1,6 @@ +*, *:after, *:before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + From 74b7980ad2e2cd743190c523a34fe1ac567da424 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 14:49:04 +0100 Subject: [PATCH 02/18] Import Lato font. Link styles and js in html filr --- index.html | 4 +++- style.css | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9bbc576..747c765 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,14 @@ + + Code Academy - + \ No newline at end of file diff --git a/style.css b/style.css index 2089ff1..7f7f0c0 100644 --- a/style.css +++ b/style.css @@ -4,3 +4,6 @@ box-sizing: border-box; } +body { + font-family: 'Lato', sans-serif; +} From d2c6bff41c34b2c1b1ae7fe24b09efbe0c9dbaf3 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 14:53:56 +0100 Subject: [PATCH 03/18] Create html structure --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/index.html b/index.html index 747c765..0b169c5 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,18 @@ +
+
+ +
+ +
+ + +
+ +
From 49a2963bd681d349a1fba2b92176f39c11e0a9b9 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 14:54:57 +0100 Subject: [PATCH 04/18] Create structure in header --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 0b169c5..27bbc6f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,8 @@
- + +

Code Academy

From 0e76f3ce29a91566c094d52e40fcae8b0fc96d8b Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 14:57:28 +0100 Subject: [PATCH 05/18] Style header --- style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/style.css b/style.css index 7f7f0c0..f99170d 100644 --- a/style.css +++ b/style.css @@ -6,4 +6,19 @@ body { font-family: 'Lato', sans-serif; + background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%); + background-repeat: no-repeat; + height: 100vh; } + +.header__logo { + width: 100%; +} + +.header__title { + color: #fff; + text-transform: uppercase; + text-align: center; + font-weight: 300; + letter-spacing: 4px; +} \ No newline at end of file From 88f4cafda62c393707488289eadb0dc586371867 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 15:00:15 +0100 Subject: [PATCH 06/18] Create structure in main --- index.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 27bbc6f..4f25404 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,14 @@

Code Academy

- +
+

Leave your email

+
+ + +
+ +
From b2b071a36a67a690b6f92b4b538e0df90bccb004 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 15:41:12 +0100 Subject: [PATCH 07/18] Style form. Change structure of form group --- index.html | 6 +++-- style.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4f25404..576c66e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Code Academy @@ -20,7 +20,9 @@

Code Academy

Leave your email

- +
diff --git a/style.css b/style.css index f99170d..af6d2be 100644 --- a/style.css +++ b/style.css @@ -21,4 +21,83 @@ body { text-align: center; font-weight: 300; letter-spacing: 4px; +} + +.form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 70%; + margin: 0 auto; +} + +.form__title { + color: #fff; + font-size: 1.1rem; + font-weight: 400; + margin: 1.75rem 0; +} + +.form__group { + display: flex; + flex-direction: column; + width: 100%; + position: relative; + margin-top: .5rem; +} + +.form__input { + border: none; + height: 50px; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 9px; + text-indent: 10px; + position: relative; + display: block; +} + +.form__label { + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + color: #A0A0A0; + font-weight: 300; + transition: top .5s ease; +} + +.form__input:focus { + outline: none; + box-shadow: inset 0 0 0 2pt #5AAF65; +} + +.form__input:focus + .form__label { + top: -12px; + color: #fff; +} + +.form__input:focus + .form__label:after { + content: ':'; + color: #fff; + position: absolute; + right: -5px; + top: 0; +} + +.form__button { + background: #0297EC; + color: #fff; + text-transform: uppercase; + border: none; + font-weight: 700; + padding: 1rem 2rem; + border-radius: 9px; + width: 100%; + margin-top: 1rem; + transition: box-shadow .5s ease; +} + +.form__button:hover { + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } \ No newline at end of file From 90789308256681b1bb20c8e19ad8fe60adcdf2f1 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 15:42:58 +0100 Subject: [PATCH 08/18] Create structure in footer --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 576c66e..fb73d17 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,13 @@

Leave your email

- +

User © 2019.

+

+ Made with + + in Poland +

+

We're using cookies to improve your experience.

From 6f83d4f76a9b0608e3b2d859f3a01103e819f4e5 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 15:45:10 +0100 Subject: [PATCH 09/18] Style footer --- style.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/style.css b/style.css index af6d2be..760feab 100644 --- a/style.css +++ b/style.css @@ -9,6 +9,9 @@ body { background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%); background-repeat: no-repeat; height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; } .header__logo { @@ -100,4 +103,14 @@ body { .form__button:hover { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); +} + +.footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: #fff; + margin-bottom: 1rem; } \ No newline at end of file From 4f4df437ec07b090c12a5b2ca762ae3fe4940259 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 15:54:10 +0100 Subject: [PATCH 10/18] Fix: after filled input loses focus, label was going into input. It should stay up. --- main.js | 9 +++++++++ style.css | 7 ++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index e69de29..012afa7 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,9 @@ +const input = document.querySelector('.form__input'); + +input.addEventListener('keyup', () => { + if (input.value !== '') { + input.classList.add('form__input--filled'); + } else { + input.classList.remove('form__input--filled'); + } +}); diff --git a/style.css b/style.css index 760feab..6179c61 100644 --- a/style.css +++ b/style.css @@ -39,7 +39,7 @@ body { color: #fff; font-size: 1.1rem; font-weight: 400; - margin: 1.75rem 0; + margin-bottom: 1.5rem; } .form__group { @@ -80,6 +80,11 @@ body { color: #fff; } +.form__input--filled + .form__label { + top: -12px; + color: #fff; +} + .form__input:focus + .form__label:after { content: ':'; color: #fff; From f2d9e29b40dca5ca7f82d955bc44fe815769cdd1 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 16:11:31 +0100 Subject: [PATCH 11/18] Add regex pattern to validate email --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fb73d17..03fc72a 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

Code Academy

Leave your email

- + From 41ed4a91d15052eaf29813295bd9d7514d8fe9c9 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 16:18:35 +0100 Subject: [PATCH 12/18] Validate input field --- index.html | 4 ++-- style.css | 13 +++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 03fc72a..203b46b 100644 --- a/index.html +++ b/index.html @@ -16,10 +16,10 @@

Code Academy

- +

Leave your email

- + diff --git a/style.css b/style.css index 6179c61..834d7f5 100644 --- a/style.css +++ b/style.css @@ -93,6 +93,19 @@ body { top: 0; } +.form__input:invalid + .form__label { + color: red; +} + +.form__input:invalid + .form__label:before { + content: 'Invalid'; + color: red; +} + +.form__input:invalid + .form__label:after { + color: red; +} + .form__button { background: #0297EC; color: #fff; From 4631b4760b847d106cf5264a17a245f002babd1f Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 16:31:13 +0100 Subject: [PATCH 13/18] Add media queries for tablet+ --- index.html | 14 ++++++++------ style.css | 29 ++++++++++++++++++++++++++++- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 203b46b..e87c87c 100644 --- a/index.html +++ b/index.html @@ -18,13 +18,15 @@

Code Academy

Leave your email

-
- - +
+
+ + +
+
-
diff --git a/style.css b/style.css index 834d7f5..3212b1c 100644 --- a/style.css +++ b/style.css @@ -42,6 +42,15 @@ body { margin-bottom: 1.5rem; } +@media(min-width: 768px) { + .form__container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + } +} + .form__group { display: flex; flex-direction: column; @@ -50,6 +59,12 @@ body { margin-top: .5rem; } +@media(min-width: 768px) { + .form__group { + margin-top: 0; + } +} + .form__input { border: none; height: 50px; @@ -85,7 +100,8 @@ body { color: #fff; } -.form__input:focus + .form__label:after { +.form__input:focus + .form__label:after, +.form__input--filled + .form__label:after { content: ':'; color: #fff; position: absolute; @@ -106,6 +122,10 @@ body { color: red; } +.form__input:invalid { + box-shadow: inset 0 0 0 2pt red; +} + .form__button { background: #0297EC; color: #fff; @@ -123,6 +143,13 @@ body { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } +@media(min-width: 768px) { + .form__button { + margin-top: 0; + margin-left: 1rem; + } +} + .footer { display: flex; flex-direction: column; From b3a57fa18c1505249379618959643476c1b20cc3 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 16:33:33 +0100 Subject: [PATCH 14/18] Change image width on higher resolutions --- style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/style.css b/style.css index 3212b1c..f936898 100644 --- a/style.css +++ b/style.css @@ -14,10 +14,22 @@ body { justify-content: space-between; } +.header { + display: flex; + flex-direction: column; + justify-content: center; +} + .header__logo { width: 100%; } +@media(min-width: 768px) { + .header__logo { + width: 80%; + } +} + .header__title { color: #fff; text-transform: uppercase; From 1d92e6332e323b2a9969278e13730bc55868413a Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 16:39:27 +0100 Subject: [PATCH 15/18] Add ribbon when on tablet+ view --- index.html | 1 + style.css | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index e87c87c..7927274 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@
+ Coming Soon!

Code Academy

diff --git a/style.css b/style.css index f936898..d439842 100644 --- a/style.css +++ b/style.css @@ -17,7 +17,22 @@ body { .header { display: flex; flex-direction: column; - justify-content: center; + align-items: center; + position: relative; +} + +.header__ribbon { + display: none; +} + +@media(min-width: 768px) { + .header__ribbon { + display: block; + width: 10%; + top: 50px; + position: absolute; + right: 0; + } } .header__logo { From 2584245823bcfee2e3b189997cebaad03b08f9e6 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 16:54:19 +0100 Subject: [PATCH 16/18] Add some more media queries --- style.css | 45 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index d439842..ce51c4e 100644 --- a/style.css +++ b/style.css @@ -8,10 +8,9 @@ body { font-family: 'Lato', sans-serif; background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%); background-repeat: no-repeat; - height: 100vh; + min-height: 100vh; display: flex; flex-direction: column; - justify-content: space-between; } .header { @@ -35,6 +34,12 @@ body { } } +@media(min-width: 1920px) { + .header__ribbon { + width: 5%; + } +} + .header__logo { width: 100%; } @@ -45,6 +50,18 @@ body { } } +@media(min-width: 1024px) { + .header__logo { + width: 35%; + } +} + +@media(min-width: 1920px) { + .header__logo { + width: 40%; + } +} + .header__title { color: #fff; text-transform: uppercase; @@ -53,6 +70,22 @@ body { letter-spacing: 4px; } +@media(min-width: 1024px) { + .header__title { + font-size: 3.5rem; + } +} + +.main { + margin-top: 2rem; +} + +@media(min-height: 700px) { + .main { + margin-top: 5rem; + } +} + .form { display: flex; flex-direction: column; @@ -69,6 +102,12 @@ body { margin-bottom: 1.5rem; } +@media(min-width: 768px) { + .form__title { + font-size: 2rem; + } +} + @media(min-width: 768px) { .form__container { display: flex; @@ -164,6 +203,7 @@ body { width: 100%; margin-top: 1rem; transition: box-shadow .5s ease; + cursor: pointer; } .form__button:hover { @@ -185,4 +225,5 @@ body { text-align: center; color: #fff; margin-bottom: 1rem; + margin-top: auto; } \ No newline at end of file From 5471729594691e49a5e73cb95c8641bc57a36bfe Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 17:13:27 +0100 Subject: [PATCH 17/18] Save emails in firebase database --- index.html | 1 + main.js | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/index.html b/index.html index 7927274..029fba4 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,7 @@

Leave your email

We're using cookies to improve your experience.

+ \ No newline at end of file diff --git a/main.js b/main.js index 012afa7..d6a4f89 100644 --- a/main.js +++ b/main.js @@ -7,3 +7,27 @@ input.addEventListener('keyup', () => { input.classList.remove('form__input--filled'); } }); + + +const config = { + apiKey: 'AIzaSyAYWMXR8w8m16F7pVp_RZsnsBg1JkjYkVY', + authDomain: 'academy-c7303.firebaseapp.com', + databaseURL: 'https://academy-c7303.firebaseio.com', + projectId: 'academy-c7303', + storageBucket: 'academy-c7303.appspot.com', + messagingSenderId: '587195173569', +}; + +firebase.initializeApp(config); + +const database = firebase.database(); +const ref = database.ref('emails'); + +const submitButton = document.querySelector('.form__button'); + +submitButton.addEventListener('click', (e) => { + e.preventDefault(); + const email = input.value; + + ref.push(email); +}); From b31a77025253f4b7ee4979af259369e6ed4e9959 Mon Sep 17 00:00:00 2001 From: Mateusz Wojcik Date: Sat, 19 Jan 2019 19:50:58 +0100 Subject: [PATCH 18/18] Add proper ID to submit button --- index.html | 2 +- main.js | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 029fba4..5f55c21 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@

Leave your email

E-mail
- +
diff --git a/main.js b/main.js index d6a4f89..f27a38a 100644 --- a/main.js +++ b/main.js @@ -8,14 +8,13 @@ input.addEventListener('keyup', () => { } }); - const config = { - apiKey: 'AIzaSyAYWMXR8w8m16F7pVp_RZsnsBg1JkjYkVY', - authDomain: 'academy-c7303.firebaseapp.com', - databaseURL: 'https://academy-c7303.firebaseio.com', - projectId: 'academy-c7303', - storageBucket: 'academy-c7303.appspot.com', - messagingSenderId: '587195173569', + apiKey: process.env.API_KEY, + authDomain: process.env.AUTH_DOMAIN, + databaseURL: process.env.DATABASE_URL, + projectId: process.env.PROJECT_ID, + storageBucket: process.env.STORAGE_BUCKET, + messagingSenderId: process.env.MESSAGING_SENDER_ID, }; firebase.initializeApp(config); @@ -23,7 +22,7 @@ firebase.initializeApp(config); const database = firebase.database(); const ref = database.ref('emails'); -const submitButton = document.querySelector('.form__button'); +const submitButton = document.querySelector('#LandingEmail'); submitButton.addEventListener('click', (e) => { e.preventDefault();