From 4e6a4c87348983cf139362f4ac24e16266404e2b Mon Sep 17 00:00:00 2001 From: dmytro-shevchenko1 Date: Sat, 28 Oct 2023 01:19:51 +0300 Subject: [PATCH 1/2] 3-forms Dmytro Shevchenko. Added Login Page and filter. --- .../GamesProject/cards.html | 40 +++- .../GamesProject/images/search_logo.svg | 4 + .../GamesProject/index.html | 9 +- .../GamesProject/login.html | 51 ++++++ .../GamesProject/style.css | 171 +++++++++++++++++- .../GamesProject/success-page.html | 21 +++ 6 files changed, 280 insertions(+), 16 deletions(-) create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/images/search_logo.svg create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html index a1a31f59..6743151b 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html @@ -9,21 +9,55 @@ - +
Logo
+
+
+
+ + +
+
+ + + + +
+
+ + + + +
+
+ + + +
+
+
+

Study project "Games"

diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/images/search_logo.svg b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/images/search_logo.svg new file mode 100644 index 00000000..d3a2a915 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/images/search_logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html index 7416a06c..9f482f13 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html @@ -9,16 +9,19 @@ - +
Logo
diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html new file mode 100644 index 00000000..34d52255 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html @@ -0,0 +1,51 @@ + + + + + + + Login Page + + + +
+ Logo +
+ +
+
+
+

+ Login Page +

