From ad1217fc5b85b1aef502a29ce7e65c9fe96b0c78 Mon Sep 17 00:00:00 2001 From: josexrg Date: Mon, 27 Jun 2022 15:50:01 -0500 Subject: [PATCH 1/2] login v1 --- sonOFAthena/.gitignore | 2 + sonOFAthena/index.html | 16 ++++ sonOFAthena/main.html | 44 ++++++++++ sonOFAthena/package-lock.json | 48 ++++++++++ sonOFAthena/package.json | 5 ++ sonOFAthena/style.css | 160 ++++++++++++++++++++++++++++++++++ 6 files changed, 275 insertions(+) create mode 100644 sonOFAthena/.gitignore create mode 100644 sonOFAthena/index.html create mode 100644 sonOFAthena/main.html create mode 100644 sonOFAthena/package-lock.json create mode 100644 sonOFAthena/package.json create mode 100644 sonOFAthena/style.css diff --git a/sonOFAthena/.gitignore b/sonOFAthena/.gitignore new file mode 100644 index 0000000..417c6ce --- /dev/null +++ b/sonOFAthena/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +.vscode/ \ No newline at end of file diff --git a/sonOFAthena/index.html b/sonOFAthena/index.html new file mode 100644 index 0000000..862d382 --- /dev/null +++ b/sonOFAthena/index.html @@ -0,0 +1,16 @@ + + + + + + + Desafío 11 + + + + + \ No newline at end of file diff --git a/sonOFAthena/main.html b/sonOFAthena/main.html new file mode 100644 index 0000000..0dfc425 --- /dev/null +++ b/sonOFAthena/main.html @@ -0,0 +1,44 @@ + + + + + + + + Login + + +
+
+

Sign in

+

Stay updated on your professional world

