├── .gitattributes ├── 01_Basic_Course ├── 02 - Intro to Sass and Responsive Design │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ └── style.scss │ └── index.html ├── 03 - Basic Website Setup │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _grid.scss │ │ │ └── _index.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ └── index.html ├── 04 - Global Styles │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _grid.scss │ │ │ └── _index.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 05 - Top Navigation │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 06 - Hero │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _index.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ └── logo-mythos.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 07 - 3-Column Features │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── logo-mythos.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 08 - Full Width Feature │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _features.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── logo-mythos.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 09 - Testimonial │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _features.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 10 - Full Width CTA │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _features.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 11 - Footer │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _features.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest └── End of Basic Course │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ ├── js │ │ └── script.js │ └── scss │ │ ├── components │ │ ├── _features.scss │ │ ├── _footer.scss │ │ ├── _fw-cta.scss │ │ ├── _fw-feature.scss │ │ ├── _hero.scss │ │ ├── _index.scss │ │ ├── _testimonial.scss │ │ └── _topnav.scss │ │ ├── globals │ │ ├── _boilerplate.scss │ │ ├── _button.scss │ │ ├── _colors.scss │ │ ├── _fullwidth.scss │ │ ├── _index.scss │ │ └── _typography.scss │ │ ├── layout │ │ ├── _index.scss │ │ └── _wrapper.scss │ │ ├── style.scss │ │ └── util │ │ ├── _breakpoints.scss │ │ ├── _fonts.scss │ │ ├── _fullwidth.scss │ │ ├── _functions.scss │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ ├── style.css │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ ├── author-1x.jpg │ ├── author-2x.jpg │ ├── author-3x.jpg │ ├── icon-asterisk.svg │ ├── icon-bell.svg │ ├── icon-payments.svg │ ├── laptop-dashboard.svg │ ├── logo-mythos-dark.svg │ ├── logo-mythos.svg │ ├── quotation-mark-teal.svg │ ├── social │ │ ├── facebook.svg │ │ ├── instagram.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 02_Premium_Course ├── 02 - Top Navigation │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 03 - Hero │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 04 - Alternating Features │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 05 - Testimonial │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 06 - Full-width CTA │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _form.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest └── End of Premium Course │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ ├── js │ │ └── script.js │ └── scss │ │ ├── components │ │ ├── _alt-feature.scss │ │ ├── _features.scss │ │ ├── _footer.scss │ │ ├── _fw-cta.scss │ │ ├── _fw-feature.scss │ │ ├── _hero.scss │ │ ├── _index.scss │ │ ├── _testimonial.scss │ │ └── _topnav.scss │ │ ├── globals │ │ ├── _boilerplate.scss │ │ ├── _button.scss │ │ ├── _colors.scss │ │ ├── _form.scss │ │ ├── _fullwidth.scss │ │ ├── _index.scss │ │ └── _typography.scss │ │ ├── layout │ │ ├── _index.scss │ │ └── _wrapper.scss │ │ ├── style.scss │ │ └── util │ │ ├── _breakpoints.scss │ │ ├── _fonts.scss │ │ ├── _fullwidth.scss │ │ ├── _functions.scss │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ ├── style.css │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ ├── author-1x.jpg │ ├── author-2x.jpg │ ├── author-3x.jpg │ ├── hero-wave.svg │ ├── icon-asterisk.svg │ ├── icon-bell.svg │ ├── icon-payments.svg │ ├── laptop-check.svg │ ├── laptop-dashboard.svg │ ├── logo-mythos-dark.svg │ ├── logo-mythos.svg │ ├── quotation-mark-teal.svg │ ├── social │ │ ├── facebook.svg │ │ ├── instagram.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── tablet-payments.svg │ ├── tablet-phone.svg │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 03_Ultimate_Course ├── 02 - Top Nav and Hamburger Menu │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _form.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 03 - Testimonial │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ ├── bodyScrollLock.min.js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _form.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── close-button.svg │ │ ├── hamburger.svg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 04 - Blog Posts │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ ├── bodyScrollLock.min.js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _form.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── close-button.svg │ │ ├── hamburger.svg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── 05 - Compiling Sass with Vite │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ │ ├── js │ │ │ ├── bodyScrollLock.min.js │ │ │ └── script.js │ │ └── scss │ │ │ ├── components │ │ │ ├── _alt-feature.scss │ │ │ ├── _blog.scss │ │ │ ├── _features.scss │ │ │ ├── _footer.scss │ │ │ ├── _fw-cta.scss │ │ │ ├── _fw-feature.scss │ │ │ ├── _hero.scss │ │ │ ├── _index.scss │ │ │ ├── _testimonial.scss │ │ │ └── _topnav.scss │ │ │ ├── globals │ │ │ ├── _boilerplate.scss │ │ │ ├── _button.scss │ │ │ ├── _colors.scss │ │ │ ├── _form.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _index.scss │ │ │ └── _typography.scss │ │ │ ├── layout │ │ │ ├── _index.scss │ │ │ └── _wrapper.scss │ │ │ ├── style.css │ │ │ ├── style.css.map │ │ │ ├── style.scss │ │ │ └── util │ │ │ ├── _breakpoints.scss │ │ │ ├── _fonts.scss │ │ │ ├── _fullwidth.scss │ │ │ ├── _functions.scss │ │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── dist │ │ ├── style.css │ │ └── style.css.map │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ │ ├── author-1x.jpg │ │ ├── author-2x.jpg │ │ ├── author-3x.jpg │ │ ├── blog │ │ │ ├── blog1-2x.jpg │ │ │ ├── blog1-3x.jpg │ │ │ ├── blog2-2x.jpg │ │ │ ├── blog2-3x.jpg │ │ │ ├── blog3-2x.jpg │ │ │ ├── blog3-3x.jpg │ │ │ ├── blog4-2x.jpg │ │ │ ├── blog4-3x.jpg │ │ │ ├── blog5-2x.jpg │ │ │ └── blog5-3x.jpg │ │ ├── close-button.svg │ │ ├── hamburger.svg │ │ ├── hero-wave.svg │ │ ├── icon-asterisk.svg │ │ ├── icon-bell.svg │ │ ├── icon-payments.svg │ │ ├── laptop-check.svg │ │ ├── laptop-dashboard.svg │ │ ├── logo-mythos-dark.svg │ │ ├── logo-mythos.svg │ │ ├── quotation-mark-teal.svg │ │ ├── social │ │ │ ├── facebook.svg │ │ │ ├── instagram.svg │ │ │ ├── twitter.svg │ │ │ └── youtube.svg │ │ ├── tablet-payments.svg │ │ ├── tablet-phone.svg │ │ └── unicorn.svg │ ├── index.html │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest └── End of Course │ ├── .gitignore │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── app │ ├── js │ │ ├── bodyScrollLock.min.js │ │ └── script.js │ └── scss │ │ ├── components │ │ ├── _alt-feature.scss │ │ ├── _blog.scss │ │ ├── _features.scss │ │ ├── _footer.scss │ │ ├── _fw-cta.scss │ │ ├── _fw-feature.scss │ │ ├── _hero.scss │ │ ├── _index.scss │ │ ├── _testimonial.scss │ │ └── _topnav.scss │ │ ├── globals │ │ ├── _boilerplate.scss │ │ ├── _button.scss │ │ ├── _colors.scss │ │ ├── _form.scss │ │ ├── _fullwidth.scss │ │ ├── _index.scss │ │ └── _typography.scss │ │ ├── layout │ │ ├── _index.scss │ │ └── _wrapper.scss │ │ ├── style.scss │ │ └── util │ │ ├── _breakpoints.scss │ │ ├── _fonts.scss │ │ ├── _fullwidth.scss │ │ ├── _functions.scss │ │ └── _index.scss │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── img │ ├── author-1x.jpg │ ├── author-2x.jpg │ ├── author-3x.jpg │ ├── blog │ │ ├── blog1-2x.jpg │ │ ├── blog1-3x.jpg │ │ ├── blog2-2x.jpg │ │ ├── blog2-3x.jpg │ │ ├── blog3-2x.jpg │ │ ├── blog3-3x.jpg │ │ ├── blog4-2x.jpg │ │ ├── blog4-3x.jpg │ │ ├── blog5-2x.jpg │ │ └── blog5-3x.jpg │ ├── close-button.svg │ ├── hamburger.svg │ ├── hero-wave.svg │ ├── icon-asterisk.svg │ ├── icon-bell.svg │ ├── icon-payments.svg │ ├── laptop-check.svg │ ├── laptop-dashboard.svg │ ├── logo-mythos-dark.svg │ ├── logo-mythos.svg │ ├── quotation-mark-teal.svg │ ├── social │ │ ├── facebook.svg │ │ ├── instagram.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── tablet-payments.svg │ ├── tablet-phone.svg │ └── unicorn.svg │ ├── index.html │ ├── main.js │ ├── mstile-150x150.png │ ├── package-lock.json │ ├── package.json │ ├── safari-pinned-tab.svg │ ├── site.webmanifest │ └── vite.config.js └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /01_Basic_Course/02 - Intro to Sass and Responsive Design/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/02 - Intro to Sass and Responsive Design/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | background-color: hsl(0, 0%, 13%); 4 | color: hsl(0, 0%, 100%); 5 | } 6 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/globals/_boilerplate.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | html { 4 | box-sizing: border-box; 5 | font-size: 100%; // Note: this style rule is not needed anymore, you can remove if you want! 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font-family: u.$font; 18 | background-color: var(--background-color); 19 | color: var(--text-color); 20 | } 21 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --background-color: hsl(0, 0%, 13%); 3 | --text-color: hsl(0, 0%, 100%); 4 | } 5 | 6 | .magenta { 7 | background-color: hsl(300, 100%, 30%); 8 | } 9 | 10 | .green { 11 | background-color: hsl(120, 100%, 27%); 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/globals/_typography.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 700; 7 | line-height: 1.1; 8 | margin-top: 0; 9 | } 10 | 11 | h1 { 12 | font-size: clamp(u.rem(28), u.rem(16) + 2vw, u.rem(40)); 13 | } 14 | 15 | h2 { 16 | font-size: clamp(u.rem(22), u.rem(14) + 1.5vw, u.rem(36)); 17 | } 18 | 19 | p { 20 | margin-top: 0; 21 | font-size: u.rem(16); 22 | } 23 | 24 | a, 25 | a:visited, 26 | a:active { 27 | text-decoration: none; 28 | } 29 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'grid'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Open Sans', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/03 - Basic Website Setup/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/globals/_boilerplate.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | html { 4 | box-sizing: border-box; 5 | font-size: 100%; // Note: this style rule is not needed anymore, you can remove if you want! 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font-family: u.$font; 18 | background-color: var(--background-color); 19 | color: var(--text-color); 20 | } 21 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --background-color: hsl(0, 0%, 13%); 3 | --text-color: hsl(0, 0%, 100%); 4 | } 5 | 6 | .magenta { 7 | background-color: hsl(300, 100%, 30%); 8 | } 9 | 10 | .green { 11 | background-color: hsl(120, 100%, 27%); 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/globals/_typography.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | h1, 4 | h2, 5 | h3 { 6 | font-weight: 700; 7 | line-height: 1.1; 8 | margin-top: 0; 9 | } 10 | 11 | h1 { 12 | font-size: clamp(u.rem(28), u.rem(16) + 2vw, u.rem(40)); 13 | } 14 | 15 | h2 { 16 | font-size: clamp(u.rem(22), u.rem(14) + 1.5vw, u.rem(36)); 17 | } 18 | 19 | p { 20 | margin-top: 0; 21 | font-size: u.rem(16); 22 | } 23 | 24 | a, 25 | a:visited, 26 | a:active { 27 | text-decoration: none; 28 | } 29 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'grid'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Open Sans', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/04 - Global Styles/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/04 - Global Styles/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/globals/_boilerplate.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | html { 4 | box-sizing: border-box; 5 | font-size: 100%; // Note: this style rule is not needed anymore, you can remove if you want! 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font-family: u.$font; 18 | background-color: var(--background-color); 19 | color: var(--text-color); 20 | } 21 | 22 | .visually-hidden { 23 | position: absolute; 24 | left: -10000px; 25 | top: auto; 26 | width: 1px; 27 | height: 1px; 28 | overflow: hidden; 29 | } 30 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-bg: hsl(0, 0%, 100%); 3 | --text-dark: hsl(233, 14%, 25%); 4 | --text-light: hsl(0, 0%, 100%); 5 | --hero-bg: hsl(232, 58%, 55%); 6 | --button-primary-bg: hsl(180, 100%, 42%); 7 | --button-primary-text: hsl(233, 14%, 25%); 8 | --button-secondary-bg: transparent; 9 | --button-secondary-border: hsl(0, 0%, 100%); 10 | --button-secondary-text: hsl(0, 0%, 100%); 11 | --fullwidth-bg: hsl(320, 85%, 41%); 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | } 7 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/05 - Top Navigation/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/05 - Top Navigation/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-bg: hsl(0, 0%, 100%); 3 | --text-dark: hsl(233, 14%, 25%); 4 | --text-light: hsl(0, 0%, 100%); 5 | --header-bg: hsl(232, 58%, 55%); 6 | --hero-bg: hsl(232, 58%, 55%); 7 | --button-primary-bg: hsl(180, 100%, 42%); 8 | --button-primary-text: hsl(233, 14%, 25%); 9 | --button-secondary-bg: transparent; 10 | --button-secondary-border: hsl(0, 0%, 100%); 11 | --button-secondary-text: hsl(0, 0%, 100%); 12 | --fullwidth-bg: hsl(320, 85%, 41%); 13 | } 14 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | } 7 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/06 - Hero/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/06 - Hero/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-bg: hsl(0, 0%, 100%); 3 | --text-dark: hsl(233, 14%, 25%); 4 | --text-light: hsl(0, 0%, 100%); 5 | --header-bg: hsl(232, 58%, 55%); 6 | --hero-bg: hsl(232, 58%, 55%); 7 | --button-primary-bg: hsl(180, 100%, 42%); 8 | --button-primary-bg-hover: hsl(180, 100%, 37%); 9 | --button-primary-text: hsl(233, 14%, 25%); 10 | --button-secondary-bg: transparent; 11 | --button-secondary-bg-hover: hsl(0, 0%, 100%); 12 | --button-secondary-border: hsl(0, 0%, 100%); 13 | --button-secondary-text: hsl(0, 0%, 100%); 14 | --button-secondary-text-hover: var(--hero-bg); 15 | --fullwidth-bg: hsl(320, 85%, 41%); 16 | } 17 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | } 7 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/07 - 3-Column Features/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/07 - 3-Column Features/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-bg: hsl(0, 0%, 100%); 3 | --text-dark: hsl(233, 14%, 25%); 4 | --text-light: hsl(0, 0%, 100%); 5 | --header-bg: hsl(232, 58%, 55%); 6 | --hero-bg: hsl(232, 58%, 55%); 7 | --button-primary-bg: hsl(180, 100%, 42%); 8 | --button-primary-bg-hover: hsl(180, 100%, 37%); 9 | --button-primary-text: hsl(233, 14%, 25%); 10 | --button-secondary-bg: transparent; 11 | --button-secondary-bg-hover: hsl(0, 0%, 100%); 12 | --button-secondary-border: hsl(0, 0%, 100%); 13 | --button-secondary-text: hsl(0, 0%, 100%); 14 | --button-secondary-text-hover: var(--hero-bg); 15 | --fullwidth-bg: hsl(320, 85%, 41%); 16 | } 17 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/08 - Full Width Feature/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/08 - Full Width Feature/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | background-color: var(--fullwidth-bg); 5 | color: var(--text-light); 6 | text-align: center; 7 | 8 | &__wrapper { 9 | } 10 | 11 | &__title { 12 | } 13 | 14 | &__description { 15 | max-width: 70ch; 16 | margin-inline: auto; 17 | margin-block-end: u.rem(40); 18 | } 19 | 20 | &__image { 21 | max-width: u.rem(792); 22 | margin-inline: auto; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-bg: hsl(0, 0%, 100%); 3 | --text-dark: hsl(233, 14%, 25%); 4 | --text-light: hsl(0, 0%, 100%); 5 | --header-bg: hsl(232, 58%, 55%); 6 | --hero-bg: hsl(232, 58%, 55%); 7 | --button-primary-bg: hsl(180, 100%, 42%); 8 | --button-primary-bg-hover: hsl(180, 100%, 37%); 9 | --button-primary-text: hsl(233, 14%, 25%); 10 | --button-secondary-bg: transparent; 11 | --button-secondary-bg-hover: hsl(0, 0%, 100%); 12 | --button-secondary-border: hsl(0, 0%, 100%); 13 | --button-secondary-text: hsl(0, 0%, 100%); 14 | --button-secondary-text-hover: var(--hero-bg); 15 | --fullwidth-bg: hsl(320, 85%, 41%); 16 | } 17 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'small': f.em(699.98), 13 | 'medium': f.em(899.98), 14 | 'large': f.em(1439.98), 15 | ); 16 | 17 | @mixin breakpoint($size) { 18 | @media (min-width: map-get($breakpoints-up, $size)) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin breakpoint-down($size) { 24 | @media (max-width: map-get($breakpoints-down, $size)) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/09 - Testimonial/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/09 - Testimonial/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | background-color: var(--fullwidth-bg); 5 | color: var(--text-light); 6 | text-align: center; 7 | 8 | &__wrapper { 9 | } 10 | 11 | &__title { 12 | } 13 | 14 | &__description { 15 | max-width: 70ch; 16 | margin-inline: auto; 17 | margin-block-end: u.rem(40); 18 | } 19 | 20 | &__image { 21 | max-width: u.rem(792); 22 | margin-inline: auto; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'testimonial'; 6 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/globals/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-bg: hsl(0, 0%, 100%); 3 | --text-dark: hsl(233, 14%, 25%); 4 | --text-light: hsl(0, 0%, 100%); 5 | --header-bg: hsl(232, 58%, 55%); 6 | --hero-bg: hsl(232, 58%, 55%); 7 | --button-primary-bg: hsl(180, 100%, 42%); 8 | --button-primary-bg-hover: hsl(180, 100%, 37%); 9 | --button-primary-text: hsl(233, 14%, 25%); 10 | --button-secondary-bg: transparent; 11 | --button-secondary-bg-hover: hsl(0, 0%, 100%); 12 | --button-secondary-border: hsl(0, 0%, 100%); 13 | --button-secondary-text: hsl(0, 0%, 100%); 14 | --button-secondary-text-hover: var(--hero-bg); 15 | --fullwidth-bg: hsl(320, 85%, 41%); 16 | } 17 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 451.98px, 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'xsmall': f.em(452.98), 13 | 'small': f.em(699.98), 14 | 'medium': f.em(899.98), 15 | 'large': f.em(1439.98), 16 | ); 17 | 18 | @mixin breakpoint($size) { 19 | @media (min-width: map-get($breakpoints-up, $size)) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin breakpoint-down($size) { 25 | @media (max-width: map-get($breakpoints-down, $size)) { 26 | @content; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/img/author-1x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/img/author-2x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/img/author-3x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/10 - Full Width CTA/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/10 - Full Width CTA/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/components/_fw-cta.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-cta { 4 | // @include u.fullwidth; 5 | background: linear-gradient( 6 | 90deg, 7 | var(--gradient1) 0%, 8 | var(--gradient2) 75%, 9 | var(--gradient3) 150% 10 | ); 11 | 12 | @include u.breakpoint(large) { 13 | background: linear-gradient( 14 | 90deg, 15 | var(--gradient1) 0%, 16 | var(--gradient2) 55%, 17 | var(--gradient3) 110% 18 | ); 19 | } 20 | 21 | &__wrapper { 22 | } 23 | 24 | &__title { 25 | } 26 | 27 | &__description { 28 | } 29 | 30 | &__button { 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'testimonial'; 6 | @forward 'fw-cta'; 7 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 451.98px, 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'xsmall': f.em(452.98), 13 | 'small': f.em(699.98), 14 | 'medium': f.em(899.98), 15 | 'large': f.em(1439.98), 16 | ); 17 | 18 | @mixin breakpoint($size) { 19 | @media (min-width: map-get($breakpoints-up, $size)) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin breakpoint-down($size) { 25 | @media (max-width: map-get($breakpoints-down, $size)) { 26 | @content; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/img/author-1x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/img/author-2x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/img/author-3x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/11 - Footer/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/11 - Footer/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/android-chrome-192x192.png -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/android-chrome-256x256.png -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/components/_fw-cta.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-cta { 4 | // @include u.fullwidth; 5 | background: linear-gradient( 6 | 90deg, 7 | var(--gradient1) 0%, 8 | var(--gradient2) 75%, 9 | var(--gradient3) 150% 10 | ); 11 | 12 | @include u.breakpoint(large) { 13 | background: linear-gradient( 14 | 90deg, 15 | var(--gradient1) 0%, 16 | var(--gradient2) 55%, 17 | var(--gradient3) 110% 18 | ); 19 | } 20 | 21 | &__wrapper { 22 | } 23 | 24 | &__title { 25 | } 26 | 27 | &__description { 28 | } 29 | 30 | &__button { 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'testimonial'; 6 | @forward 'fw-cta'; 7 | @forward 'footer'; 8 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 451.98px, 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'xsmall': f.em(452.98), 13 | 'small': f.em(699.98), 14 | 'medium': f.em(899.98), 15 | 'large': f.em(1439.98), 16 | ); 17 | 18 | @mixin breakpoint($size) { 19 | @media (min-width: map-get($breakpoints-up, $size)) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin breakpoint-down($size) { 25 | @media (max-width: map-get($breakpoints-down, $size)) { 26 | @content; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/apple-touch-icon.png -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/favicon-16x16.png -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/favicon-32x32.png -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/favicon.ico -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/img/author-1x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/img/author-2x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/img/author-3x.jpg -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/01_Basic_Course/End of Basic Course/mstile-150x150.png -------------------------------------------------------------------------------- /01_Basic_Course/End of Basic Course/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/android-chrome-192x192.png -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/android-chrome-256x256.png -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/components/_fw-cta.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-cta { 4 | // @include u.fullwidth; 5 | background: linear-gradient( 6 | 90deg, 7 | var(--gradient1) 0%, 8 | var(--gradient2) 75%, 9 | var(--gradient3) 150% 10 | ); 11 | 12 | @include u.breakpoint(large) { 13 | background: linear-gradient( 14 | 90deg, 15 | var(--gradient1) 0%, 16 | var(--gradient2) 55%, 17 | var(--gradient3) 110% 18 | ); 19 | } 20 | 21 | &__wrapper { 22 | } 23 | 24 | &__title { 25 | } 26 | 27 | &__description { 28 | } 29 | 30 | &__button { 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'testimonial'; 6 | @forward 'fw-cta'; 7 | @forward 'footer'; 8 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 451.98px, 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'xsmall': f.em(452.98), 13 | 'small': f.em(699.98), 14 | 'medium': f.em(899.98), 15 | 'large': f.em(1439.98), 16 | ); 17 | 18 | @mixin breakpoint($size) { 19 | @media (min-width: map-get($breakpoints-up, $size)) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin breakpoint-down($size) { 25 | @media (max-width: map-get($breakpoints-down, $size)) { 26 | @content; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/apple-touch-icon.png -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/favicon-16x16.png -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/favicon-32x32.png -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/favicon.ico -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/img/author-1x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/img/author-2x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/img/author-3x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/02 - Top Navigation/mstile-150x150.png -------------------------------------------------------------------------------- /02_Premium_Course/02 - Top Navigation/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/android-chrome-192x192.png -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/android-chrome-256x256.png -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/components/_fw-cta.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-cta { 4 | // @include u.fullwidth; 5 | background: linear-gradient( 6 | 90deg, 7 | var(--gradient1) 0%, 8 | var(--gradient2) 75%, 9 | var(--gradient3) 150% 10 | ); 11 | 12 | @include u.breakpoint(large) { 13 | background: linear-gradient( 14 | 90deg, 15 | var(--gradient1) 0%, 16 | var(--gradient2) 55%, 17 | var(--gradient3) 110% 18 | ); 19 | } 20 | 21 | &__wrapper { 22 | } 23 | 24 | &__title { 25 | } 26 | 27 | &__description { 28 | } 29 | 30 | &__button { 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'testimonial'; 6 | @forward 'fw-cta'; 7 | @forward 'footer'; 8 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .wrapper { 4 | width: min(100% - u.rem(48), u.rem(1200)); 5 | margin-inline: auto; 6 | padding-block: 60px; 7 | 8 | @include u.breakpoint(large) { 9 | padding-block: 80px; 10 | } 11 | } 12 | 13 | .fb-wrapper { 14 | display: grid; 15 | grid-template-columns: 16 | [fb-start] 1fr 17 | [content-start] min(100% - u.rem(48), u.rem(1200)) 18 | [content-end] 1fr [fb-end]; 19 | 20 | > * { 21 | grid-row: 1 / 2; 22 | } 23 | 24 | &__full { 25 | grid-column: fb-start / fb-end; 26 | align-self: end; 27 | } 28 | 29 | &__content { 30 | grid-column: content-start / content-end; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 451.98px, 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'xsmall': f.em(452.98), 13 | 'small': f.em(699.98), 14 | 'medium': f.em(899.98), 15 | 'large': f.em(1439.98), 16 | ); 17 | 18 | @mixin breakpoint($size) { 19 | @media (min-width: map-get($breakpoints-up, $size)) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin breakpoint-down($size) { 25 | @media (max-width: map-get($breakpoints-down, $size)) { 26 | @content; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/apple-touch-icon.png -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/favicon-16x16.png -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/favicon-32x32.png -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/favicon.ico -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/img/author-1x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/img/author-2x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/img/author-3x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/03 - Hero/mstile-150x150.png -------------------------------------------------------------------------------- /02_Premium_Course/03 - Hero/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/android-chrome-192x192.png -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/android-chrome-256x256.png -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/components/_fw-cta.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-cta { 4 | // @include u.fullwidth; 5 | background: linear-gradient( 6 | 90deg, 7 | var(--gradient1) 0%, 8 | var(--gradient2) 75%, 9 | var(--gradient3) 150% 10 | ); 11 | 12 | @include u.breakpoint(large) { 13 | background: linear-gradient( 14 | 90deg, 15 | var(--gradient1) 0%, 16 | var(--gradient2) 55%, 17 | var(--gradient3) 110% 18 | ); 19 | } 20 | 21 | &__wrapper { 22 | } 23 | 24 | &__title { 25 | } 26 | 27 | &__description { 28 | } 29 | 30 | &__button { 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/util/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | // 700px, 900px, 1440px 4 | $breakpoints-up: ( 5 | 'medium': f.em(700), 6 | 'large': f.em(900), 7 | 'xlarge': f.em(1440), 8 | ); 9 | 10 | // 451.98px, 699.98px, 899.98px, 1439.98px 11 | $breakpoints-down: ( 12 | 'xsmall': f.em(452.98), 13 | 'small': f.em(699.98), 14 | 'medium': f.em(899.98), 15 | 'large': f.em(1439.98), 16 | ); 17 | 18 | @mixin breakpoint($size) { 19 | @media (min-width: map-get($breakpoints-up, $size)) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin breakpoint-down($size) { 25 | @media (max-width: map-get($breakpoints-down, $size)) { 26 | @content; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/apple-touch-icon.png -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/favicon-16x16.png -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/favicon-32x32.png -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/favicon.ico -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/img/author-1x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/img/author-2x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/img/author-3x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/04 - Alternating Features/mstile-150x150.png -------------------------------------------------------------------------------- /02_Premium_Course/04 - Alternating Features/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/android-chrome-192x192.png -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/android-chrome-256x256.png -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/components/_fw-cta.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-cta { 4 | // @include u.fullwidth; 5 | background: linear-gradient( 6 | 90deg, 7 | var(--gradient1) 0%, 8 | var(--gradient2) 75%, 9 | var(--gradient3) 150% 10 | ); 11 | 12 | @include u.breakpoint(large) { 13 | background: linear-gradient( 14 | 90deg, 15 | var(--gradient1) 0%, 16 | var(--gradient2) 55%, 17 | var(--gradient3) 110% 18 | ); 19 | } 20 | 21 | &__wrapper { 22 | } 23 | 24 | &__title { 25 | } 26 | 27 | &__description { 28 | } 29 | 30 | &__button { 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/apple-touch-icon.png -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/favicon-16x16.png -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/favicon-32x32.png -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/favicon.ico -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/img/author-1x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/img/author-2x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/img/author-3x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/05 - Testimonial/mstile-150x150.png -------------------------------------------------------------------------------- /02_Premium_Course/05 - Testimonial/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/android-chrome-192x192.png -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/android-chrome-256x256.png -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/apple-touch-icon.png -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/favicon-16x16.png -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/favicon-32x32.png -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/favicon.ico -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/img/author-1x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/img/author-2x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/img/author-3x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/06 - Full-width CTA/mstile-150x150.png -------------------------------------------------------------------------------- /02_Premium_Course/06 - Full-width CTA/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/android-chrome-192x192.png -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/android-chrome-256x256.png -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/apple-touch-icon.png -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/favicon-16x16.png -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/favicon-32x32.png -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/favicon.ico -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/img/author-1x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/img/author-2x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/img/author-3x.jpg -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/02_Premium_Course/End of Premium Course/mstile-150x150.png -------------------------------------------------------------------------------- /02_Premium_Course/End of Premium Course/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/android-chrome-192x192.png -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/android-chrome-256x256.png -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/js/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world!'); 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/apple-touch-icon.png -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/favicon-16x16.png -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/favicon-32x32.png -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/favicon.ico -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/author-1x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/author-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/author-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/02 - Top Nav and Hamburger Menu/mstile-150x150.png -------------------------------------------------------------------------------- /03_Ultimate_Course/02 - Top Nav and Hamburger Menu/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/android-chrome-192x192.png -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/android-chrome-256x256.png -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/apple-touch-icon.png -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/favicon-16x16.png -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/favicon-32x32.png -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/favicon.ico -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/img/author-1x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/img/author-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/img/author-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/close-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/03 - Testimonial/mstile-150x150.png -------------------------------------------------------------------------------- /03_Ultimate_Course/03 - Testimonial/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/android-chrome-192x192.png -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/android-chrome-256x256.png -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'fw-cta'; 8 | @forward 'footer'; 9 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: u.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/apple-touch-icon.png -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/favicon-16x16.png -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/favicon-32x32.png -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/favicon.ico -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/img/author-1x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/img/author-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/img/author-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/close-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/04 - Blog Posts/mstile-150x150.png -------------------------------------------------------------------------------- /03_Ultimate_Course/04 - Blog Posts/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/android-chrome-192x192.png -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/android-chrome-256x256.png -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'blog'; 8 | @forward 'fw-cta'; 9 | @forward 'footer'; 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | text-align: center; 5 | 6 | &.dark { 7 | color: var(--text-light); 8 | } 9 | 10 | &__description { 11 | max-width: 70ch; 12 | margin-inline: auto; 13 | margin-block-end: u.rem(40); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/apple-touch-icon.png -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/favicon-16x16.png -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/favicon-32x32.png -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/favicon.ico -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/author-1x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/author-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/author-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog1-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog1-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog1-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog1-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog2-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog2-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog2-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog2-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog3-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog3-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog3-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog3-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog4-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog4-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog4-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog4-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog5-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog5-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog5-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/img/blog/blog5-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/close-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/05 - Compiling Sass with Vite/mstile-150x150.png -------------------------------------------------------------------------------- /03_Ultimate_Course/05 - Compiling Sass with Vite/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/android-chrome-192x192.png -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/android-chrome-256x256.png -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/components/_fw-feature.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fw-feature { 4 | // @include u.fullwidth; 5 | background-color: var(--fullwidth-bg); 6 | 7 | &__wrapper { 8 | } 9 | 10 | &__title { 11 | } 12 | 13 | &__image { 14 | max-width: u.rem(792); 15 | margin-inline: auto; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'topnav'; 2 | @forward 'hero'; 3 | @forward 'features'; 4 | @forward 'fw-feature'; 5 | @forward 'alt-feature'; 6 | @forward 'testimonial'; 7 | @forward 'blog'; 8 | @forward 'fw-cta'; 9 | @forward 'footer'; 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/globals/_form.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .form { 4 | &__label, 5 | &__text { 6 | font-size: u.rem(18); 7 | line-height: 1; 8 | } 9 | 10 | &__label { 11 | font-weight: 700; 12 | } 13 | 14 | &__text { 15 | padding: u.rem(8) u.rem(20); 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/globals/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use '../util' as u; 2 | 3 | .fullwidth { 4 | text-align: center; 5 | 6 | &.dark { 7 | color: var(--text-light); 8 | } 9 | 10 | &__description { 11 | max-width: 70ch; 12 | margin-inline: auto; 13 | margin-block-end: u.rem(40); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'boilerplate'; 2 | @forward 'typography'; 3 | @forward 'colors'; 4 | @forward 'button'; 5 | @forward 'fullwidth'; 6 | @forward 'form'; 7 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'wrapper'; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward 'globals'; 2 | @forward 'layout'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/util/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font: 'Source Sans 3', sans-serif; 2 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/util/_fullwidth.scss: -------------------------------------------------------------------------------- 1 | @use 'functions' as f; 2 | 3 | @mixin fullwidth { 4 | color: var(--text-light); 5 | text-align: center; 6 | 7 | &__description { 8 | max-width: 70ch; 9 | margin-inline: auto; 10 | margin-block-end: f.rem(40); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/util/_functions.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @function rem($pixel) { 4 | @if math.is-unitless($pixel) { 5 | @return math.div($pixel, 16) + rem; 6 | } @else { 7 | @error 'Don\'t use units when using the rem() function; only numbers.'; 8 | } 9 | } 10 | 11 | @function em($pixel) { 12 | @if math.is-unitless($pixel) { 13 | @return math.div($pixel, 16) + em; 14 | } @else { 15 | @error 'Don\'t use units when using the em() function; only numbers.'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/app/scss/util/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'fonts'; 2 | @forward 'breakpoints'; 3 | @forward 'functions'; 4 | @forward 'fullwidth'; 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/apple-touch-icon.png -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/favicon-16x16.png -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/favicon-32x32.png -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/favicon.ico -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/author-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/author-1x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/author-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/author-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/author-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/author-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog1-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog1-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog1-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog1-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog2-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog2-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog2-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog2-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog3-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog3-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog3-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog3-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog4-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog4-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog4-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog4-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog5-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog5-2x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/blog/blog5-3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/img/blog/blog5-3x.jpg -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/close-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/icon-bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/img/social/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/rdb-checkpoints/638528ba04b0e3ea471917d16c9f4fd5539c9cf9/03_Ultimate_Course/End of Course/mstile-150x150.png -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rdb-checkpoints-test", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.4.11" 13 | }, 14 | "dependencies": { 15 | "body-scroll-lock": "^4.0.0-beta.0", 16 | "sass": "^1.81.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /03_Ultimate_Course/End of Course/vite.config.js: -------------------------------------------------------------------------------- 1 | // vite.config.js 2 | export default { 3 | css: { 4 | devSourcemap: true, 5 | preprocessorOptions: { 6 | scss: { 7 | api: 'modern-compiler', 8 | }, 9 | }, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rdb-checkpoints 2 | 3 | Code checkpoints for each section in the Responsive Design for Beginners course. 4 | 5 | Each subfolder contains the **starter** files for that section. For example, the `01_Basic_Course/06 - Hero` folder has the codebase in the state it should be at the **beginning** of the Hero section (before the Hero has been built). 6 | 7 | At the end of each course I have also included a subfolder that has the files in the state they should be when the course is complete. For example, the `01_Basic_Course/End of Basic Course` folder has the state the code files should be in when the Basic Course is completed. 8 | --------------------------------------------------------------------------------