From 2a92d959ee3a9017b3036f2cf586da9ff9982a85 Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Sun, 24 May 2020 23:24:18 -0400 Subject: [PATCH 1/2] Everything but the buttons and mobile --- .vscode/settings.json | 3 + css/index.css | 256 +++++++++++++++++++++++++++++++++++++++++- index.html | 18 +++ less/home-page.less | 15 +++ less/index.less | 8 ++ less/navigation.less | 18 ++- 6 files changed, 316 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index e764f2b01f..9a2158ab5a 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,255 @@ -/* 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; + justify-content: flex-end; + align-items: center; + font-size: 1.5rem; +} +nav a { + text-decoration: none; + color: black; + padding: 2rem; + margin: 0.5rem; +} +nav a:hover { + color: #808080; +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +.home header { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + border-bottom: dashed 2px #C0C0C0; +} +.home header .funbus { + border-top: 2px dashed #C0C0C0; +} +.home header .intro { + padding: 2rem 0; +} +.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..769ab6e198 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,24 @@
+
+
+

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.

+
+
diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..dba03125b3 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,20 @@ .home { + header{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + border-bottom: dashed 2px @navigation-border; + .funbus{ + border-top: 2px dashed @navigation-border; + } + .intro{ + padding: 2rem 0; + } + } + + .content-section { margin: 30px 0; display: flex; diff --git a/less/index.less b/less/index.less index c113ca2c46..b31117081f 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,9 @@ // 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"; \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..113cf49cef 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,17 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +nav{ + display: flex; + justify-content: flex-end; + align-items: center; + font-size: 1.5rem; + a{ + text-decoration: none; + color: black; + padding: 2rem; + margin: .5rem; + &:hover{ + color: lighten(black, 50%); + } + } +} From b08be7df7dbf1fc8b96a97164c29c6d6905eca3f Mon Sep 17 00:00:00 2001 From: Tyler Taylor <61921198+TylerOliverTaylor@users.noreply.github.com> Date: Tue, 26 May 2020 18:26:33 -0400 Subject: [PATCH 2/2] Test Commit --- css/index.css | 32 ++++++++++++++++++++++++++++++++ less/home-page.less | 19 +++++++++++++++++++ less/mixins.less | 13 ++++++++++++- less/variables.less | 4 +++- 4 files changed, 66 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 9a2158ab5a..7826063e8e 100644 --- a/css/index.css +++ b/css/index.css @@ -207,12 +207,23 @@ nav a:hover { .home header .intro { padding: 2rem 0; } +@media (max-width: 500px) { + .home header { + flex-direction: column; + padding: 2rem; + } +} .home .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } +@media (max-width: 500px) { + .home .content-section { + padding: 2rem; + } +} .home .content-section .text-content { width: 48%; padding-right: 1%; @@ -249,7 +260,28 @@ nav a:hover { display: flex; justify-content: space-between; } +@media (max-width: 500px) { + .home .content-pick { + flex-direction: column; + align-items: center; + } +} .home .content-pick .destination { width: 30%; margin-bottom: 30px; } +.home .content-pick .destination .btn { + display: flex; + justify-content: center; + color: white; + font-size: 2rem; + padding: 1.5rem; + background-color: #17A2B8; + border: 1px solid lightgray; + border-radius: 1.75rem; +} +@media (max-width: 500px) { + .home .content-pick .destination { + width: 90%; + } +} diff --git a/less/home-page.less b/less/home-page.less index dba03125b3..744197bec7 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,3 +1,5 @@ + + .home { header{ @@ -12,6 +14,10 @@ .intro{ padding: 2rem 0; } + @media @tablet{ + flex-direction: column; + padding: 2rem; + } } @@ -20,6 +26,9 @@ display: flex; flex-wrap: wrap; justify-content: space-between; + @media @tablet{ + padding: 2rem; + } @@ -67,10 +76,20 @@ border-top: 2px dashed @navigation-border; display: flex; justify-content: space-between; + @media @tablet{ + flex-direction: column; + align-items: center; + } .destination { width: 30%; margin-bottom: 30px; + .btn{ + .button(); + } + @media @tablet{ + width: 90%; + } } } }// home \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..d2506add81 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,12 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.button(){ + display: flex; + justify-content: center; + color: white; + font-size: 2rem; + padding: 1.5rem; + background-color: @eastern-blue; + border: 1px solid lightgray; + border-radius: 1.75rem; + } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..192994b8df 100644 --- a/less/variables.less +++ b/less/variables.less @@ -11,4 +11,6 @@ @silver: #C0C0C0; @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; + +@tablet: ~"(max-width: 500px)"; \ No newline at end of file