diff --git a/src/014-responsive-design/example/app.js b/src/014-responsive-design/example/app.js new file mode 100644 index 0000000..508c25c --- /dev/null +++ b/src/014-responsive-design/example/app.js @@ -0,0 +1,15 @@ +$(document).ready(function(){ + + $(window).on("scroll",function(){ + var wn = $(window).scrollTop(); + if(wn > 120){ + $(".menu-wrapper").removeClass('menu-no-scroll'); + $(".menu-wrapper").addClass('menu-scroll'); + } + else{ + $(".menu-wrapper").removeClass('menu-scroll'); + $(".menu-wrapper").addClass('menu-no-scroll'); + } + }); + +}); diff --git a/src/014-responsive-design/example/example.css b/src/014-responsive-design/example/example.css index 1e6ea79..c883426 100644 --- a/src/014-responsive-design/example/example.css +++ b/src/014-responsive-design/example/example.css @@ -1,5 +1,478 @@ /* Practice Layout */ +section { + padding: 20px; +} + +#mobile-menu-toggle{ + opacity: 0; + position: absolute; + top: 0; + left: 0; +} .trash{ color: black; +} + +.page-content { + padding: 0; +} + +.header { + position: relative; + height: 250px; + overflow: hidden; +} + +.menu-wrapper { + padding-left: 20px; + padding-right: 20px; + position: fixed; + width: 100%; + transition-duration: 0.3s; + box-sizing: border-box; + top: 70px; +} + +.menu-wrapper .material-icons { + font-size: 3em; + color: #FFFFFF; + margin-right: 40px; +} + +.menu { + position: fixed; + left: -250px; + width: 250px; + background-color: #FAFAFA; + height: 100vh; + top: -14px; + transition-duration: 0.5s; + padding-top: 80px; +} + +.menu ul li{ + margin-bottom: 40px; + text-transform: uppercase; + margin-left: 20px; +} + +.menu li a { + text-decoration: none; + color: #757575; +} + +.menu .material-icons{ + position: absolute; + color: #757575; + font-size: 1.3em; + right: 0; + top: 80px; +} + +#mobile-menu-toggle:checked + .menu { + left: 0; +} + +.menu ul { + margin-top: 20px; +} + +.header-background { + background-image: url(../solved/images/backgrounds/bg1.jpg); + height: 250px; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: -1; + filter: blur(3px); +} + +.menu-wrapper.menu-scroll { + background-color: #E91E63; + top: 0; + z-index: 100; + box-shadow: 0 2px 5px rgba(0,0,0,0.5); + padding: 10px; +} + +.header-overlay{ + background: linear-gradient(to bottom,rgba(0,0,0,.5) 0,transparent 100%); + position: absolute; + width: 100%; + height: 250px; + left: 0; + top: 0; + z-index: -1; +} + +.topnav { + margin: 50px 20px; + padding: 0; +} + +.breadcrumbs li, .breadcrumbs, .arrows { + display: inline-block; +} + +.breadcrumbs { + line-height: 30px; + float: left; +} + +.arrows { + margin-left: 20px; + vertical-align: bottom; + float: right; +} + +.breadcrumbs li:not(:last-child):after { + content: '/'; + display: inline-block; + margin-right: 3px; + margin-left: 3px; +} + +.breadcrumbs li a { + text-decoration: none; + font-weight: bold; + color: #000000; +} + +.breadcrumbs li:last-child { + opacity: 0.5; + z-index: -1; +} + +#main-image img { + width: 100%; +} + +.thumbnails { + margin-top: 20px; +} + +.thumbnails a:hover { + opacity: 0.5; +} + +span.price, h1 { + display: block; + font-size: 2em; + margin-bottom: 20px; +} + +span.price.old { + text-decoration: line-through; + opacity: 0.5; +} + +.rating { + margin-bottom: 50px; + margin-top: 50px; +} + +.rating i { + color: #448AFF; +} + +.product-info { + display: flex; + flex-direction: column; + width: 100%; + box-sizing: border-box; +} + +.description { + margin-top: 50px; + margin-bottom: 50px; +} + +.description p { + opacity: 0.5; + font-size: 1.5em; + line-height: 1.6em; +} + +.discount { + height: 500px; + padding: 0; + display: flex; + align-items: center; +} + +.discount .wrapper { + align-self: center; + display: inline-block; + margin: 0 auto; +} + +.discount h3 { + color: #FFFFFF; + font-size: 3em; + font-weight: lighter; + text-align: center; +} + +.discount a { + text-decoration: none; + text-transform: uppercase; + color: #FFFFFF; + background-color: #448AFF; + display: block; + padding: 15px; + width: 300px; + margin: 20px auto; + text-align: center; + border-radius: 2px; + box-sizing: border-box; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); +} + +.discount::before { + content: ''; + display: block; + width: 100%; + height: 500px; + background-image: url('../solved/images/backgrounds/bg2.jpg'); + position: absolute; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + z-index: -1; +} + +.dropdown { + position: relative; +} + +footer { + padding-top: 30px; + padding-bottom: 30px; +} + +footer .content { + display: none; +} + +footer input[type='checkbox'] { + position: absolute; + top: 0; + left: 0; + width: 0; + opacity: 0; +} + +footer label { + padding: 40px 50px; +} + +footer .content { + padding-left: 50px; + padding-right: 80px; +} + +footer label { + cursor: pointer; + position: relative; + width: 100%; + display: block; + color: #FFFFFF; + box-sizing: border-box; +} + +footer label::after { + content: '\E5CF'; + font-family: 'Material Icons'; + position: absolute; + right: 50px; +} + +footer input[type='checkbox']:checked + .content { + display: block; +} + +footer { + background-color: #E91E63; +} + +.content .day { + width: 70%; +} + +.content .hours { + width: 30%; + min-width: 100px; +} + +.content p { + color: #FFFFFF; + margin-bottom: 20px; + line-height: 1.5em; +} + +.content .icons, .content table { + color: #FFFFFF; + width: 100%; +} + +.content td:first-child { + padding-right: 20px; +} + +.content td { + padding-bottom: 10PX; + padding-top: 10PX; + font-weight: lighter; +} + +.content tr { + border-bottom: 1px solid #FFFFFF; +} + +.content li { + display: inline-block; + margin-bottom: 5px; +} + +ul.bottom-nav { + padding-left: 50px; + margin-top: 30px; + margin-bottom: 40px; +} + +ul.bottom-nav li { + display: inline-block; + margin-right: 10px; +} + +ul.bottom-nav a { + color: #FFFFFF; + text-decoration: none; + display: inline-block; +} + +@media (min-width: 576px) { + .menu-wrapper.menu-scroll, footer { + background-color: #448AFF; + } +} + +@media (min-width: 768px) { + .menu-wrapper.menu-scroll, footer { + background-color: #6600CC; + } + + .menu-wrapper.menu-scroll { + padding: 50px 60px 20px; + } + + .menu-toggle-icon { + display: none; + } + + .menu-close-icon { + display: none; + } + + .menu { + position: relative; + display: inline-block; + left: auto; + width: auto; + background-color: transparent; + height: auto; + top: auto; + transition-duration: 0s; + padding-top: 0; + float: right; + } + + .menu ul li { + display: inline-block; + } + + .menu ul li a { + color: #FFFFFF; + } + + .menu-wrapper { + padding: 50px 60px; + } +} + +@media (min-width: 992px) { + .menu-wrapper.menu-scroll, footer { + background-color: #FF6600; + } + + .product-info { + flex-direction: row; + margin: 0 auto; + max-width: 1200px; + } + + .thumbnails { + order: 1; + margin-right: 10px; + margin-top: 0; + } + + #main-image { + order: 2; + } + + #main-image img { + width: 600px; + } + + .description { + order: 3; + margin: 0 0 0 10px; + } + + footer { + display: flex; + flex-wrap: wrap; + padding: 50px; + } + + footer label { + padding: 0 0 40px; + } + + footer label::after { + display: none; + } + + footer .content { + display: block; + padding-left: 0; + padding-right: 40px; + margin-bottom: 50px; + } + + footer .dropdown { + width: 50%; + } + + ul.bottom-nav { + padding-left: 0; + } +} + +@media (min-width: 1200px) { + .menu-wrapper.menu-scroll, footer { + background-color: #E91E63; + } + + footer .dropdown { + width: 25%; + } } \ No newline at end of file diff --git a/src/014-responsive-design/example/index.html b/src/014-responsive-design/example/index.html index 528b64a..d73e247 100644 --- a/src/014-responsive-design/example/index.html +++ b/src/014-responsive-design/example/index.html @@ -7,11 +7,13 @@ + + @@ -31,10 +33,177 @@
- +
+
+ + + + gesture +
+
+
+
+
+ +
+ keyboard_arrow_left + keyboard_arrow_right +
+
+
+
+ +
+
+ + + +
+
+

Green Fancy Top

+ $100.000 + $50.000 +
+ star + star + star + star + star_border +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur.

+
+
+
+
+

Get 10% off on your frist order

+ Get a discount +
+
+
- - + + + + \ No newline at end of file diff --git a/src/014-responsive-design/example/reset.css b/src/014-responsive-design/example/reset.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/src/014-responsive-design/example/reset.css @@ -0,0 +1,48 @@ +/* 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; +} \ No newline at end of file