From 5c49e8f6d063df8e75e3b2aa8968a8c60751394d Mon Sep 17 00:00:00 2001 From: cyasmani Date: Wed, 20 May 2020 20:30:09 -0700 Subject: [PATCH 1/3] worked on navbar --- css/index.css | 249 ++++++++++++++++++++++++++++++++++++++++++- index.html | 15 ++- less/index.less | 7 ++ less/navigation.less | 33 +++++- 4 files changed, 299 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index e764f2b01f..f2768ac163 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,248 @@ -/* 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; +} +.navdisplay { + display: flex; +} +.anchors { + margin: 2rem; + font-size: 1.3rem; +} +.nav-bar { + display: flex; + border: 3px solid black; + justify-content: flex-end; +} +.container .nav-bar p { + width: 80%; +} +a { + margin: 2rem; + font-size: 1.3rem; + text-decoration: none; + color: black; +} +.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/index.html b/index.html index bb8663b768..de5c93f150 100644 --- a/index.html +++ b/index.html @@ -16,10 +16,19 @@ - -
- +
+

Fun Bus

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

Let's Go!

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/navigation.less b/less/navigation.less index f89120a0f1..7fd1b30872 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,32 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +@nodecor: none; +.navdisplay{ + + display:flex; +} + +.anchors{ + margin:2rem; + font-size: 1.3rem; + +} + +.nav-bar{ + + .navdisplay(); + border: 3px solid black; + justify-content: flex-end; + +} + .container .nav-bar p{ + width:80%; + + } + + a{ + .anchors(); + text-decoration: @nodecor; + color:black + } + From 33c7aadd5c7d60177e2f889b4fcb8baf5050a46c Mon Sep 17 00:00:00 2001 From: cyasmani Date: Thu, 21 May 2020 21:24:52 -0700 Subject: [PATCH 2/3] Finished Desktop homepage --- css/index.css | 75 +++++++++++++++++++++++++++++++++++++++++--- index.html | 4 ++- less/home-page.less | 34 +++++++++++++++++++- less/mixins.less | 22 ++++++++++++- less/navigation.less | 74 +++++++++++++++++++++++++++++++++++++++++-- less/variables.less | 7 ++++- 6 files changed, 204 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index f2768ac163..4193e51cd4 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,12 @@ +.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) @@ -172,23 +181,69 @@ img { display: flex; } .anchors { - margin: 2rem; - font-size: 1.3rem; + margin: 1rem; + font-size: 1.4rem; + margin-top: 3rem; } .nav-bar { display: flex; - border: 3px solid black; justify-content: flex-end; } .container .nav-bar p { width: 80%; + margin-top: 3rem; + font-family: 'Indie Flower', cursive; + font-size: 3.2rem; } a { - margin: 2rem; - font-size: 1.3rem; + 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; + margin-top: 20rem; + } + .navdisplay { + display: flex; + justify-content: center; + border: 3px solid blue; + width: 100%; + margin-top: 30rem; + } + .anchors { + margin: 1rem; + font-size: 1.4rem; + margin-top: 5rem; + padding-right: 5.5rem; + } + .nav-bar { + display: flex; + justify-content: center; + border: 3px solid blue; + width: 100%; + margin-top: 30rem; + } + .container .nav-bar p { + font-family: 'Indie Flower', cursive; + font-size: 2.4rem; + border: 3px solid black; + } + a { + margin: 1rem; + font-size: 1.4rem; + margin-top: 5rem; + padding-right: 5.5rem; + text-decoration: none; + color: black; + border: 3px solid red; + } +} .footer { width: 100%; border-top: 2px dashed silver; @@ -217,6 +272,16 @@ a { .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; diff --git a/index.html b/index.html index de5c93f150..33b7e17940 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,9 @@ 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.

diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..8553354ac0 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -19,10 +19,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; @@ -58,4 +79,15 @@ margin-bottom: 30px; } } -}// home \ No newline at end of file + +}// home + +//mobile + +@media @mobile { + + + + + +} \ No newline at end of file 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 7fd1b30872..f327fc3faf 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -4,23 +4,28 @@ .navdisplay{ display:flex; + } .anchors{ - margin:2rem; - font-size: 1.3rem; + margin:1rem; + font-size: 1.4rem; + margin-top: 3rem; } .nav-bar{ .navdisplay(); - border: 3px solid black; justify-content: flex-end; } .container .nav-bar p{ width:80%; + margin-top: 3rem; + font-family: 'Indie Flower', cursive; + font-size: 3.2rem; + } @@ -30,3 +35,66 @@ color:black } +//mobile + +@media @mobile { + .container { + max-width: 450px; + width: 100%; + margin: 0 auto; + margin-top: 20rem; + + } + .navdisplay{ + + display:flex; + justify-content: center; + border:3px solid blue; + width:100%; + margin-top: 30rem; + + } + + .anchors{ + margin:1rem; + font-size: 1.4rem; + margin-top: 5rem; + padding-right:5.5rem; + + } + + .nav-bar{ + + + .navdisplay(); + + + + } + .container .nav-bar p{ + + + font-family: 'Indie Flower', cursive; + font-size: 2.4rem; + border: 3px solid black; + + + + + + + } + + a{ + .anchors(); + text-decoration: @nodecor; + color:black; + border: 3px solid red; + } + + + + + + +} 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 From 272f66b4abf905e6d958480b678172f210fd075e Mon Sep 17 00:00:00 2001 From: cyasmani Date: Fri, 22 May 2020 10:44:12 -0700 Subject: [PATCH 3/3] Finished Mobile Responsiveness --- css/index.css | 83 ++++++++++++++++++++++++++++++++----- index.html | 23 +++++++---- less/home-page.less | 97 +++++++++++++++++++++++++++++++++++++++++++- less/navigation.less | 31 ++++++++++---- 4 files changed, 206 insertions(+), 28 deletions(-) diff --git a/css/index.css b/css/index.css index 4193e51cd4..7541ca8ab7 100644 --- a/css/index.css +++ b/css/index.css @@ -207,41 +207,43 @@ a { max-width: 450px; width: 100%; margin: 0 auto; - margin-top: 20rem; } .navdisplay { display: flex; justify-content: center; - border: 3px solid blue; width: 100%; - margin-top: 30rem; } .anchors { margin: 1rem; - font-size: 1.4rem; + font-size: 1.6rem; margin-top: 5rem; padding-right: 5.5rem; } .nav-bar { display: flex; justify-content: center; - border: 3px solid blue; width: 100%; - margin-top: 30rem; + flex-direction: row; + flex-wrap: wrap; } .container .nav-bar p { font-family: 'Indie Flower', cursive; - font-size: 2.4rem; - border: 3px solid black; + font-size: 2.9rem; + margin-left: 14rem; } a { margin: 1rem; - font-size: 1.4rem; + font-size: 1.6rem; margin-top: 5rem; padding-right: 5.5rem; text-decoration: none; color: black; - border: 3px solid red; + flex-direction: row; + margin: 0; + } + .break { + flex-basis: 100%; + height: 0; } } .footer { @@ -295,7 +297,7 @@ a { padding-left: 0; } .home .content-destination { - width: 75%; + width: 100%; margin: 0 auto 30px; } .home .content-destination img { @@ -311,3 +313,62 @@ a { 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 33b7e17940..7ffe3606a3 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@

Fun Bus

+
Home About Us Blog @@ -32,44 +33,50 @@

Welcome To Fun Bus!

-
+

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 8553354ac0..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 { @@ -51,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 { @@ -86,8 +91,98 @@ @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/navigation.less b/less/navigation.less index f327fc3faf..64b92b3a1d 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -42,22 +42,22 @@ max-width: 450px; width: 100%; margin: 0 auto; - margin-top: 20rem; + } .navdisplay{ display:flex; justify-content: center; - border:3px solid blue; + width:100%; - margin-top: 30rem; + } .anchors{ margin:1rem; - font-size: 1.4rem; + font-size: 1.6rem; margin-top: 5rem; padding-right:5.5rem; @@ -67,6 +67,9 @@ .navdisplay(); + flex-direction: row; + flex-wrap: wrap; + @@ -75,8 +78,12 @@ font-family: 'Indie Flower', cursive; - font-size: 2.4rem; - border: 3px solid black; + font-size: 2.9rem; + + margin-left: 14rem; + + + @@ -89,12 +96,20 @@ .anchors(); text-decoration: @nodecor; color:black; - border: 3px solid red; + + flex-direction: row; + margin:0; + + } + .break{ + flex-basis: 100%; + height:0; + } +} -}