From 55737401b489ce6f8d442b864c333482bcea2e25 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 09:02:18 -0600 Subject: [PATCH 1/8] testing the first commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index bb8663b768..7c3e62f5df 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@
-

Let's Go!

+

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.

From 49f8c1eb6c0054f0f3753c7f4133526615fbb035 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 09:31:49 -0600 Subject: [PATCH 2/8] importing the less files at index.less --- css/index.css | 228 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 2 +- less/index.less | 7 ++ 3 files changed, 235 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/index.html b/index.html index 7c3e62f5df..54da15f0f6 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Fun Bus Travel Agency - Solution diff --git a/less/index.less b/less/index.less index c113ca2c46..dc0111390e 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,8 @@ // Follow the order in the readme +@import "variables.less"; +@import "mixins.less"; +@import "reset.less"; +@import "global.less"; +@import "navigation.less"; +@import "footer.less"; +@import "home-page.less"; From a4f7f11f5b798f4cb7467bb629176d78b668b61d Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 10:21:43 -0600 Subject: [PATCH 3/8] making the navigation menu link --- .vscode/settings.json | 3 +++ index.html | 15 ++++++++++++--- 2 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..aef844305a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 54da15f0f6..656c3f5b6b 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,18 @@ - - - +
+
+

Fun Bus

+ +
+
+
From 3831e860734f99ff531ad948c6c4ee413d95dab1 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 10:28:07 -0600 Subject: [PATCH 4/8] making the top part of fun bus --- index.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 656c3f5b6b..579cbeba09 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - +
@@ -26,9 +26,14 @@

Fun Bus

- +
- +
+ Fun Bus +

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

