diff --git a/html-forms/index.html b/html-forms/index.html index c7a70a6..08a1ed2 100644 --- a/html-forms/index.html +++ b/html-forms/index.html @@ -3,7 +3,7 @@ - Front-end foundations: HTML forms + Vacation Rentals & Unique Homes -
+
+ + +
+ +
+
+
+ Shipping Information +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+

Favorite Color:

+
+ + +
+
+ + +
+
+ + +
+
+
+

Choose your monster's features:

+
+ + +
+
+ + +
+
+ + +
+
+
+

Choose a font:

+ +
+
+ + +
+
+ + + + +
+ + +
+
- + \ No newline at end of file diff --git a/html-forms/style.css b/html-forms/style.css index 87df9b6..d25a46f 100644 --- a/html-forms/style.css +++ b/html-forms/style.css @@ -1,7 +1,69 @@ -body { - padding: 10px; +/* General Styles */ + +main { + margin-top: 60px; +} + +main h1 { + margin: 0 10px; + text-align: center; + font-family: "Amatic SC", cursive; + font-size: 65px; +} + +main h2 { + margin: 18px 0 12px 0; + border-bottom: 1px solid #5c4f41; + font-family: "Special Elite", cursive; + font-size: 24px; +} + +main h3 { + margin: 18px 0 12px 0; + border-bottom: 1px solid #5c4f41; + font-family: "Special Elite", cursive; + font-size: 18px; +} + +main p { + font-family: "Roboto", sans-serif; + margin-top: 0; +} + +.bg-primary { + background-color: #775f47; } -input { - margin: 5px; +.group img { + width: 100%; +} + +/* Groups & Items (Mobile First) */ + +.group { + display: flex; + flex-direction: column; + margin-bottom: 100px; +} + +.item { + flex: 1; + margin: 10px; +} + +.item-double { + flex: 2; + margin: 10px; +} + +/* Groups & Items (Desktop) */ + +@media all and (min-width: 800px) { + section { + padding: 0 10%; + } + + .group { + flex-direction: row; + } } diff --git a/navigation/index.html b/navigation/index.html index a362b01..a81dc12 100644 --- a/navigation/index.html +++ b/navigation/index.html @@ -1,27 +1,27 @@ - - - - Front-end foundations: Navigation - - - - -
-

Your Name

- -
- - + + + + + Will Tuttle Thinkful : Software Engineer + + + + + + +
+

Will Tuttle

+ +
+ + + \ No newline at end of file diff --git a/navigation/style.css b/navigation/style.css index 293d3b1..1a7230f 100644 --- a/navigation/style.css +++ b/navigation/style.css @@ -1,3 +1,60 @@ body { margin: 0; } + +header { + background-color: #0b1c51; + margin-bottom: 40px; +} + +header h1 { + font-family: "Gochi Hand"; + font-size: 52px; + color: #fff; + text-align: center; + margin: 0; + padding-top: 20px; +} + +header nav { + display: flex; + justify-content: center; +} + +header nav ul { + display: flex; + padding-left: 0; + list-style: none; +} + +header nav ul li a { + font-family: Montserrat; + color: #fff; + text-decoration: none; + margin: 0 20px 0 0; +} +header nav ul li:last-child a { + margin-right: 0; +} + +@media all and (min-width: 600px) { + header { + display: flex; + justify-content: space-between; + padding: 0 30px; + } + + header h1 { + font-size: 42px; + margin: 14px 0; + padding-top: 6px; + } + + header nav { + margin-top: 14px; + } + + header nav ul li a:hover { + color: #bdbdbd; + } +} \ No newline at end of file