Add files via upload

GitB00lean · Jul 23, 2024 · 347ff5c · 347ff5c
1 parent e0e2501
commit 347ff5c
Show file tree

Hide file tree

Showing 7 changed files with 497 additions and 6 deletions.
diff --git a/Sign-in-page.html b/Sign-in-page.html
@@ -12,19 +12,19 @@
         <div class="container__form container--signup">
             <form action="#" class="form" id="form1">
                 <h2 class="form__title">Sign Up</h2>
-                <input type="text" placeholder="User" class="input" />
-                <input type="email" placeholder="Email" class="input" />
-                <input type="password" placeholder="Password" class="input" />
-                <button class="btn">Sign Up</button>
+                <input type="text" placeholder="User" class="user-signup" />
+                <input type="email" placeholder="Email" class="email-signup" />
+                <input type="password" placeholder="Password" class="password-signup" />
+                <button class="btn-signup">Sign Up</button>
             </form>
         </div>
 
         <!-- Sign In -->
         <div class="container__form container--signin">
             <form action="#" class="form" id="form2">
                 <h2 class="form__title">Sign In</h2>
-                <input type="email" placeholder="Email" class="input" />
-                <input type="password" placeholder="Password" class="input" />
+                <input type="email" placeholder="Email" class="email-signin" />
+                <input type="password" placeholder="Password" class="password-signin" />
                 <a href="#" class="link">Forgot your password?</a>
                 <button class="btn">Sign In</button>
             </form>

