Skip to content

css customization & footer addition #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brianmurutu wants to merge 1 commit into
base: main
Choose a base branch
from
Open

css customization & footer addition #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 79 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,87 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Management App</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Management App</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<h1>Learning Management App</h1>
<form id="register-form">
<h2>Register</h2>
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="full_name" placeholder="Full Name" required>
<button type="submit">Register</button>
</form>
<form id="login-form">
<div class="wrapper">
<div class="form-wrapper sign-in">

<form action="">
<h2>Login</h2>
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<div class="input-group">
<input type="text" required>
<label for="">Username</label>
</div>
<div class="input-group">
<input type="password" required>
<label for="">Password</label>
</div>
<div class="remember">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit">Login</button>
</form>
<form id="logout-form">
<button type="submit">Logout</button>
</form>
<script src="script.js"></script>
<div class="signUp-link">
<p>Don't have an account? <a href="#" class="signUpBtn-link">Sign Up</a></p>
</div>
</form>
</div>

<div class="form-wrapper sign-up">
<form action="">
<h2>Sign Up</h2>
<div class="input-group">
<input type="text" required>
<label for="">Username</label>
</div>
<div class="input-group">
<input type="email" required>
<label for="">Email</label>
</div>
<div class="input-group">
<input type="password" required>
<label for="">Password</label>
</div>
<div class="remember">
<label><input type="checkbox"> I agree to the terms & conditions</label>
</div>
<button type="submit">Sign Up</button>
<div class="signUp-link">
<p>Already have an account? <a href="#" class="signInBtn-link">Sign In</a></p>
</div>
</form>
</div>
</div>

<script src="script.js"></script>
<footer class="footer">
<div class="container">
<div id="ftr-wrap">
<div class="ftr-links">
<ul>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
<div class="copyright-plp">
<p class="copyright">&copy; 2024 PLP Student Developers, Africa</p>
</div>
<div>
<p class="amazon">Study at PLP</p>
</div>
</div>
</div>
</footer>

</body>
</html>

</html>
14 changes: 13 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

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');
});
57 changes: 57 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
147 changes: 147 additions & 0 deletions style1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}