+
+ + +
+
+ + +
show
+
+
+
Forgot password?
+
+ +
+
Or
+ +
+
+ + \ No newline at end of file diff --git a/sonOFAthena/package-lock.json b/sonOFAthena/package-lock.json new file mode 100644 index 0000000..178996c --- /dev/null +++ b/sonOFAthena/package-lock.json @@ -0,0 +1,48 @@ +{ + "name": "sonOFAthena", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.1.1" + } + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + } + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + } + } +} diff --git a/sonOFAthena/package.json b/sonOFAthena/package.json new file mode 100644 index 0000000..a5c75c0 --- /dev/null +++ b/sonOFAthena/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.1.1" + } +} diff --git a/sonOFAthena/style.css b/sonOFAthena/style.css new file mode 100644 index 0000000..f6da508 --- /dev/null +++ b/sonOFAthena/style.css @@ -0,0 +1,160 @@ +/* * { + padding: 0; + margin: 0; +} */ + +body{ + padding: 0; + margin: 0; + height: 100vh; + font-family: sans-serif; + box-sizing: border-box; +} + +.container { + height: 100vh; + display: flex; + align-content: center; + justify-content: center; + align-items: center; +} + +.form { + width: 200px; + height: 400px; + padding: 8%; + background-color: white; + border-radius: 10px; + box-shadow: 0px 0px 20px black; +} + + +.socialBtn { + display: flex; + flex-direction: column; + justify-content: center; +} + +.formSocial { + width: 100%; + position: relative; +} + +.formSocial input { + width: 90%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid grey; + padding-left: 35px !important; + border-radius: 20px; +} + +.formSocial img { + position: absolute; + width: 20px; + height: 20px; + left: 0px; + top: 0px; + color: grey; + font-size: smaller; + margin: 9px !important; +} + +.formSocial input::placeholder { + color: black; +} + +.icon { + width: 30px; + height: 30px; + border-radius: 15px; + background-color: lavender; + margin: 5px; + line-height: 30px; + box-shadow: 0px 0px 10px black; +} + +.text { + font-size: small; +} + +.orDiv { + width: 10%; + margin: 0 auto; + background-color: white; + /* Allow beetween hr allocation */ + position: relative; + top: -16px; + justify-content: center; + font-size: 11px; + padding-left: 10px; +} + +.formGroup { + width: 100%; + position: relative; +} + +.formGroup input { + width: 90%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid grey; + padding-left: 30px !important; +} + +.formGroup i { + position: absolute; + left: 0px; + top: 0px; + color: grey; + font-size: smaller; + margin: 10px !important; +} + +input::placeholder { + position: relative; +} + +input:focus{ + border-color: red; +} + +.forgotten h6{ + display: flex; + margin: 0 auto; + padding-bottom: 10px; + cursor: pointer; +} + +.forgotten h6:hover{ + color: red; +} + +.btn { + width: 100%; + padding: 10px; + background-color: rgb(24, 65, 179); + margin-top: 15px; + margin-bottom: 15px; + color: white; + border-radius: 20px; + border-style: none; +} + + +.btn:hover, .icon:hover { + background-color: rgb(31, 91, 255); + color: whitesmoke; +} + +.show { + position: absolute; + left: 170px; + top: 0px; + color: blue; + font-weight: bold; + font-size: 11px; + margin: 12px !important; + cursor: pointer; +} From 442722c9fb1456e33f82d6ca33fd53e92904960d Mon Sep 17 00:00:00 2001 From: josexrg Date: Wed, 29 Jun 2022 14:47:18 -0500 Subject: [PATCH 2/2] index path added --- index.html | 3 ++ sonOFAthena/index.html | 44 +++++++++++++--- sonOFAthena/main.html | 44 ---------------- sonOFAthena/style.css | 114 +++++++++++++++++++++++------------------ 4 files changed, 105 insertions(+), 100 deletions(-) delete mode 100644 sonOFAthena/main.html diff --git a/index.html b/index.html index 40b5e72..62ddb12 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,9 @@
  • Andrés Cuéllar +
    • +
  • + Jose Ramirez
    • diff --git a/sonOFAthena/index.html b/sonOFAthena/index.html index 862d382..9a18c85 100644 --- a/sonOFAthena/index.html +++ b/sonOFAthena/index.html @@ -4,13 +4,45 @@ - Desafío 11 + + Login - +
    +
    +

    Sign in

    +

    Stay updated on your professional world

    +
    + + +
    +
    + + +
    show
    +
    +
    +
    Forgot password?
    +
    + +
    +
    Or
    +
    + + +
    +
    +
    \ No newline at end of file diff --git a/sonOFAthena/main.html b/sonOFAthena/main.html deleted file mode 100644 index 0dfc425..0000000 --- a/sonOFAthena/main.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - Login - - -
    -
    -

    Sign in

    -

    Stay updated on your professional world

    -
    - - -
    -
    - - -
    show
    -
    -
    -
    Forgot password?
    -
    - -
    -
    Or
    - -
    -
    - - \ No newline at end of file diff --git a/sonOFAthena/style.css b/sonOFAthena/style.css index f6da508..b98fd8c 100644 --- a/sonOFAthena/style.css +++ b/sonOFAthena/style.css @@ -20,58 +20,19 @@ body{ } .form { - width: 200px; - height: 400px; - padding: 8%; + display: flex; + flex-direction: column; + width: 15%; + height: 44%; + padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 20px black; } - -.socialBtn { - display: flex; - flex-direction: column; - justify-content: center; -} - -.formSocial { - width: 100%; - position: relative; -} - -.formSocial input { - width: 90%; - padding: 10px; - margin-bottom: 10px; - border: 1px solid grey; - padding-left: 35px !important; - border-radius: 20px; -} - -.formSocial img { - position: absolute; - width: 20px; - height: 20px; - left: 0px; - top: 0px; - color: grey; - font-size: smaller; - margin: 9px !important; -} - -.formSocial input::placeholder { - color: black; -} - -.icon { - width: 30px; - height: 30px; - border-radius: 15px; - background-color: lavender; - margin: 5px; - line-height: 30px; - box-shadow: 0px 0px 10px black; +.form h2 { + margin-block-start: 0px; + margin-block-end: 0px; } .text { @@ -93,14 +54,16 @@ body{ .formGroup { width: 100%; position: relative; + } .formGroup input { - width: 90%; + width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid grey; padding-left: 30px !important; + box-sizing: border-box; } .formGroup i { @@ -143,18 +106,69 @@ input:focus{ } -.btn:hover, .icon:hover { +.btn:hover { background-color: rgb(31, 91, 255); color: whitesmoke; } .show { position: absolute; - left: 170px; + /* left: 85%; */ + right: 3px; top: 0px; color: blue; font-weight: bold; font-size: 11px; margin: 12px !important; +} + +hr { + width: 100%; + overflow: visible; +} + +/* Codigo de internet */ +.actions{ + /* margin-top: 20px; */ + display: flex; + flex-direction: column; + gap: 10px; +} + +.actions .btn2{ + width: 100%; + /* padding: 15px 20px; */ + font-size: 13px; + border: 0px; + background-color: #fff; + border-radius: 50px; + /* margin-top: 15px; */ + + padding: 10px; + /* margin-top: 15px; + margin-bottom: 15px; */ +} + +.actions .btn-social{ + background-color: white; cursor: pointer; + color: black; + border: 1px solid black; +} +.actions .btn-social:hover{ + background-color: #0b0a38; + transition: .5s all ease; + color: white; +} +.actions .btn-social .icon { + display: flex; + /* vertical-align: middle; */ + justify-content: center; + align-items: center; +} +.actions .btn-social .icon img{ + width: 20px; + height: 20px; + object-fit: contain; + padding-right: 5px; }