diff --git a/.DS_Store b/.DS_Store index faa2d1e803..61f74776dc 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000000..ebe4ae5ff3 --- /dev/null +++ b/contact.html @@ -0,0 +1,62 @@ + + + + + + + Fun Bus Travel Agency - Solution + + + + + + + + + +
+ + +
+ +
+ main image + +
+

contact the fun Bus!

+

Please submit the form below to contact us!

+
+ +
+ +
+ +
+
+

Contact Form

+ +
+
+ + + + + +
+
+ +
+ + + + + \ No newline at end of file diff --git a/css/.DS_Store b/css/.DS_Store deleted file mode 100644 index 5008ddfcf5..0000000000 Binary files a/css/.DS_Store and /dev/null differ diff --git a/css/index.css b/css/index.css index e764f2b01f..e01ac3ae0b 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,408 @@ -/* 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; +} +@media (max-width: 500px) { + .container { + max-width: 500px; + } +} +.nav { + max-width: 800px; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + margin: 0 auto; + padding: 40px 0; +} +@media (max-width: 500px) { + .nav { + max-width: 500px; + flex-flow: column nowrap; + align-items: center; + padding: 20px 0 10px 0; + } +} +.nav nav { + margin-top: 20px; +} +.nav nav a { + margin: 0 10px; + font-size: 2rem; + text-transform: capitalize; + text-decoration: none; + color: #000; +} +.nav nav a:hover { + color: red; +} +@media (max-width: 500px) { + .nav nav a { + font-size: 1.5rem; + } +} +.nav nav .current { + color: red; +} +@media (max-width: 500px) { + .nav nav { + margin-top: 10px; + } +} +.nav .logo { + font-family: 'Indie Flower', cursive; + font-size: 5rem; + text-decoration: none; + color: #000; +} +.nav .logo:hover { + color: red; +} +.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; +} +@media (max-width: 500px) { + .home .content-section { + padding: 20px; + flex-flow: column nowrap; + align-content: center; + } +} +.home .content-section .text-content { + width: 48%; + padding-right: 1%; +} +@media (max-width: 500px) { + .home .content-section .text-content { + width: 100%; + } +} +.home .content-section .img-content { + width: 48%; + padding-left: 1%; +} +@media (max-width: 500px) { + .home .content-section .img-content { + width: 100%; + } +} +.home .content-section .img-content img { + border-radius: 10px; +} +@media (max-width: 500px) { + .home .content-section .img-content img { + min-width: 100%; + } +} +.home .inverse-content { + padding-bottom: 30px; + border-bottom: 2px dashed #C0C0C0; +} +@media (max-width: 500px) { + .home .inverse-content { + flex-flow: column-reverse nowrap; + } +} +.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; +} +@media (max-width: 500px) { + .home .content-destination { + padding: 20px; + width: 100%; + } +} +.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; +} +@media (max-width: 500px) { + .home .content-pick .destination { + width: 100%; + padding: 0 70px; + } +} +@media (max-width: 500px) { + .home .content-pick { + flex-flow: column nowrap; + } +} +.home .btn { + padding: 15px 25px; + font-size: 1.6rem; + text-align: center; + margin-top: 10px; + color: #fff; + background: #018080; + border-radius: 10px; +} +.home .btn:hover { + background-color: #01b3b3; + cursor: pointer; +} +header { + border-top: 2px dashed #C0C0C0; + display: flex; + flex-flow: column nowrap; + align-items: center; +} +header img { + margin-bottom: 20px; + max-width: 800px; +} +@media (max-width: 500px) { + header img { + max-width: 500px; + } +} +header .header-content { + width: 100%; + max-width: 800px; + padding: 20px 0; + border-bottom: 2px dashed #C0C0C0; +} +@media (max-width: 500px) { + header .header-content { + padding: 20px; + } +} +body.contact { + flex-flow: column nowrap; +} +body.contact h2 { + padding: 20px 0; +} +@media (max-width: 500px) { + body.contact h2 { + text-align: center; + } +} +form { + display: flex; + flex-flow: column nowrap; +} +@media (max-width: 500px) { + form { + padding: 20px; + } +} +form input, +form textarea { + padding: 10px 20px; + margin-bottom: 20px; + width: 50%; + border: 1px solid gray; +} +@media (max-width: 500px) { + form input, + form textarea { + width: 100%; + } +} +form input[type="submit"] { + color: #fff; + background: #018080; + border-radius: 10px; +} +form input[type="submit"]:hover { + background-color: #01b3b3; + cursor: pointer; +} diff --git a/index.html b/index.html index bb8663b768..3b8c1fc2a0 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,25 @@ - +
+ + +
+ +
+ main image + +
+

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/contact-page.less b/less/contact-page.less new file mode 100644 index 0000000000..c4612c7d34 --- /dev/null +++ b/less/contact-page.less @@ -0,0 +1,43 @@ + +body.contact { + flex-flow: column nowrap; + + h2 { + padding: 20px 0; + + @media @mobile { + text-align: center; + } + } +} + + + +form { + display: flex; + flex-flow: column nowrap; + + @media @mobile { + padding: 20px; + } + + input, textarea { + padding: 10px 20px; + margin-bottom: 20px; + width: 50%; + border: 1px solid gray; + + @media @mobile { + width: 100%; + } + } + + input[type="submit"] { + .buttonstyle(#fff,@my-btn-color,10px); + + &:hover { + background-color: lighten(@my-btn-color,10); + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/less/global.less b/less/global.less index abe21bf970..bbf8ba848b 100644 --- a/less/global.less +++ b/less/global.less @@ -43,4 +43,9 @@ img { max-width: 800px; width: 100%; margin: 0 auto; + + @media @mobile { + max-width: 500px; + + } } diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..c22d90e953 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -6,19 +6,39 @@ flex-wrap: wrap; justify-content: space-between; + @media @mobile { + padding: 20px; + flex-flow: column nowrap; + align-content: center; + + } + .text-content { width: 48%; padding-right: 1%; + + @media @mobile { + width: 100%; + } + } .img-content { width: 48%; padding-left: 1%; + @media @mobile { + width: 100%; + } + img { border-radius: 10px; + + @media @mobile { + min-width: 100%; + } } } } @@ -27,6 +47,10 @@ padding-bottom: 30px; border-bottom: 2px dashed @navigation-border; + @media @mobile { + flex-flow: column-reverse nowrap; + } + .text-content { padding-left: 1%; padding-right: 0; @@ -45,6 +69,11 @@ img { border-radius: 10px; } + + @media @mobile { + padding: 20px; + width: 100%; + } } .content-pick { @@ -56,6 +85,58 @@ .destination { width: 30%; margin-bottom: 30px; + + @media @mobile { + width: 100%; + padding: 0 70px; + } + + } + + @media @mobile { + flex-flow: column nowrap; + } + + } + + .btn { + padding: 15px 25px; + font-size: 1.6rem; + text-align: center; + margin-top: 10px; + .buttonstyle(#fff,@my-btn-color,10px); + + &:hover { + background-color: lighten(@my-btn-color,10); + cursor: pointer; } } -}// home \ No newline at end of file +}// home + +header { + border-top: 2px dashed @navigation-border; + display: flex; + flex-flow: column nowrap; + align-items: center; + + img { + margin-bottom: 20px; + max-width: 800px; + + @media @mobile { + max-width: 500px; + } + } + + .header-content { + width: 100%; + max-width: 800px; + padding: 20px 0; + border-bottom: 2px dashed @navigation-border; + + @media @mobile { + padding: 20px; + + } + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index c113ca2c46..5cccdfa3b1 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"; +@import "contact-page"; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..322bcda3c2 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,7 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.buttonstyle(@fontcolor,@buttoncolor,@borderadius) { + color: @fontcolor; + background: @buttoncolor; + border-radius: @borderadius; +} diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..20136c497c 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,57 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +.nav { + max-width: 800px; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + margin: 0 auto; + padding: 40px 0; + + @media @mobile { + max-width: 500px; + flex-flow: column nowrap; + align-items: center; + padding: 20px 0 10px 0; + } + + nav { + margin-top: 20px; + + a { + margin: 0 10px; + font-size: 2rem; + text-transform: capitalize; + text-decoration: none; + color: #000; + + &:hover { + color: red; + } + + @media @mobile { + font-size: 1.5rem; + } + } + + .current { + color: red; + } + + @media @mobile { + margin-top: 10px; + } + + } + + .logo { + font-family: 'Indie Flower', cursive; + font-size: 5rem; + text-decoration: none; + color: #000; + + &:hover { + color: red; + } + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..bef4e2ea3d 100644 --- a/less/variables.less +++ b/less/variables.less @@ -5,10 +5,15 @@ @main-bg: @white; @navigation-border: @silver; @footer-bg: @sandy-beach; +@my-btn-color: #018080; // Colors @white: #FFFFFF; @silver: #C0C0C0; @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; + +//Mobile + +@mobile: ~"(max-width: 500px)"; \ No newline at end of file