diff --git a/hw1/01-card.css b/hw1/01-card.css index d0f7486..8fba136 100644 --- a/hw1/01-card.css +++ b/hw1/01-card.css @@ -1,9 +1,5 @@ -body { - font-family: 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 20px; - color: #555; -} - a { - color: rgb(0, 96, 96); + color: var(--teal); } + +/* Add your code here */ diff --git a/hw1/01-card.html b/hw1/01-card.html index e4ed3df..037819d 100644 --- a/hw1/01-card.html +++ b/hw1/01-card.html @@ -5,11 +5,14 @@ Cards + - -

exercise #1 - organizing information into cards

- +
+

Card Exercise

+ + +
diff --git a/hw1/02-navbar.css b/hw1/02-navbar.css index 66ab974..d0d5283 100644 --- a/hw1/02-navbar.css +++ b/hw1/02-navbar.css @@ -1,7 +1 @@ -* { - font-family: sans-serif; - font-size: 1.1em; - color: #333; -} - -/* The accent color used is #008080 */ +/* Add you code here */ diff --git a/hw1/02-navbar.html b/hw1/02-navbar.html index c30eff4..a655c8c 100644 --- a/hw1/02-navbar.html +++ b/hw1/02-navbar.html @@ -5,18 +5,17 @@ Navigation + -
- -
+ diff --git a/hw1/03-form.css b/hw1/03-form.css index e3623ce..d0d5283 100644 --- a/hw1/03-form.css +++ b/hw1/03-form.css @@ -1,11 +1 @@ -body { - background-color: rgb(0, 78, 78); - font-family: 'Open Sans', 'Helvetica Neue', sans-serif; - color: #ccc; -} - -/* Colors used include: - - #aaa; - - #006060; - - #008080; -*/ +/* Add you code here */ diff --git a/hw1/03-form.html b/hw1/03-form.html index 4c4c563..3d8107a 100644 --- a/hw1/03-form.html +++ b/hw1/03-form.html @@ -5,10 +5,13 @@ Form + - -

exercise #3 - creating a form

+
+

Form

+ +
diff --git a/hw1/04-flex.css b/hw1/04-flex.css index 9f635ff..a7c3fee 100644 --- a/hw1/04-flex.css +++ b/hw1/04-flex.css @@ -1,17 +1 @@ -* { - box-sizing: border-box; - font-family: sans-serif; - font-size: 1.3em; -} - -.flex-item { - width: 160px; - height: 80px; - margin: 1px; - padding: 10px; - background-color: purple; - color: white; - text-align: center; -} - /* Add your code here */ diff --git a/hw1/04-flex.html b/hw1/04-flex.html index e3ddeec..0274a3e 100644 --- a/hw1/04-flex.html +++ b/hw1/04-flex.html @@ -4,21 +4,24 @@ + CSS Layouts -
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
Seven
-
Eight
-
Nine
-
Ten
-
+
+
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
Eight
+
Nine
+
Ten
+
+
diff --git a/hw1/05-flex.css b/hw1/05-flex.css index 9f635ff..a7c3fee 100644 --- a/hw1/05-flex.css +++ b/hw1/05-flex.css @@ -1,17 +1 @@ -* { - box-sizing: border-box; - font-family: sans-serif; - font-size: 1.3em; -} - -.flex-item { - width: 160px; - height: 80px; - margin: 1px; - padding: 10px; - background-color: purple; - color: white; - text-align: center; -} - /* Add your code here */ diff --git a/hw1/05-flex.html b/hw1/05-flex.html index 9ccaa2e..2e1431c 100644 --- a/hw1/05-flex.html +++ b/hw1/05-flex.html @@ -4,21 +4,24 @@ + Flexbox Layout -
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
Seven
-
Eight
-
Nine
-
Ten
-
+
+
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
Eight
+
Nine
+
Ten
+
+
diff --git a/hw1/06-grid.css b/hw1/06-grid.css index 3cf7692..a7c3fee 100644 --- a/hw1/06-grid.css +++ b/hw1/06-grid.css @@ -1,15 +1 @@ -* { - box-sizing: border-box; - font-family: sans-serif; - font-size: 1.3em; -} - -.grid-item { - margin: 1px; - padding: 10px; - background-color: purple; - color: white; - text-align: center; -} - /* Add your code here */ diff --git a/hw1/06-grid.html b/hw1/06-grid.html index 034523a..b255119 100644 --- a/hw1/06-grid.html +++ b/hw1/06-grid.html @@ -4,11 +4,12 @@ + CSS Grid Layout -
+
1
2
3
@@ -19,6 +20,6 @@
8
9
10
-
+ diff --git a/hw1/07-grid.css b/hw1/07-grid.css index 3cf7692..a7c3fee 100644 --- a/hw1/07-grid.css +++ b/hw1/07-grid.css @@ -1,15 +1 @@ -* { - box-sizing: border-box; - font-family: sans-serif; - font-size: 1.3em; -} - -.grid-item { - margin: 1px; - padding: 10px; - background-color: purple; - color: white; - text-align: center; -} - /* Add your code here */ diff --git a/hw1/07-grid.html b/hw1/07-grid.html index 7482287..e7a424e 100644 --- a/hw1/07-grid.html +++ b/hw1/07-grid.html @@ -4,6 +4,7 @@ + CSS Grid Layout diff --git a/hw1/08-bootstrap-grid.css b/hw1/08-bootstrap-grid.css index 6e78fb2..a7c3fee 100644 --- a/hw1/08-bootstrap-grid.css +++ b/hw1/08-bootstrap-grid.css @@ -1,14 +1 @@ -* { - box-sizing: border-box; - font-size: 1.1em; - color: white; -} -/* - Colors used in this exercise: - background-color: navy; - background-color: purple; - background-color: teal; - background-color: mediumvioletred; - background-color: var(--red); - background-color: darkgreen; -*/ +/* Add your code here */ diff --git a/hw1/08-bootstrap-grid.html b/hw1/08-bootstrap-grid.html index 497c682..a5e5db8 100644 --- a/hw1/08-bootstrap-grid.html +++ b/hw1/08-bootstrap-grid.html @@ -9,10 +9,13 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> + Bootstrap Grid Exercise - +
+ +
diff --git a/hw1/09-bootstrap-form.css b/hw1/09-bootstrap-form.css index e69de29..a7c3fee 100644 --- a/hw1/09-bootstrap-form.css +++ b/hw1/09-bootstrap-form.css @@ -0,0 +1 @@ +/* Add your code here */ diff --git a/hw1/09-bootstrap-form.html b/hw1/09-bootstrap-form.html index 14c2187..a10b09d 100644 --- a/hw1/09-bootstrap-form.html +++ b/hw1/09-bootstrap-form.html @@ -9,10 +9,13 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> + Bootstrap Form Exercise - /* Add your code here */ +
+ +
diff --git a/hw1/styles.css b/hw1/styles.css new file mode 100644 index 0000000..fe8a60a --- /dev/null +++ b/hw1/styles.css @@ -0,0 +1,40 @@ +* { + box-sizing: border-box; +} + +:root { + --white: #ffffff; + --gray1: #333333; + --gray2: #666666; + --gray3: #cccccc; + --gray4: #aaaaaa; + + --teal: #006060; + --lightteal: #008080; + --purple: #800080; + --navy: #000080; + --violetred: #c71585; + --red: #ff0000; + --green: #006400; +} + +body { + font-family: 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 1.2em; + color: var(--gray1); +} + +.flex-item, +.grid-item { + padding: 10px; + background-color: var(--purple); + color: var(--white); + font-size: 2.4em; + text-align: center; +} + +.flex-item { + width: 160px; + height: 80px; + margin: 1px; +} diff --git a/hw2/01-fizzbuzz.html b/hw2/01-fizzbuzz.html index d581857..09f30d1 100644 --- a/hw2/01-fizzbuzz.html +++ b/hw2/01-fizzbuzz.html @@ -9,12 +9,12 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> +

Fizzbuzz

- diff --git a/hw2/02-reverse.html b/hw2/02-reverse.html index 095f350..4e271ba 100644 --- a/hw2/02-reverse.html +++ b/hw2/02-reverse.html @@ -9,6 +9,7 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> +
@@ -21,6 +22,5 @@

Reverse

- diff --git a/hw2/03-form.html b/hw2/03-form.html index 0d310cb..63d1171 100644 --- a/hw2/03-form.html +++ b/hw2/03-form.html @@ -4,18 +4,18 @@ + JavaScript Form Exercise - JavaScript Form Exercise +

Contact Form

- diff --git a/hw2/04-events.html b/hw2/04-events.html index 0821406..9b42375 100644 --- a/hw2/04-events.html +++ b/hw2/04-events.html @@ -9,6 +9,7 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> +
@@ -18,6 +19,5 @@

Width:

Height:

n/a:
- diff --git a/hw2/05-api.html b/hw2/05-api.html index 3c0200a..c1123ba 100644 --- a/hw2/05-api.html +++ b/hw2/05-api.html @@ -9,12 +9,12 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> +

REST Countries

    - diff --git a/hw2/06-pokemon.html b/hw2/06-pokemon.html index 4e24c32..9a3a462 100644 --- a/hw2/06-pokemon.html +++ b/hw2/06-pokemon.html @@ -9,12 +9,12 @@ type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> +

    PokéAPI Pokémons

    -