diff --git a/css/index.css b/css/index.css index e764f2b01f..abca2170fa 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,275 @@ -/* 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: 90%; + margin: auto; + font-size: large; + justify-content: space-between; + text-decoration: none; + color: #000; +} + +.Nav nav { + color: #000; + text-decoration: none; + display: flex; +} + +.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; +} \ No newline at end of file diff --git a/index.html b/index.html index bb8663b768..e8ac818ba5 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,83 @@ - - - Fun Bus Travel Agency - Solution + + + + Fun Bus Travel Agency - Solution - - + + - +
+

Fun Bus

+ +
+
- - -
- -
-
-

Let's Go!

-

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

-

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

-
-
- Let's go on an adventure! -
-
-
-
- Lets have fun! -
-
-

Adventure Awaits

-

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

-

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

-
- -
-
-

Pick Your Destination

-

Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

- Second slide -
-
+
+
+

Let's Go!

+

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

+

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

+
+
+ Let 's go on an adventure! +
+
+
+
+ Lets have fun! +
+
+

Adventure Awaits

+

Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.

+

Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.

+
-
-

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!
-
-
-
+ +
+

Pick Your Destination

+

Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.

+ Second slide +
+
-
-

Copyright Fun Bus 2018

-
+
+

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!
+
+
+
+ + + + \ No newline at end of file diff --git a/less/footer.less b/less/footer.less index 71cff032e9..de6f557fd1 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,11 +1,11 @@ .footer { width: 100%; border-top: 2px dashed silver; - background: @sandy-beach; + background: #FFEBCD; p { text-align: center; - color: @font-color; + color: #212529; font-size: 1.6rem; padding: 20px; } diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..12cd30ec78 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -25,7 +25,7 @@ .inverse-content { padding-bottom: 30px; - border-bottom: 2px dashed @navigation-border; + border-bottom: 2px dashed #C0C0C03; .text-content { padding-left: 1%; @@ -49,7 +49,7 @@ .content-pick { padding-top: 30px; - border-top: 2px dashed @navigation-border; + border-top: 2px dashed #C0C0C0; display: flex; justify-content: space-between; @@ -57,5 +57,13 @@ width: 30%; margin-bottom: 30px; } + .btn{ + border: none; + background-color: #17a2bb; + padding: 14px 28px; + font-size: 16px; + cursor: pointer; + display: inline-block; + } } }// home \ No newline at end of file diff --git a/less/index.less b/less/index.less index c113ca2c46..dc0111390e 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,8 @@ // 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"; diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..1cb9dacec4 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,13 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here +.Nav{ + nav{ + color: black; + text-decoration: none; + display: flex; + } + display: flex; + width: 90%; + margin: auto; + font-size: large; + justify-content: space-between; +} diff --git a/less/variables.less b/less/variables.less index 916eb0b7e0..65fd4a18c2 100644 --- a/less/variables.less +++ b/less/variables.less @@ -11,4 +11,13 @@ @silver: #C0C0C0; @shark: #212529; @eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file +@sandy-beach: #FFEBCD; + +//* my variables //* + +@mobile (max-width:500px){ + .home{ + display: flex; + flex-direction: column; + } +} \ No newline at end of file