diff --git a/css/index.css b/css/index.css index e764f2b01f..5410e8b2f5 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,261 @@ -/* 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; + margin: 5rem 3rem 0rem 3rem; +} +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; +} +.navContainer { + box-sizing: border-box; + width: 100%; + padding: 5px; + display: flex; + justify-content: space-between; +} +.navContainer .navBar { + width: 60%; + display: flex; + justify-content: space-evenly; + align-items: center; + align-self: flex-end; +} +.navContainer .navBar a { + text-decoration: none; + font-size: 2.3rem; + color: #17A2B8; +} +@media (max-width: 500px) { + .navContainer .navBar a { + font-size: 4rem; + color: powderblue; + } +} +.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; +} +.home .content-pick .destination button { + width: 20rem; + color: #FFFFFF; + background-color: #17A2B8; + padding: 2rem; + border-radius: 8rem; + font-size: 2.3rem; +} diff --git a/index.html b/index.html index bb8663b768..794ac45840 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,42 @@ - - + + + - - -
- +
+
+

Fun Bus

+ +
+
+ Let's Ride the Fun Bus! +
+

Welcome To Fun Bus!

+

Traveling expedition modern, clean webdesign blogger clean 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!

@@ -51,17 +79,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/global.less b/less/global.less index abe21bf970..4619bd6dbe 100644 --- a/less/global.less +++ b/less/global.less @@ -4,10 +4,12 @@ html { font-size: 62.5%; + } html, body { font-family: 'Roboto', sans-serif; + margin: 5rem 3rem 0rem 3rem; } h1, h2, h3, h4, h5 { @@ -16,6 +18,7 @@ h1, h2, h3, h4, h5 { h1 { font-size: 4rem; + } h2 { diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..fc3f097dd5 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,17 @@ +// .navContainer { +// box-sizing: border-box; +// width: 100%; +// padding: 5px; +// display: flex; +// justify-content: space-between; +// } + + + .home { + + .content-section { margin: 30px 0; display: flex; @@ -17,6 +29,11 @@ width: 48%; padding-left: 1%; + @media (max-width: 500px) { + width: fit-content; + height: auto; + } + img { border-radius: 10px; } @@ -35,6 +52,16 @@ .img-content { padding-right: 1%; padding-left: 0; + + @media (max-width: 500px) { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: auto; + + } + } } @@ -53,9 +80,24 @@ display: flex; justify-content: space-between; + @media (max-width: 500px) { + display: flex; + flex-direction: column; + align-items: center; + } .destination { width: 30%; margin-bottom: 30px; + + button { + width: 20rem; + .button (@white, @eastern-blue, 2rem, 8rem, 2.3rem); + + @media@mobil { + .button (@white, rgb(207, 22, 22), 6rem, 2rem, 2.3rem); + + } + } } } }// home \ No newline at end of file diff --git a/less/index.less b/less/index.less index c113ca2c46..7639714c11 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,7 @@ -// 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..bad48d2e7a 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,8 @@ -// Mixins in here \ No newline at end of file +// Mixins in here +.button (@fontColor, @backgroundColor, @padding, @borderRadius, @fontSize) { + color: @fontColor; + background-color: @backgroundColor; + padding: @padding; + border-radius: @borderRadius; + font-size: @fontSize; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..5fbd493445 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,37 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +.navContainer { + box-sizing: border-box; + width: 100%; + padding: 5px; + display: flex; + justify-content: space-between; + + + + .navBar { + width: 60%; + display: flex; + justify-content: space-evenly; + align-items: center; + align-self: flex-end; + + a { + text-decoration: none; + font-size: 2.3rem; + color: @eastern-blue; + + @media@mobile { + font-size: 4rem; + color: black; + display: flex; + justify-content: center; + align-items: center; + + + + } + } + + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..e464f8b491 100644 --- a/less/variables.less +++ b/less/variables.less @@ -11,4 +11,7 @@ @silver: #C0C0C0; @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; + +// Mobile +@mobile: ~"(max-width: 500px)"; \ No newline at end of file