diff --git a/index.html b/index.html index 1e0080d9..4d670d65 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,87 @@ + - - - Learning Management App - + + + + Learning Management App + + + + -

Learning Management App

-
-

Register

- - - - - -
-
+
+ + + +
+ + + + - + + \ No newline at end of file diff --git a/script.js b/script.js index 7293d9e6..e7ac0127 100644 --- a/script.js +++ b/script.js @@ -204,4 +204,16 @@ function displayFullName(fullName) { const fullNameElement = document.getElementById('user-fullname'); // Set the inner HTML of the element to the user's full name fullNameElement.textContent = fullName; -} \ No newline at end of file +} + +const signInBtnLink = document.querySelector('.signInBtn-link'); +const signUpBtnLink = document.querySelector('.signUpBtn-link'); +const wrapper = document.querySelector('.wrapper'); + +signUpBtnLink.addEventListener('click', () => { + wrapper.classList.toggle('active'); +}); + +signInBtnLink.addEventListener('click', () => { + wrapper.classList.toggle('active'); +}); \ No newline at end of file diff --git a/style.css b/style.css index 1e1b20da..4d309107 100644 --- a/style.css +++ b/style.css @@ -71,4 +71,61 @@ iframe { width: 100%; height: 400px; margin-top: 20px; +} + +/* Footer Styling */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + padding:0; + margin: 0; +} + +.footer { + position: relative; + bottom:0; + width:100%; + background-color: #1791b8; +} + +.footer p { + color: #fff; + font-size:.75em; + display: inline-block; +} + +.container { + max-width: 1674px; /* adjust to allow for padding as needed */ + padding:0 50px; +} + +#ftr-wrap { + display:table; + table-layout:fixed; + width:100%; + margin:0 auto; +} +#ftr-wrap > div { + display:table-cell; + vertical-align:middle; + outline:1px dashed red; /* TEST Outline. TO BE DELETED. */ +} +#ftr-wrap > div:nth-child(1) {text-align:left;} +#ftr-wrap > div:nth-child(2) {text-align:center;} +#ftr-wrap > div:nth-child(3) {text-align:right;} + +.ftr-links ul { + padding: 0; +} +.ftr-links ul li { + display: inline-block; + padding-right: 15px; + font-size:.75em; +} +.ftr-links ul li a { + color: #fff; + margin: 0; } \ No newline at end of file diff --git a/style1.css b/style1.css new file mode 100644 index 00000000..62c095bf --- /dev/null +++ b/style1.css @@ -0,0 +1,147 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #000; +} + +.wrapper { + position: relative; + width: 400px; + height: 500px; + background: #000; + box-shadow: 0 0 50px #0ef; + border-radius: 20px; + padding: 40px; + overflow: hidden; +} + +.wrapper:hover { + animation: animate 1s linear infinite; +} + +@keyframes animate { + 100% { + filter: hue-rotate(360deg); + } +} + +.form-wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + transition: 1s ease-in-out; +} + +.wrapper.active .form-wrapper.sign-in { + transform: translateY(-450px); +} + +.wrapper .form-wrapper.sign-up { + position: absolute; + top: 450px; + left: 0; +} + +.wrapper.active .form-wrapper.sign-up { + transform: translateY(-450px); +} + +h2 { + font-size: 30px; + color: #fff; + text-align: center; +} + +.input-group { + position: relative; + margin: 30px 0; + border-bottom: 2px solid #fff; +} + +.input-group label { + position: absolute; + top: 50%; + left: 5px; + transform: translateY(-50%); + font-size: 16px; + color: #fff; + pointer-events: none; + transition: .5s; +} + +.input-group input { + width: 320px; + height: 40px; + font-size: 16px; + color: #fff; + padding: 0 5px; + background: transparent; + border: none; + outline: none; +} + +.input-group input:focus~label, +.input-group input:valid~label { + top: -5px; +} + +.remember { + margin: -5px 0 15px 5px; +} + +.remember label { + color: #fff; + font-size: 14px; +} + +.remember label input { + accent-color: #0ef; +} + +button { + position: relative; + width: 100%; + height: 40px; + background: #0ef; + box-shadow: 0 0 10px #0ef; + font-size: 16px; + color: #000; + font-weight: 500; + cursor: pointer; + border-radius: 30px; + border: none; + outline: none; +} + +.signUp-link { + font-size: 14px; + text-align: center; + margin: 15px 0; +} + +.signUp-link p { + color: #fff; +} + +.signUp-link p a { + color: #0ef; + text-decoration: none; + font-weight: 500; +} + +.signUp-link p a:hover { + text-decoration: underline; +} \ No newline at end of file