From 343d3c5808dbcad2027f43015c2daa633206b6b9 Mon Sep 17 00:00:00 2001 From: IamMK Date: Mon, 14 Jan 2019 20:42:53 +0100 Subject: [PATCH 01/30] Responsive layout without hovers --- index.html | 41 ++++++++++++++++++ stylesheets/main.css | 97 ++++++++++++++++++++++++++++++++++++++++++ stylesheets/mobile.css | 32 ++++++++++++++ stylesheets/tablet.css | 6 +++ 4 files changed, 176 insertions(+) create mode 100644 index.html create mode 100644 stylesheets/main.css create mode 100644 stylesheets/mobile.css create mode 100644 stylesheets/tablet.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..e62b59f --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + Doman's Academy - Challenge 1 + + +
+
+
Coming Soon
+
+
+
+ Programmer +
+

Code Academy

+
+
+
+

Leave your email

+
+ + + +
+
+
+
+

MK© 2019.

+

Made with love in Poland

+

We are using cookies to improve your experience.

+

+
+
+ + \ No newline at end of file diff --git a/stylesheets/main.css b/stylesheets/main.css new file mode 100644 index 0000000..8725493 --- /dev/null +++ b/stylesheets/main.css @@ -0,0 +1,97 @@ +@import url('https://fonts.googleapis.com/css?family=Lato'); + +*{ + box-sizing: border-box; +} + +.container{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + flex-wrap: wrap; +} + +.container__coming-soon{ + position: absolute; + right: 0; + top: 0; +} + +.container__coming-soon figure{ + margin: 0; + padding: 0; +} + +body{ + padding: 0; + margin: 0; + background: linear-gradient(90deg, #83EB94 0%, #47D95E 100%); + color: white; + + font-family: 'Lato'; + line-height: normal; + text-align: center; + mix-blend-mode: normal; +} + +.header{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.header h1{ + font-weight: 300; + font-size: 60px; + letter-spacing: 5px; +} + +.header figure{ + /* width: 100vw; */ + object-fit: cover; +} + +.header img{ + width: 100%; + object-fit: cover; +} + +.main h2{ + font-weight: normal; + font-size: 24px; +} + +.main__form__input-email{ + border-radius: 9px; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); + + font-weight: 300; + font-size: 16px; + text-indent: 10px; + color: #A0A0A0; + + width: 250px; + height: 48px; + margin-right: 50px; +} + +.main__form__submit{ + background: #0297EC; + border-radius: 9px; + + font-weight: bold; + font-size: 16px; + text-align: center; + border-color: transparent; + + color: #FFFFFF; + width: 250px; + height: 48px; +} + +.footer{ + text-align: center; + font-size: 24px; +} \ No newline at end of file diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css new file mode 100644 index 0000000..b5e27fc --- /dev/null +++ b/stylesheets/mobile.css @@ -0,0 +1,32 @@ +@media all and (max-width: 500px){ + + .container__coming-soon{ + display: none; + } + + .header h1{ + font-size: 30px; + } + + .main__form form{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .main__form__input-email{ + margin: 0; + margin-bottom: 10px; + } + + .footer{ + font-size: 16px; + } +} + +@media all and (max-height: 500px){ + .header figure{ + display: none; + } +} \ No newline at end of file diff --git a/stylesheets/tablet.css b/stylesheets/tablet.css new file mode 100644 index 0000000..b33fa55 --- /dev/null +++ b/stylesheets/tablet.css @@ -0,0 +1,6 @@ +@media all and (max-width: 1000px){ + .footer{ + position: absolute; + bottom: 0; + } +} \ No newline at end of file From 571a43cebfe19080eb89de54714a7e75d2ac5ad4 Mon Sep 17 00:00:00 2001 From: IamMK Date: Mon, 14 Jan 2019 20:51:48 +0100 Subject: [PATCH 02/30] Hover effect --- stylesheets/main.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/stylesheets/main.css b/stylesheets/main.css index 8725493..d69652c 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -89,6 +89,14 @@ body{ color: #FFFFFF; width: 250px; height: 48px; + + transition: 0.3s; +} + +.main__form__submit:hover{ + border-color: initial; + cursor: pointer; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } .footer{ From bca7801d269ba1315a091e44cacc01075820cf84 Mon Sep 17 00:00:00 2001 From: IamMK Date: Mon, 14 Jan 2019 21:06:22 +0100 Subject: [PATCH 03/30] Focus effect --- stylesheets/main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/stylesheets/main.css b/stylesheets/main.css index d69652c..d61cbc8 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -75,6 +75,11 @@ body{ width: 250px; height: 48px; margin-right: 50px; + transition: 0.1s; +} + +.main__form__input-email:focus{ + border: 2px solid #5AAF65; } .main__form__submit{ From e706bcc03a0b636d2489b0c28214e421d8935a82 Mon Sep 17 00:00:00 2001 From: IamMK Date: Tue, 15 Jan 2019 20:24:17 +0100 Subject: [PATCH 04/30] One, small change --- README.md | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index fd32fb1..daad933 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,30 @@ # Academy Projekty wykonywane przez społeczność discorda -[helloroman](https://discordapp.com/invite/VTyJc9N) +[helloroman](https://discordapp.com/invite/VTyJc9N) Projekt jest we wczesnej fazie i obecne challenge sa testowe. Wszelkie sugestie propozycje pomocy mile widziane. ## Challenge #1 - Landing Page -Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adressy e-mail osób zainteresowanych udziałem w akademii. -Stack Technologiczny do wykonania zadania to html/css/js bez zadnych frameworkow, preprocesorow. -Rozwiązanie powinno dzialać na: +Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adressy e-mail osób zainteresowanych udziałem w akademii. +Stack Technologiczny do wykonania zadania to html/css/js bez zadnych frameworkow, preprocesorow. +Rozwiązanie powinno dzialać na: * Chrome 58+ * Edge 16+ * Safari 10.1+ * Firefox 54+ -Przycisk do wysyania formularza powinien mieć ID: LandingEmail -Wykonane zadanie należy przesylac jako pull request na branch develop. -Zwrocie uwagę na sematyke html i accessibility. +Przycisk do wysyania formularza powinien mieć ID: LandingEmail +Wykonane zadanie należy przesylac jako pull request na branch develop. +Zwrocie uwagę na sematyke html i accessibility. ### Grafiki -[Project.pdf](/assets/Layout.pdf.pdf}) -[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) -[Zeppelin](https://zpl.io/boKzeQv) +[Project.pdf](/assets/Layout.pdf}) +[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) +[Zeppelin](https://zpl.io/boKzeQv) Marginesy mogą się trochę nie zgadzać dopiero się uczę figmy -#### Bonus challenge +#### Bonus challenge * Wykonaj zadanie bez użycia javascriptu * Stwórz warstwe backendowa(dowolny język) lub podepnij się do firebase -### Termin -Wstępny czas na wykonanie challenga 21.01.2019 - - +### Termin +Wstępny czas na wykonanie challenga 21.01.2019 + Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D From 193ec4f7502d3fa64aa3bc00edf5b2f525025a9c Mon Sep 17 00:00:00 2001 From: IamMK Date: Tue, 15 Jan 2019 20:25:00 +0100 Subject: [PATCH 05/30] Simple backend --- backend/mailPushing.php | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 backend/mailPushing.php diff --git a/backend/mailPushing.php b/backend/mailPushing.php new file mode 100644 index 0000000..bc39858 --- /dev/null +++ b/backend/mailPushing.php @@ -0,0 +1,31 @@ + 'mysql:host=localhost;dbname=codeacademy;charset=utf8', + 'user' => 'root', + 'pass' => "", + ]; + + function __construct(){ + try{ + $this->db = new PDO($this->config['dsn'], $this->config['user'], $this->config['pass']); + } + catch(PDOException $err) { + exit('Blad polaczenia z baza danych: '.$err->getMessage()); + } + } + + public function pushEmail($mail){ + // przygotowanie zapytania + $insert = $this->db->prepare("INSERT INTO `mails`(`email`) VALUES (:mail)"); + // filtracja wskazanych danych + $insert->bindValue(':mail', $mail, PDO::PARAM_STR); + // właściwe wykonanie + $insert->execute(); + } + } + + $mailPush = new DataBase(); + $mailPush->pushEmail($_POST['mail']); \ No newline at end of file From 4910b1d8bc33de225d527ab4d2e2a1d89c4df4f6 Mon Sep 17 00:00:00 2001 From: IamMK Date: Tue, 15 Jan 2019 20:25:36 +0100 Subject: [PATCH 06/30] Safari position bug fixed --- index.html | 4 ++-- stylesheets/main.css | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index e62b59f..409cec1 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,12 @@
Programmer
-

Code Academy

+

CODE ACADEMY

Leave your email

-
+ diff --git a/stylesheets/main.css b/stylesheets/main.css index d61cbc8..5429da1 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -1,7 +1,7 @@ -@import url('https://fonts.googleapis.com/css?family=Lato'); +@import url('https://fonts.googleapis.com/css?family=Lato:300'); -*{ - box-sizing: border-box; +* { +box-sizing: border-box; } .container{ @@ -43,7 +43,7 @@ body{ } .header h1{ - font-weight: 300; + font-weight: 100; font-size: 60px; letter-spacing: 5px; } From 344bf8d35647566e5d5b594291ab12eab175759a Mon Sep 17 00:00:00 2001 From: IamMK Date: Wed, 16 Jan 2019 19:08:33 +0100 Subject: [PATCH 07/30] Adnotation --- README.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/README.md b/README.md index daad933..6cb5ebd 100644 --- a/README.md +++ b/README.md @@ -28,3 +28,32 @@ Wstępny czas na wykonanie challenga 21.01.2019 Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D + +##Od MK + +Strona testowana pod kątem większości wiodących rozdzielczości, oraz ok. 100 przeglądarek mobilnych oraz desktopowych z wynikiem pozytywnym ok. 75/100. +###Testy obejmowały: +* ok. 10 przestarzałych przeglądarek desktopowyche(brak wparcia CSS3 lub wsparcie w ograniczonym stopniu) +* ok. 5 przeglądarek tekstowych +* ok. 10 przestarzałych przeglądarek mobilnych +* ok. 30 przeglądarek mobilnych +* ok. 45 przeglądarek desktopowych + +###Testy w 5 różnych rozdzielczościach z wynikiem pozytywnym: +* 370/500 wliczając przeglądarki przestarzałe oraz tekstowe +* 370/375 na przeglądarkach wspierających CSS3 w stopniu przynajmniej dobrym + +###Testy dla wymaganych przeglądarek: +* Chrome 58+ - testowane dla Chrome 51+ z wynikiem pozytywnym w każdej rozdzielczości +* Edge 16+ - testowane dla Edge 16+ z wynikiem pozytywnym +* Safari 10.1+ - testowane dla Safari 9+ z wynikiem pozytywnym +* Firefox 54+ - testowane dla Firefox 54+ z wynikiem pozytywnym + +###Baza danych: +Skrypt `mailPushing.php': +* wymagana baza MySQL +* wymagana tabela codeacademy +* struktura tabeli: +`id - primary` +`email - unique` + From 43c530e5c5de4643107615bcc1bd740470c7a017 Mon Sep 17 00:00:00 2001 From: IamMK Date: Wed, 16 Jan 2019 19:09:05 +0100 Subject: [PATCH 08/30] Mail validing --- backend/mailPushing.php | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/backend/mailPushing.php b/backend/mailPushing.php index bc39858..21a9b02 100644 --- a/backend/mailPushing.php +++ b/backend/mailPushing.php @@ -1,5 +1,7 @@ bindValue(':mail', $mail, PDO::PARAM_STR); // właściwe wykonanie $insert->execute(); + header("Location: ../"); } + + public function checkMail($mail){ + $checkPreg = '/^[a-zA-Z0-9.\-_]+@[a-zA-Z0-9\-.]+\.[a-zA-Z]$/'; + if(!preg_match($checkPreg, $mail)){ + $_SESSION['error'] = 'Invalid E-mail'; + header("Location: ../"); + } + else $this->pushEmail(trim($mail)); } +} $mailPush = new DataBase(); - $mailPush->pushEmail($_POST['mail']); \ No newline at end of file + $mailPush->checkMail($_POST['mail']); \ No newline at end of file From 79f741d727df68ab891eccc55ee7a77d7005e519 Mon Sep 17 00:00:00 2001 From: IamMK Date: Wed, 16 Jan 2019 19:10:16 +0100 Subject: [PATCH 09/30] Form flexing --- index.html => index.php | 11 ++++++++--- stylesheets/main.css | 30 ++++++++++++++++++++++++++++-- stylesheets/mobile.css | 2 +- 3 files changed, 37 insertions(+), 6 deletions(-) rename index.html => index.php (74%) diff --git a/index.html b/index.php similarity index 74% rename from index.html rename to index.php index 409cec1..6619b27 100644 --- a/index.html +++ b/index.php @@ -1,3 +1,6 @@ + @@ -22,10 +25,12 @@

CODE ACADEMY

-

Leave your email

+

Leave your email here

- - +
+ + " type="email" name="mail" id="LandingEmail" placeholder="email@example.com"> +
diff --git a/stylesheets/main.css b/stylesheets/main.css index 5429da1..e475656 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -63,7 +63,29 @@ body{ font-size: 24px; } -.main__form__input-email{ +.main__form form{ + display: flex; + flex-direction: row; + align-items: flex-end; +} + +.main__form label{ + color: #FF3333; + text-align: left; +} + +.main__form p{ + color: #FF3333; + text-align: left; + margin: 0; +} + +.main__form--flex-column{ + display: flex; + flex-direction: column; +} + +.main__form__input{ border-radius: 9px; box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); @@ -78,10 +100,14 @@ body{ transition: 0.1s; } -.main__form__input-email:focus{ +.main__form__input:focus{ border: 2px solid #5AAF65; } +.main__form__input--error{ + border: 2px solid #FF3333; +} + .main__form__submit{ background: #0297EC; border-radius: 9px; diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css index b5e27fc..9056ef3 100644 --- a/stylesheets/mobile.css +++ b/stylesheets/mobile.css @@ -15,7 +15,7 @@ align-items: center; } - .main__form__input-email{ + .main__form__input{ margin: 0; margin-bottom: 10px; } From 4af131162ab55a62f926bdab43864e70872f4701 Mon Sep 17 00:00:00 2001 From: IamMK Date: Wed, 16 Jan 2019 19:20:20 +0100 Subject: [PATCH 10/30] Session bug fixed --- backend/mailPushing.php | 1 + index.php | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/backend/mailPushing.php b/backend/mailPushing.php index 21a9b02..6c1a0bf 100644 --- a/backend/mailPushing.php +++ b/backend/mailPushing.php @@ -33,6 +33,7 @@ public function checkMail($mail){ $checkPreg = '/^[a-zA-Z0-9.\-_]+@[a-zA-Z0-9\-.]+\.[a-zA-Z]$/'; if(!preg_match($checkPreg, $mail)){ $_SESSION['error'] = 'Invalid E-mail'; + $_SESSION['mail'] = $mail; header("Location: ../"); } else $this->pushEmail(trim($mail)); diff --git a/index.php b/index.php index 6619b27..b403341 100644 --- a/index.php +++ b/index.php @@ -1,5 +1,9 @@ 'Invalid Email', 'errorClass' => 'main__form__input--error', 'typedEmail' => $_SESSION['mail']]; + } + session_destroy(); ?> @@ -28,8 +32,14 @@

Leave your email here

- - " type="email" name="mail" id="LandingEmail" placeholder="email@example.com"> + +
From 48cd2a8fdd2c28a6a73da0abea69992cbc9703c0 Mon Sep 17 00:00:00 2001 From: IamMK Date: Wed, 16 Jan 2019 20:11:25 +0100 Subject: [PATCH 11/30] Paragraph margin changed in footer --- index.php | 1 - stylesheets/main.css | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.php b/index.php index b403341..93f1134 100644 --- a/index.php +++ b/index.php @@ -49,7 +49,6 @@ class="main__form__input MK© 2019.

Made with love in Poland

We are using cookies to improve your experience.

-

diff --git a/stylesheets/main.css b/stylesheets/main.css index e475656..0aea2ff 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -133,4 +133,8 @@ body{ .footer{ text-align: center; font-size: 24px; +} + +.footer p{ + margin: 0; } \ No newline at end of file From 34e3f62d85647c5ab8d8799d25b776c77a489dcc Mon Sep 17 00:00:00 2001 From: IamMK Date: Wed, 16 Jan 2019 20:16:44 +0100 Subject: [PATCH 12/30] Readme changed --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6cb5ebd..7743758 100644 --- a/README.md +++ b/README.md @@ -29,27 +29,27 @@ Wstępny czas na wykonanie challenga 21.01.2019 Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D -##Od MK +## Od MK Strona testowana pod kątem większości wiodących rozdzielczości, oraz ok. 100 przeglądarek mobilnych oraz desktopowych z wynikiem pozytywnym ok. 75/100. -###Testy obejmowały: +### Testy obejmowały: * ok. 10 przestarzałych przeglądarek desktopowyche(brak wparcia CSS3 lub wsparcie w ograniczonym stopniu) * ok. 5 przeglądarek tekstowych * ok. 10 przestarzałych przeglądarek mobilnych * ok. 30 przeglądarek mobilnych * ok. 45 przeglądarek desktopowych -###Testy w 5 różnych rozdzielczościach z wynikiem pozytywnym: +### Testy w 5 różnych rozdzielczościach z wynikiem pozytywnym: * 370/500 wliczając przeglądarki przestarzałe oraz tekstowe * 370/375 na przeglądarkach wspierających CSS3 w stopniu przynajmniej dobrym -###Testy dla wymaganych przeglądarek: +### Testy dla wymaganych przeglądarek: * Chrome 58+ - testowane dla Chrome 51+ z wynikiem pozytywnym w każdej rozdzielczości * Edge 16+ - testowane dla Edge 16+ z wynikiem pozytywnym * Safari 10.1+ - testowane dla Safari 9+ z wynikiem pozytywnym * Firefox 54+ - testowane dla Firefox 54+ z wynikiem pozytywnym -###Baza danych: +### Baza danych: Skrypt `mailPushing.php': * wymagana baza MySQL * wymagana tabela codeacademy From 61a6e3de5fa23edfda0a464b072f3968d4a67421 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 20:32:10 +0100 Subject: [PATCH 13/30] Used :valid pseudoclass --- README.md | 29 ----------------------------- index.php | 4 ++-- stylesheets/main.css | 2 +- 3 files changed, 3 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 2d23ae6..778989e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ # Academy Projekty wykonywane przez społeczność discorda -<<<<<<< HEAD [helloroman](https://discordapp.com/invite/VTyJc9N) Projekt jest we wczesnej fazie i obecne challenge sa testowe. Wszelkie sugestie propozycje pomocy mile widziane. @@ -8,20 +7,10 @@ Projekt jest we wczesnej fazie i obecne challenge sa testowe. Wszelkie sugestie Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adressy e-mail osób zainteresowanych udziałem w akademii. Stack Technologiczny do wykonania zadania to html/css/js bez zadnych frameworkow, preprocesorow. Rozwiązanie powinno dzialać na: -======= -[helloroman](https://discordapp.com/invite/VTyJc9N) -Projekt jest we wczesnej fazie i obecne challenge są testowe. Wszelkie sugestie, propozycje pomocy mile widziane. - -## Challenge #1 - Landing Page -Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adresy mail osób zainteresowanych udziałem w akademii. -Stack Technologiczny do wykonania zadania to html/css/js bez żadnych frameworkow, preprocesorow. -Rozwiązanie powinno dzialać na: ->>>>>>> origin-mk/develop * Chrome 58+ * Edge 16+ * Safari 10.1+ * Firefox 54+ -<<<<<<< HEAD Przycisk do wysyania formularza powinien mieć ID: LandingEmail Wykonane zadanie należy przesylac jako pull request na branch develop. Zwrocie uwagę na sematyke html i accessibility. @@ -37,24 +26,6 @@ Zwrocie uwagę na sematyke html i accessibility. ### Termin Wstępny czas na wykonanie challenga 21.01.2019 -======= -Przycisk do wysłania formularza powinien mieć ID: LandingEmail -Wykonane zadanie należy przesyłac jako pull request na branch develop. -Zwrocie uwagę na semantykę html i accessibility. - -### Grafiki -[Project.pdf](/assets/Layout.pdf) -[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) -[Zeppelin](https://zpl.io/boKzeQv) - Marginesy mogą się trochę nie zgadzać, dopiero się uczę figmy -#### Bonus challenge -* Wykonaj zadanie bez użycia javascriptu -* Stwórz warstwę backendową(dowolny język) lub podepnij się do firebase -### Termin -Wstępny czas na wykonanie challenga 21.01.2019 - - ->>>>>>> origin-mk/develop Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D diff --git a/index.php b/index.php index 93f1134..fe065b1 100644 --- a/index.php +++ b/index.php @@ -1,7 +1,7 @@ 'Invalid Email', 'errorClass' => 'main__form__input--error', 'typedEmail' => $_SESSION['mail']]; + $invalidEmail = ['errorMessage' => 'Invalid Email', 'typedEmail' => $_SESSION['mail']]; } session_destroy(); ?> @@ -34,7 +34,7 @@
Date: Thu, 17 Jan 2019 20:46:02 +0100 Subject: [PATCH 14/30] Email input focusing bug fixed/INvalid now --- index.php | 3 ++- stylesheets/main.css | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/index.php b/index.php index fe065b1..a315762 100644 --- a/index.php +++ b/index.php @@ -39,7 +39,8 @@ class="main__form__input" type="email" name="mail" id="LandingEmail" - placeholder="email@example.com"> + placeholder="email@example.com" + required>
diff --git a/stylesheets/main.css b/stylesheets/main.css index 1973c00..ce0dfe6 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -100,12 +100,12 @@ body{ transition: 0.1s; } -.main__form__input:focus{ - border: 2px solid #5AAF65; +.main__form__input:invalid{ + border: 2px solid #FF3333; } -.main__form__input:valid{ - border: 2px solid #FF3333; +.main__form__input:focus{ + border: 2px solid #5AAF65; } .main__form__submit{ From 2e80932476dd178cf914fd7144f87be42880ba8e Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:00:19 +0100 Subject: [PATCH 15/30] PHP in index file deleted --- index.php | 10 +--------- stylesheets/main.css | 12 ++++++++---- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/index.php b/index.php index a315762..b22c7f3 100644 --- a/index.php +++ b/index.php @@ -1,10 +1,3 @@ - 'Invalid Email', 'typedEmail' => $_SESSION['mail']]; - } - session_destroy(); -?> @@ -32,15 +25,14 @@

Leave your email here

- +
diff --git a/stylesheets/main.css b/stylesheets/main.css index ce0dfe6..41feaea 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -82,7 +82,7 @@ body{ .main__form--flex-column{ display: flex; - flex-direction: column; + flex-direction: column-reverse; } .main__form__input{ @@ -100,12 +100,16 @@ body{ transition: 0.1s; } -.main__form__input:invalid{ +.main__form__input:focus{ + border: 2px solid #5AAF65; +} + +.main__form__input:focus:invalid{ border: 2px solid #FF3333; } -.main__form__input:focus{ - border: 2px solid #5AAF65; +.main__form__input:focus:invalid + .main__form__label::before{ + content: "Invalid Email"; } .main__form__submit{ From 3864747ee2ffef5d0839acdd1c9a06b4ad5cb17c Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:00:49 +0100 Subject: [PATCH 16/30] Name of index changed to index.html --- index.php => index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename index.php => index.html (100%) diff --git a/index.php b/index.html similarity index 100% rename from index.php rename to index.html From 8ff393f8d95ef9a335a63303501eef4f060bba05 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:04:07 +0100 Subject: [PATCH 17/30] Added pattern to email input --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index b22c7f3..562224f 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@

Leave your email here

type="email" name="mail" id="LandingEmail" + pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,8}" placeholder="email@example.com" required> From b444e94952c29c8a9ad2064216817fe3293a87cd Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:15:51 +0100 Subject: [PATCH 18/30] New md files structure --- POSTSCRIPTUM.md | 27 +++++++++++++++++++++++++++ README.md | 47 ++++++++++------------------------------------- 2 files changed, 37 insertions(+), 37 deletions(-) create mode 100644 POSTSCRIPTUM.md diff --git a/POSTSCRIPTUM.md b/POSTSCRIPTUM.md new file mode 100644 index 0000000..5fdde7c --- /dev/null +++ b/POSTSCRIPTUM.md @@ -0,0 +1,27 @@ +## Od MK + +Strona testowana pod kątem większości wiodących rozdzielczości, oraz ok. 100 przeglądarek mobilnych oraz desktopowych z wynikiem pozytywnym ok. 75/100. +### Testy obejmowały: +* ok. 10 przestarzałych przeglądarek desktopowyche(brak wparcia CSS3 lub wsparcie w ograniczonym stopniu) +* ok. 5 przeglądarek tekstowych +* ok. 10 przestarzałych przeglądarek mobilnych +* ok. 30 przeglądarek mobilnych +* ok. 45 przeglądarek desktopowych + +### Testy w 5 różnych rozdzielczościach z wynikiem pozytywnym: +* 370/500 wliczając przeglądarki przestarzałe oraz tekstowe +* 370/375 na przeglądarkach wspierających CSS3 w stopniu przynajmniej dobrym + +### Testy dla wymaganych przeglądarek: +* Chrome 58+ - testowane dla Chrome 51+ z wynikiem pozytywnym w każdej rozdzielczości +* Edge 16+ - testowane dla Edge 16+ z wynikiem pozytywnym +* Safari 10.1+ - testowane dla Safari 9+ z wynikiem pozytywnym +* Firefox 54+ - testowane dla Firefox 54+ z wynikiem pozytywnym + +### Baza danych: +Skrypt `mailPushing.php': +* wymagana baza MySQL +* wymagana tabela codeacademy +* struktura tabeli: +`id - primary` +`email - unique` \ No newline at end of file diff --git a/README.md b/README.md index 778989e..5ae9baa 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,31 @@ # Academy Projekty wykonywane przez społeczność discorda [helloroman](https://discordapp.com/invite/VTyJc9N) -Projekt jest we wczesnej fazie i obecne challenge sa testowe. Wszelkie sugestie propozycje pomocy mile widziane. +Projekt jest we wczesnej fazie i obecne challenge są testowe. Wszelkie sugestie, propozycje pomocy mile widziane. ## Challenge #1 - Landing Page -Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adressy e-mail osób zainteresowanych udziałem w akademii. -Stack Technologiczny do wykonania zadania to html/css/js bez zadnych frameworkow, preprocesorow. +Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adresy mail osób zainteresowanych udziałem w akademii. +Stack Technologiczny do wykonania zadania to html/css/js bez żadnych frameworkow, preprocesorow. Rozwiązanie powinno dzialać na: * Chrome 58+ * Edge 16+ * Safari 10.1+ * Firefox 54+ -Przycisk do wysyania formularza powinien mieć ID: LandingEmail -Wykonane zadanie należy przesylac jako pull request na branch develop. -Zwrocie uwagę na sematyke html i accessibility. +Przycisk do wysłania formularza powinien mieć ID: LandingEmail +Wykonane zadanie należy przesyłac jako pull request na branch develop. +Zwrocie uwagę na semantykę html i accessibility. ### Grafiki -[Project.pdf](/assets/Layout.pdf}) +[Project.pdf](/assets/Layout.pdf) [Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) [Zeppelin](https://zpl.io/boKzeQv) - Marginesy mogą się trochę nie zgadzać dopiero się uczę figmy + Marginesy mogą się trochę nie zgadzać, dopiero się uczę figmy #### Bonus challenge * Wykonaj zadanie bez użycia javascriptu -* Stwórz warstwe backendowa(dowolny język) lub podepnij się do firebase +* Stwórz warstwę backendową(dowolny język) lub podepnij się do firebase ### Termin Wstępny czas na wykonanie challenga 21.01.2019 -Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D - -## Od MK - -Strona testowana pod kątem większości wiodących rozdzielczości, oraz ok. 100 przeglądarek mobilnych oraz desktopowych z wynikiem pozytywnym ok. 75/100. -### Testy obejmowały: -* ok. 10 przestarzałych przeglądarek desktopowyche(brak wparcia CSS3 lub wsparcie w ograniczonym stopniu) -* ok. 5 przeglądarek tekstowych -* ok. 10 przestarzałych przeglądarek mobilnych -* ok. 30 przeglądarek mobilnych -* ok. 45 przeglądarek desktopowych -### Testy w 5 różnych rozdzielczościach z wynikiem pozytywnym: -* 370/500 wliczając przeglądarki przestarzałe oraz tekstowe -* 370/375 na przeglądarkach wspierających CSS3 w stopniu przynajmniej dobrym - -### Testy dla wymaganych przeglądarek: -* Chrome 58+ - testowane dla Chrome 51+ z wynikiem pozytywnym w każdej rozdzielczości -* Edge 16+ - testowane dla Edge 16+ z wynikiem pozytywnym -* Safari 10.1+ - testowane dla Safari 9+ z wynikiem pozytywnym -* Firefox 54+ - testowane dla Firefox 54+ z wynikiem pozytywnym - -### Baza danych: -Skrypt `mailPushing.php': -* wymagana baza MySQL -* wymagana tabela codeacademy -* struktura tabeli: -`id - primary` -`email - unique` \ No newline at end of file +Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D From f610a623d0db489657d3fa96943db5f187cfdc57 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:19:25 +0100 Subject: [PATCH 19/30] Coming soon tip done --- index.html | 4 +--- stylesheets/main.css | 5 +---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 562224f..ee61f30 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,7 @@
-
-
Coming Soon
-
+
Coming Soon
Programmer diff --git a/stylesheets/main.css b/stylesheets/main.css index 41feaea..de67a9c 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -12,13 +12,10 @@ box-sizing: border-box; flex-wrap: wrap; } -.container__coming-soon{ +.coming-soon{ position: absolute; right: 0; top: 0; -} - -.container__coming-soon figure{ margin: 0; padding: 0; } From a76809ff1f23f688d5aee42a4b66bf7293cbd502 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:28:09 +0100 Subject: [PATCH 20/30] Indents fixed and section tag deleted --- index.html | 60 ++++++++++++++++++++++++++---------------------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index ee61f30..eb10224 100644 --- a/index.html +++ b/index.html @@ -11,37 +11,35 @@
-
Coming Soon
-
-
- Programmer -
-

CODE ACADEMY

-
-
-
-

Leave your email here

-
-
- - -
- -
-
-
-
-

MK© 2019.

-

Made with love in Poland

-

We are using cookies to improve your experience.

-
+
Coming Soon
+
+
+ Programmer +
+

CODE ACADEMY

+
+
+

Leave your email here

+
+ + +
+
+
+

MK© 2019.

+

Made with love in Poland

+

We are using cookies to improve your experience.

+
\ No newline at end of file From 3e739b2ce69b743af345bc1f6a3424aeb374fe76 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:42:02 +0100 Subject: [PATCH 21/30] Names of classes changed --- index.html | 10 +++++----- stylesheets/main.css | 25 ++++++++++--------------- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index eb10224..5593190 100644 --- a/index.html +++ b/index.html @@ -20,19 +20,19 @@

CODE ACADEMY

Leave your email here

-
-
diff --git a/stylesheets/main.css b/stylesheets/main.css index de67a9c..9c9a509 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -60,29 +60,24 @@ body{ font-size: 24px; } -.main__form form{ +.form{ display: flex; flex-direction: row; align-items: flex-end; } -.main__form label{ +.form__label{ color: #FF3333; text-align: left; + height: 1.1em; } -.main__form p{ - color: #FF3333; - text-align: left; - margin: 0; -} - -.main__form--flex-column{ +.form--email{ display: flex; flex-direction: column-reverse; } -.main__form__input{ +.form__input{ border-radius: 9px; box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); @@ -97,19 +92,19 @@ body{ transition: 0.1s; } -.main__form__input:focus{ +.form__input:focus{ border: 2px solid #5AAF65; } -.main__form__input:focus:invalid{ +.form__input:focus:invalid{ border: 2px solid #FF3333; } -.main__form__input:focus:invalid + .main__form__label::before{ +.form__input:focus:invalid + .form__label::before{ content: "Invalid Email"; } -.main__form__submit{ +.form__submit{ background: #0297EC; border-radius: 9px; @@ -125,7 +120,7 @@ body{ transition: 0.3s; } -.main__form__submit:hover{ +.form__submit:hover{ border-color: initial; cursor: pointer; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); From 781308c7df6fa8fdcfd6b27cf60d50d843c10275 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 21:45:43 +0100 Subject: [PATCH 22/30] Migration font downloading to index file --- index.html | 1 + stylesheets/main.css | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 5593190..633c04e 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + Doman's Academy - Challenge 1 diff --git a/stylesheets/main.css b/stylesheets/main.css index 9c9a509..24f3e20 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css?family=Lato:300'); - * { box-sizing: border-box; } From d9258d3e885a582c10bcea1d454a442d463b91d7 Mon Sep 17 00:00:00 2001 From: IamMK Date: Thu, 17 Jan 2019 22:08:23 +0100 Subject: [PATCH 23/30] Styling by using tag names fixed --- index.html | 60 ++++++++++++++++++++---------------------- stylesheets/main.css | 15 ++++------- stylesheets/mobile.css | 10 +++---- 3 files changed, 39 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 633c04e..346fad8 100644 --- a/index.html +++ b/index.html @@ -11,36 +11,34 @@ Doman's Academy - Challenge 1 -
-
Coming Soon
-
-
- Programmer -
-

CODE ACADEMY

-
-
-

Leave your email here

-
- - -
-
-
-

MK© 2019.

-

Made with love in Poland

-

We are using cookies to improve your experience.

-
-
+
Coming Soon
+
+ +

CODE ACADEMY

+
+
+

Leave your email here

+
+ + +
+
+
+

MK© 2019.

+

Made with love in Poland

+

We are using cookies to improve your experience.

+
\ No newline at end of file diff --git a/stylesheets/main.css b/stylesheets/main.css index 24f3e20..2196d61 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -2,7 +2,7 @@ box-sizing: border-box; } -.container{ +body{ display: flex; align-items: center; justify-content: center; @@ -37,23 +37,18 @@ body{ flex-direction: column; } -.header h1{ +.header__title{ font-weight: 100; font-size: 60px; letter-spacing: 5px; } -.header figure{ - /* width: 100vw; */ - object-fit: cover; -} - -.header img{ +.header__logo__inner{ width: 100%; object-fit: cover; } -.main h2{ +.main__title{ font-weight: normal; font-size: 24px; } @@ -129,6 +124,6 @@ body{ font-size: 24px; } -.footer p{ +.footer__paragraph{ margin: 0; } \ No newline at end of file diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css index 9056ef3..98b8358 100644 --- a/stylesheets/mobile.css +++ b/stylesheets/mobile.css @@ -1,21 +1,21 @@ @media all and (max-width: 500px){ - .container__coming-soon{ + .coming-soon{ display: none; } - .header h1{ + .header__title{ font-size: 30px; } - .main__form form{ + .form{ display: flex; flex-direction: column; justify-content: center; align-items: center; } - .main__form__input{ + .form__input{ margin: 0; margin-bottom: 10px; } @@ -26,7 +26,7 @@ } @media all and (max-height: 500px){ - .header figure{ + .header__logo{ display: none; } } \ No newline at end of file From f5c1830afebf19601b946534f55df0418070baa7 Mon Sep 17 00:00:00 2001 From: IamMK Date: Sat, 19 Jan 2019 22:47:39 +0100 Subject: [PATCH 24/30] Label displaying changed --- index.html | 2 +- stylesheets/main.css | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 346fad8..a911578 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@

Leave your email here

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,8}" placeholder="email@example.com" required> - +
diff --git a/stylesheets/main.css b/stylesheets/main.css index 2196d61..4701338 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -63,6 +63,7 @@ body{ color: #FF3333; text-align: left; height: 1.1em; + visibility: hidden; } .form--email{ @@ -93,8 +94,8 @@ body{ border: 2px solid #FF3333; } -.form__input:focus:invalid + .form__label::before{ - content: "Invalid Email"; +.form__input:focus:invalid + .form__label{ + visibility: visible; } .form__submit{ From 6aa4c9fab69993e39f0dbcd13c2d348f3da5570f Mon Sep 17 00:00:00 2001 From: IamMK Date: Sat, 19 Jan 2019 22:51:30 +0100 Subject: [PATCH 25/30] Uppercase in header__title --- index.html | 2 +- stylesheets/main.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a911578..371b8d9 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ -

CODE ACADEMY

+

Code Academy

Leave your email here

diff --git a/stylesheets/main.css b/stylesheets/main.css index 4701338..39b3024 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -41,6 +41,7 @@ body{ font-weight: 100; font-size: 60px; letter-spacing: 5px; + text-transform: uppercase; } .header__logo__inner{ From 5dfa7baf3f56212b29ba06355b6e4987d29ec6d1 Mon Sep 17 00:00:00 2001 From: IamMK Date: Sat, 19 Jan 2019 23:01:11 +0100 Subject: [PATCH 26/30] Class names changed --- index.html | 6 +++--- stylesheets/main.css | 4 ++-- stylesheets/mobile.css | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 371b8d9..1b5a486 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,10 @@
Coming Soon
-

Leave your email here

diff --git a/stylesheets/main.css b/stylesheets/main.css index 39b3024..f27d763 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -37,14 +37,14 @@ body{ flex-direction: column; } -.header__title{ +.logo__title{ font-weight: 100; font-size: 60px; letter-spacing: 5px; text-transform: uppercase; } -.header__logo__inner{ +.logo__image{ width: 100%; object-fit: cover; } diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css index 98b8358..d1c5ab4 100644 --- a/stylesheets/mobile.css +++ b/stylesheets/mobile.css @@ -4,7 +4,7 @@ display: none; } - .header__title{ + .logo__title{ font-size: 30px; } @@ -26,7 +26,7 @@ } @media all and (max-height: 500px){ - .header__logo{ + .logo{ display: none; } } \ No newline at end of file From 42af6ac528c70bd48066a107c2d12c489479aa66 Mon Sep 17 00:00:00 2001 From: IamMK Date: Sat, 19 Jan 2019 23:03:24 +0100 Subject: [PATCH 27/30] Class names changed --- index.html | 2 +- stylesheets/main.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1b5a486..4683521 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@

Leave your email here

-