diff --git a/css/index.css b/css/index.css index e764f2b01f..2f7ada3e03 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,321 @@ -/* 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; +} +.header { + padding: 30px 0; + border-bottom: 2px dashed #c0c0c0; +} +.header .nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} +.header .nav h1 { + width: 48%; +} +.header .nav a { + text-decoration: none; + color: black; + margin-left: 2rem; + font-size: 1.6rem; + cursor: pointer; +} +@media (max-width: 500px) { + .header .nav { + display: flex; + flex-wrap: wrap; + align-content: center; + justify-content: center; + } + .header .nav h1 { + text-align: center; + } +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #ffebcd; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +.home .text-intro { + padding: 2rem 0; + border-bottom: 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%; +} +.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; +} +.home .content-pick .destination .btn { + background-color: #17a2b8; + color: #ffffff; + padding: 10px; + text-align: center; + width: 200px; + border-radius: 10px; + font-size: 1.6rem; +} +@media (max-width: 500px) { + .home .text-intro h2 { + text-align: center; + } + .home .text-intro p { + padding: 0 1rem; + } + .home .content-section { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + padding: 1rem; + margin: 0; + } + .home .content-section .text-content { + width: 100%; + } + .home .content-section .img-content { + width: 100%; + } + .home .inverse-content { + display: flex; + flex-direction: column-reverse; + justify-content: center; + } + .home .inverse-content .text-content { + display: flex; + flex-direction: column; + justify-content: center; + padding: 1rem; + } + .home .inverse-content .img-content { + display: flex; + justify-content: center; + padding: 1rem; + } + .home .content-pick { + display: flex; + flex-direction: column; + justify-content: center; + } + .home .content-pick .destination { + width: 75%; + margin: 0 auto 30px; + } + .home .content-pick .destination .btn { + width: 100%; + } +} diff --git a/index.html b/index.html index bb8663b768..142aec835f 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,133 @@ - + - - + + - Fun Bus Travel Agency - Solution + Fun Bus Travel Agency - Solution - - + + - - + + - - - - -
- -
-
-

Let's Go!

-

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

-

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

-
-
- Let's go on an adventure! -
-
-
-
- Lets have fun! -
-
-

Adventure Awaits

-

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

-

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

+ +
+
+

Fun Bus

+
- -
-
-

Pick Your Destination

-

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

- Second slide -
-
+ -
-

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!
-
-
-
+
+
+
+ yellow bus on sand +
+
+

Welcome To Fun Bus!

+

+ Traveling expedition modern, clean webdesign blogger clean website + theme website moder. Design pretty design, travelblogger adventure + WordPress wanderlust theme blogger website expedition theme + travelblogger. Adventure fun traveler pretty design website + expediton. +

+
+
- +
+
+

Let's Go!

+

+ Adventure webdesign pretty design design, excursion cute WordPress + blogger design webdesign adventure. Pretty simple traveling fun + WordPress wanderlust darn simple organized. +

+

+ Expedition colorful design simple excursion blogger blogger design + WordPress design, design organized website theme. +

+
+
+ Let's go on an adventure! +
+
+
+
+ Lets have fun! +
+
+

Adventure Awaits

+

+ Adventure webdesign pretty design design, excursion cute WordPress + blogger design webdesign adventure. Pretty simple traveling fun + WordPress wanderlust darn simple organized. +

+

+ Expedition colorful design simple excursion blogger blogger design + WordPress design, design organized website theme. +

+
+
+
+

Pick Your Destination

+

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

+ Second slide +
+
+
+

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!
+
+
+
+ - - \ No newline at end of file + + + diff --git a/less/footer.less b/less/footer.less index 71cff032e9..d3e2577e43 100644 --- a/less/footer.less +++ b/less/footer.less @@ -2,11 +2,11 @@ width: 100%; border-top: 2px dashed silver; background: @sandy-beach; - + p { text-align: center; color: @font-color; font-size: 1.6rem; padding: 20px; } -} \ No newline at end of file +} diff --git a/less/global.less b/less/global.less index abe21bf970..0456feb782 100644 --- a/less/global.less +++ b/less/global.less @@ -6,12 +6,17 @@ html { font-size: 62.5%; } -html, body { - font-family: 'Roboto', sans-serif; +html, +body { + font-family: "Roboto", sans-serif; } -h1, h2, h3, h4, h5 { - font-family: 'Indie Flower', cursive; +h1, +h2, +h3, +h4, +h5 { + font-family: "Indie Flower", cursive; } h1 { diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..f85065bbec 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,4 +1,8 @@ .home { + .text-intro { + padding: 2rem 0; + border-bottom: 2px dashed @navigation-border; + } .content-section { margin: 30px 0; @@ -6,8 +10,6 @@ flex-wrap: wrap; justify-content: space-between; - - .text-content { width: 48%; padding-right: 1%; @@ -56,6 +58,63 @@ .destination { width: 30%; margin-bottom: 30px; + .btn { + .custom-btn(@button-bg, @white, 200px); + } + } + } + @media @mobile { + .text-intro { + h2 { + text-align: center; + } + p { + padding: 0 1rem; + } + } + .content-section { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + padding: 1rem; + margin: 0; + .text-content { + width: 100%; + } + .img-content { + width: 100%; + } + } + .inverse-content { + display: flex; + flex-direction: column-reverse; + justify-content: center; + .text-content { + display: flex; + flex-direction: column; + justify-content: center; + padding: 1rem; + } + .img-content { + display: flex; + justify-content: center; + padding: 1rem; + } + } + .content-pick { + display: flex; + flex-direction: column; + justify-content: center; + .destination { + // width: 100%; + // padding: 0 4rem; + width: 75%; + margin: 0 auto 30px; + .btn { + width: 100%; + } + } } } -}// home \ No newline at end of file +} // home diff --git a/less/index.less b/less/index.less index c113ca2c46..40d1251639 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,8 @@ // Follow the order in the readme +@import "variables"; +@import "mixins"; +@import "reset"; +@import "global"; +@import "navigation"; +@import "footer"; +@import "home-page"; diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..fdc1514c93 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,10 @@ -// Mixins in here \ No newline at end of file +// Mixins in here +.custom-btn(@btn-backgroundcolor, @btn-color, @btn-width) { + background-color: @btn-backgroundcolor; + color: @btn-color; + padding: 10px; + text-align: center; + width: @btn-width; + border-radius: 10px; + font-size: 1.6rem; +} diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..a8c19d1149 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,35 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here +.header { + padding: 30px 0; + border-bottom: 2px dashed @navigation-border; + + .nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + + h1 { + width: 48%; + } + a { + text-decoration: none; + color: black; + margin-left: 2rem; + font-size: 1.6rem; + cursor: pointer; + } + } + + @media @mobile { + .nav { + display: flex; + flex-wrap: wrap; + align-content: center; + justify-content: center; + h1 { + text-align: center; + } + } + } +} diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..512ef8ae28 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,14 +1,17 @@ - -// Color assignments +// Color assignments @font-color: @shark; @button-bg: @eastern-blue; -@main-bg: @white; +@main-bg: @white; @navigation-border: @silver; @footer-bg: @sandy-beach; // Colors -@white: #FFFFFF; -@silver: #C0C0C0; +@white: #ffffff; +@silver: #c0c0c0; @shark: #212529; -@eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@eastern-blue: #17a2b8; +@sandy-beach: #ffebcd; + +//design response breakpoints +@mobile: ~"(max-width: 500px)"; +@desktop: ~"(max-width: 800px)";