diff --git a/css/index.css b/css/index.css index e764f2b01f..7541ca8ab7 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,374 @@ -/* LESS needs to be processed */ \ No newline at end of file +.btn { + background-color: #17A2B8; + font-size: 1.5rem; + text-align: center; + margin: auto; + padding: 1rem; + border-radius: 1.2rem; + color: white; +} +/* 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; +} +.navdisplay { + display: flex; +} +.anchors { + margin: 1rem; + font-size: 1.4rem; + margin-top: 3rem; +} +.nav-bar { + display: flex; + justify-content: flex-end; +} +.container .nav-bar p { + width: 80%; + margin-top: 3rem; + font-family: 'Indie Flower', cursive; + font-size: 3.2rem; +} +a { + margin: 1rem; + font-size: 1.4rem; + margin-top: 3rem; + text-decoration: none; + color: black; +} +@media (max-width: 500px) { + .container { + max-width: 450px; + width: 100%; + margin: 0 auto; + } + .navdisplay { + display: flex; + justify-content: center; + width: 100%; + } + .anchors { + margin: 1rem; + font-size: 1.6rem; + margin-top: 5rem; + padding-right: 5.5rem; + } + .nav-bar { + display: flex; + justify-content: center; + width: 100%; + flex-direction: row; + flex-wrap: wrap; + } + .container .nav-bar p { + font-family: 'Indie Flower', cursive; + font-size: 2.9rem; + margin-left: 14rem; + } + a { + margin: 1rem; + font-size: 1.6rem; + margin-top: 5rem; + padding-right: 5.5rem; + text-decoration: none; + color: black; + flex-direction: row; + margin: 0; + } + .break { + flex-basis: 100%; + height: 0; + } +} +.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 header { + width: 100%; + border-top: 2px dashed #C0C0C0; +} +.home header .funny { + margin-bottom: 2rem; +} +.home header p { + border-bottom: 2px dashed #C0C0C0; +} +.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: 100%; + 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; +} +@media (max-width: 500px) { + body { + border: 1px solid #C0C0C0; + } + .content-section { + display: flex; + } + .text-content { + display: flex; + flex-wrap: wrap; + } + .img-content { + display: flex; + } + .one { + order: 2; + flex: 2; + } + .two { + order: -1; + flex: 2; + } + .three { + flex: 2; + } + .four { + flex: 2; + } + .content-destination { + display: flex; + flex-wrap: wrap; + } + .content-pick { + display: flex; + flex-wrap: wrap; + } + .destination { + display: flex; + flex-wrap: wrap; + } + .six { + flex: 2; + flex-basis: 100%; + padding: 2rem; + } + .seven { + flex: 2; + flex-basis: 100%; + padding: 2rem; + } + .eight { + flex: 2; + flex-basis: 100%; + padding: 2rem; + } + .btn { + flex-basis: 100%; + } +} diff --git a/index.html b/index.html index bb8663b768..7ffe3606a3 100644 --- a/index.html +++ b/index.html @@ -16,49 +16,67 @@ - -
- +
+

Fun Bus

+
+ Home + About Us + Blog + Contact +
+
+ +

Welcome To Fun Bus!

+

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

+ + +
-
+

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!
diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..cfb70339fd 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -11,6 +11,7 @@ .text-content { width: 48%; padding-right: 1%; + } .img-content { @@ -19,10 +20,31 @@ img { border-radius: 10px; + } + + } } + header{ + width:100%; + border-top: 2px dashed @navigation-border; + + + + + .funny{ + + margin-bottom:2rem; + + } +} + + header p{ + border-bottom: 2px dashed @navigation-border; + } + .inverse-content { padding-bottom: 30px; border-bottom: 2px dashed @navigation-border; @@ -30,16 +52,20 @@ .text-content { padding-left: 1%; padding-right: 0; + + + } .img-content { padding-right: 1%; padding-left: 0; + } } .content-destination { - width: 75%; + width: 100%; margin: 0 auto 30px; img { @@ -58,4 +84,105 @@ margin-bottom: 30px; } } -}// home \ No newline at end of file + +}// home + +//mobile + +@media @mobile { + + body{ + border:1px solid @silver; + + + } + .content-section{ + + display:flex; + + + + } + + .text-content{ + display:flex; + flex-wrap: wrap; + + + + } + + + .img-content{ + display:flex; + + + } + + .one{order:2; + flex:2;} + .two{order:-1; + flex:2;} + .three{ + flex:2; + } + + .four{ + flex:2; + } + + + + .content-destination{ + + display: flex; + flex-wrap: wrap; + + } + + .content-pick{ + + display: flex; + + flex-wrap: wrap; + + + + } + + .destination{ + display:flex; + flex-wrap: wrap; + + + } + + .six{ + flex:2; + flex-basis: 100%; + padding:2rem; + + } + + .seven{ + flex:2; + flex-basis: 100%; + padding:2rem; + } + + .eight{ + flex:2; + flex-basis: 100%; + padding:2rem; + } + + .btn{ + flex-basis: 100%; + } + + + + + + +} \ No newline at end of file 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..2615510465 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,21 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.button(@radius, @padding, @color ){ + + padding:@padding; + border-radius: @radius; + color:@color; + + +} + +.btn{ + + background-color:@eastern-blue; + font-size: 1.5rem; + text-align: center; + margin:auto; + .button(1.2rem, 1rem, white); + + +} diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..64b92b3a1d 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,115 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +@nodecor: none; +.navdisplay{ + + display:flex; + +} + +.anchors{ + margin:1rem; + font-size: 1.4rem; + margin-top: 3rem; + +} + +.nav-bar{ + + .navdisplay(); + justify-content: flex-end; + +} + .container .nav-bar p{ + width:80%; + margin-top: 3rem; + font-family: 'Indie Flower', cursive; + font-size: 3.2rem; + + + } + + a{ + .anchors(); + text-decoration: @nodecor; + color:black + } + +//mobile + +@media @mobile { + .container { + max-width: 450px; + width: 100%; + margin: 0 auto; + + + } + .navdisplay{ + + display:flex; + justify-content: center; + + width:100%; + + + } + + .anchors{ + margin:1rem; + font-size: 1.6rem; + margin-top: 5rem; + padding-right:5.5rem; + + } + + .nav-bar{ + + + .navdisplay(); + flex-direction: row; + flex-wrap: wrap; + + + + + } + .container .nav-bar p{ + + + font-family: 'Indie Flower', cursive; + font-size: 2.9rem; + + margin-left: 14rem; + + + + + + + + + + } + + a{ + .anchors(); + text-decoration: @nodecor; + color:black; + + flex-direction: row; + margin:0; + + + } + + + + + .break{ + flex-basis: 100%; + height:0; + } +} + + diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..28045b26ee 100644 --- a/less/variables.less +++ b/less/variables.less @@ -11,4 +11,9 @@ @silver: #C0C0C0; @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; + + +//mobile-design + +@mobile: ~"(max-width: 500px)"; \ No newline at end of file