From 939cdbe53e13192c4c6571ea985dd0f4ba4fd27f Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 11:47:29 -0600 Subject: [PATCH 5/8] after making the buttons --- css/index.css | 107 ++++++++++++++++++++++++++++++++++++++++--- index.html | 7 +-- less/footer.less | 2 +- less/home-page.less | 68 +++++++++++++++++++++++++-- less/mixins.less | 17 ++++++- less/navigation.less | 11 ++++- less/variables.less | 8 +++- 7 files changed, 202 insertions(+), 18 deletions(-) diff --git a/css/index.css b/css/index.css index e4c4602ce8..64c42ed702 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,8 @@ +.flexCentered { + display: flex; + justify-content: center; + align-items: center; +} /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -168,9 +173,16 @@ img { width: 100%; margin: 0 auto; } +.main-nav { + padding-bottom: 25px; + border-bottom: 1px dashed #b3b2b2; + max-width: 1000px; + width: 100%; + margin: 0 auto; +} .footer { width: 100%; - border-top: 2px dashed silver; + border-top: 2px dashed #b3b2b2; background: #FFEBCD; } .footer p { @@ -179,26 +191,56 @@ img { font-size: 1.6rem; padding: 20px; } +.home { + max-width: 800px; + width: 100%; +} +@media (max-width: 500px) { + .home { + width: 90%; + } +} +.home .top-cont-mod { + border-bottom: 1px dashed #b3b2b2; +} +.home .top-cont-mod img { + margin-bottom: 0px; +} .home .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } -.home .content-section .text-content { +.home .text-content { width: 48%; padding-right: 1%; } -.home .content-section .img-content { +@media (max-width: 500px) { + .home .text-content { + width: 100%; + } +} +.home .img-content { width: 48%; padding-left: 1%; } -.home .content-section .img-content img { +.home .img-content img { border-radius: 10px; } +@media (max-width: 500px) { + .home .img-content img { + width: 100%; + } +} +@media (max-width: 500px) { + .home .img-content { + width: 100%; + } +} .home .inverse-content { padding-bottom: 30px; - border-bottom: 2px dashed #C0C0C0; + border-bottom: 2px dashed #b3b2b2; } .home .inverse-content .text-content { padding-left: 1%; @@ -208,6 +250,16 @@ img { padding-right: 1%; padding-left: 0; } +@media (max-width: 500px) { + .home .inverse-content .img-content { + order: 1; + } +} +@media (max-width: 500px) { + .home .inverse-content .img-content img { + width: 100%; + } +} .home .content-destination { width: 75%; margin: 0 auto 30px; @@ -215,9 +267,14 @@ img { .home .content-destination img { border-radius: 10px; } +@media (max-width: 500px) { + .home .content-destination { + width: 100%; + } +} .home .content-pick { padding-top: 30px; - border-top: 2px dashed #C0C0C0; + border-top: 2px dashed #b3b2b2; display: flex; justify-content: space-between; } @@ -225,3 +282,41 @@ img { width: 30%; margin-bottom: 30px; } +.home .content-pick .destination .btn { + display: flex; + justify-content: center; + align-items: center; + font-size: 1.8rem; + background: #008080; + color: white; + border-radius: 15px; + width: 80%; + height: 45px; +} +@media (max-width: 500px) { + .home .content-pick .destination .btn { + display: flex; + justify-content: center; + align-items: center; + font-size: 1.8rem; + background: #17A2B8; + color: white; + border-radius: 15px; + width: 80%; + height: 45px; + width: 100%; + margin-bottom: 20px; + } +} +@media (max-width: 500px) { + .home .content-pick .destination { + width: 80%; + margin: 0 auto; + } +} +@media (max-width: 500px) { + .home .content-pick { + flex-direction: column; + margin: 0 auto; + } +} diff --git a/index.html b/index.html index 579cbeba09..6aa7be12ec 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ -
+

Fun Bus

-
+ +
Fun Bus

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.

@@ -81,7 +82,7 @@

Island Getaway

-

Copyright Fun Bus 2018

+

Copyright Fun Bus 2020

diff --git a/less/footer.less b/less/footer.less index 71cff032e9..1b3ebe1ba8 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,6 +1,6 @@ .footer { width: 100%; - border-top: 2px dashed silver; + border-top: 2px dashed @silver; background: @sandy-beach; p { diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..6642ba6200 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,16 +1,33 @@ .home { + max-width: 800px; + width: @width; + + @media @mob-500{ + width: 90%; + } + + .top-cont-mod{ + border-bottom: 1px dashed @navigation-border; + + img{ + margin-bottom: 0px; + } + } .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; + } - - .text-content { width: 48%; padding-right: 1%; + + @media @mob-500 { + width: 100%; + } } .img-content { @@ -19,9 +36,17 @@ img { border-radius: 10px; + + @media @mob-500 { + width: 100%; + } + } + + @media @mob-500 { + width: 100%; } } - } + .inverse-content { padding-bottom: 30px; @@ -35,7 +60,17 @@ .img-content { padding-right: 1%; padding-left: 0; - } + + @media @mob-500 { + order: 1; + } + + img { + @media @mob-500 { + width: 100%; + } + }//img content + }//inverse content } .content-destination { @@ -45,8 +80,13 @@ img { border-radius: 10px; } + + @media @mob-500 { + width: 100%; + } } + .content-pick { padding-top: 30px; border-top: 2px dashed @navigation-border; @@ -56,6 +96,26 @@ .destination { width: 30%; margin-bottom: 30px; + + .btn { + .make-btn(1.8rem, #008080, white); + + @media @mob-500 { + .make-btn(1.8rem, #17A2B8, white); + width: 100%; + margin-bottom: 20px; + } + } + + @media @mob-500 { + width: 80%; + margin: 0 auto; + } + } + + @media @mob-500 { + flex-direction: column; + margin: 0 auto; } } }// home \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..1e28f58918 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,16 @@ -// Mixins in here \ No newline at end of file +// Mixins in here +.flexCentered { + display: flex; + justify-content: center; + align-items: center; +} + +.make-btn(@font-size, @background, @color) { + .flexCentered; + font-size: @font-size; + background: @background; + color: @color; + border-radius: 15px; + width: 80%; + height: 45px; +} diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..a76521a8fc 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,10 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here +.main-nav { +padding-bottom: 25px; +border-bottom: 1px dashed @navigation-border; +max-width: 1000px; +width: 100%; +margin: 0 auto; + +} + diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..c3972fad0e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -8,7 +8,11 @@ // Colors @white: #FFFFFF; -@silver: #C0C0C0; +@silver: rgb(179, 178, 178); @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; + +//for mobile +@mob-500: ~"(max-width: 500px)"; +@width: 100%; \ No newline at end of file From 1c127087aab2bdc4cfb45abc365892538dc15d95 Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 12:41:11 -0600 Subject: [PATCH 6/8] making navigation --- css/index.css | 17 +++++++++++------ less/home-page.less | 21 +++++++++++---------- less/mixins.less | 6 +++--- less/navigation.less | 1 - less/variables.less | 8 +++++++- 5 files changed, 32 insertions(+), 21 deletions(-) diff --git a/css/index.css b/css/index.css index 64c42ed702..ebf9a804c0 100644 --- a/css/index.css +++ b/css/index.css @@ -1,4 +1,8 @@ -.flexCentered { +/* //for button only +@font-size: 1.8rem; +@background: #008080; +@color: white; */ +.Cntr-flx { display: flex; justify-content: center; align-items: center; @@ -201,10 +205,11 @@ img { } } .home .top-cont-mod { - border-bottom: 1px dashed #b3b2b2; + padding-bottom: 15px; + border-bottom: 2px dashed #b3b2b2; } .home .top-cont-mod img { - margin-bottom: 0px; + margin-bottom: 20px; } .home .content-section { margin: 30px 0; @@ -279,7 +284,7 @@ img { justify-content: space-between; } .home .content-pick .destination { - width: 30%; + width: 50%; margin-bottom: 30px; } .home .content-pick .destination .btn { @@ -289,7 +294,7 @@ img { font-size: 1.8rem; background: #008080; color: white; - border-radius: 15px; + border-radius: 25px; width: 80%; height: 45px; } @@ -301,7 +306,7 @@ img { font-size: 1.8rem; background: #17A2B8; color: white; - border-radius: 15px; + border-radius: 25px; width: 80%; height: 45px; width: 100%; diff --git a/less/home-page.less b/less/home-page.less index 6642ba6200..0e78f4b6a5 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,16 +1,17 @@ .home { max-width: 800px; width: @width; - + //for mobile only @media @mob-500{ width: 90%; } - + // for the text above the line .top-cont-mod{ - border-bottom: 1px dashed @navigation-border; - + padding-bottom: 15px; + border-bottom: 2px dashed @navigation-border; + //for the bus pic on the header img{ - margin-bottom: 0px; + margin-bottom: 20px; } } @@ -60,7 +61,7 @@ .img-content { padding-right: 1%; padding-left: 0; - + //if order is not 1 at 500 the image will not be ordered @media @mob-500 { order: 1; } @@ -94,19 +95,19 @@ justify-content: space-between; .destination { - width: 30%; + width: 50%; margin-bottom: 30px; - + //making the button passing size,color,bg-color .btn { .make-btn(1.8rem, #008080, white); - + //making the button with a differnt shade of green @media @mob-500 { .make-btn(1.8rem, #17A2B8, white); width: 100%; margin-bottom: 20px; } } - + @media @mob-500 { width: 80%; margin: 0 auto; diff --git a/less/mixins.less b/less/mixins.less index 1e28f58918..2a846a3f67 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,16 +1,16 @@ // Mixins in here -.flexCentered { +.Cntr-flx { display: flex; justify-content: center; align-items: center; } .make-btn(@font-size, @background, @color) { - .flexCentered; + .Cntr-flx; font-size: @font-size; background: @background; color: @color; - border-radius: 15px; + border-radius: 25px; width: 80%; height: 45px; } diff --git a/less/navigation.less b/less/navigation.less index a76521a8fc..d28a7114c7 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -5,6 +5,5 @@ border-bottom: 1px dashed @navigation-border; max-width: 1000px; width: 100%; margin: 0 auto; - } diff --git a/less/variables.less b/less/variables.less index c3972fad0e..13848ace4a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -15,4 +15,10 @@ //for mobile @mob-500: ~"(max-width: 500px)"; -@width: 100%; \ No newline at end of file +@width: 100%; + +/* //for button only +@font-size: 1.8rem; +@background: #008080; +@color: white; */ + From e8febb842913fa822a688fdfe022b7e7e1d9ca8c Mon Sep 17 00:00:00 2001 From: Robel Mengistu <62121236+robelv2020@users.noreply.github.com> Date: Sun, 19 Apr 2020 13:18:21 -0600 Subject: [PATCH 7/8] Final before animation --- css/index.css | 31 +++++++++++++++++++++++++++++++ index.html | 6 +++--- less/home-page.less | 1 + less/navigation.less | 33 ++++++++++++++++++++++++++++++++- 4 files changed, 67 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index ebf9a804c0..1c6161eeca 100644 --- a/css/index.css +++ b/css/index.css @@ -184,6 +184,36 @@ img { width: 100%; margin: 0 auto; } +.main-nav .nav-container { + display: flex; + justify-content: space-between; + align-items: baseline; + width: 80%; +} +@media (max-width: 500px) { + .main-nav .nav-container { + flex-wrap: wrap; + text-align: center; + } +} +.main-nav .nav-container .big-txt { + width: 100%; + flex-basis: 100%; + margin: 15px 0; +} +.main-nav .nav-container .mnu-link { + display: flex; + justify-content: space-around; + width: 40%; + font-size: 1.6rem; +} +@media (max-width: 500px) { + .main-nav .nav-container .mnu-link { + width: 100%; + flex-basis: 100%; + justify-content: space-between; + } +} .footer { width: 100%; border-top: 2px dashed #b3b2b2; @@ -297,6 +327,7 @@ img { border-radius: 25px; width: 80%; height: 45px; + cursor: pointer; } @media (max-width: 500px) { .home .content-pick .destination .btn { diff --git a/index.html b/index.html index 6aa7be12ec..6d017e36fd 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,9 @@
-
-

Fun Bus

-