Skip to content

Applied the styles to login page #3

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
jshaba17 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Applied the styles to login page #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5fd5697
Applied the styles to login page
jshaba17 Apr 24, 2023
0149e82
Did the same as Login page
jshaba17 Apr 24, 2023
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
196 changes: 196 additions & 0 deletions src/app/login/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@

*{
margin: 0px;
padding: 0px;
}

.area{
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height:100vh;


}

.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;

}

.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}


.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}



@keyframes animate {

0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}

100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}

}

.login_background {
background-color: #fff;
display: block;
padding: 1rem;
max-width: 350px;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.form-title {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
text-align: center;
color: #000;
}

.input-container {
position: relative;
}

.input-container input, .form button {
outline: none;
border: 1px solid #0b0b0c;
margin: 8px 0;
}

.input-container input {
background-color: #161616;
padding: 1rem;
padding-right: 3rem;
font-size: 0.875rem;
line-height: 1.25rem;
width: 300px;
border-radius: 0.5rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.submit {
display: block;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
background-color: #030303;
color: #ffffff;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
width: 100%;
border-radius: 0.5rem;
text-transform: uppercase;
}
.signup-link {
color: #6B7280;
font-size: 0.875rem;
line-height: 1.25rem;
text-align: center;
}

.signup-link a {
text-decoration: underline;
}



39 changes: 33 additions & 6 deletions src/app/login/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
import styles from "../../app/page.module.css";
import { useAuthContext } from "@/context/AuthContext";
import Link from "next/link";
import "./login.css";


const LoginPage = () => {
const [email, setEmail] = React.useState("");
Expand All @@ -31,11 +33,27 @@ const LoginPage = () => {
};

return (
<main className={styles.main}>
<div className="wrapper">
<div className="form-wrapper">
<h1 className="mt-60 mb-30">Login</h1>
<div className="area">
<ul className="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<main className={styles.main}>
<div className="login_background">
<p class="form-title">Logohu tek llogaria</p>



<form onSubmit={handleForm} className="form">
<div class="input-container">
<label htmlFor="email">
<p>Email</p>
<input
Expand All @@ -46,7 +64,10 @@ const LoginPage = () => {
id="email"
placeholder="example@mail.com"
/>

</label>
</div>
<div class="input-container">
<label htmlFor="password">
<p>Password</p>
<input
Expand All @@ -58,16 +79,22 @@ const LoginPage = () => {
placeholder="password"
/>
</label>
<button type="submit">Log in</button>
</div>
<button type="submit" className="submit">Log in</button>
<Link href="/"> Faqja Kryesore </Link> <br /> <br />
<p class="signup-link">
<Link href="/register">
Nuk ke akoma llogari? Regjistrohu pra ca pret{" "}
</Link>
</p>
</form>
</div>
</div>


</main>
</div>
);

};

export default LoginPage;
30 changes: 26 additions & 4 deletions src/app/register/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
import { useAuthContext } from "@/context/AuthContext";
import Link from "next/link";
import { setCustomUserClaims } from "firebase/auth";
import "./register.css";
import styles from "../../app/page.module.css";

const RegisterPage = () => {
const [email, setEmail] = React.useState("");
Expand All @@ -25,10 +27,25 @@ const RegisterPage = () => {
return router.push("/dashboard");
};
return (
<div className="wrapper">
<div className="form-wrapper">
<h1 className="mt-60 mb-30">Regjistrohu</h1>
<div className="area">
<ul className="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<main className={styles.main}>
<div className="login_background">

<p1 className="form-title">Regjistrohu</p1>
<form onSubmit={handleForm} className="form">
<div class="input-container">
<label htmlFor="email">
<p>Email</p>
<input
Expand All @@ -40,6 +57,8 @@ const RegisterPage = () => {
placeholder="example@mail.com"
/>
</label>
</div>
<div class="input-container">
<label htmlFor="password">
<p>Password</p>
<input
Expand All @@ -51,11 +70,14 @@ const RegisterPage = () => {
placeholder="password"
/>
</label>
<button type="submit">Register</button>
</div>
<button type="submit" className="submit">Register</button>
<Link href="/"> Faqja Kryesore </Link>
</form>
</div>
</main>
</div>

);
};

Expand Down
Loading