From 03cd72aa2cb4e162b9bd9b6697a58b82fdebe64d Mon Sep 17 00:00:00 2001 From: Brian Date: Mon, 12 May 2025 17:49:47 +0000 Subject: [PATCH 1/3] First Commit --- .learn/resets/02-hello-world/index.html | 1 + .learn/resets/03-Type-Radio/index.html | 16 ++++++++++ .../04-fieldsets-labels-and-styles/index.html | 32 +++++++++++++++++++ .../04-fieldsets-labels-and-styles/style.css | 0 exercises/02-hello-world/index.html | 9 ++++++ exercises/03-Type-Radio/index.html | 31 +++++++++++------- .../04-fieldsets-labels-and-styles/index.html | 6 ++-- .../04-fieldsets-labels-and-styles/style.css | 28 ++++++++++++++++ 8 files changed, 108 insertions(+), 15 deletions(-) create mode 100644 .learn/resets/02-hello-world/index.html create mode 100644 .learn/resets/03-Type-Radio/index.html create mode 100644 .learn/resets/04-fieldsets-labels-and-styles/index.html create mode 100644 .learn/resets/04-fieldsets-labels-and-styles/style.css diff --git a/.learn/resets/02-hello-world/index.html b/.learn/resets/02-hello-world/index.html new file mode 100644 index 0000000..950dfeb --- /dev/null +++ b/.learn/resets/02-hello-world/index.html @@ -0,0 +1 @@ + diff --git a/.learn/resets/03-Type-Radio/index.html b/.learn/resets/03-Type-Radio/index.html new file mode 100644 index 0000000..cb41ad1 --- /dev/null +++ b/.learn/resets/03-Type-Radio/index.html @@ -0,0 +1,16 @@ + + + + + + + 4Geeks Academy + + + +
+ +
+ + + \ No newline at end of file diff --git a/.learn/resets/04-fieldsets-labels-and-styles/index.html b/.learn/resets/04-fieldsets-labels-and-styles/index.html new file mode 100644 index 0000000..4c4bb16 --- /dev/null +++ b/.learn/resets/04-fieldsets-labels-and-styles/index.html @@ -0,0 +1,32 @@ + + + + + + 4Geeks Academy + + + +
+
+ Full Name + + + + +
+
+ Email + +
+
+ Gender + + + + +
+ +
+ + diff --git a/.learn/resets/04-fieldsets-labels-and-styles/style.css b/.learn/resets/04-fieldsets-labels-and-styles/style.css new file mode 100644 index 0000000..e69de29 diff --git a/exercises/02-hello-world/index.html b/exercises/02-hello-world/index.html index 950dfeb..c4f816b 100644 --- a/exercises/02-hello-world/index.html +++ b/exercises/02-hello-world/index.html @@ -1 +1,10 @@ + + + + + + Hello World + + + diff --git a/exercises/03-Type-Radio/index.html b/exercises/03-Type-Radio/index.html index cb41ad1..9a59840 100644 --- a/exercises/03-Type-Radio/index.html +++ b/exercises/03-Type-Radio/index.html @@ -1,16 +1,23 @@ + + + + 4Geeks Academy + - - - - 4Geeks Academy - + +
+ + + + + - - - -
- - - \ No newline at end of file + + + + + + + diff --git a/exercises/04-fieldsets-labels-and-styles/index.html b/exercises/04-fieldsets-labels-and-styles/index.html index 4c4bb16..99d6453 100644 --- a/exercises/04-fieldsets-labels-and-styles/index.html +++ b/exercises/04-fieldsets-labels-and-styles/index.html @@ -11,13 +11,13 @@
Full Name - + - +
Email - +
Gender diff --git a/exercises/04-fieldsets-labels-and-styles/style.css b/exercises/04-fieldsets-labels-and-styles/style.css index e69de29..10aea0f 100644 --- a/exercises/04-fieldsets-labels-and-styles/style.css +++ b/exercises/04-fieldsets-labels-and-styles/style.css @@ -0,0 +1,28 @@ +body { + font-family: "Lato", sans-serif; +} +form { + display: inline-block; +} +fieldset { + border: none; + margin: none; + padding: 10px 0px; + font-weight: 800; +} +label { + font-weight: 400; +} +input[type="text"] { + border: none; + border-bottom: 1px solid black; + font-size: 16px; +} +input[type="submit"] { + cursor: pointer; + border: none; + padding: 10px; + background-color: #f65252; + color: white; + width: 100%; +} From 72ea213eb0ba0599585c5061e8ed15f2181f46bd Mon Sep 17 00:00:00 2001 From: Brian Date: Wed, 14 May 2025 11:09:30 +0000 Subject: [PATCH 2/3] Second Commit --- .learn/resets/05-HTML-five-forms/index.html | 36 +++++ .learn/resets/05-HTML-five-forms/style.css | 36 +++++ .../06-Replicate-simple-form/index.html | 22 +++ .../07-Style-without-id-class/index.html | 28 ++++ .../07-Style-without-id-class/style.css | 131 ++++++++++++++++++ .../08-Spectacular-login-form/index.html | 19 +++ .../08-Spectacular-login-form/style.css | 0 exercises/05-HTML-five-forms/index.html | 66 ++++----- exercises/06-Replicate-simple-form/index.html | 98 ++++++++++--- .../07-Style-without-id-class/index.html | 4 +- exercises/07-Style-without-id-class/style.css | 37 ++--- exercises/08-Spectacular-login-form/style.css | 35 +++++ 12 files changed, 444 insertions(+), 68 deletions(-) create mode 100644 .learn/resets/05-HTML-five-forms/index.html create mode 100644 .learn/resets/05-HTML-five-forms/style.css create mode 100644 .learn/resets/06-Replicate-simple-form/index.html create mode 100644 .learn/resets/07-Style-without-id-class/index.html create mode 100644 .learn/resets/07-Style-without-id-class/style.css create mode 100644 .learn/resets/08-Spectacular-login-form/index.html create mode 100644 .learn/resets/08-Spectacular-login-form/style.css diff --git a/.learn/resets/05-HTML-five-forms/index.html b/.learn/resets/05-HTML-five-forms/index.html new file mode 100644 index 0000000..4d8a92c --- /dev/null +++ b/.learn/resets/05-HTML-five-forms/index.html @@ -0,0 +1,36 @@ + + + + + +4Geeks Academy + + + +
+
+ Full Name + + + + + + +
+
+ Contact information + + + +
+
+ Gender + + + + +
+ +
+ + diff --git a/.learn/resets/05-HTML-five-forms/style.css b/.learn/resets/05-HTML-five-forms/style.css new file mode 100644 index 0000000..feb5e9c --- /dev/null +++ b/.learn/resets/05-HTML-five-forms/style.css @@ -0,0 +1,36 @@ +body { + font-family: "Lato", sans-serif; +} + +form { + display: inline-block; +} + +fieldset { + border: none; + margin: 0; + padding: 10px 0; + font-weight: 800; +} + +label { + font-weight: 400; +} + +input[type="text"], +input[type="email"], +input[type="tel"], +input[type="url"] { + border: none; + border-bottom: 1px solid black; + font-size: 16px; +} + +input[type="submit"] { + cursor: pointer; + border: none; + padding: 10px; + background-color: #f65252; + color: white; + width: 100%; +} diff --git a/.learn/resets/06-Replicate-simple-form/index.html b/.learn/resets/06-Replicate-simple-form/index.html new file mode 100644 index 0000000..b6db52a --- /dev/null +++ b/.learn/resets/06-Replicate-simple-form/index.html @@ -0,0 +1,22 @@ + + + + + + + 4Geeks Academy + + + + + +
+ + +
+ + + diff --git a/.learn/resets/07-Style-without-id-class/index.html b/.learn/resets/07-Style-without-id-class/index.html new file mode 100644 index 0000000..8fac751 --- /dev/null +++ b/.learn/resets/07-Style-without-id-class/index.html @@ -0,0 +1,28 @@ + + + + + + 4Geeks Academy + + + + +
+ +
    +
  • Basic Info
    • +
  • Social Media
    • +
  • Profile Image
    • +
+ +
+

Sign Up Form

+

This is step 1

+ + + +
+
+ + diff --git a/.learn/resets/07-Style-without-id-class/style.css b/.learn/resets/07-Style-without-id-class/style.css new file mode 100644 index 0000000..818560f --- /dev/null +++ b/.learn/resets/07-Style-without-id-class/style.css @@ -0,0 +1,131 @@ +/*custom font*/ +@import url(http://fonts.googleapis.com/css?family=Montserrat); + +/*basic reset*/ +* { + margin: 0; + padding: 0; +} +body { + background-color: rgb(64, 64, 64); + font-family: montserrat, arial, verdana; +} +/*form styles*/ +.msform { + width: 400px; + margin: 50px auto; + text-align: center; + position: relative; +} +.msform fieldset { + background: white; + border: 0 none; + border-radius: 3px; + box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); + padding: 20px 30px; + + box-sizing: border-box; + width: 80%; + margin: 0 10%; + + /*stacking fieldsets above each other*/ + position: absolute; +} +/*inputs*/ +.msform input { + padding: 15px; + border: 1px solid rgba(0, 0, 0, 0.05); + border-radius: 3px; + margin-bottom: 10px; + width: 100%; + box-sizing: border-box; + font-family: montserrat; + color: #2c3e50; + font-size: 13px; +} +.msform input.error, +.msform textarea.error { + border-color: rgb(255, 99, 71); +} +/*buttons*/ +.msform .action-button { + width: 100px; + background: rgb(64, 64, 64); + font-weight: bold; + color: white; + border: 0 none; + border-radius: 2px; + cursor: pointer; + padding: 10px 5px; + margin: 10px 5px; + transition: all 0.4s; +} +.msform .action-button:hover, +.msform .action-button:focus { + box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(255, 99, 71); + background-color: rgb(255, 99, 71); +} +/*headings*/ +.fs-title { + font-size: 15px; + text-transform: uppercase; + color: #2c3e50; + margin-bottom: 10px; +} +.fs-subtitle { + font-weight: normal; + font-size: 13px; + color: #666; + margin-bottom: 20px; +} +/*progressbar*/ +.progressbar { + overflow: hidden; + /*CSS counters to number the steps*/ + counter-reset: step; + width: 60%; + margin: 0 auto 30px; +} +.progressbar li { + list-style-type: none; + color: white; + text-transform: uppercase; + font-size: 9px; + width: 33.33%; + float: left; + position: relative; +} +.progressbar li:before { + content: counter(step); + counter-increment: step; + width: 20px; + line-height: 20px; + display: block; + font-size: 10px; + color: #333; + background: white; + border-radius: 50%; + margin: 0 auto 5px auto; +} +/*progressbar connectors*/ +.progressbar li:after { + content: ""; + width: 100%; + height: 2px; + background: white; + position: absolute; + left: -50%; + top: 9px; + z-index: -1; /*put it behind the numbers*/ +} +.progressbar li:first-child:after { + /*connector not needed before the first step*/ + content: none; +} +/*marking active/completed steps green*/ +/*The number of the step and the connector before it = green*/ +.progressbar li.active:before, +.progressbar li.active:after { + background: rgb(255, 99, 71); + color: white; +} diff --git a/.learn/resets/08-Spectacular-login-form/index.html b/.learn/resets/08-Spectacular-login-form/index.html new file mode 100644 index 0000000..5294460 --- /dev/null +++ b/.learn/resets/08-Spectacular-login-form/index.html @@ -0,0 +1,19 @@ + + + + + + + 4Geeks Academy + + + + + diff --git a/.learn/resets/08-Spectacular-login-form/style.css b/.learn/resets/08-Spectacular-login-form/style.css new file mode 100644 index 0000000..e69de29 diff --git a/exercises/05-HTML-five-forms/index.html b/exercises/05-HTML-five-forms/index.html index 4d8a92c..1d6e057 100644 --- a/exercises/05-HTML-five-forms/index.html +++ b/exercises/05-HTML-five-forms/index.html @@ -1,36 +1,36 @@ - - - -4Geeks Academy - - - -
-
- Full Name - - - - - - -
-
- Contact information - - - -
-
- Gender - - - - -
- -
- + + + + 4Geeks Academy + + + +
+
+ Full Name + + + + + + +
+
+ Contact information + + + +
+
+ Gender + + + + +
+ +
+ diff --git a/exercises/06-Replicate-simple-form/index.html b/exercises/06-Replicate-simple-form/index.html index b6db52a..b550d1c 100644 --- a/exercises/06-Replicate-simple-form/index.html +++ b/exercises/06-Replicate-simple-form/index.html @@ -1,22 +1,88 @@ + + + + 4Geeks Academy - - - - 4Geeks Academy + + - - - - -
- - -
- + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
Name
Sex + Male + +
+ + +
Eye Color + +
Cheack all that apply + + +
+ + +
+ Describe your athletic ability:
+ +
+ +
+
+ diff --git a/exercises/07-Style-without-id-class/index.html b/exercises/07-Style-without-id-class/index.html index 8fac751..47a38e1 100644 --- a/exercises/07-Style-without-id-class/index.html +++ b/exercises/07-Style-without-id-class/index.html @@ -8,9 +8,9 @@ -
+ -
    +
    • Basic Info
    • Social Media
    • Profile Image
      • diff --git a/exercises/07-Style-without-id-class/style.css b/exercises/07-Style-without-id-class/style.css index 818560f..82a6755 100644 --- a/exercises/07-Style-without-id-class/style.css +++ b/exercises/07-Style-without-id-class/style.css @@ -11,13 +11,13 @@ body { font-family: montserrat, arial, verdana; } /*form styles*/ -.msform { +form { width: 400px; margin: 50px auto; text-align: center; position: relative; } -.msform fieldset { +form fieldset { background: white; border: 0 none; border-radius: 3px; @@ -32,7 +32,7 @@ body { position: absolute; } /*inputs*/ -.msform input { +form input { padding: 15px; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 3px; @@ -43,12 +43,12 @@ body { color: #2c3e50; font-size: 13px; } -.msform input.error, -.msform textarea.error { +form input.error, +form textarea.error { border-color: rgb(255, 99, 71); } /*buttons*/ -.msform .action-button { +form input[type="button"] { width: 100px; background: rgb(64, 64, 64); font-weight: bold; @@ -60,33 +60,33 @@ body { margin: 10px 5px; transition: all 0.4s; } -.msform .action-button:hover, -.msform .action-button:focus { +form input[type="button"]:hover, +form input[type="button"]:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(255, 99, 71); background-color: rgb(255, 99, 71); } /*headings*/ -.fs-title { +h2 { font-size: 15px; text-transform: uppercase; color: #2c3e50; margin-bottom: 10px; } -.fs-subtitle { +h3 { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } /*progressbar*/ -.progressbar { +ul { overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; width: 60%; margin: 0 auto 30px; } -.progressbar li { +ul li { list-style-type: none; color: white; text-transform: uppercase; @@ -95,7 +95,7 @@ body { float: left; position: relative; } -.progressbar li:before { +ul li:before { content: counter(step); counter-increment: step; width: 20px; @@ -108,7 +108,7 @@ body { margin: 0 auto 5px auto; } /*progressbar connectors*/ -.progressbar li:after { +ul li:after { content: ""; width: 100%; height: 2px; @@ -118,14 +118,17 @@ body { top: 9px; z-index: -1; /*put it behind the numbers*/ } -.progressbar li:first-child:after { +ul li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ -.progressbar li.active:before, -.progressbar li.active:after { +ul li.active:before { + background: green; + color: black; +} +ul li.active:after { background: rgb(255, 99, 71); color: white; } diff --git a/exercises/08-Spectacular-login-form/style.css b/exercises/08-Spectacular-login-form/style.css index e69de29..be69369 100644 --- a/exercises/08-Spectacular-login-form/style.css +++ b/exercises/08-Spectacular-login-form/style.css @@ -0,0 +1,35 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + color: white; +} +.login { + background-color: rgb(2, 2, 107); + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: Arial, Helvetica, sans-serif; +} + +form { + margin-top: 25px; + display: flex; + flex-direction: column; + gap: 13px; +} +form input, +form button { + width: 400px; + padding: 10px; + border: none; + border-radius: 8px; +} +input { + background-color: #051a3d; +} +button { + background-color: #1986da; +} From 761caec7b510515e9d3cab0e4acbbf7a55cafab9 Mon Sep 17 00:00:00 2001 From: Brian Date: Wed, 14 May 2025 11:10:39 +0000 Subject: [PATCH 3/3] Initial commit