From 8cceeb22a0bee7acb0d5ab889132efea7d2c62ad Mon Sep 17 00:00:00 2001 From: chandra108 Date: Fri, 24 Apr 2020 14:43:57 -0400 Subject: [PATCH 1/4] added import variables --- css/index.css | 228 +++++++++++++++++++++++++++++++++++++++++++++++- less/index.less | 8 +- 2 files changed, 234 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index e764f2b01f..e4c4602ce8 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,227 @@ -/* 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; +} +.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/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 From 15f6ea30367141b4940cc79b519e1e32711c8a7f Mon Sep 17 00:00:00 2001 From: chandra108 Date: Fri, 24 Apr 2020 17:18:01 -0400 Subject: [PATCH 2/4] added navbar styling --- css/index.css | 12 ++++++++++++ index.html | 22 +++++++++++++++++----- less/navigation.less | 16 +++++++++++++++- 3 files changed, 44 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index e4c4602ce8..23d95b64c5 100644 --- a/css/index.css +++ b/css/index.css @@ -168,6 +168,18 @@ img { width: 100%; margin: 0 auto; } +.navBar { + box-sizing: border-box; + display: flex; + justify-content: space-evenly; + align-items: center; + margin-left: 70%; + margin-bottom: 4rem; +} +.navBar a { + text-decoration: none; + font-size: 2.3rem; +} .footer { width: 100%; border-top: 2px dashed silver; diff --git a/index.html b/index.html index bb8663b768..d19c6b7ece 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,20 @@ - - +
+

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.

+
@@ -51,17 +63,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/navigation.less b/less/navigation.less index f89120a0f1..c7b2703076 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,15 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +.navBar { + box-sizing: border-box; + display: flex; + justify-content: space-evenly; + align-items: center; + margin-left: 70%; + margin-bottom: 4rem; + + a { + text-decoration: none; + font-size: 2.3rem; + } +} \ No newline at end of file From 4077c8aabd0a3c22e715d1b6153dfb94d4618b3f Mon Sep 17 00:00:00 2001 From: chandra108 Date: Sat, 25 Apr 2020 01:20:38 -0400 Subject: [PATCH 3/4] desktop updates complete --- css/index.css | 23 +++++++++++++++++++---- index.html | 26 +++++++++++++++++++++----- less/global.less | 3 +++ less/home-page.less | 26 ++++++++++++++++++++++++++ less/mixins.less | 9 ++++++++- less/navigation.less | 26 +++++++++++++++++--------- less/variables.less | 5 ++++- 7 files changed, 98 insertions(+), 20 deletions(-) diff --git a/css/index.css b/css/index.css index 23d95b64c5..881169efcb 100644 --- a/css/index.css +++ b/css/index.css @@ -135,6 +135,7 @@ html { html, body { font-family: 'Roboto', sans-serif; + margin: 5rem 3rem 0rem 3rem; } h1, h2, @@ -168,15 +169,21 @@ img { width: 100%; margin: 0 auto; } -.navBar { +.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; - margin-left: 70%; - margin-bottom: 4rem; + align-self: flex-end; } -.navBar a { +.navContainer .navBar a { text-decoration: none; font-size: 2.3rem; } @@ -237,3 +244,11 @@ img { width: 30%; margin-bottom: 30px; } +.home .content-pick .destination button { + width: 20rem; + color: white; + background-color: #1ae6c4; + padding: 2rem; + border-radius: 8rem; + font-size: 2.3rem; +} diff --git a/index.html b/index.html index d19c6b7ece..794ac45840 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,25 @@ - - + + + -
+
+
+

Fun Bus

+
Let's Ride the Fun Bus!
@@ -30,8 +46,8 @@

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!

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..09bec853f5 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; @@ -56,6 +68,20 @@ .destination { width: 30%; margin-bottom: 30px; + + button { + width: 20rem; + .button (@white, blue, 2rem, 8rem, 2.3rem) + + // color: white; + // background-color: mediumaquamarine; + // padding: 2.0rem; + // border-radius: 8rem; + + + + } + } } }// home \ 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 c7b2703076..753c2bfec1 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,15 +1,23 @@ // Navigation Styles here -.navBar { +.navContainer { box-sizing: border-box; + width: 100%; + padding: 5px; display: flex; - justify-content: space-evenly; - align-items: center; - margin-left: 70%; - margin-bottom: 4rem; - - a { - text-decoration: none; - font-size: 2.3rem; + 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; + } } } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..7d929ab0fa 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 From 00722c9f8d25b14cac3136bdd46749462bb3052f Mon Sep 17 00:00:00 2001 From: chandra108 Date: Mon, 27 Apr 2020 09:46:21 -0400 Subject: [PATCH 4/4] updated mobile --- css/index.css | 11 +++++++++-- less/home-page.less | 32 ++++++++++++++++++++++++-------- less/navigation.less | 18 ++++++++++++++++-- less/variables.less | 2 +- 4 files changed, 50 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index 881169efcb..5410e8b2f5 100644 --- a/css/index.css +++ b/css/index.css @@ -186,6 +186,13 @@ img { .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%; @@ -246,8 +253,8 @@ img { } .home .content-pick .destination button { width: 20rem; - color: white; - background-color: #1ae6c4; + color: #FFFFFF; + background-color: #17A2B8; padding: 2rem; border-radius: 8rem; font-size: 2.3rem; diff --git a/less/home-page.less b/less/home-page.less index 09bec853f5..fc3f097dd5 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -29,6 +29,11 @@ width: 48%; padding-left: 1%; + @media (max-width: 500px) { + width: fit-content; + height: auto; + } + img { border-radius: 10px; } @@ -47,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; + + } + } } @@ -65,23 +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, blue, 2rem, 8rem, 2.3rem) - - // color: white; - // background-color: mediumaquamarine; - // padding: 2.0rem; - // border-radius: 8rem; - + .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/navigation.less b/less/navigation.less index 753c2bfec1..5fbd493445 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -6,6 +6,7 @@ padding: 5px; display: flex; justify-content: space-between; + .navBar { @@ -18,6 +19,19 @@ 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 + + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 7d929ab0fa..e464f8b491 100644 --- a/less/variables.less +++ b/less/variables.less @@ -14,4 +14,4 @@ @sandy-beach: #FFEBCD; // Mobile -@mobile: ~"(max-width: 500px)" \ No newline at end of file +@mobile: ~"(max-width: 500px)"; \ No newline at end of file