+ +
+ + diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css index 4a374f33..34813a5b 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css @@ -8,7 +8,6 @@ body { header { max-width: 100%; background-color: #EF4934; - margin-bottom: 50px; display: flex; align-items: center; justify-content: space-between; @@ -28,11 +27,25 @@ header { text-decoration: none; } -/*.nav-items a:visited { +.game-page .nav-items .cards-link { text-decoration: underline; - text-underline-offset: 5px; - text-decoration-thickness: 0.01em; -}*/ + text-underline-offset: 7px; + text-decoration-thickness: 1px; +} + +.about-page .nav-items .about-link { + text-decoration: underline; + text-underline-offset: 7px; + text-decoration-thickness: 1px; +} + +.login-page .nav-items .login-link { + text-decoration: underline; + text-underline-offset: 7px; + text-decoration-thickness: 1px; +} + +/*about page*/ .intro { color: #221F1F; @@ -44,6 +57,7 @@ header { gap: 70px; padding-left: 53px; padding-right: 53px; + margin-top: 60px; } .about-h1 { @@ -54,17 +68,67 @@ header { margin-top: 0; } +.link { + color: #EF4934; +} + +/*cards page*/ + +.filter { + background-color: #221F1F; + padding: 12px 53px; + font-size: 14px; + font-weight: 400; + color: #FFF; +} + +.filter-form { + display: flex; + align-items: center; + justify-content: space-between; +} + +.filter-search { + display: flex; +} + +.search-input { + margin-right: 0; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + padding: 12px 100px 12px 45px; + background-image: url("./images/search_logo.svg"); + background-repeat: no-repeat; + background-position: 10px 9px; + border: #FFF; +} + +.search-button { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + margin-left: 0; + color: #FFF; + background-color: #EF4934; + border: none; + padding-left: 20px; + padding-right: 20px; +} + +.select-name { + border-radius: 6px; + padding: 13px; + background-color: #333; + color: #FFF; +} + .cards-h1 { color: #221F1F; font-size: 48px; font-weight: 700; line-height: 32px; + margin-top: 40px; margin-left: 53px; - margin-bottom: 50px; -} - -.link { - color: #EF4934; + margin-bottom: 40px; } .cards { @@ -112,3 +176,90 @@ header { line-height: 18px; margin-left: 10px; } + +/* login page */ + +.login-h1 { + font-size: 48px; + font-weight: 700; + margin-top: 80px; + margin-bottom: 60px; +} + +.login-main { + display: flex; + flex-direction: column; + align-items: center; +} + +.login-form { + display: flex; + flex-direction: column; +} + +.checkbox-group { + display: flex; + justify-content: flex-start; + font-size: 14px; + gap: 12px; +} + +label[for="email"], +label[for="password"], +label[for="checkbox"] { + display: flex; + font-size: 22px; + font-weight: 600; + margin-bottom: 22px; +} + +input[type="email"], +input[type="password"], +.login-checkbox { + padding: 30px 450px 30px 20px ; + margin-bottom: 40px; + font-size: 14px; + border: .006rem solid #A9A9A9; + border-radius: 6px; +} + +input[type="email"]:focus, +input[type="password"]:focus { + border-bottom: 5px solid #EF4934; +} + +.submit-button { + padding: 27px; + font-size: 22px; + font-weight: 600; + color: #FFF; + background-color: #EF4934; + border: none; + border-radius: 6px; +} + +/*success login page*/ + +.successful-page { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.successful-form { + display: flex; + flex-direction: column; + align-items: center; +} + +.back-button { + padding: 27px; + font-size: 22px; + font-weight: 600; + color: #FFF; + background-color: #EF4934; + border: none; + border-radius: 6px; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html new file mode 100644 index 00000000..269426d3 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html @@ -0,0 +1,21 @@ + + + + + + + Succsess Login + + + +
+
+
+

Successful Login

+ +
+
+
+ + From 9d0c12d6221f69358614a4f45114d867d58be80d Mon Sep 17 00:00:00 2001 From: dmytro-shevchenko1 Date: Sat, 28 Oct 2023 23:59:44 +0300 Subject: [PATCH 2/2] Code fixes, styles fixes --- .../GamesProject/cards.html | 6 +- .../GamesProject/index.html | 6 +- .../GamesProject/login.html | 34 +-- .../GamesProject/style.css | 265 ------------------ .../GamesProject/styles/about.css | 24 ++ .../GamesProject/styles/cards.css | 102 +++++++ .../GamesProject/styles/header.css | 39 +++ .../GamesProject/styles/login.css | 55 ++++ .../GamesProject/styles/style.css | 6 + .../GamesProject/styles/success-page.css | 23 ++ .../GamesProject/success-page.html | 4 +- 11 files changed, 275 insertions(+), 289 deletions(-) delete mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/about.css create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/cards.css create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/header.css create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/login.css create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/style.css create mode 100644 homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/success-page.css diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html index 6743151b..a15363ad 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/cards.html @@ -6,11 +6,13 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Cards - + + + -
+
Logo
    diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html index 9f482f13..7c1ae699 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/index.html @@ -6,11 +6,13 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> GamesProject - + + + -
    +
    Logo
      diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html index 34d52255..a6c81344 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/login.html @@ -6,10 +6,12 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Login Page - + + + -
      +
      Logo
        @@ -29,23 +31,17 @@

        Login Page

        - +
diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css deleted file mode 100644 index 34813a5b..00000000 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/style.css +++ /dev/null @@ -1,265 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); - -body { - font-family: Roboto, sans-serif; - margin: 0; -} - -header { - max-width: 100%; - background-color: #EF4934; - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 53px; -} - -.nav-items { - display: flex; - gap: 50px; - list-style: none; -} - -.nav-items a { - font-size: 16px; - font-weight: 500; - color: #FFF; - text-decoration: none; -} - -.game-page .nav-items .cards-link { - text-decoration: underline; - text-underline-offset: 7px; - text-decoration-thickness: 1px; -} - -.about-page .nav-items .about-link { - text-decoration: underline; - text-underline-offset: 7px; - text-decoration-thickness: 1px; -} - -.login-page .nav-items .login-link { - text-decoration: underline; - text-underline-offset: 7px; - text-decoration-thickness: 1px; -} - -/*about page*/ - -.intro { - color: #221F1F; - font-size: 22px; - font-weight: 400; - line-height: 32px; - display: flex; - justify-content: space-between; - gap: 70px; - padding-left: 53px; - padding-right: 53px; - margin-top: 60px; -} - -.about-h1 { - color: #221F1F; - font-size: 48px; - font-weight: 700; - line-height: 32px; - margin-top: 0; -} - -.link { - color: #EF4934; -} - -/*cards page*/ - -.filter { - background-color: #221F1F; - padding: 12px 53px; - font-size: 14px; - font-weight: 400; - color: #FFF; -} - -.filter-form { - display: flex; - align-items: center; - justify-content: space-between; -} - -.filter-search { - display: flex; -} - -.search-input { - margin-right: 0; - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - padding: 12px 100px 12px 45px; - background-image: url("./images/search_logo.svg"); - background-repeat: no-repeat; - background-position: 10px 9px; - border: #FFF; -} - -.search-button { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - margin-left: 0; - color: #FFF; - background-color: #EF4934; - border: none; - padding-left: 20px; - padding-right: 20px; -} - -.select-name { - border-radius: 6px; - padding: 13px; - background-color: #333; - color: #FFF; -} - -.cards-h1 { - color: #221F1F; - font-size: 48px; - font-weight: 700; - line-height: 32px; - margin-top: 40px; - margin-left: 53px; - margin-bottom: 40px; -} - -.cards { - margin: 50px 53px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 25px; -} - -.game-card { - width: 275px; - background-color: #ECECEC; - padding: 12px 12px 22px; - border-radius: 12px; - display: flex; - flex-direction: column; -} - -.game-title { - margin-left: 12px; -} - -.game-name { - font-size: 18px; - font-weight: 700; - margin-top: 0; - margin-bottom: 5px; -} - -.text-game { - font-size: 14px; - font-weight: 400; - line-height: 21px; - margin-top: 0; -} - -.upper-card { - display: flex; - align-items: flex-start; -} - -.lower-card { - font-size: 14px; - line-height: 18px; - margin-left: 10px; -} - -/* login page */ - -.login-h1 { - font-size: 48px; - font-weight: 700; - margin-top: 80px; - margin-bottom: 60px; -} - -.login-main { - display: flex; - flex-direction: column; - align-items: center; -} - -.login-form { - display: flex; - flex-direction: column; -} - -.checkbox-group { - display: flex; - justify-content: flex-start; - font-size: 14px; - gap: 12px; -} - -label[for="email"], -label[for="password"], -label[for="checkbox"] { - display: flex; - font-size: 22px; - font-weight: 600; - margin-bottom: 22px; -} - -input[type="email"], -input[type="password"], -.login-checkbox { - padding: 30px 450px 30px 20px ; - margin-bottom: 40px; - font-size: 14px; - border: .006rem solid #A9A9A9; - border-radius: 6px; -} - -input[type="email"]:focus, -input[type="password"]:focus { - border-bottom: 5px solid #EF4934; -} - -.submit-button { - padding: 27px; - font-size: 22px; - font-weight: 600; - color: #FFF; - background-color: #EF4934; - border: none; - border-radius: 6px; -} - -/*success login page*/ - -.successful-page { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; -} - -.successful-form { - display: flex; - flex-direction: column; - align-items: center; -} - -.back-button { - padding: 27px; - font-size: 22px; - font-weight: 600; - color: #FFF; - background-color: #EF4934; - border: none; - border-radius: 6px; -} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/about.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/about.css new file mode 100644 index 00000000..4e4a825a --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/about.css @@ -0,0 +1,24 @@ +.intro { + color: #221F1F; + font-size: 22px; + font-weight: 400; + line-height: 32px; + display: flex; + justify-content: space-between; + gap: 70px; + padding-left: 53px; + padding-right: 53px; + margin-top: 60px; +} + +.about-h1 { + color: #221F1F; + font-size: 48px; + font-weight: 700; + line-height: 32px; + margin-top: 0; +} + +.link { + color: #EF4934; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/cards.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/cards.css new file mode 100644 index 00000000..751f51fe --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/cards.css @@ -0,0 +1,102 @@ +.filter { + background-color: #221F1F; + padding: 12px 53px; + font-size: 14px; + font-weight: 400; + color: #FFF; +} + +.filter-form { + display: flex; + align-items: center; + justify-content: space-between; +} + +.filter-search { + display: flex; +} + +.search-input { + margin-right: 0; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + padding: 12px 100px 12px 45px; + background-image: url("../images/search_logo.svg"); + background-repeat: no-repeat; + background-position: 10px 9px; + border: #FFF; +} + +.search-button { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + margin-left: 0; + color: #FFF; + background-color: #EF4934; + border: none; + padding-left: 20px; + padding-right: 20px; +} + +.select-name { + border-radius: 6px; + padding: 13px; + background-color: #333; + color: #FFF; +} + +.cards-h1 { + color: #221F1F; + font-size: 48px; + font-weight: 700; + line-height: 32px; + margin-top: 40px; + margin-left: 53px; + margin-bottom: 40px; +} + +.cards { + margin: 50px 53px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 25px; +} + +.game-card { + width: 275px; + background-color: #ECECEC; + padding: 12px 12px 22px; + border-radius: 12px; + display: flex; + flex-direction: column; +} + +.game-title { + margin-left: 12px; +} + +.game-name { + font-size: 18px; + font-weight: 700; + margin-top: 0; + margin-bottom: 5px; +} + +.text-game { + font-size: 14px; + font-weight: 400; + line-height: 21px; + margin-top: 0; +} + +.upper-card { + display: flex; + align-items: flex-start; +} + +.lower-card { + font-size: 14px; + line-height: 18px; + margin-left: 10px; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/header.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/header.css new file mode 100644 index 00000000..421083c3 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/header.css @@ -0,0 +1,39 @@ +.header { + max-width: 100%; + background-color: #EF4934; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 53px; +} + +.nav-items { + display: flex; + gap: 50px; + list-style: none; +} + +.nav-items a { + font-size: 16px; + font-weight: 500; + color: #FFF; + text-decoration: none; +} + +.game-page .nav-items .cards-link { + text-decoration: underline; + text-underline-offset: 7px; + text-decoration-thickness: 1px; +} + +.about-page .nav-items .about-link { + text-decoration: underline; + text-underline-offset: 7px; + text-decoration-thickness: 1px; +} + +.login-page .nav-items .login-link { + text-decoration: underline; + text-underline-offset: 7px; + text-decoration-thickness: 1px; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/login.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/login.css new file mode 100644 index 00000000..576c4da6 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/login.css @@ -0,0 +1,55 @@ +.login-h1 { + font-size: 48px; + font-weight: 700; + margin-top: 80px; + margin-bottom: 60px; +} + +.login-main { + display: flex; + flex-direction: column; + align-items: center; +} + +.checkbox-group { + display: flex; + justify-content: flex-start; + font-size: 14px; + gap: 12px; +} + +label[for="email"], +label[for="password"], +label[for="checkbox"] { + display: flex; + font-size: 22px; + font-weight: 600; + margin-bottom: 22px; +} + +input[type="email"], +input[type="password"], +.login-checkbox { + padding: 30px 450px 30px 20px ; + margin-bottom: 40px; + font-size: 14px; + border: .006rem solid #A9A9A9; + border-radius: 6px; +} + +input[type="email"]:focus, +input[type="password"]:focus { + border-bottom: 5px solid #EF4934; +} + +.submit-button { + display: block; + min-width: 100%; + padding: 27px; + font-size: 22px; + font-weight: 600; + color: #FFF; + background-color: #EF4934; + border: none; + border-radius: 6px; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/style.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/style.css new file mode 100644 index 00000000..f4e70827 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/style.css @@ -0,0 +1,6 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); + +body { + font-family: Roboto, sans-serif; + margin: 0; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/success-page.css b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/success-page.css new file mode 100644 index 00000000..f17c63b7 --- /dev/null +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/styles/success-page.css @@ -0,0 +1,23 @@ +.successful-page { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.successful-form { + display: flex; + flex-direction: column; + align-items: center; +} + +.back-button { + padding: 27px; + font-size: 22px; + font-weight: 600; + color: #FFF; + background-color: #EF4934; + border: none; + border-radius: 6px; +} diff --git a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html index 269426d3..abc306d6 100644 --- a/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html +++ b/homeworks/dmytro.shevchenko_dmytro-shevchenko1/GamesProject/success-page.html @@ -6,7 +6,9 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Succsess Login - + + +