diff --git a/src/index.html b/src/index.html index 04bd19e..7130854 100644 --- a/src/index.html +++ b/src/index.html @@ -1,83 +1,154 @@ - - - JobSimulator.Dev - - - - - + + + JobSimulator.Dev + + + + + - - - - - - + + -
-
-

Browse Our Challenges

- -
-
+
+
+

Browse Our Challenges

+ +
+
-
-
-
-

Sign Up & Get Started

-
- - - - - -
-
-
-
- +
+
+
+

Sign Up & Get Started

+
+ + + + + +
+
+
+
+ diff --git a/src/script.js b/src/script.js index 529f585..2cebdb3 100644 --- a/src/script.js +++ b/src/script.js @@ -1,42 +1,51 @@ const usersTable = [ - // Note: This is a fake table for educational purposes. Never store user credentials in plain text. - { username: "hello@world.com" }, - { username: "test@user.com" }, - { username: "email@domain.com" }, + // Note: This is a fake table for educational purposes. Never store user credentials in plain text. + { username: "hello@world.com" }, + { username: "test@user.com" }, + { username: "email@domain.com" }, ]; let renderSuccess = () => { - document.getElementById("success-message").hidden = false; + document.getElementById("success-message").hidden = false; }; let renderEmailTakenError = () => { - document.getElementById("taken-error-message").hidden = false; + document.getElementById("taken-error-message").hidden = false; }; let renderEmailEmptyError = () => { - document.getElementById("empty-error-message").hidden = false; + document.getElementById("empty-error-message").hidden = false; }; let resetMessage = () => { - document.getElementById("success-message").hidden = true; - document.getElementById("taken-error-message").hidden = true; - document.getElementById("empty-error-message").hidden = true; + document.getElementById("success-message").hidden = true; + document.getElementById("taken-error-message").hidden = true; + document.getElementById("empty-error-message").hidden = true; }; addEventListener("submit", (event) => { - event.preventDefault(); - resetMessage(); + event.preventDefault(); + resetMessage(); - let email = document.getElementById("email").value; + let email = document.getElementById("email").value; - // TODO: Show Correct Status Messages on Signup Form - // 1. successful signup - // 2. empty email - // 3. taken email - // 4. repeat email + if (!email) { + renderEmailEmptyError(); + } else if (usersTable.some((user) => user.username === email)) { + renderEmailTakenError(); + } else { + renderSuccess(); + usersTable.push({ username: email }); + } + + // TODO: Show Correct Status Messages on Signup Form + // 1. successful signup + // 2. empty email + // 3. taken email + // 4. repeat email }); let toggleNav = () => { - var nav = document.getElementById("mobile-nav"); - if (nav.className.indexOf("show") == -1) { - nav.className += " show"; - } else { - nav.className = nav.className.replace(" show", ""); - } + var nav = document.getElementById("mobile-nav"); + if (nav.className.indexOf("show") == -1) { + nav.className += " show"; + } else { + nav.className = nav.className.replace(" show", ""); + } }; diff --git a/src/styles.css b/src/styles.css index 2cbb72e..5ad1349 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,15 +1,15 @@ *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ html { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } body { - margin: 0; + margin: 0; } article, aside, @@ -22,17 +22,17 @@ main, menu, nav, section { - display: block; + display: block; } [hidden], template { - display: none; + display: none; } a { - background-color: transparent; + background-color: transparent; } img { - border-style: none; + border-style: none; } button, @@ -40,112 +40,112 @@ input, select, textarea, optgroup { - font: inherit; - margin: 0; + font: inherit; + margin: 0; } optgroup { - font-weight: bold; + font-weight: bold; } button, input { - overflow: visible; + overflow: visible; } button, select { - text-transform: none; + text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } legend { - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; } textarea { - overflow: auto; + overflow: auto; } [type="checkbox"], [type="radio"] { - padding: 0; + padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } [type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; + -webkit-appearance: textfield; + outline-offset: -2px; } [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } ::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; + -webkit-appearance: button; + font: inherit; } /* End extract */ html, body { - font-family: Verdana, sans-serif; - font-size: 15px; - line-height: 1.5; + font-family: Verdana, sans-serif; + font-size: 15px; + line-height: 1.5; } html { - overflow-x: hidden; + overflow-x: hidden; } h1 { - font-size: 36px; + font-size: 36px; } h2 { - font-size: 30px; + font-size: 30px; } h3 { - font-size: 24px; + font-size: 24px; } h4 { - font-size: 20px; + font-size: 20px; } h5 { - font-size: 18px; + font-size: 18px; } h6 { - font-size: 16px; + font-size: 16px; } .serif { - font-family: serif; + font-family: serif; } .sans-serif { - font-family: sans-serif; + font-family: sans-serif; } .cursive { - font-family: cursive; + font-family: cursive; } .monospace { - font-family: monospace; + font-family: monospace; } h1, h2, @@ -153,325 +153,326 @@ h3, h4, h5, h6 { - font-family: "Lato", Arial, sans-serif; - font-weight: 400; - margin: 10px 0; + font-family: "Lato", Arial, sans-serif; + font-weight: 400; + margin: 10px 0; } .wide { - letter-spacing: 4px; + letter-spacing: 4px; } hr { - border: 0; - border-top: 1px solid #eee; - margin: 20px 0; + border: 0; + border-top: 1px solid #eee; + margin: 20px 0; } .image { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } img { - vertical-align: middle; + vertical-align: middle; } a { - color: inherit; + color: inherit; } .table, .table-all { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - display: table; + border-collapse: collapse; + border-spacing: 0; + width: 100%; + display: table; } .table-all { - border: 1px solid #ccc; + border: 1px solid #ccc; } .bordered tr, .table-all tr { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #ddd; } .striped tbody tr:nth-child(even) { - background-color: #f1f1f1; + background-color: #f1f1f1; } .table-all tr:nth-child(odd) { - background-color: #fff; + background-color: #fff; } .table-all tr:nth-child(even) { - background-color: #f1f1f1; + background-color: #f1f1f1; } .hoverable tbody tr:hover, .ul.hoverable li:hover { - background-color: #ccc; + background-color: #ccc; } .centered tr th, .centered tr td { - text-align: center; + text-align: center; } .table td, .table th, .table-all td, .table-all th { - padding: 8px 8px; - display: table-cell; - text-align: left; - vertical-align: top; + padding: 8px 8px; + display: table-cell; + text-align: left; + vertical-align: top; } .table th:first-child, .table td:first-child, .table-all th:first-child, .table-all td:first-child { - padding-left: 16px; + padding-left: 16px; } .btn, .button { - border: none; - display: inline-block; - padding: 8px 16px; - vertical-align: middle; - overflow: hidden; - text-decoration: none; - color: inherit; - background-color: inherit; - text-align: center; - cursor: pointer; - white-space: nowrap; + border: none; + display: inline-block; + padding: 8px 16px; + vertical-align: middle; + overflow: hidden; + text-decoration: none; + color: inherit; + background-color: inherit; + text-align: center; + cursor: pointer; + white-space: nowrap; } .btn:hover { - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), + 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .btn, .button { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .disabled, .btn:disabled, .button:disabled { - cursor: not-allowed; - opacity: 0.3; + cursor: not-allowed; + opacity: 0.3; } .disabled *, :disabled * { - pointer-events: none; + pointer-events: none; } .btn.disabled:hover, .btn:disabled:hover { - box-shadow: none; + box-shadow: none; } .badge, .tag { - background-color: #000; - color: #fff; - display: inline-block; - padding-left: 8px; - padding-right: 8px; - text-align: center; + background-color: #000; + color: #fff; + display: inline-block; + padding-left: 8px; + padding-right: 8px; + text-align: center; } .badge { - border-radius: 50%; + border-radius: 50%; } #signup-form { - display: flex; - flex-direction: column; - width: 100%; - align-items: center; + display: flex; + flex-direction: column; + width: 100%; + align-items: center; } form > span { - display: block; + display: block; } .ul { - list-style-type: none; - padding: 0; - margin: 0; + list-style-type: none; + padding: 0; + margin: 0; } .ul li { - padding: 8px 16px; - border-bottom: 1px solid #ddd; + padding: 8px 16px; + border-bottom: 1px solid #ddd; } .ul li:last-child { - border-bottom: none; + border-bottom: none; } .tooltip, .display-container { - position: relative; + position: relative; } .tooltip .text { - display: none; + display: none; } .tooltip:hover .text { - display: inline-block; + display: inline-block; } .ripple:active { - opacity: 0.5; + opacity: 0.5; } .ripple { - transition: opacity 0s; + transition: opacity 0s; } .input { - padding: 8px; - display: block; - border: none; - border-bottom: 1px solid #ccc; - width: 100%; + padding: 8px; + display: block; + border: none; + border-bottom: 1px solid #ccc; + width: 100%; } .select { - padding: 9px 0; - width: 100%; - border: none; - border-bottom: 1px solid #ccc; + padding: 9px 0; + width: 100%; + border: none; + border-bottom: 1px solid #ccc; } .dropdown-click, .dropdown-hover { - position: relative; - display: inline-block; - cursor: pointer; + position: relative; + display: inline-block; + cursor: pointer; } .dropdown-hover:hover .dropdown-content { - display: block; + display: block; } .dropdown-hover:first-child, .dropdown-click:hover { - background-color: #ccc; - color: #000; + background-color: #ccc; + color: #000; } .dropdown-hover:hover > .button:first-child, .dropdown-click:hover > .button:first-child { - background-color: #ccc; - color: #000; + background-color: #ccc; + color: #000; } .dropdown-content { - cursor: auto; - color: #000; - background-color: #fff; - display: none; - position: absolute; - min-width: 160px; - margin: 0; - padding: 0; - z-index: 1; + cursor: auto; + color: #000; + background-color: #fff; + display: none; + position: absolute; + min-width: 160px; + margin: 0; + padding: 0; + z-index: 1; } .check, .radio { - width: 24px; - height: 24px; - position: relative; - top: 6px; + width: 24px; + height: 24px; + position: relative; + top: 6px; } .challenge-tile { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border: 1px solid #ccc; - border-radius: 0.5rem; - font-size: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid #ccc; + border-radius: 0.5rem; + font-size: 2rem; } .sidebar { - height: 100%; - width: 200px; - background-color: #fff; - position: fixed !important; - z-index: 1; - overflow: auto; + height: 100%; + width: 200px; + background-color: #fff; + position: fixed !important; + z-index: 1; + overflow: auto; } .bar-block .dropdown-hover, .bar-block .dropdown-click { - width: 100%; + width: 100%; } .bar-block .dropdown-hover .dropdown-content, .bar-block .dropdown-click .dropdown-content { - min-width: 100%; + min-width: 100%; } .bar-block .dropdown-hover .button, .bar-block .dropdown-click .button { - width: 100%; - text-align: left; - padding: 8px 16px; + width: 100%; + text-align: left; + padding: 8px 16px; } .main, #main { - transition: margin-left 0.4s; + transition: margin-left 0.4s; } .modal { - z-index: 3; - display: none; - padding-top: 100px; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgb(0, 0, 0); - background-color: rgba(0, 0, 0, 0.4); + z-index: 3; + display: none; + padding-top: 100px; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); } .modal-content { - margin: auto; - background-color: #fff; - position: relative; - padding: 0; - outline: 0; - width: 600px; + margin: auto; + background-color: #fff; + position: relative; + padding: 0; + outline: 0; + width: 600px; } .bar { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } .center .bar { - display: inline-block; - width: auto; + display: inline-block; + width: auto; } .bar .bar-item { - padding: 8px 16px; - float: left; - width: auto; - border: none; - display: block; - outline: 0; + padding: 8px 16px; + float: left; + width: auto; + border: none; + display: block; + outline: 0; } .bar .dropdown-hover, .bar .dropdown-click { - position: static; - float: left; + position: static; + float: left; } .bar .button { - white-space: normal; + white-space: normal; } .bar-block .bar-item { - width: 100%; - display: block; - padding: 8px 16px; - text-align: left; - border: none; - white-space: normal; - float: none; - outline: 0; + width: 100%; + display: block; + padding: 8px 16px; + text-align: left; + border: none; + white-space: normal; + float: none; + outline: 0; } .challenge-tile:hover { - background-color: #ccc; - color: black; - cursor: pointer; + background-color: #ccc; + color: black; + cursor: pointer; } .bar-block.center .bar-item { - text-align: center; + text-align: center; } .block { - display: block; - width: 100%; + display: block; + width: 100%; } .responsive { - display: block; - overflow-x: auto; + display: block; + overflow-x: auto; } .container:after, .container:before, @@ -487,9 +488,9 @@ form > span { .clear:before, .bar:before, .bar:after { - content: ""; - display: table; - clear: both; + content: ""; + display: table; + clear: both; } .col, .half, @@ -497,359 +498,360 @@ form > span { .twothird, .threequarter, .quarter { - float: left; - width: 100%; + float: left; + width: 100%; } .col.s1 { - width: 8.33333%; + width: 8.33333%; } .col.s2 { - width: 16.66666%; + width: 16.66666%; } .col.s3 { - width: 24.99999%; + width: 24.99999%; } .col.s4 { - width: 33.33333%; + width: 33.33333%; } .col.s5 { - width: 41.66666%; + width: 41.66666%; } .col.s6 { - width: 49.99999%; + width: 49.99999%; } .col.s7 { - width: 58.33333%; + width: 58.33333%; } .col.s8 { - width: 66.66666%; + width: 66.66666%; } .col.s9 { - width: 74.99999%; + width: 74.99999%; } .col.s10 { - width: 83.33333%; + width: 83.33333%; } .col.s11 { - width: 91.66666%; + width: 91.66666%; } .col.s12 { - width: 99.99999%; + width: 99.99999%; } @media (min-width: 601px) { - .col.m1 { - width: 8.33333%; - } - .col.m2 { - width: 16.66666%; - } - .col.m3, - .quarter { - width: 24.99999%; - } - .col.m4, - .third { - width: 33.33333%; - } - .col.m5 { - width: 41.66666%; - } - .col.m6, - .half { - width: 49.99999%; - } - .col.m7 { - width: 58.33333%; - } - .col.m8, - .twothird { - width: 66.66666%; - } - .col.m9, - .threequarter { - width: 74.99999%; - } - .col.m10 { - width: 83.33333%; - } - .col.m11 { - width: 91.66666%; - } - .col.m12 { - width: 99.99999%; - } + .col.m1 { + width: 8.33333%; + } + .col.m2 { + width: 16.66666%; + } + .col.m3, + .quarter { + width: 24.99999%; + } + .col.m4, + .third { + width: 33.33333%; + } + .col.m5 { + width: 41.66666%; + } + .col.m6, + .half { + width: 49.99999%; + } + .col.m7 { + width: 58.33333%; + } + .col.m8, + .twothird { + width: 66.66666%; + } + .col.m9, + .threequarter { + width: 74.99999%; + } + .col.m10 { + width: 83.33333%; + } + .col.m11 { + width: 91.66666%; + } + .col.m12 { + width: 99.99999%; + } } @media (min-width: 993px) { - .col.l1 { - width: 8.33333%; - } - .col.l2 { - width: 16.66666%; - } - .col.l3 { - width: 24.99999%; - } - .col.l4 { - width: 33.33333%; - } - .col.l5 { - width: 41.66666%; - } - .col.l6 { - width: 49.99999%; - } - .col.l7 { - width: 58.33333%; - } - .col.l8 { - width: 66.66666%; - } - .col.l9 { - width: 74.99999%; - } - .col.l10 { - width: 83.33333%; - } - .col.l11 { - width: 91.66666%; - } - .col.l12 { - width: 99.99999%; - } + .col.l1 { + width: 8.33333%; + } + .col.l2 { + width: 16.66666%; + } + .col.l3 { + width: 24.99999%; + } + .col.l4 { + width: 33.33333%; + } + .col.l5 { + width: 41.66666%; + } + .col.l6 { + width: 49.99999%; + } + .col.l7 { + width: 58.33333%; + } + .col.l8 { + width: 66.66666%; + } + .col.l9 { + width: 74.99999%; + } + .col.l10 { + width: 83.33333%; + } + .col.l11 { + width: 91.66666%; + } + .col.l12 { + width: 99.99999%; + } } .rest { - overflow: hidden; + overflow: hidden; } .stretch { - margin-left: -16px; - margin-right: -16px; + margin-left: -16px; + margin-right: -16px; } .content, .auto { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } .content { - max-width: 980px; + max-width: 980px; } .auto { - max-width: 1140px; + max-width: 1140px; } .cell-row { - display: table; - width: 100%; + display: table; + width: 100%; } .cell { - display: table-cell; + display: table-cell; } .cell-top { - vertical-align: top; + vertical-align: top; } .cell-middle { - vertical-align: middle; + vertical-align: middle; } .cell-bottom { - vertical-align: bottom; + vertical-align: bottom; } .hide { - display: none !important; + display: none !important; } .show-block, .show { - display: block !important; + display: block !important; } .show-inline-block { - display: inline-block !important; + display: inline-block !important; } @media (max-width: 1205px) { - .auto { - max-width: 95%; - } + .auto { + max-width: 95%; + } } #jumbo-image { - max-height: 20rem; - /* TODO: Invert banner colors using CSS */ + max-height: 20rem; + /* TODO: Invert banner colors using CSS */ + filter: invert(1); } @media (max-width: 600px) { - .modal-content { - margin: 0 10px; - width: auto !important; - } - .modal { - padding-top: 30px; - } - .dropdown-hover.mobile .dropdown-content, - .dropdown-click.mobile .dropdown-content { - position: relative; - } - .hide-small { - display: none !important; - } - .mobile { - display: block; - width: 100% !important; - } - .bar-item.mobile, - .dropdown-hover.mobile, - .dropdown-click.mobile { - text-align: center; - } - .dropdown-hover.mobile, - .dropdown-hover.mobile .btn, - .dropdown-hover.mobile .button, - .dropdown-click.mobile, - .dropdown-click.mobile .btn, - .dropdown-click.mobile .button { - width: 100%; - } + .modal-content { + margin: 0 10px; + width: auto !important; + } + .modal { + padding-top: 30px; + } + .dropdown-hover.mobile .dropdown-content, + .dropdown-click.mobile .dropdown-content { + position: relative; + } + .hide-small { + display: none !important; + } + .mobile { + display: block; + width: 100% !important; + } + .bar-item.mobile, + .dropdown-hover.mobile, + .dropdown-click.mobile { + text-align: center; + } + .dropdown-hover.mobile, + .dropdown-hover.mobile .btn, + .dropdown-hover.mobile .button, + .dropdown-click.mobile, + .dropdown-click.mobile .btn, + .dropdown-click.mobile .button { + width: 100%; + } } @media (max-width: 768px) { - .modal-content { - width: 500px; - } - .modal { - padding-top: 50px; - } + .modal-content { + width: 500px; + } + .modal { + padding-top: 50px; + } } @media (min-width: 993px) { - .modal-content { - width: 900px; - } - .hide-large { - display: none !important; - } - .sidebar.collapse { - display: block !important; - } + .modal-content { + width: 900px; + } + .hide-large { + display: none !important; + } + .sidebar.collapse { + display: block !important; + } } @media (max-width: 992px) and (min-width: 601px) { - .hide-medium { - display: none !important; - } + .hide-medium { + display: none !important; + } } @media (max-width: 992px) { - .sidebar.collapse { - display: none; - } - .main { - margin-left: 0 !important; - margin-right: 0 !important; - } - .auto { - max-width: 100%; - } + .sidebar.collapse { + display: none; + } + .main { + margin-left: 0 !important; + margin-right: 0 !important; + } + .auto { + max-width: 100%; + } } .top, .bottom { - position: fixed; - width: 100%; - z-index: 1; + position: fixed; + width: 100%; + z-index: 1; } .top { - top: 0; + top: 0; } .bottom { - bottom: 0; + bottom: 0; } .overlay { - position: fixed; - display: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2; + position: fixed; + display: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; } .display-topleft { - position: absolute; - left: 0; - top: 0; + position: absolute; + left: 0; + top: 0; } .display-topright { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .display-bottomleft { - position: absolute; - left: 0; - bottom: 0; + position: absolute; + left: 0; + bottom: 0; } .display-bottomright { - position: absolute; - right: 0; - bottom: 0; + position: absolute; + right: 0; + bottom: 0; } .display-middle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); } .display-left { - position: absolute; - top: 50%; - left: 0%; - transform: translate(0%, -50%); - -ms-transform: translate(-0%, -50%); + position: absolute; + top: 50%; + left: 0%; + transform: translate(0%, -50%); + -ms-transform: translate(-0%, -50%); } .display-right { - position: absolute; - top: 50%; - right: 0%; - transform: translate(0%, -50%); - -ms-transform: translate(0%, -50%); + position: absolute; + top: 50%; + right: 0%; + transform: translate(0%, -50%); + -ms-transform: translate(0%, -50%); } .display-topmiddle { - position: absolute; - left: 50%; - top: 0; - transform: translate(-50%, 0%); - -ms-transform: translate(-50%, 0%); + position: absolute; + left: 50%; + top: 0; + transform: translate(-50%, 0%); + -ms-transform: translate(-50%, 0%); } .display-bottommiddle { - position: absolute; - left: 50%; - bottom: 0; - transform: translate(-50%, 0%); - -ms-transform: translate(-50%, 0%); + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 0%); + -ms-transform: translate(-50%, 0%); } .display-container:hover .display-hover { - display: block; + display: block; } .display-container:hover span.display-hover { - display: inline-block; + display: inline-block; } .display-hover { - display: none; + display: none; } .display-position { - position: absolute; + position: absolute; } .circle { - border-radius: 50%; + border-radius: 50%; } .round-small { - border-radius: 2px; + border-radius: 2px; } .round, .round-medium { - border-radius: 4px; + border-radius: 4px; } .round-large { - border-radius: 8px; + border-radius: 8px; } .round-xlarge { - border-radius: 16px; + border-radius: 16px; } .round-xxlarge { - border-radius: 32px; + border-radius: 32px; } .row-padding, .row-padding > .half, @@ -858,623 +860,625 @@ form > span { .row-padding > .threequarter, .row-padding > .quarter, .row-padding > .col { - padding: 0 8px; + padding: 0 8px; } .container, .panel { - padding: 0.01em 16px; + padding: 0.01em 16px; } .panel { - margin-top: 16px; - margin-bottom: 16px; + margin-top: 16px; + margin-bottom: 16px; } .code, .codespan { - font-family: Consolas, "courier new"; - font-size: 16px; + font-family: Consolas, "courier new"; + font-size: 16px; } #challenge-grid { - display: grid; - /* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */ - grid-template-columns: none; - grid-auto-rows: 10rem; - gap: 1rem; - padding-top: 2rem; + display: grid; + /* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */ + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 10rem; + gap: 1rem; + padding-top: 2rem; } .code { - width: auto; - background-color: #fff; - padding: 8px 12px; - border-left: 4px solid #4caf50; - word-wrap: break-word; + width: auto; + background-color: #fff; + padding: 8px 12px; + border-left: 4px solid #4caf50; + word-wrap: break-word; } .codespan { - color: crimson; - background-color: #f1f1f1; - padding-left: 4px; - padding-right: 4px; - font-size: 110%; + color: crimson; + background-color: #f1f1f1; + padding-left: 4px; + padding-right: 4px; + font-size: 110%; } .card, .card-2 { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), + 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .card-4, .hover-shadow:hover { - box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); + box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), + 0 4px 20px 0 rgba(0, 0, 0, 0.19); } .spin { - animation: spin 2s infinite linear; + animation: spin 2s infinite linear; } @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(359deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } } .animate-fading { - animation: fading 10s infinite; + animation: fading 10s infinite; } @keyframes fading { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } } .animate-opacity { - animation: opac 0.8s; + animation: opac 0.8s; } @keyframes opac { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } .animate-top { - position: relative; - animation: animatetop 0.4s; + position: relative; + animation: animatetop 0.4s; } @keyframes animatetop { - from { - top: -300px; - opacity: 0; - } - to { - top: 0; - opacity: 1; - } + from { + top: -300px; + opacity: 0; + } + to { + top: 0; + opacity: 1; + } } .animate-left { - position: relative; - animation: animateleft 0.4s; + position: relative; + animation: animateleft 0.4s; } @keyframes animateleft { - from { - left: -300px; - opacity: 0; - } - to { - left: 0; - opacity: 1; - } + from { + left: -300px; + opacity: 0; + } + to { + left: 0; + opacity: 1; + } } .animate-right { - position: relative; - animation: animateright 0.4s; + position: relative; + animation: animateright 0.4s; } @keyframes animateright { - from { - right: -300px; - opacity: 0; - } - to { - right: 0; - opacity: 1; - } + from { + right: -300px; + opacity: 0; + } + to { + right: 0; + opacity: 1; + } } .animate-bottom { - position: relative; - animation: animatebottom 0.4s; + position: relative; + animation: animatebottom 0.4s; } @keyframes animatebottom { - from { - bottom: -300px; - opacity: 0; - } - to { - bottom: 0; - opacity: 1; - } + from { + bottom: -300px; + opacity: 0; + } + to { + bottom: 0; + opacity: 1; + } } .animate-zoom { - animation: animatezoom 0.6s; + animation: animatezoom 0.6s; } @keyframes animatezoom { - from { - transform: scale(0); - } - to { - transform: scale(1); - } + from { + transform: scale(0); + } + to { + transform: scale(1); + } } .animate-input { - transition: width 0.4s ease-in-out; + transition: width 0.4s ease-in-out; } .animate-input:focus { - width: 100% !important; + width: 100% !important; } .opacity, .hover-opacity:hover { - opacity: 0.6; + opacity: 0.6; } .opacity-off, .hover-opacity-off:hover { - opacity: 1; + opacity: 1; } .opacity-max { - opacity: 0.25; + opacity: 0.25; } .opacity-min { - opacity: 0.75; + opacity: 0.75; } .greyscale-max, .grayscale-max, .hover-greyscale:hover, .hover-grayscale:hover { - filter: grayscale(100%); + filter: grayscale(100%); } .greyscale, .grayscale { - filter: grayscale(75%); + filter: grayscale(75%); } .greyscale-min, .grayscale-min { - filter: grayscale(50%); + filter: grayscale(50%); } .sepia { - filter: sepia(75%); + filter: sepia(75%); } .sepia-max, .hover-sepia:hover { - filter: sepia(100%); + filter: sepia(100%); } .sepia-min { - filter: sepia(50%); + filter: sepia(50%); } .tiny { - font-size: 10px !important; + font-size: 10px !important; } .small { - font-size: 12px !important; + font-size: 12px !important; } .medium { - font-size: 15px !important; + font-size: 15px !important; } .large { - font-size: 18px !important; + font-size: 18px !important; } .xlarge { - font-size: 24px !important; + font-size: 24px !important; } .xxlarge { - font-size: 36px !important; + font-size: 36px !important; } .xxxlarge { - font-size: 48px !important; + font-size: 48px !important; } .jumbo { - font-size: 64px !important; + font-size: 64px !important; } .left-align { - text-align: left !important; + text-align: left !important; } .right-align { - text-align: right !important; + text-align: right !important; } .justify { - text-align: justify !important; + text-align: justify !important; } .center { - text-align: center !important; + text-align: center !important; } .border-0 { - border: 0 !important; + border: 0 !important; } .border { - border: 1px solid #ccc !important; + border: 1px solid #ccc !important; } .border-top { - border-top: 1px solid #ccc !important; + border-top: 1px solid #ccc !important; } .border-bottom { - border-bottom: 1px solid #ccc !important; + border-bottom: 1px solid #ccc !important; } .border-left { - border-left: 1px solid #ccc !important; + border-left: 1px solid #ccc !important; } .border-right { - border-right: 1px solid #ccc !important; + border-right: 1px solid #ccc !important; } .topbar { - border-top: 6px solid #ccc !important; + border-top: 6px solid #ccc !important; } .bottombar { - border-bottom: 6px solid #ccc !important; + border-bottom: 6px solid #ccc !important; } .leftbar { - border-left: 6px solid #ccc !important; + border-left: 6px solid #ccc !important; } .rightbar { - border-right: 6px solid #ccc !important; + border-right: 6px solid #ccc !important; } .section, .code { - margin-top: 16px !important; - margin-bottom: 16px !important; + margin-top: 16px !important; + margin-bottom: 16px !important; } .margin { - margin: 16px !important; + margin: 16px !important; } .margin-top { - margin-top: 16px !important; + margin-top: 16px !important; } .margin-bottom { - margin-bottom: 16px !important; + margin-bottom: 16px !important; } .margin-left { - margin-left: 16px !important; + margin-left: 16px !important; } .margin-right { - margin-right: 16px !important; + margin-right: 16px !important; } .padding-small { - padding: 4px 8px !important; + padding: 4px 8px !important; } .padding { - padding: 8px 16px !important; + padding: 8px 16px !important; } .padding-large { - padding: 12px 24px !important; + padding: 12px 24px !important; } .padding-16 { - padding-top: 16px !important; - padding-bottom: 16px !important; + padding-top: 16px !important; + padding-bottom: 16px !important; } .padding-24 { - padding-top: 24px !important; - padding-bottom: 24px !important; + padding-top: 24px !important; + padding-bottom: 24px !important; } .padding-32 { - padding-top: 32px !important; - padding-bottom: 32px !important; + padding-top: 32px !important; + padding-bottom: 32px !important; } .padding-48 { - padding-top: 48px !important; - padding-bottom: 48px !important; + padding-top: 48px !important; + padding-bottom: 48px !important; } .padding-64 { - padding-top: 64px !important; - padding-bottom: 64px !important; + padding-top: 64px !important; + padding-bottom: 64px !important; } .padding-256 { - padding-top: 256px !important; - padding-bottom: 256px !important; + padding-top: 256px !important; + padding-bottom: 256px !important; } .padding-top-64 { - padding-top: 64px !important; + padding-top: 64px !important; } .padding-top-48 { - padding-top: 48px !important; + padding-top: 48px !important; } .padding-top-32 { - padding-top: 32px !important; + padding-top: 32px !important; } .padding-top-24 { - padding-top: 24px !important; + padding-top: 24px !important; } .left { - float: left !important; + float: left !important; } .right { - float: right !important; + float: right !important; } .button:hover { - color: #000 !important; - background-color: #ccc !important; + color: #000 !important; + background-color: #ccc !important; } .transparent, .hover-none:hover { - background-color: transparent !important; + background-color: transparent !important; } .hover-none:hover { - box-shadow: none !important; + box-shadow: none !important; } /* Colors */ .amber, .hover-amber:hover { - color: #000 !important; - background-color: #ffc107 !important; + color: #000 !important; + background-color: #ffc107 !important; } .aqua, .hover-aqua:hover { - color: #000 !important; - background-color: #00ffff !important; + color: #000 !important; + background-color: #00ffff !important; } .blue, .hover-blue:hover { - color: #fff !important; - background-color: #2196f3 !important; + color: #fff !important; + background-color: #2196f3 !important; } .light-blue, .hover-light-blue:hover { - color: #000 !important; - background-color: #87ceeb !important; + color: #000 !important; + background-color: #87ceeb !important; } .brown, .hover-brown:hover { - color: #fff !important; - background-color: #795548 !important; + color: #fff !important; + background-color: #795548 !important; } .cyan, .hover-cyan:hover { - color: #000 !important; - background-color: #00bcd4 !important; + color: #000 !important; + background-color: #00bcd4 !important; } .blue-grey, .hover-blue-grey:hover, .blue-gray, .hover-blue-gray:hover { - color: #fff !important; - background-color: #607d8b !important; + color: #fff !important; + background-color: #607d8b !important; } .green, .hover-green:hover { - color: #fff !important; - background-color: #4caf50 !important; + color: #fff !important; + background-color: #4caf50 !important; } .light-green, .hover-light-green:hover { - color: #000 !important; - background-color: #8bc34a !important; + color: #000 !important; + background-color: #8bc34a !important; } .indigo, .hover-indigo:hover { - color: #fff !important; - background-color: #3f51b5 !important; + color: #fff !important; + background-color: #3f51b5 !important; } .khaki, .hover-khaki:hover { - color: #000 !important; - background-color: #f0e68c !important; + color: #000 !important; + background-color: #f0e68c !important; } .lime, .hover-lime:hover { - color: #000 !important; - background-color: #cddc39 !important; + color: #000 !important; + background-color: #cddc39 !important; } .orange, .hover-orange:hover { - color: #000 !important; - background-color: #ff9800 !important; + color: #000 !important; + background-color: #ff9800 !important; } .deep-orange, .hover-deep-orange:hover { - color: #fff !important; - background-color: #ff5722 !important; + color: #fff !important; + background-color: #ff5722 !important; } .pink, .hover-pink:hover { - color: #fff !important; - background-color: #e91e63 !important; + color: #fff !important; + background-color: #e91e63 !important; } .purple, .hover-purple:hover { - color: #fff !important; - background-color: #9c27b0 !important; + color: #fff !important; + background-color: #9c27b0 !important; } .deep-purple, .hover-deep-purple:hover { - color: #fff !important; - background-color: #673ab7 !important; + color: #fff !important; + background-color: #673ab7 !important; } .red, .hover-red:hover { - color: #fff !important; - background-color: #f44336 !important; + color: #fff !important; + background-color: #f44336 !important; } .sand, .hover-sand:hover { - color: #000 !important; - background-color: #fdf5e6 !important; + color: #000 !important; + background-color: #fdf5e6 !important; } .teal, .hover-teal:hover { - color: #fff !important; - background-color: #009688 !important; + color: #fff !important; + background-color: #009688 !important; } .yellow, .hover-yellow:hover { - color: #000 !important; - background-color: #ffeb3b !important; + color: #000 !important; + background-color: #ffeb3b !important; } .white, .hover-white:hover { - color: #000 !important; - background-color: #fff !important; + color: #000 !important; + background-color: #fff !important; } .black, .hover-black:hover { - color: #fff !important; - background-color: #000 !important; + color: #fff !important; + background-color: #000 !important; } .grey, .hover-grey:hover, .gray, .hover-gray:hover { - color: #000 !important; - background-color: #9e9e9e !important; + color: #000 !important; + background-color: #9e9e9e !important; } .light-grey, .hover-light-grey:hover, .light-gray, .hover-light-gray:hover { - color: #000 !important; - background-color: #f1f1f1 !important; + color: #000 !important; + background-color: #f1f1f1 !important; } .dark-grey, .hover-dark-grey:hover, .dark-gray, .hover-dark-gray:hover { - color: #fff !important; - background-color: #616161 !important; + color: #fff !important; + background-color: #616161 !important; } .pale-red, .hover-pale-red:hover { - color: #000 !important; - background-color: #ffdddd !important; + color: #000 !important; + background-color: #ffdddd !important; } .pale-green, .hover-pale-green:hover { - color: #000 !important; - background-color: #ddffdd !important; + color: #000 !important; + background-color: #ddffdd !important; } .pale-yellow, .hover-pale-yellow:hover { - color: #000 !important; - background-color: #ffffcc !important; + color: #000 !important; + background-color: #ffffcc !important; } .pale-blue, .hover-pale-blue:hover { - color: #000 !important; - background-color: #ddffff !important; + color: #000 !important; + background-color: #ddffff !important; } .text-amber, .hover-text-amber:hover { - color: #ffc107 !important; + color: #ffc107 !important; } .text-aqua, .hover-text-aqua:hover { - color: #00ffff !important; + color: #00ffff !important; } .text-blue, .hover-text-blue:hover { - color: #2196f3 !important; + color: #2196f3 !important; } .text-light-blue, .hover-text-light-blue:hover { - color: #87ceeb !important; + color: #87ceeb !important; } .text-brown, .hover-text-brown:hover { - color: #795548 !important; + color: #795548 !important; } .text-cyan, .hover-text-cyan:hover { - color: #00bcd4 !important; + color: #00bcd4 !important; } .text-blue-grey, .hover-text-blue-grey:hover, .text-blue-gray, .hover-text-blue-gray:hover { - color: #607d8b !important; + color: #607d8b !important; } .text-green, .hover-text-green:hover { - color: #4caf50 !important; + color: #4caf50 !important; } .text-light-green, .hover-text-light-green:hover { - color: #8bc34a !important; + color: #8bc34a !important; } .text-indigo, .hover-text-indigo:hover { - color: #3f51b5 !important; + color: #3f51b5 !important; } .text-khaki, .hover-text-khaki:hover { - color: #b4aa50 !important; + color: #b4aa50 !important; } .text-lime, .hover-text-lime:hover { - color: #cddc39 !important; + color: #cddc39 !important; } .text-orange, .hover-text-orange:hover { - color: #ff9800 !important; + color: #ff9800 !important; } .text-deep-orange, .hover-text-deep-orange:hover { - color: #ff5722 !important; + color: #ff5722 !important; } .hover-text-pink:hover { - color: #e91e63 !important; + color: #e91e63 !important; } .text-purple, .hover-text-purple:hover { - color: #9c27b0 !important; + color: #9c27b0 !important; } .text-deep-purple, .hover-text-deep-purple:hover { - color: #673ab7 !important; + color: #673ab7 !important; } .text-red, .hover-text-red:hover { - color: #f44336 !important; + color: #f44336 !important; } .text-sand, .hover-text-sand:hover { - color: #fdf5e6 !important; + color: #fdf5e6 !important; } .text-teal, .hover-text-teal:hover { - color: #009688 !important; + color: #009688 !important; } .text-yellow, .hover-text-yellow:hover { - color: #d2be0e !important; + color: #d2be0e !important; } .text-white, .hover-text-white:hover { - color: #fff !important; + color: #fff !important; } .text-black, .hover-text-black:hover { - color: #000 !important; + color: #000 !important; } .text-grey, .hover-text-grey:hover, .text-gray, .hover-text-gray:hover { - color: #757575 !important; + color: #757575 !important; } .text-light-grey, .hover-text-light-grey:hover, .text-light-gray, .hover-text-light-gray:hover { - color: #f1f1f1 !important; + color: #f1f1f1 !important; } .text-dark-grey, .hover-text-dark-grey:hover, .text-dark-gray, .hover-text-dark-gray:hover { - color: #3a3a3a !important; + color: #3a3a3a !important; } .error-message { - color: red; + color: red; } .success-message { - color: green; + color: green; }