From b53029eb87d83e8f38bd7bc0fb071aa61da3117d Mon Sep 17 00:00:00 2001 From: Alex Vargas Date: Tue, 12 May 2020 19:57:03 -0400 Subject: [PATCH 1/2] behind work will finish tomorrow. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8c6cbcf19f..6f80d03ab5 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Follow these steps for completing your project. ## Stretch Goals: * [ ] Create an animation mixin using parametric mixins * [ ] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions. -* [ ] Style the site to look good at all sizes, not just desktop and phone +* [ ] Style the site to look good at all sizes, not just desktop and phone. From 38a3d5b13b1e433df5b3ce2ace305c2f01ebbbb1 Mon Sep 17 00:00:00 2001 From: Alex Vargas Date: Wed, 13 May 2020 11:17:00 -0400 Subject: [PATCH 2/2] working on the bugs for the header and mobile footer --- .vscode/settings.json | 3 + css/index.css | 301 +++++++++++++++++++++++++++++++++++++++++- index.html | 23 +++- less/footer.less | 2 +- less/home-page.less | 93 ++++++++++++- less/index.less | 7 + less/mixins.less | 19 ++- less/navigation.less | 15 ++- less/variables.less | 5 +- 9 files changed, 460 insertions(+), 8 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..f673a71b7a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index e764f2b01f..04ef94a0d6 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,300 @@ -/* 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; +} +nav { + display: flex; + width: 40%; + justify-content: space-around; + margin: 3% 2%; + font-size: 150%; +} +@media (min-width: 500px) { + nav { + width: 90; + margin-bottom: 0%; + } +} +.home .content-top { + width: 80%; + margin: 0 auto; + flex-direction: column; + border-bottom: 2px dashed #C0C0C0; +} +.home .content-top img { + margin-bottom: 2%; +} +.home .content-top .herotext p { + margin: 80%; + max-width: 30%; +} +.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; +} +@media (min-width: 500px) { + .home { + flex-direction: column; + flex-wrap: nowrap; + width: 100%; + } + .home .img-content { + width: 100%; + order: 2; + padding-left: 0; + display: flex; + align-items: stretch; + justify-content: flex-start; + } + .home .text-content { + width: 100%; + order: 1; + padding-left: 0; + } +} +.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; + /*media 500*/ +} +.home .content-pick .destination { + width: 27%; + margin-bottom: 30px; +} +.home .content-pick .destination .btn { + padding-top: 8%; + padding-bottom: 8%; + height: auto; + width: 90%; + border-radius: 10px; + text-align: center; + font-size: 2rem; + background-color: #17A2B8; +} +@media (min-width: 500px) { + .home .content-pick .content-pick { + width: 100%; + display: flex; + flex-direction: column; + } + .home .content-pick .content-pick .destination { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + flex-wrap: wrap; + } +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 30px; +} diff --git a/index.html b/index.html index bb8663b768..40d80ec20d 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,34 @@ - + + +
+
+ +

Fun Bus

+ + +
+
+
+ +
+

Welcome To Fun Bus!

+

Traveling expedtion modren, clean webdesign blogger clean website theme website modrem. Design pretty design, travelblogger adventure Wordpress wanderlust theme blogger website expedtion theme travelblogger. Adverture fun traveler pretty design website expedition.

+
+
diff --git a/less/footer.less b/less/footer.less index 71cff032e9..77b3419448 100644 --- a/less/footer.less +++ b/less/footer.less @@ -7,6 +7,6 @@ text-align: center; color: @font-color; font-size: 1.6rem; - padding: 20px; + padding: 30px; } } \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..1a7d7a9fe9 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,49 @@ .home { + //header start + + + + .flexcorrect (center, space-between){ + flex-wrap: wrap; + border-bottom: 2px dashed @navigation-border; + + //media 500 + @media @mobile{ + flex-direction: column; + + h1 { + margin-top: 2%; + } + } +} + + + // header end + + //top content start + .content-top { + //.flexcorrect(flex-start,center); + width: 80%; + margin: 0 auto; + flex-direction: column; + border-bottom: 2px dashed @navigation-border; + img { + + margin-bottom: 2%; + } + .herotext{ + p{ + margin: 80%; + + max-width: 30%; + + } + + } + } + + //top content end .content-section { margin: 30px 0; display: flex; @@ -23,6 +67,28 @@ } } + @media @mobile { + flex-direction: column; + flex-wrap: nowrap; + width: 100%; + + .img-content { + width: 100%; + order: 2; + padding-left: 0; + .flexcorrect(stretch, flex-start); + + } + + .text-content { + width: 100%; + order: 1; + padding-left: 0; + } + + } + +/////// .inverse-content { padding-bottom: 30px; border-bottom: 2px dashed @navigation-border; @@ -54,8 +120,31 @@ justify-content: space-between; .destination { - width: 30%; + width: 27%; margin-bottom: 30px; + .btn{ + .button(); + } } + /*media 500*/ +@media @mobile { + .content-pick { + width: 100%; + display: flex; + flex-direction: column; + + + .destination { + width: 100%; + .flexcorrect(center, center); + text-align: center; + flex-direction: column; + flex-wrap: wrap; + + + } +} + } + } -}// home \ No newline at end of file +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index c113ca2c46..d1323fd3c0 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,8 @@ // Follow the order in the readme +@import "reset"; +@import "mixins"; +@import "global"; +@import "variables"; +@import "navigation"; +@import "home-page"; +@import "footer"; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..69765f2733 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,18 @@ -// Mixins in here \ No newline at end of file +// Mixins in here +.button(){ + padding-top: 8%; + padding-bottom: 8%; + height: auto; + width: 90%; + border-radius: 10px; + text-align: center; + font-size: 2rem; + background-color: @eastern-blue; +} + + +.flexcorrect (@align, @adjust){ + display: flex; + align-items: @align; + justify-content:@adjust; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..1665c4cb70 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,14 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here +nav { + display: flex; + width: 40%; + justify-content: space-around; + margin: 3% 2%; + font-size: 150%; + + +@media @mobile { + width: 90; + margin-bottom: 0%; + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..47f36d166a 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; + +//size +@mobile: ~"(min-width: 500px)"; \ No newline at end of file