diff --git a/.DS_Store b/.DS_Store index faa2d1e803..1c6617e4c9 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/css/index.css b/css/index.css index e764f2b01f..cee53003c6 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,340 @@ -/* 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: space-between; + width: 100%; + margin: 0 auto; + border-bottom: 2px dotted black; +} +@media (max-width: 600px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } +} +nav .logo { + width: 40%; + margin: auto 0 auto 6%; +} +nav .links { + width: 40%; + display: flex; + justify-content: space-evenly; + margin: auto 0; + font-size: 1.3rem; +} +@media (max-width: 600px) { + nav .links { + justify-content: space-between; + width: 70%; + } +} +nav a { + text-decoration: none; + color: black; +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #ffebcd; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +.btn { + background-color: #17a2b8; + margin: 5% 0; + cursor: pointer; + width: 15rem; + font-size: 2rem; + border-radius: 10px; + color: white; + padding: 3%; + text-align: center; +} +@media (max-width: 600px) { + .btn { + width: 40rem; + text-align: center; + display: flex; + justify-content: center; + margin: auto; + } +} +.btn:hover { + background-color: pink; +} +@media (max-width: 600px) { + .home { + display: flex; + flex-direction: column; + align-items: center; + width: 80%; + } +} +.home .content-section { + margin: 30px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +@media (max-width: 600px) { + .home .content-section { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } +} +.home .content-section .text-content { + width: 48%; + padding-right: 1%; +} +@media (max-width: 600px) { + .home .content-section .text-content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin: 5% 0; + } +} +.home .content-section .img-content { + width: 48%; + padding-left: 1%; +} +@media (max-width: 600px) { + .home .content-section .img-content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } +} +.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; +} +@media (max-width: 600px) { + .home .content-destination { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } +} +.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 (max-width: 600px) { + .home .content-pick { + flex-direction: column; + align-items: center; + width: 100%; + } +} +.home .content-pick .destination { + width: 30%; + margin-bottom: 30px; +} +@media (max-width: 600px) { + .home .content-pick .destination { + text-align: center; + width: 100%; + } +} diff --git a/index.html b/index.html index bb8663b768..e522a9de16 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,121 @@ - + - - - Fun Bus Travel Agency - Solution + + - - + Fun Bus Travel Agency - Solution - - + + - + + + + - - -
- -
-
-

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

Welcome to the fun bus

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus + incidunt inventore autem excepturi? Vel eaque corrupti, fuga vero + facilis inventore unde possimus tenetur nihil! Repellat delectus + soluta blanditiis distinctio. Nulla. +

+
+
+
+

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

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

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/dist/footer.css b/less/dist/footer.css new file mode 100644 index 0000000000..7b69625685 --- /dev/null +++ b/less/dist/footer.css @@ -0,0 +1,28 @@ +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +:hover { + background-color: pink; + color: yellow; +} +.btn { + display: block; + background-color: green; + margin: 0 10px 20px; + cursor: pointer; + width: 200px; + height: 45px; + font-size: 2rem; + border-radius: 10px; + color: white; +} + +/*# sourceMappingURL=footer.css.map */ diff --git a/less/dist/footer.css.map b/less/dist/footer.css.map new file mode 100644 index 0000000000..6205462a11 --- /dev/null +++ b/less/dist/footer.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["footer.less"],"names":[],"mappings":"AAAA;EACE,WAAA;EACA,6BAAA;EACA,mBAAA;;AAHF,OAKE;EACE,kBAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;;AAmBD;EACC,sBAAA;EACA,aAAA;;AAEF;EAdA,cAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,mBAAA;EACA,YAAA","sourcesContent":[".footer {\n width: 100%;\n border-top: 2px dashed silver;\n background: #FFEBCD;\n\n p {\n text-align: center;\n color: #212529;\n font-size: 1.6rem;\n padding: 20px;\n }\n}\n\n\n@bg-color:yellow;\n@font-color:pink;\n\n.custom-btn(@bg-color:#008080, @width:200px, @font-color:white){\n display: block;\n background-color: @bg-color;\n margin: 0 10px 20px;\n cursor: pointer;\n width: @width;\n height: 45px;\n font-size: 2rem;\n border-radius: 10px;\n color:@font-color;\n}\n &:hover{\n background-color:@font-color;\n color:@bg-color;\n }\n .btn{\n .custom-btn(green, 200px, white);\n }\n"],"file":"footer.css"} \ No newline at end of file diff --git a/less/dist/footer.min.css b/less/dist/footer.min.css new file mode 100644 index 0000000000..827fb81d7e --- /dev/null +++ b/less/dist/footer.min.css @@ -0,0 +1,2 @@ +.footer{width:100%;border-top:2px dashed silver;background:#FFEBCD}.footer p{text-align:center;color:#212529;font-size:1.6rem;padding:20px}:hover{background-color:pink;color:#ff0}.btn{display:block;background-color:green;margin:0 10px 20px;cursor:pointer;width:200px;height:45px;font-size:2rem;border-radius:10px;color:#fff} +/*# sourceMappingURL=footer.min.css.map */ diff --git a/less/dist/footer.min.css.map b/less/dist/footer.min.css.map new file mode 100644 index 0000000000..4ccc33c64b --- /dev/null +++ b/less/dist/footer.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["footer.less"],"names":[],"mappings":"AAAA,QACE,MAAA,KACA,WAAA,IAAA,OAAA,OACA,WAAA,QAHF,UAMI,WAAA,OACA,MAAA,QACA,UAAA,OACA,QAAA,KAmBD,OACC,iBAAA,KACA,MAAA,KAEF,KAdA,QAAA,MACA,iBAAA,MACA,OAAA,EAAA,KAAA,KACA,OAAA,QACA,MAAA,MACA,OAAA,KACA,UAAA,KACA,cAAA,KACA,MAAA","file":"footer.min.css","sourcesContent":[".footer {\n width: 100%;\n border-top: 2px dashed silver;\n background: #FFEBCD;\n\n p {\n text-align: center;\n color: #212529;\n font-size: 1.6rem;\n padding: 20px;\n }\n}\n\n\n@bg-color:yellow;\n@font-color:pink;\n\n.custom-btn(@bg-color:#008080, @width:200px, @font-color:white){\n display: block;\n background-color: @bg-color;\n margin: 0 10px 20px;\n cursor: pointer;\n width: @width;\n height: 45px;\n font-size: 2rem;\n border-radius: 10px;\n color:@font-color;\n}\n &:hover{\n background-color:@font-color;\n color:@bg-color;\n }\n .btn{\n .custom-btn(green, 200px, white);\n }\n"]} \ No newline at end of file diff --git a/less/dist/index.css b/less/dist/index.css new file mode 100644 index 0000000000..b6cfa95fcb --- /dev/null +++ b/less/dist/index.css @@ -0,0 +1,265 @@ +/* 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: space-between; + width: 100%; + margin: 0 auto; + border-bottom: 2px dotted black; +} +nav .logo { + width: 40%; + margin: auto 0 auto 6%; +} +nav .links { + width: 40%; + display: flex; + justify-content: space-evenly; + margin: auto 0; + font-size: 1.3rem; +} +nav a { + text-decoration: none; +} +.footer { + width: 100%; + border-top: 2px dashed silver; + background: #FFEBCD; +} +.footer p { + text-align: center; + color: #212529; + font-size: 1.6rem; + padding: 20px; +} +:hover { + background-color: pink; + color: yellow; +} +.btn { + display: block; + background-color: green; + margin: 0 10px 20px; + cursor: pointer; + width: 200px; + height: 45px; + font-size: 2rem; + border-radius: 10px; + color: white; +} +.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; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/less/dist/index.css.map b/less/dist/index.css.map new file mode 100644 index 0000000000..957b7e14c1 --- /dev/null +++ b/less/dist/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["reset.less","global.less","navigation.less","footer.less","home-page.less"],"names":[],"mappings":";;;;AAKA;AAAM;AAAM;AAAK;AAAM;AAAQ;AAAQ;AACvC;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAG;AAAY;AACvC;AAAG;AAAM;AAAS;AAAS;AAAK;AAAM;AACtC;AAAK;AAAK;AAAI;AAAK;AAAK;AAAK;AAAG;AAAG;AACnC;AAAO;AAAQ;AAAQ;AAAK;AAAK;AAAI;AACrC;AAAG;AAAG;AAAG;AACT;AAAI;AAAI;AAAI;AAAI;AAAI;AACpB;AAAU;AAAM;AAAO;AACvB;AAAO;AAAS;AAAO;AAAO;AAAO;AAAI;AAAI;AAC7C;AAAS;AAAO;AAAQ;AAAS;AACjC;AAAQ;AAAY;AAAQ;AAAQ;AACpC;AAAM;AAAK;AAAQ;AAAM;AAAS;AAClC;AAAM;AAAM;AAAO;EAClB,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,aAAA;EACA,wBAAA;;;AAGD;AAAS;AAAO;AAAS;AAAY;AACrC;AAAQ;AAAQ;AAAQ;AAAM;AAAK;EAClC,cAAA;;AAED;EACC,cAAA;;AAED;AAAI;EACH,gBAAA;;AAED;AAAY;EACX,YAAA;;AAED,UAAU;AAAS,UAAU;AAC7B,CAAC;AAAS,CAAC;EACV,SAAS,EAAT;EACA,aAAA;;AAED;EACC,yBAAA;EACA,iBAAA;;AC9CD;EACE,sBAAA;;AAGF;EACE,gBAAA;;AAGF;AAAM;EACJ,aAAa,oBAAb;;AAGF;AAAI;AAAI;AAAI;AAAI;EACd,aAAa,uBAAb;;AAGF;EACE,eAAA;;AAGF;EACE,iBAAA;EACA,oBAAA;;AAGF;EACE,iBAAA;EACA,oBAAA;;AAGF;EACE,gBAAA;EACA,iBAAA;EACA,oBAAA;;AAGF;EACE,eAAA;EACA,YAAA;;AAGF;EACE,gBAAA;EACA,WAAA;EACA,cAAA;;AC1CF;EACI,aAAA;EACA,8BAAA;EACA,WAAA;EACA,cAAA;EACA,+BAAA;;AALJ,GAOI;EACI,UAAA;EACA,sBAAA;;AATR,GAYI;EACI,UAAA;EACA,aAAA;EACA,6BAAA;EACA,cAAA;EACA,iBAAA;;AAjBR,GAoBI;EACI,qBAAA;;ACvBR;EACE,WAAA;EACA,6BAAA;EACA,mBAAA;;AAHF,OAKE;EACE,kBAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;;AAkBD;EACC,sBAAA;EACA,aAAA;;AAEF;EAdA,cAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;;ACzBF,KAEE;EACE,cAAA;EACA,aAAA;EACA,eAAA;EACA,8BAAA;;AANJ,KAEE,iBAQE;EACE,UAAA;EACA,iBAAA;;AAZN,KAEE,iBAaE;EACE,UAAA;EACA,gBAAA;;AAjBN,KAEE,iBAaE,aAIE;EACE,mBAAA;;AApBR,KAyBE;EACE,oBAAA;EACA,iCAAA;;AA3BJ,KAyBE,iBAIE;EACE,gBAAA;EACA,gBAAA;;AA/BN,KAyBE,iBASE;EACE,iBAAA;EACA,eAAA;;AApCN,KAwCE;EACE,UAAA;EACA,mBAAA;;AA1CJ,KAwCE,qBAIE;EACE,mBAAA;;AA7CN,KAiDE;EACE,iBAAA;EACA,8BAAA;EACA,aAAA;EACA,8BAAA;;AArDJ,KAiDE,cAME;EACE,UAAA;EACA,mBAAA","sourcesContent":["/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}","* {\n box-sizing: border-box;\n}\n\nhtml {\n font-size: 62.5%;\n}\n\nhtml, body {\n font-family: 'Roboto', sans-serif;\n}\n\nh1, h2, h3, h4, h5 {\n font-family: 'Indie Flower', cursive;\n}\n\nh1 {\n font-size: 4rem;\n}\n\nh2 {\n font-size: 3.2rem;\n padding-bottom: 10px;\n}\n\nh4 {\n font-size: 2.5rem;\n padding-bottom: 10px;\n}\n\np {\n line-height: 1.5;\n font-size: 1.6rem;\n padding-bottom: 10px;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\n.container {\n max-width: 800px;\n width: 100%;\n margin: 0 auto;\n}\n","// Navigation Styles here\n\nnav {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin: 0 auto;\n border-bottom: 2px dotted black;\n\n .logo {\n width: 40%;\n margin: auto 0 auto 6%;\n }\n\n .links {\n width: 40%;\n display: flex;\n justify-content: space-evenly;\n margin: auto 0;\n font-size: 1.3rem;\n }\n\n a {\n text-decoration: none;\n }\n}",".footer {\n width: 100%;\n border-top: 2px dashed silver;\n background: #FFEBCD;\n\n p {\n text-align: center;\n color: #212529;\n font-size: 1.6rem;\n padding: 20px;\n }\n}\n\n\n\n\n.custom-btn(@bg-color:#008080, @width:200px, @font-color:white){\n display: block;\n background-color: @bg-color;\n margin: 0 10px 20px;\n cursor: pointer;\n width: @width;\n height: 45px;\n font-size: 2rem;\n border-radius: 10px;\n color:@font-color;\n}\n &:hover{\n background-color:@font-color;\n color:@bg-color;\n }\n .btn{\n .custom-btn(green, 200px, white);\n }\n",".home {\n\n .content-section {\n margin: 30px 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n \n \n .text-content {\n width: 48%;\n padding-right: 1%;\n }\n\n .img-content {\n width: 48%;\n padding-left: 1%;\n\n img {\n border-radius: 10px;\n }\n }\n }\n\n .inverse-content {\n padding-bottom: 30px;\n border-bottom: 2px dashed @navigation-border;\n\n .text-content {\n padding-left: 1%;\n padding-right: 0;\n }\n\n .img-content {\n padding-right: 1%;\n padding-left: 0;\n }\n }\n\n .content-destination {\n width: 75%;\n margin: 0 auto 30px;\n\n img {\n border-radius: 10px;\n }\n }\n\n .content-pick {\n padding-top: 30px;\n border-top: 2px dashed @navigation-border;\n display: flex;\n justify-content: space-between;\n\n .destination {\n width: 30%;\n margin-bottom: 30px;\n }\n }\n}// home\n\n\n"],"file":"index.css"} \ No newline at end of file diff --git a/less/dist/index.min.css b/less/dist/index.min.css new file mode 100644 index 0000000000..f5838371ac --- /dev/null +++ b/less/dist/index.min.css @@ -0,0 +1,2 @@ +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}.container,nav{width:100%;margin:0 auto}h2,h4,p{padding-bottom:10px}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}html{font-size:62.5%}body,html{font-family:Roboto,sans-serif}h1,h2,h3,h4,h5{font-family:'Indie Flower',cursive}h1{font-size:4rem}h2{font-size:3.2rem}h4{font-size:2.5rem}p{line-height:1.5;font-size:1.6rem}img{max-width:100%;height:auto}.container{max-width:800px}nav{display:flex;justify-content:space-between;border-bottom:2px dotted #000}nav .logo{width:40%;margin:auto 0 auto 6%}nav .links{width:40%;display:flex;justify-content:space-evenly;margin:auto 0;font-size:1.3rem}nav a{text-decoration:none}.footer{width:100%;border-top:2px dashed silver;background:#FFEBCD}.footer p{text-align:center;color:#212529;font-size:1.6rem;padding:20px}:hover{background-color:pink;color:#ff0}.btn{display:block;background-color:green;margin:0 10px 20px;cursor:pointer;width:200px;height:45px;font-size:2rem;border-radius:10px;color:#fff}.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 silver}.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 silver;display:flex;justify-content:space-between}.home .content-pick .destination{width:30%;margin-bottom:30px} +/*# sourceMappingURL=index.min.css.map */ diff --git a/less/dist/index.min.css.map b/less/dist/index.min.css.map new file mode 100644 index 0000000000..c10e6d60e4 --- /dev/null +++ b/less/dist/index.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["reset.less","global.less","navigation.less","footer.less","home-page.less"],"names":[],"mappings":"AAOA,EAAG,KAAM,QAAS,QAFK,OASvB,QAAS,MAGG,MAPZ,EAH2B,IADA,WADrB,KASU,OADT,QAHE,OAHuB,KAAM,KAI9B,GAHR,IAMwB,QANnB,IAHO,IAMZ,GAAI,GAHM,GAMuB,MAFjC,SAGQ,WAAR,OAAoB,OAHV,KANV,GAAI,GAAI,GAAI,GAAI,GAAI,GASQ,OAAQ,OAVpC,KAKM,EALiC,OAGzB,IAAK,IAAK,IAIR,MAAO,OADH,GAMd,KADN,KAAM,IAXyB,OAMnB,GAKD,OAVa,EAAe,IAEV,EAQV,KARa,EAAG,KAQV,QAPzB,MAJiB,KAIV,OAAQ,OAAQ,IAOW,QAPN,IAI5B,MAAgB,MAA6B,GAAtB,MAAkB,GAAX,MAI9B,KAJqC,GAJJ,GAC9B,EACa,GAFqB,IAQlB,MAClB,OAAA,EACA,QAAA,EACA,OAAA,EAEA,KAAA,QACA,eAAA,SCkBD,WCvCA,IDyCE,MAAA,KCrCE,OAAA,EAAA,KDcJ,GAKA,GAKA,EAGE,eAAA,KDPF,QAAS,MAAO,QAAS,WAAY,OACrC,OAAQ,OAAQ,OAAQ,KAAM,IAAK,QAClC,QAAA,MAED,KACC,YAAA,EAED,GAAI,GACH,WAAA,KAED,WAAY,EACX,OAAA,KAEkB,iBAAnB,kBACU,QAAV,SACC,QAAS,GACT,QAAA,KAED,MACC,gBAAA,SACA,eAAA,EC9CD,EACE,WAAA,WAGF,KACE,UAAA,MAGI,KAAN,KACE,YAAa,OAAA,WAGf,GAAI,GAAI,GAAI,GAAI,GACd,YAAa,eAAA,QAGf,GACE,UAAA,KAGF,GACE,UAAA,OAIF,GACE,UAAA,OAIF,EACE,YAAA,IACA,UAAA,OAIF,IACE,UAAA,KACA,OAAA,KAGF,WACE,UAAA,MCxCF,IACI,QAAA,KACA,gBAAA,cAGA,cAAA,IAAA,OAAA,KALJ,UAQQ,MAAA,IACA,OAAA,KAAA,EAAA,KAAA,GATR,WAaQ,MAAA,IACA,QAAA,KACA,gBAAA,aACA,OAAA,KAAA,EACA,UAAA,OAjBR,MAqBQ,gBAAA,KCvBR,QACE,MAAA,KACA,WAAA,IAAA,OAAA,OACA,WAAA,QAHF,UAMI,WAAA,OACA,MAAA,QACA,UAAA,OACA,QAAA,KAkBD,OACC,iBAAA,KACA,MAAA,KAEF,KAdA,QAAA,MACA,iBAAA,MACA,OAAA,EAAA,KAAA,KACA,OAAA,QACA,MAAA,MACA,OAAA,KACA,UAAA,KACA,cAAA,KACA,MAAA,KCzBF,uBAGI,OAAA,KAAA,EACA,QAAA,KACA,UAAA,KACA,gBAAA,cANJ,qCAWM,MAAA,IACA,cAAA,GAZN,oCAgBM,MAAA,IACA,aAAA,GAjBN,wCAoBQ,cAAA,KApBR,uBA0BI,eAAA,KACA,cAAA,IAAA,OAAA,OA3BJ,qCA8BM,aAAA,GACA,cAAA,EA/BN,oCAmCM,cAAA,GACA,aAAA,EApCN,2BAyCI,MAAA,IACA,OAAA,EAAA,KAAA,KA1CJ,+BA6CM,cAAA,KA7CN,oBAkDI,YAAA,KACA,WAAA,IAAA,OAAA,OACA,QAAA,KACA,gBAAA,cArDJ,iCAwDM,MAAA,IACA,cAAA","file":"index.min.css","sourcesContent":["/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}","* {\n box-sizing: border-box;\n}\n\nhtml {\n font-size: 62.5%;\n}\n\nhtml, body {\n font-family: 'Roboto', sans-serif;\n}\n\nh1, h2, h3, h4, h5 {\n font-family: 'Indie Flower', cursive;\n}\n\nh1 {\n font-size: 4rem;\n}\n\nh2 {\n font-size: 3.2rem;\n padding-bottom: 10px;\n}\n\nh4 {\n font-size: 2.5rem;\n padding-bottom: 10px;\n}\n\np {\n line-height: 1.5;\n font-size: 1.6rem;\n padding-bottom: 10px;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\n.container {\n max-width: 800px;\n width: 100%;\n margin: 0 auto;\n}\n","// Navigation Styles here\n\nnav {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin: 0 auto;\n border-bottom: 2px dotted black;\n\n .logo {\n width: 40%;\n margin: auto 0 auto 6%;\n }\n\n .links {\n width: 40%;\n display: flex;\n justify-content: space-evenly;\n margin: auto 0;\n font-size: 1.3rem;\n }\n\n a {\n text-decoration: none;\n }\n}",".footer {\n width: 100%;\n border-top: 2px dashed silver;\n background: #FFEBCD;\n\n p {\n text-align: center;\n color: #212529;\n font-size: 1.6rem;\n padding: 20px;\n }\n}\n\n\n\n\n.custom-btn(@bg-color:#008080, @width:200px, @font-color:white){\n display: block;\n background-color: @bg-color;\n margin: 0 10px 20px;\n cursor: pointer;\n width: @width;\n height: 45px;\n font-size: 2rem;\n border-radius: 10px;\n color:@font-color;\n}\n &:hover{\n background-color:@font-color;\n color:@bg-color;\n }\n .btn{\n .custom-btn(green, 200px, white);\n }\n",".home {\n\n .content-section {\n margin: 30px 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n \n \n .text-content {\n width: 48%;\n padding-right: 1%;\n }\n\n .img-content {\n width: 48%;\n padding-left: 1%;\n\n img {\n border-radius: 10px;\n }\n }\n }\n\n .inverse-content {\n padding-bottom: 30px;\n border-bottom: 2px dashed @navigation-border;\n\n .text-content {\n padding-left: 1%;\n padding-right: 0;\n }\n\n .img-content {\n padding-right: 1%;\n padding-left: 0;\n }\n }\n\n .content-destination {\n width: 75%;\n margin: 0 auto 30px;\n\n img {\n border-radius: 10px;\n }\n }\n\n .content-pick {\n padding-top: 30px;\n border-top: 2px dashed @navigation-border;\n display: flex;\n justify-content: space-between;\n\n .destination {\n width: 30%;\n margin-bottom: 30px;\n }\n }\n}// home\n\n\n"]} \ No newline at end of file diff --git a/less/dist/mixins.css b/less/dist/mixins.css new file mode 100644 index 0000000000..488957c35a --- /dev/null +++ b/less/dist/mixins.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=mixins.css.map */ diff --git a/less/dist/mixins.css.map b/less/dist/mixins.css.map new file mode 100644 index 0000000000..f2ef552fb6 --- /dev/null +++ b/less/dist/mixins.css.map @@ -0,0 +1 @@ +{"version":3,"names":[],"mappings":"","sources":["mixins.less"],"sourcesContent":["// Mixins in here\n\n"],"file":"mixins.css"} \ No newline at end of file diff --git a/less/dist/mixins.min.css b/less/dist/mixins.min.css new file mode 100644 index 0000000000..69475b961a --- /dev/null +++ b/less/dist/mixins.min.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=mixins.min.css.map */ diff --git a/less/dist/mixins.min.css.map b/less/dist/mixins.min.css.map new file mode 100644 index 0000000000..e76dfccc2c --- /dev/null +++ b/less/dist/mixins.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"mixins.min.css","sourcesContent":[]} \ No newline at end of file diff --git a/less/dist/navigation.css b/less/dist/navigation.css new file mode 100644 index 0000000000..04a701bfc4 --- /dev/null +++ b/less/dist/navigation.css @@ -0,0 +1,23 @@ +nav { + display: flex; + justify-content: space-between; + width: 100%; + margin: 0 auto; + border-bottom: 2px dotted black; +} +nav .logo { + width: 40%; + margin: auto 0 auto 6%; +} +nav .links { + width: 40%; + display: flex; + justify-content: space-evenly; + margin: auto 0; + font-size: 1.3rem; +} +nav a { + text-decoration: none; +} + +/*# sourceMappingURL=navigation.css.map */ diff --git a/less/dist/navigation.css.map b/less/dist/navigation.css.map new file mode 100644 index 0000000000..404b4cd43e --- /dev/null +++ b/less/dist/navigation.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["navigation.less"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,8BAAA;EACA,WAAA;EACA,cAAA;EACA,+BAAA;;AALJ,GAOI;EACI,UAAA;EACA,sBAAA;;AATR,GAYI;EACI,UAAA;EACA,aAAA;EACA,6BAAA;EACA,cAAA;EACA,iBAAA;;AAjBR,GAoBI;EACI,qBAAA","sourcesContent":["// Navigation Styles here\n\nnav {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin: 0 auto;\n border-bottom: 2px dotted black;\n\n .logo {\n width: 40%;\n margin: auto 0 auto 6%;\n }\n\n .links {\n width: 40%;\n display: flex;\n justify-content: space-evenly;\n margin: auto 0;\n font-size: 1.3rem;\n }\n\n a {\n text-decoration: none;\n }\n}"],"file":"navigation.css"} \ No newline at end of file diff --git a/less/dist/navigation.min.css b/less/dist/navigation.min.css new file mode 100644 index 0000000000..f22ba03595 --- /dev/null +++ b/less/dist/navigation.min.css @@ -0,0 +1,2 @@ +nav{display:flex;justify-content:space-between;width:100%;margin:0 auto;border-bottom:2px dotted #000}nav .logo{width:40%;margin:auto 0 auto 6%}nav .links{width:40%;display:flex;justify-content:space-evenly;margin:auto 0;font-size:1.3rem}nav a{text-decoration:none} +/*# sourceMappingURL=navigation.min.css.map */ diff --git a/less/dist/navigation.min.css.map b/less/dist/navigation.min.css.map new file mode 100644 index 0000000000..cf073f8ba4 --- /dev/null +++ b/less/dist/navigation.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["navigation.less"],"names":[],"mappings":"AAEA,IACI,QAAA,KACA,gBAAA,cACA,MAAA,KACA,OAAA,EAAA,KACA,cAAA,IAAA,OAAA,KALJ,UAQQ,MAAA,IACA,OAAA,KAAA,EAAA,KAAA,GATR,WAaQ,MAAA,IACA,QAAA,KACA,gBAAA,aACA,OAAA,KAAA,EACA,UAAA,OAjBR,MAqBQ,gBAAA","file":"navigation.min.css","sourcesContent":["// Navigation Styles here\n\nnav {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin: 0 auto;\n border-bottom: 2px dotted black;\n\n .logo {\n width: 40%;\n margin: auto 0 auto 6%;\n }\n\n .links {\n width: 40%;\n display: flex;\n justify-content: space-evenly;\n margin: auto 0;\n font-size: 1.3rem;\n }\n\n a {\n text-decoration: none;\n }\n}"]} \ No newline at end of file diff --git a/less/dist/var.css b/less/dist/var.css new file mode 100644 index 0000000000..85afe8f9c0 --- /dev/null +++ b/less/dist/var.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=var.css.map */ diff --git a/less/dist/var.css.map b/less/dist/var.css.map new file mode 100644 index 0000000000..91845594ce --- /dev/null +++ b/less/dist/var.css.map @@ -0,0 +1 @@ +{"version":3,"names":[],"mappings":"","sources":["var.less"],"sourcesContent":["// Color assignments \n@font-color: @shark;\n@button-bg: @eastern-blue;\n@main-bg: @white;\n@navigation-border: @silver;\n@footer-bg: @sandy-beach;\n\n// Colors\n@white: #FFFFFF;\n@silver: #C0C0C0;\n@shark: #212529;\n@eastern-blue: #17A2B8;\n@sandy-beach: #FFEBCD;\n\n\n@bg-color:yellow;\n@font-color:pink;"],"file":"var.css"} \ No newline at end of file diff --git a/less/dist/var.min.css b/less/dist/var.min.css new file mode 100644 index 0000000000..86623ebeb2 --- /dev/null +++ b/less/dist/var.min.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=var.min.css.map */ diff --git a/less/dist/var.min.css.map b/less/dist/var.min.css.map new file mode 100644 index 0000000000..9b79af3ff4 --- /dev/null +++ b/less/dist/var.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"var.min.css","sourcesContent":[]} \ No newline at end of file diff --git a/less/dist/variables.css b/less/dist/variables.css new file mode 100644 index 0000000000..142ccb2646 --- /dev/null +++ b/less/dist/variables.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=variables.css.map */ diff --git a/less/dist/variables.css.map b/less/dist/variables.css.map new file mode 100644 index 0000000000..dd921e5849 --- /dev/null +++ b/less/dist/variables.css.map @@ -0,0 +1 @@ +{"version":3,"names":[],"mappings":"","sources":["variables.less"],"sourcesContent":["// Color assignments \n@font-color: @shark;\n@button-bg: @eastern-blue;\n@main-bg: @white;\n@navigation-border: @silver;\n@footer-bg: @sandy-beach;\n\n// Colors\n@white: #FFFFFF;\n@silver: #C0C0C0;\n@shark: #212529;\n@eastern-blue: #17A2B8;\n@sandy-beach: #FFEBCD;\n\n\n@bg-color:yellow;\n@font-color:pink;"],"file":"variables.css"} \ No newline at end of file diff --git a/less/dist/variables.min.css b/less/dist/variables.min.css new file mode 100644 index 0000000000..2519e7de0a --- /dev/null +++ b/less/dist/variables.min.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=variables.min.css.map */ diff --git a/less/dist/variables.min.css.map b/less/dist/variables.min.css.map new file mode 100644 index 0000000000..8396a322a1 --- /dev/null +++ b/less/dist/variables.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"variables.min.css","sourcesContent":[]} \ No newline at end of file diff --git a/less/footer.less b/less/footer.less index 71cff032e9..a8ace34021 100644 --- a/less/footer.less +++ b/less/footer.less @@ -2,11 +2,28 @@ width: 100%; border-top: 2px dashed silver; background: @sandy-beach; - + p { text-align: center; color: @font-color; font-size: 1.6rem; padding: 20px; } -} \ No newline at end of file +} + +.btn { + .custom-btn(#17a2b8, 15rem, white); + text-align: center; + + @media @phone { + width: 40rem; + text-align: center; + display: flex; + justify-content: center; + margin: auto; + } + + &:hover { + background-color: pink; + } +} diff --git a/less/home-page.less b/less/home-page.less index 5528d8a7a5..b943b02df0 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,4 +1,10 @@ .home { + @media @phone { + display: flex; + flex-direction: column; + align-items: center; + width: 80%; + } .content-section { margin: 30px 0; @@ -6,17 +12,37 @@ flex-wrap: wrap; justify-content: space-between; - - + @media @phone { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + .text-content { width: 48%; padding-right: 1%; + + @media @phone { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin: 5% 0; + } } .img-content { width: 48%; padding-left: 1%; + @media @phone { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + img { border-radius: 10px; } @@ -42,6 +68,13 @@ width: 75%; margin: 0 auto 30px; + @media @phone { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + img { border-radius: 10px; } @@ -53,9 +86,20 @@ display: flex; justify-content: space-between; + @media @phone { + flex-direction: column; + align-items: center; + width: 100%; + } + .destination { width: 30%; margin-bottom: 30px; + + @media @phone { + text-align: center; + width: 100%; + } } } -}// home \ No newline at end of file +} // home diff --git a/less/index.less b/less/index.less index c113ca2c46..0d1a040ef1 100644 --- a/less/index.less +++ b/less/index.less @@ -1 +1,13 @@ // Follow the order in the readme + +@import "variable"; +@import "mixins"; + +//General Styles Here +@import "reset"; +@import "global"; +// Components Here + +@import "navigation"; +@import "footer"; +@import "home-page"; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2d5c603558..183731fb8e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,12 @@ -// Mixins in here \ No newline at end of file +// Mixins in here + +.custom-btn(@bg-color:#008080, @width:20rem, @font-color:white) { + background-color: @bg-color; + margin: 5% 0; + cursor: pointer; + width: @width; + font-size: 2rem; + border-radius: 10px; + color: @font-color; + padding: 3%; +} diff --git a/less/navigation.less b/less/navigation.less index f89120a0f1..4835251efa 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1 +1,40 @@ -// Navigation Styles here \ No newline at end of file +// Navigation Styles here + +nav { + display: flex; + justify-content: space-between; + width: 100%; + margin: 0 auto; + border-bottom: 2px dotted black; + + @media @phone { + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + } + + .logo { + width: 40%; + margin: auto 0 auto 6%; + } + + .links { + width: 40%; + display: flex; + justify-content: space-evenly; + margin: auto 0; + font-size: 1.3rem; + + @media @phone { + justify-content: space-between; + width: 70%; + } + } + + a { + text-decoration: none; + color: black; + } +} diff --git a/less/variable.less b/less/variable.less new file mode 100644 index 0000000000..4793234f99 --- /dev/null +++ b/less/variable.less @@ -0,0 +1,15 @@ +// Color assignments +@font-color: @shark; +@button-bg: @eastern-blue; +@main-bg: @white; +@navigation-border: @silver; +@footer-bg: @sandy-beach; + +// Colors +@white: #ffffff; +@silver: #c0c0c0; +@shark: #212529; +@eastern-blue: #17a2b8; +@sandy-beach: #ffebcd; + +@phone: ~"(max-width: 600px)"; \ No newline at end of file diff --git a/less/variables.less b/less/variables.less deleted file mode 100644 index 916eb0b7e0..0000000000 --- a/less/variables.less +++ /dev/null @@ -1,14 +0,0 @@ - -// Color assignments -@font-color: @shark; -@button-bg: @eastern-blue; -@main-bg: @white; -@navigation-border: @silver; -@footer-bg: @sandy-beach; - -// Colors -@white: #FFFFFF; -@silver: #C0C0C0; -@shark: #212529; -@eastern-blue: #17A2B8; -@sandy-beach: #FFEBCD; \ No newline at end of file