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/.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 + + + + +
+ + + +
+

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 + + +
+

Login

+
+ + + +
+
+ + 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/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%; +} 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 @@ -
+ -