From a26ab1226177d9723b0727914feb45ff6ef2cbe3 Mon Sep 17 00:00:00 2001 From: Jennifer Vega Date: Fri, 22 May 2020 16:27:00 -0700 Subject: [PATCH 1/4] imported files in readme --- css/index.css | 228 +++++++++++++++++++++++++++++++++++++++++++++++- less/index.less | 7 ++ 2 files changed, 234 insertions(+), 1 deletion(-) 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..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"; From dec27365b6ed9678e0c8520e22e2c08ddefd56db Mon Sep 17 00:00:00 2001 From: Jennifer Vega Date: Fri, 22 May 2020 18:45:22 -0700 Subject: [PATCH 2/4] styled to match design file at desktop and mobile --- css/index.css | 46 ++++++++++++++++++++++++++++++++ index.html | 22 +++++++++++++--- less/home-page.less | 63 ++++++++++++++++++++++++++++++++++++++++++++ less/mixins.less | 10 ++++++- less/navigation.less | 6 ++++- less/variables.less | 2 +- 6 files changed, 142 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index e4c4602ce8..67d9d9ca3a 100644 --- a/css/index.css +++ b/css/index.css @@ -168,6 +168,14 @@ img { width: 100%; margin: 0 auto; } +.btn { + width: 100%; + border-radius: 15px; + background-color: teal; + color: white; + font-size: 2rem; + padding: 5px; +} .footer { width: 100%; border-top: 2px dashed silver; @@ -179,6 +187,44 @@ img { font-size: 1.6rem; padding: 20px; } +header .top { + display: flex; + justify-content: space-between; + border-bottom: 2px dashed grey; + margin-right: 5%; + margin-left: 5%; + padding: 30px; +} +header .top nav { + align-self: center; +} +header .top nav a { + text-decoration: none; + color: black; + margin-left: 10px; + margin-right: 10px; + font-size: 2rem; +} +header .bottom { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} +header .bottom img { + width: 60%; +} +header .bottom h2 { + text-align: left; + padding-top: 15px; +} +header .bottom p { + text-align: left; + width: 60%; + border-bottom: 2px dashed grey; + padding-top: 15px; + padding-bottom: 15px; +} .home .content-section { margin: 30px 0; display: flex; diff --git a/index.html b/index.html index bb8663b768..bb0c96eefb 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,21 @@ - +
+
+

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.

+
+
@@ -51,17 +65,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/home-page.less b/less/home-page.less index 5528d8a7a5..ecfd7fc073 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,68 @@ +header { + + + .top { + display:flex; + justify-content: space-between; + border-bottom: 2px dashed grey; +margin-right: 5%; +margin-left: 5%; +padding: 30px; + +@media @mobile { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} + + + nav { +align-self: center; + a { + text-decoration: none; + color: black; + margin-left: 10px; + margin-right: 10px; + font-size: 2rem; + } + } + } +.bottom { + display: flex; + flex-direction:column; + justify-content: space-evenly; + align-items: center; + + + img {width: 60%;} + +h2 { + text-align: left; +padding-top: 15px;} + + p{ + text-align: left; + width: 60%; + border-bottom: 2px dashed grey; + padding-top: 15px; + padding-bottom: 15px; + } + + +} +} + + .home { + @media @mobile{ + display: flex; + flex-direction: column; + justify-comtent: space-evenly; + align-items: center; + } + .content-section { margin: 30px 0; display: flex; diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..d51401cbda 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,9 @@ -// Mixins in here \ No newline at end of file +// Mixins in here +.button (@width, @radius) { + width: @width; + border-radius: @radius; + background-color: teal; + color: white; + font-size: 2rem; + padding: 5px; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..cf5923af6e 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,5 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here +.btn { + .button(100%, 15px); + +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..c27fd086c1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,4 +1,4 @@ - +@mobile: ~ "(max-width: 500px)" // Color assignments @font-color: @shark; @button-bg: @eastern-blue; From e8f272405d667e1da966e5adf0428ffd989c07ca Mon Sep 17 00:00:00 2001 From: Jennifer Vega Date: Fri, 22 May 2020 19:20:46 -0700 Subject: [PATCH 3/4] made page responsive to mobile --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index bb0c96eefb..f30df5eb9e 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@

Welcome To Fun Bus!

-
+
From d95166e6d14a9edc97bb48be26b1a7644d6536ce Mon Sep 17 00:00:00 2001 From: Jennifer Vega Date: Fri, 22 May 2020 20:32:26 -0700 Subject: [PATCH 4/4] added viewport tag --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index f30df5eb9e..4b7b870110 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Fun Bus Travel Agency - Solution