From 834d45161be0cb3c9a4ca35320971fa0d1e4ec37 Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Sun, 24 May 2020 00:49:59 -0700 Subject: [PATCH 1/2] added nav header mixins --- css/index.css | 282 ++++++++++++++++++++++++++++++++++++++++++- index.html | 22 +++- less/home-page.less | 19 ++- less/index.less | 8 ++ less/mixins.less | 18 ++- less/navigation.less | 32 ++++- less/variables.less | 7 +- 7 files changed, 379 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index e764f2b01f..dbe7ba44d2 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,281 @@ -/* 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; +} +.navigation { + padding-right: 1%; + padding-top: 30px; + padding-bottom: 30px; + border-bottom: 2px dashed #C0C0C0; +} +.navigation .nav { + width: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + max-width: 800px; +} +.navigation .nav .nav-items { + display: flex; + justify-content: space-between; + align-items: center; + width: 40%; +} +.navigation .nav .nav-items a { + text-decoration: none; + font-size: 1.6rem; + font-family: 'Roboto', sans-serif; + color: #212529; +} +.navigation .nav .nav-items a:hover { + color: #17A2B8; +} +.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 { + margin: 0 auto; + border-bottom: 2px dashed #C0C0C0; + padding-bottom: 10px; +} +.home .header h2 { + padding-top: 30px; +} +.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; +} +.home .content-pick .destination .btn { + background-color: #17A2B8; + border-radius: 10px; + color: white; + display: flex; + flex-wrap: wrap; + font-size: 1.4rem; + width: 80%; + height: 15%; + justify-content: center; + align-items: center; +} +.home .content-pick .destination .btn:hover { + background-color: white; + color: #17A2B8; + border: solid 1px #17A2B8; +} diff --git a/index.html b/index.html index bb8663b768..8de84ac719 100644 --- a/index.html +++ b/index.html @@ -15,10 +15,26 @@ +
+ +
- - -
+ + +
+
+ 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..75cdcb89f8 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,13 +1,20 @@ .home { + .header { + margin: 0 auto; + border-bottom: 2px dashed @silver; + padding-bottom: 10px; + h2 { + padding-top: 30px; + } + } + .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; - - .text-content { width: 48%; padding-right: 1%; @@ -56,6 +63,14 @@ .destination { width: 30%; margin-bottom: 30px; + .btn { + .btn(@eastern-blue, 10px); + } + .btn:hover { + background-color: white; + color: @eastern-blue; + border: solid 1px @eastern-blue; + } } } }// home \ No newline at end of file diff --git a/less/index.less b/less/index.less index c113ca2c46..8145c99f92 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/mixins.less b/less/mixins.less index 2d5c603558..1a40fd9d8b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,17 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +@button-bg: @eastern-blue; + +.btn(@background, @border-radius) { + background-color: @background; + border-radius: @border-radius; + color: white; + display: flex; + flex-wrap: wrap; + font-size: 1.4rem; + width: 80%; + height: 15%; + justify-content: center; + align-items: center; +} + diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..8968aa1274 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,31 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +.navigation { + padding-right: 1%; + padding-top: 30px; + padding-bottom: 30px; + border-bottom: 2px dashed @silver; + .nav{ + width: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + max-width: 800px; + .nav-items { + display: flex; + justify-content: space-between; + align-items: center; + width: 40%; + a { + text-decoration: none; + font-size: 1.6rem; + font-family: 'Roboto', sans-serif; + color: @shark; + } + a:hover { + color: @eastern-blue; + } + } + } + } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..e65a4ac42a 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 +@media(max-width: 500px) { + +} \ No newline at end of file From 732bfac9117bbaa35b86a6b458484490435e79e5 Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Sun, 24 May 2020 20:35:21 -0700 Subject: [PATCH 2/2] mobile design --- css/index.css | 126 ++++++++++++++++++++++++++++++++++++++++++- index.html | 5 +- less/global.less | 7 +++ less/home-page.less | 77 ++++++++++++++++++++++++-- less/mixins.less | 1 + less/navigation.less | 26 ++++++++- less/variables.less | 4 +- 7 files changed, 233 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index dbe7ba44d2..eb006e2d07 100644 --- a/css/index.css +++ b/css/index.css @@ -167,6 +167,15 @@ img { max-width: 800px; width: 100%; margin: 0 auto; + padding-left: 20px; + padding-right: 20px; +} +@media only screen and (max-width: 500px) { + .container { + padding-left: 0; + padding-right: 0; + width: 100%; + } } .navigation { padding-right: 1%; @@ -174,13 +183,31 @@ img { padding-bottom: 30px; border-bottom: 2px dashed #C0C0C0; } +@media only screen and (max-width: 500px) { + .navigation { + padding-bottom: 5px; + } +} .navigation .nav { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; - max-width: 800px; + max-width: 780px; +} +@media only screen and (max-width: 500px) { + .navigation .nav { + display: flex; + flex-direction: column; + align-items: center; + } +} +@media only screen and (max-width: 500px) { + .navigation .nav h1 { + font-size: 3rem; + font-weight: 550; + } } .navigation .nav .nav-items { display: flex; @@ -188,6 +215,16 @@ img { align-items: center; width: 40%; } +@media only screen and (max-width: 500px) { + .navigation .nav .nav-items { + width: 100%; + display: flex; + justify-content: space-evenly; + padding-top: 15px; + padding-bottom: 5px; + font-weight: 600; + } +} .navigation .nav .nav-items a { text-decoration: none; font-size: 1.6rem; @@ -216,23 +253,69 @@ img { .home .header h2 { padding-top: 30px; } +@media only screen and (max-width: 500px) { + .home .header p { + font-size: 1.4rem; + font-weight: 600; + } +} +@media only screen and (max-width: 500px) { + .home .header { + width: 90%; + display: flex; + flex-direction: column; + } +} .home .content-section { margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } +@media only screen and (max-width: 500px) { + .home .content-section { + width: 90%; + margin: 0 auto; + padding-top: 30px; + flex-direction: column; + align-items: center; + } +} .home .content-section .text-content { width: 48%; padding-right: 1%; } +@media only screen and (max-width: 500px) { + .home .content-section .text-content { + width: 100%; + padding-right: 0%; + } +} +@media only screen and (max-width: 500px) { + .home .content-section .text-content p { + font-size: 1.4rem; + font-weight: 600; + } +} .home .content-section .img-content { width: 48%; padding-left: 1%; } +@media only screen and (max-width: 500px) { + .home .content-section .img-content { + width: 100%; + padding-left: 0%; + } +} .home .content-section .img-content img { + width: 100%; border-radius: 10px; } +@media only screen and (max-width: 500px) { + .home .content-section:nth-child(3) { + flex-direction: column-reverse; + } +} .home .inverse-content { padding-bottom: 30px; border-bottom: 2px dashed #C0C0C0; @@ -249,6 +332,18 @@ img { width: 75%; margin: 0 auto 30px; } +@media only screen and (max-width: 500px) { + .home .content-destination { + width: 90%; + padding-top: 30px; + } +} +@media only screen and (max-width: 500px) { + .home .content-destination p { + font-size: 1.4rem; + font-weight: 600; + } +} .home .content-destination img { border-radius: 10px; } @@ -258,10 +353,30 @@ img { display: flex; justify-content: space-between; } +@media only screen and (max-width: 500px) { + .home .content-pick { + width: 90%; + margin: 0 auto; + flex-direction: column; + } +} .home .content-pick .destination { width: 30%; margin-bottom: 30px; } +@media only screen and (max-width: 500px) { + .home .content-pick .destination { + width: 100%; + padding-left: 40px; + padding-right: 30px; + } +} +@media only screen and (max-width: 500px) { + .home .content-pick .destination p { + font-size: 1.4rem; + font-weight: 600; + } +} .home .content-pick .destination .btn { background-color: #17A2B8; border-radius: 10px; @@ -273,6 +388,15 @@ img { height: 15%; justify-content: center; align-items: center; + border: solid 1px #17A2B8; +} +@media only screen and (max-width: 500px) { + .home .content-pick .destination .btn { + width: 100%; + height: 45px; + font-size: 1.8rem; + font-weight: 600; + } } .home .content-pick .destination .btn:hover { background-color: white; diff --git a/index.html b/index.html index 8de84ac719..fd41db02a5 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Fun Bus Travel Agency - Solution + @@ -16,8 +17,8 @@
-