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... diff --git a/about.html b/about.html new file mode 100644 index 0000000000..1c176128a2 --- /dev/null +++ b/about.html @@ -0,0 +1 @@ +

ABOUT

\ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000000..41201ba39b --- /dev/null +++ b/blog.html @@ -0,0 +1 @@ +

BLOG

\ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000000..c75c332880 --- /dev/null +++ b/contact.html @@ -0,0 +1 @@ +

CONTACT

\ No newline at end of file diff --git a/css/index.css b/css/index.css index e764f2b01f..caa057320e 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,317 @@ -/* 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; +} +.menu { + text-decoration: none; + color: #212529; + font-size: 1.5rem; + padding: 20px; +} +@media (max-width: 500px) { + .main-header { + margin: 0px auto; + } +} +@media (max-width: 500px) { + nav { + display: flex; + justify-content: center; + height: 30px; + } +} +.btn a { + background: #008B8B; + color: #FFFFFF; + display: flex; + justify-content: center; + text-decoration: none; + 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; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +.containers { + 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) { + .containers { + display: flex; + flex-direction: column; + } +} +.home { + width: 100%; + border-top: 2px dashed #C0C0C0; +} +.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%; +} +@media (max-width: 500px) { + .home .content-section .text-content { + width: 90%; + align-items: center; + padding-left: 10px; + padding-top: 30px; + padding-bottom: 20px; + margin: 0px auto; + } +} +.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; +} +.inverse-content { + padding-bottom: 30px; + border-bottom: 2px dashed #C0C0C0; +} +.inverse-content .text-content { + padding-left: 1%; + padding-right: 0; +} +.inverse-content .img-content { + padding-right: 1%; + padding-left: 0; +} +.content-destination { + width: 75%; + margin: 0 auto 30px; +} +@media (max-width: 500px) { + .content-destination { + width: 95%; + } +} +.content-destination img { + border-radius: 10px; +} +.content-pick { + padding-top: 30px; + border-top: 2px dashed #C0C0C0; + display: flex; + justify-content: space-between; +} +@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 bb8663b768..ab9394558e 100644 --- a/index.html +++ b/index.html @@ -15,10 +15,26 @@ - +
+
+
+

Fun Bus

+ +
+
+
+
+
+ +
@@ -51,17 +67,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/contact.html b/less/contact.html new file mode 100644 index 0000000000..6025ace242 --- /dev/null +++ b/less/contact.html @@ -0,0 +1 @@ +

CONTACT

\ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..106e0282b8 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,25 +1,73 @@ + +.containers { + 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 @mobile { + display: flex; + flex-direction: column; + // justify-content: space-evenly; + + } +// .main-header { +// @media @mobile { +// display: flex; +// flex-direction: column; +// } +// } +} +// a { +// @media @mobile { +// display: flex; +// flex-direction: row; +// justify-content: space-evenly; +// } + .home { + width: 100%; + border-top: 2px dashed @navigation-border; + .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; - - .text-content { width: 48%; padding-right: 1%; + + @media @mobile { + width: 90%; + align-items: center; + padding-left: 10px; + padding-top: 30px; + padding-bottom: 20px; + margin: 0px auto; + } } .img-content { width: 48%; padding-left: 1%; + @media @mobile { + width: 100%; + margin: 0px 50px; + } + img { border-radius: 10px; + } + } } } @@ -35,6 +83,7 @@ .img-content { padding-right: 1%; padding-left: 0; + } } @@ -42,6 +91,10 @@ width: 75%; margin: 0 auto 30px; + @media @mobile { + width: 95% + } + img { border-radius: 10px; } @@ -53,9 +106,23 @@ display: flex; justify-content: space-between; + @media @mobile { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px; + } + .destination { width: 30%; margin-bottom: 30px; + + + @media @mobile { + width: 90%; + } } - } -}// home \ No newline at end of file + }// home + + + 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/mixins.less b/less/mixins.less index 2d5c603558..0224ca74b1 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,19 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.button(@color) { + background: @button-bg; + color: @color; + display: flex; + justify-content: center; + text-decoration: none; + width: 200px; + height: 45px; + border-radius: 1.5rem; + align-items: center; + font-size: 2rem; + + @media @mobile { + width: 100%; + margin: 0px auto; + } +} diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..3ff7e30e3f 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,40 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + + .menu { + text-decoration: none; + font-size: 1.5rem; + text-decoration: none; + color: @font-color; + font-size: 1.5rem; + padding: 20px; + + } + + .main-header { + @media @mobile { + margin: 0px auto; + } +} + nav { + @media @mobile { + display: flex; + // flex-flow: row-wrap; + // box-sizing: border-box; + justify-content: center; + + // flex-direction: row; + // align-items: left; + // margin: 0px auto; + + height: 30px; + + a { + // margin: 0px auto; + } + } + } +//header + + .btn a { + .button (@white) +} diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..b354b33707 100644 --- a/less/variables.less +++ b/less/variables.less @@ -10,5 +10,7 @@ @white: #FFFFFF; @silver: #C0C0C0; @shark: #212529; -@eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@eastern-blue:#008B8B; +@sandy-beach: #FFEBCD; + +@mobile: ~"(max-width: 500px)"; diff --git a/sign.html b/sign.html new file mode 100644 index 0000000000..dcfa4b18bf --- /dev/null +++ b/sign.html @@ -0,0 +1,5 @@ +

Sign Up!

+ +

Name

+ +

Email