From ba88811e60c481b955d2f56ac504d472439fd139 Mon Sep 17 00:00:00 2001 From: Sarah Mucho Date: Fri, 22 May 2020 21:00:09 -0400 Subject: [PATCH 1/6] test --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8c6cbcf19f..cc38cf2699 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Follow these steps for completing your project. ## Stretch Goals: * [ ] Create an animation mixin using parametric mixins * [ ] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions. -* [ ] Style the site to look good at all sizes, not just desktop and phone +* [ ] Style the site to look good at all sizes, not just desktop and phone... From e0a2ec4b5377558fdbb7a98ee39a12f3c4af1766 Mon Sep 17 00:00:00 2001 From: Sarah Mucho Date: Sat, 23 May 2020 00:04:38 -0400 Subject: [PATCH 2/6] draft 1 --- css/index.css | 251 ++++++++++++++++++++++++++++++++++++++++++- index.html | 22 +++- less/index.less | 8 ++ less/navigation.less | 31 +++++- 4 files changed, 306 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index e764f2b01f..94cbf2a77a 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,250 @@ -/* LESS needs to be processed */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', sans-serif; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Indie Flower', cursive; +} +h1 { + font-size: 4rem; +} +h2 { + font-size: 3.2rem; + padding-bottom: 10px; +} +h4 { + font-size: 2.5rem; + padding-bottom: 10px; +} +p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; +} +img { + max-width: 100%; + height: auto; +} +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; +} +.container-head nav { + display: flex; + justify-content: flex-end; + padding-left: 30px; + padding-right: 30px; +} +a { + display: flex; + margin-bottom: 20px; + text-decoration: none; + color: #212529; + font-size: 1.5rem; +} +.h1 { + padding-top: 30px; + padding-bottom: 0px; + padding-left: 200px; +} +.menu { + margin: 20px; + display: flex; + justify-content: flex-start; +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +.home .content-section { + margin: 30px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.home .content-section .text-content { + width: 48%; + padding-right: 1%; +} +.home .content-section .img-content { + width: 48%; + padding-left: 1%; +} +.home .content-section .img-content img { + border-radius: 10px; +} +.home .inverse-content { + padding-bottom: 30px; + border-bottom: 2px dashed #C0C0C0; +} +.home .inverse-content .text-content { + padding-left: 1%; + padding-right: 0; +} +.home .inverse-content .img-content { + padding-right: 1%; + padding-left: 0; +} +.home .content-destination { + width: 75%; + margin: 0 auto 30px; +} +.home .content-destination img { + border-radius: 10px; +} +.home .content-pick { + padding-top: 30px; + border-top: 2px dashed #C0C0C0; + display: flex; + justify-content: space-between; +} +.home .content-pick .destination { + width: 30%; + margin-bottom: 30px; +} diff --git a/index.html b/index.html index bb8663b768..d01e8d8b69 100644 --- a/index.html +++ b/index.html @@ -15,10 +15,24 @@ - +
+
+

Fun Bus

+ +
+
+
+
+ +
@@ -51,17 +65,17 @@

Pick Your Destination

Fun In The Sun

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

-
Sign Me Up!
+

Mountain Excursion

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

-
Sign Me Up!
+

Island Getaway

Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

-
Sign Me Up!
+
diff --git a/less/index.less b/less/index.less index c113ca2c46..6d15adab78 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,9 @@ // Follow the order in the readme +@import "variables"; +@import "mixins"; + +@import "reset"; +@import "global"; +@import "navigation"; +@import "footer"; +@import "home-page"; \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..5722efdd35 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,30 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + + +.container-head nav { + display: flex; + justify-content: flex-end; + padding-left: 30px; + padding-right: 30px +} + + a { + display: flex; + margin-bottom: 20px; + text-decoration: none; + color: @font-color; + font-size: 1.5rem; + } + + +.h1 { + padding-top: 30px; + padding-bottom: 0px; + padding-left: 200px; +} + +.menu { + margin: 20px; + display: flex; + justify-content: flex-start; +} From 60021fcbb244ccc6ddb3b8e9ad54f9e653d1ac38 Mon Sep 17 00:00:00 2001 From: Sarah Mucho Date: Sat, 23 May 2020 19:42:40 -0400 Subject: [PATCH 3/6] 2nd draft --- css/index.css | 31 +++++++++++++---------------- index.html | 18 ++++++++--------- less/home-page.less | 13 +++++++++--- less/mixins.less | 8 +++++++- less/navigation.less | 47 +++++++++++++++++++++----------------------- 5 files changed, 62 insertions(+), 55 deletions(-) diff --git a/css/index.css b/css/index.css index 94cbf2a77a..2ec34d914c 100644 --- a/css/index.css +++ b/css/index.css @@ -168,28 +168,21 @@ img { width: 100%; margin: 0 auto; } -.container-head nav { +.container-head header { + width: 68%; + height: 90px; + margin: 0px auto; + box-sizing: border-box; display: flex; - justify-content: flex-end; - padding-left: 30px; - padding-right: 30px; + flex-direction: row; + justify-content: space-between; + padding-top: 40px; } -a { - display: flex; - margin-bottom: 20px; +.container-head header .menu { text-decoration: none; color: #212529; font-size: 1.5rem; -} -.h1 { - padding-top: 30px; - padding-bottom: 0px; - padding-left: 200px; -} -.menu { - margin: 20px; - display: flex; - justify-content: flex-start; + padding: 20px; } .footer { width: 100%; @@ -202,6 +195,10 @@ a { font-size: 1.6rem; padding: 20px; } +.home { + width: 100%; + border-top: 2px dashed silver; +} .home .content-section { margin: 30px 0; display: flex; diff --git a/index.html b/index.html index d01e8d8b69..99aed7a19f 100644 --- a/index.html +++ b/index.html @@ -15,17 +15,17 @@ -
-