diff --git a/Signin.css b/Signin.css
@@ -0,0 +1,212 @@
+:root {
+	/* COLORS */
+	--white: #e9e9e9;
+	--gray: #333;
+	--blue: #0367a6;
+	--lightblue: #008997;
+
+	/* RADII */
+	--button-radius: 0.7rem;
+
+	/* SIZES */
+	--max-width: 758px;
+	--max-height: 420px;
+
+	font-size: 16px;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+body {
+	align-items: center;
+	background-color: var(--white);
+	background-image: url(../WhatsApp\ Image\ 2024-07-09\ at\ 16.24.57.jpeg);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	display: grid;
+	height: 90vh;
+	place-items: center;
+}
+
+.form__title {
+	font-weight: 300;
+	margin: 0;
+	margin-bottom: 1.25rem;
+}
+
+.link {
+	color: var(--gray);
+	font-size: 0.9rem;
+	margin: 1.5rem 0;
+	text-decoration: none;
+}
+
+.container {
+	background-color: var(--white);
+	border-radius: var(--button-radius);
+	box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
+		0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
+	height: var(--max-height);
+	max-width: var(--max-width);
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+
+.container__form {
+	height: 100%;
+	position: absolute;
+	top: 0;
+	transition: all 0.6s ease-in-out;
+}
+
+.container--signin {
+	left: 0;
+	width: 50%;
+	z-index: 2;
+}
+
+.container.right-panel-active .container--signin {
+	transform: translateX(100%);
+}
+
+.container--signup {
+	left: 0;
+	opacity: 0;
+	width: 50%;
+	z-index: 1;
+}
+
+.container.right-panel-active .container--signup {
+	animation: show 0.6s;
+	opacity: 1;
+	transform: translateX(100%);
+	z-index: 5;
+}
+
+.container__overlay {
+	height: 100%;
+	left: 50%;
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	transition: transform 0.6s ease-in-out;
+	width: 50%;
+	z-index: 100;
+}
+
+.container.right-panel-active .container__overlay {
+	transform: translateX(-100%);
+}
+
+.overlay {
+	background-color: var(--lightblue);
+	background: url("../WhatsApp\ Image\ 2024-07-09\ at\ 16.24.57.jpeg");
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	height: 100%;
+	left: -100%;
+	position: relative;
+	transform: translateX(0);
+	transition: transform 0.6s ease-in-out;
+	width: 200%;
+}
+
+.container.right-panel-active .overlay {
+	transform: translateX(50%);
+}
+
+.overlay__panel {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	justify-content: center;
+	position: absolute;
+	text-align: center;
+	top: 0;
+	transform: translateX(0);
+	transition: transform 0.6s ease-in-out;
+	width: 50%;
+}
+
+.overlay--left {
+	transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay--left {
+	transform: translateX(0);
+}
+
+.overlay--right {
+	right: 0;
+	transform: translateX(0);
+}
+
+.container.right-panel-active .overlay--right {
+	transform: translateX(20%);
+}
+
+.btn {
+	background-color: var(--blue);
+	background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
+	border-radius: 20px;
+	border: 1px solid var(--blue);
+	color: var(--white);
+	cursor: pointer;
+	font-size: 0.8rem;
+	font-weight: bold;
+	letter-spacing: 0.1rem;
+	padding: 0.9rem 4rem;
+	text-transform: uppercase;
+	transition: transform 80ms ease-in;
+}
+
+.form > .btn {
+	margin-top: 1.5rem;
+}
+
+.btn:active {
+	transform: scale(0.95);
+}
+
+.btn:focus {
+	outline: none;
+}
+
+.form {
+	background-color: var(--white);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding: 0 3rem;
+	height: 100%;
+	text-align: center;
+}
+
+.input {
+	background-color: #fff;
+	border: none;
+	padding: 0.9rem 0.9rem;
+	margin: 0.5rem 0;
+	width: 100%;
+}
+
+@keyframes show {
+	0%,
+	49.99% {
+		opacity: 0;
+		z-index: 1;
+	}
+
+	50%,
+	100% {
+		opacity: 1;
+		z-index: 5;
+	}
+}
diff --git a/Signin.js b/Signin.js
@@ -0,0 +1,21 @@
+const signInBtn = document.getElementById("signIn");
+const signUpBtn = document.getElementById("signUp");
+const fistForm = document.getElementById("form1");
+const secondForm = document.getElementById("form2");
+const container = document.querySelector(".container");
+const user_signup= document.querySelector(".user-signup")
+
+
+
+
+signInBtn.addEventListener("click", () => {
+	container.classList.remove("right-panel-active");
+});
+
+signUpBtn.addEventListener("click", () => {
+	container.classList.add("right-panel-active");
+});
+
+fistForm.addEventListener("submit", (e) => e.preventDefault());
+secondForm.addEventListener("submit", (e) => e.preventDefault());
+
diff --git a/User-Profile.css b/User-Profile.css
@@ -0,0 +1,123 @@
+*{
+    padding: 0%;
+    margin: 0%;
+}
+body{
+    background-color: #48CAE4;
+}
+nav{
+    background-color: #ADE8F4;
+    color: black;
+    display: flex;
+    justify-content: space-around;
+    height: 7vh;
+}
+.icon-text{
+    background-color: #ADE8F4;
+    color: black;
+    margin-top: 10px;
+}
+.option{
+    margin-top: 15px;
+}
+.option>a{
+    background-color: #ADE8F4;
+    color: black;
+    width: 400px;
+    margin: 10px;
+    text-decoration: none;
+}
+.option>a:hover{
+    color: #03045E;
+}
+.log-out{
+    height: 70%;
+    margin-top: 7px;
+    padding: 5px;
+    border-radius: 20%;
+    color: black;
+    background-color: #EDAC61;
+}
+.log-out:hover{
+    background-color: #ec9f47;
+}
+.card{
+    display: flex;
+    justify-content: space-around;
+    background: rgba( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 8px );
+    -webkit-backdrop-filter: blur( 8px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
+    width: 45%;
+    margin: 6%;
+    margin-left: 27%;
+    display: flex;
+    height: 35vh;
+}
+h3{
+    text-align: center;
+    font-size: x-large;
+    margin-top: 15px;
+}
+p{
+    text-align: center;
+    font-size: large;
+    margin-top: 5px;
+}
+.primary{
+    width: 15vw;
+}
+.call,.mail,.location{
+    display: flex;
+    color: black;
+    margin: 15px;
+    justify-content: space-around;
+}
+.call-sign,.mail-sign,.location-sign{
+    margin-top: 5px;
+}
+.call{
+    margin-top: 20px;
+}
+.mail>a{
+    color: black;
+    text-decoration: none;
+}
+.logo{
+    margin-top: 20%;
+    margin-left: -40%;
+    height: 100px;
+    width: 100px;
+}
+img{
+    height: 200%;
+    width: 200%;
+    border-radius: 50%;
+}
+.btn{
+    margin-left: 45%;
+    margin-top: -3%;
+}
+.btn>button{
+    background-color: #EDAC61;
+    color: black;
+    padding: 5px;
+}
+.btn>button:hover{
+    background-color: #ec9f47;
+}
+footer{
+    position: absolute;
+    width: 100vw;
+    top: 80%;
+    display: flex;
+    justify-content: space-around;
+    background-color: #ADE8F4;
+    color: black;
+    height: 20vh;
+}
+.foot1>p,.foot2>p{
+    margin: 10px;
+}