Fun Bus

- +
+

Fun Bus

+ +
-
diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..a14c9d81bb 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,8 @@ .home { + width: 100%; + border-top: 2px dashed silver; + .content-section { margin: 30px 0; display: flex; @@ -20,9 +23,10 @@ img { border-radius: 10px; } + } } } - + .inverse-content { padding-bottom: 30px; border-bottom: 2px dashed @navigation-border; @@ -57,5 +61,8 @@ width: 30%; margin-bottom: 30px; } - } -}// home \ No newline at end of file + }// home +} + + + diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..b90aa90e28 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,7 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.button { + background-color: @eastern-blue; + color: white; + font-size: 2rem; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 5722efdd35..350a5f2da2 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,30 +1,27 @@ // Navigation Styles here +.container-head header { + width: 68%; + height: 90px; + margin: 0px auto; + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 40px; + -.container-head nav { - display: flex; - justify-content: flex-end; - padding-left: 30px; - padding-right: 30px -} - - a { - display: flex; - margin-bottom: 20px; - text-decoration: none; - color: @font-color; - font-size: 1.5rem; - } - - -.h1 { - padding-top: 30px; - padding-bottom: 0px; - padding-left: 200px; + .menu { + text-decoration: none; + color: @font-color; + font-size: 1.5rem; + text-decoration: none; + color: @font-color; + font-size: 1.5rem; + padding: 20px; + } } -.menu { - margin: 20px; - display: flex; - justify-content: flex-start; -} +.btn button { + .button(); +} \ No newline at end of file From 62bdfab326457ece35b29b91d783697ec93710e4 Mon Sep 17 00:00:00 2001 From: Sarah Mucho Date: Sun, 24 May 2020 19:37:48 -0400 Subject: [PATCH 4/6] draft 3 --- about.html | 0 css/index.css | 99 +++++++++++++++++++++++++++++++++++--------- index.html | 8 ++-- less/home-page.less | 59 +++++++++++++++++++++++--- less/mixins.less | 19 +++++++-- less/navigation.less | 29 ++++++------- less/variables.less | 6 ++- 7 files changed, 170 insertions(+), 50 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/css/index.css b/css/index.css index 2ec34d914c..ef80f3746b 100644 --- a/css/index.css +++ b/css/index.css @@ -168,22 +168,35 @@ img { width: 100%; margin: 0 auto; } -.container-head header { - width: 68%; - height: 90px; - margin: 0px auto; - box-sizing: border-box; - display: flex; - flex-direction: row; - justify-content: space-between; - padding-top: 40px; -} -.container-head header .menu { +.menu { text-decoration: none; color: #212529; font-size: 1.5rem; padding: 20px; } +@media (max-width: 500px) { + .menu a { + width: 100%; + align-self: center; + } +} +.btn a { + background: #008B8B; + color: #FFFFFF; + display: flex; + justify-content: center; + width: 200px; + height: 45px; + border-radius: 1.5rem; + align-items: center; + font-size: 2rem; +} +@media (max-width: 500px) { + .btn a { + width: 100%; + margin: 0px auto; + } +} .footer { width: 100%; border-top: 2px dashed silver; @@ -195,9 +208,25 @@ img { font-size: 1.6rem; padding: 20px; } +.container-head header { + width: 68%; + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: baseline; + margin: 0px auto; + padding: 30px 20px 30px 0px; +} +@media (max-width: 500px) { + .container-head header .main-header { + width: 100%; + margin: 10px 0px 20px 0px; + } +} .home { width: 100%; - border-top: 2px dashed silver; + border-top: 2px dashed #C0C0C0; } .home .content-section { margin: 30px 0; @@ -209,39 +238,71 @@ img { width: 48%; padding-right: 1%; } +@media (max-width: 500px) { + .home .content-section .text-content { + width: 90%; + align-items: center; + padding-left: 10px; + padding-top: 30px; + } +} .home .content-section .img-content { width: 48%; padding-left: 1%; } +@media (max-width: 500px) { + .home .content-section .img-content { + width: 100%; + margin: 0px 50px; + } +} .home .content-section .img-content img { border-radius: 10px; } -.home .inverse-content { +.inverse-content { padding-bottom: 30px; border-bottom: 2px dashed #C0C0C0; } -.home .inverse-content .text-content { +.inverse-content .text-content { padding-left: 1%; padding-right: 0; } -.home .inverse-content .img-content { +.inverse-content .img-content { padding-right: 1%; padding-left: 0; } -.home .content-destination { +.content-destination { width: 75%; margin: 0 auto 30px; } -.home .content-destination img { +@media (max-width: 500px) { + .content-destination { + width: 95%; + } +} +.content-destination img { border-radius: 10px; } -.home .content-pick { +.content-pick { padding-top: 30px; border-top: 2px dashed #C0C0C0; display: flex; justify-content: space-between; } -.home .content-pick .destination { +@media (max-width: 500px) { + .content-pick { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px; + } +} +.content-pick .destination { width: 30%; margin-bottom: 30px; } +@media (max-width: 500px) { + .content-pick .destination { + width: 90%; + } +} diff --git a/index.html b/index.html index 99aed7a19f..9bff7fb923 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

Fun Bus