Skip to content
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

Created Login Page and Update Navigation. #82

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Created Login Page and Update Navigation. #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
99f99ae
Updated package-lock.json
Divyanjali-Mudili Jan 29, 2025
880b72b
Update package-lock.json
Divyanjali-Mudili Jan 29, 2025
1742920
sign in page created
Divyanjali-Mudili Jan 29, 2025
ca50957
modified login pages
Divyanjali-Mudili Jan 29, 2025
c67c34d
resolved error
Divyanjali-Mudili Feb 1, 2025
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
8 changes: 6 additions & 2 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
<link rel="stylesheet" href="styles.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">

<script>
function signin() {
window.location.href="loginpage.html"
}
</script>
</head>
<body>
<header class="header" style="background: rgba(168, 173, 200, 0.9);">
Expand All @@ -24,7 +28,7 @@ <h1 class="brand-title">Fusion Vision</h1>
<a href="reviews.html" class="nav-link">Reviews</a>
</nav>
<div class="auth-buttons">
<button class="btn-secondary" id="loginButton">Sign In</button>
<button class="btn-secondary" id="loginButton" onclick="signin()">Sign In</button>
<button class="btn-primary" id="registerButton">Get Started</button>
</div>
</header>
Expand Down
8 changes: 6 additions & 2 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
<link rel="stylesheet" href="styles.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">

<script>
function signin() {
window.location.href="loginpage.html"
}
</script>
</head>
<style>

Expand Down Expand Up @@ -134,7 +138,7 @@ <h1 class="brand-title">Fusion Vision</h1>
<a href="reviews.html" class="nav-link">Reviews</a>
</nav>
<div class="auth-buttons">
<button class="btn-secondary" id="loginButton">Sign In</button>
<button class="btn-secondary" id="loginButton" onclick="signin()">Sign In</button>
<button class="btn-primary" id="registerButton">Get Started</button>
</div>
</header>
Expand Down
7 changes: 6 additions & 1 deletion features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@
}
}
</style>
<script>
function signin() {
window.location.href="loginpage.html"
}
</script>
</head>
<body>
<header class="header">
Expand All @@ -68,7 +73,7 @@ <h1 class="brand-title">Fusion Vision</h1>
<a href="reviews.html" class="nav-link">Reviews</a>
</nav>
<div class="auth-buttons">
<button class="btn-secondary" id="loginButton">Sign In</button>
<button class="btn-secondary" id="loginButton" onclick="signin()">Sign In</button>
<button class="btn-primary" id="registerButton">Get Started</button>
</div>
</header>
Expand Down
8 changes: 6 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
<link rel="stylesheet" href="styles.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">

<script>
function signin() {
window.location.href="loginpage.html";
}
</script>
</head>
<body>
<header class="header" style="background: rgba(168, 173, 200, 0.9);">
Expand All @@ -26,7 +30,7 @@ <h1 class="brand-title">Fusion Vision</h1>
<a href="reviews.html" class="nav-link">Reviews</a>
</nav>
<div class="auth-buttons">
<button class="btn-secondary" id="loginButton">Sign In</button>
<button class="btn-secondary" id="loginButton" onclick="signin()">Sign In</button>
<button class="btn-primary" id="registerButton">Get Started</button>
</div>
</header>
Expand Down
285 changes: 285 additions & 0 deletions loginpage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,285 @@
:root {
--primary-color: #0070f3;
--secondary-color: #000;
--background-color: #fff;
--text-color: #111;
--gray-light: #f5f5f5;
--gray: #888;
--radius: 8px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* background */
.bg {
height: 100vh;
width: 100%;
background: var(--background-color) url('FusionVision_BG_blurred.jpg') no-repeat center center fixed;
background-size: cover;
color: var(--text-color);
line-height: 1.6;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

/* sign in box */
.box {
height: 700px;
width: 400px;
background: rgba(255, 255, 255, 0.8);
align-items: center;
justify-content: center;
border-radius: 4px;
}

/* logo */
.image {
height: 120px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-top: 10px;
}

.image img{
transition: all ease 1s;
}

.image:hover img{
scale: 1.2;
}

/* sign in heading */
h2 {
text-align: center;
margin-top: 30px;
margin-bottom: -20px;
color: black;
font-size: 30px;
font-family: 'Inter', sans-serif;
}

/* input boxes */
.input-boxes {
margin-top: 20px;
position: relative;
padding-top: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-left: -13px;
}

.input-boxes input {
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: silver;
padding: 12px 15px;
border-radius: 3px;
font-size: 16px;
width: 300px;
outline: none;
font-family: sans-serif;
}

.input-boxes .fa-solid {
position: absolute;
left: 350px;
top: 60%;
transform: translateY(-30%);
}

.input-boxes .placeholder {
position: absolute;
left: 45px;
top: calc(50% + 10px);
font-family: 'Inter', sans-serif;
transform: translateY(-50%);
font-weight: 700;
color: black;
font-size: 16px;
transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}

.input-boxes input:focus + .placeholder,
.input-boxes input:valid + .placeholder {
top: 0px;
font-size: 15px;
color: #222;
transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}

.input-boxes .border {
position: absolute;
width: 327px;
height: calc(100% - 20px);
left: 43px;
border-radius: 3px;
}

.input-boxes .border::before,
.input-boxes .border::after {
content: "";
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-radius: 3px;
}

.input-boxes .border::before {
left: 0;
bottom: -2px;
border-bottom: 0px solid #222;
border-right: 0px solid #222;
transition: border-width 0.3s ease 0.9s, width 0.3s ease 0.9s,
height 0.3s ease 0.6s;
}

.input-boxes .border::after {
right: 0;
top: 0;
border-top: 0px solid #222;
border-left: 0px solid #222;
transition: border-width 0s ease 0.6s, width 0.3s ease 0.3s, height 0.3s ease;
}

.input-boxes input:focus ~ .border::before,
.input-boxes input:focus ~ .border::after,
.input-boxes input:valid ~ .border::before,
.input-boxes input:valid ~ .border::after {
width: 100%;
height: 100%;
border-width: 2px;
}

.input-boxes input:focus ~ .border::before,
.input-boxes input:valid ~ .border::before {
transition: width 0.3s ease, height 0.3s ease 0.3s;
}

.input-boxes input:focus ~ .border::after,
.input-boxes input:valid ~ .border::after {
transition: border-width 0s ease 0.6s, width 0.3s ease 0.6s,
height 0.3s ease 0.9s;
}

/* checkbox */
.check,
.check-group {
display: flex;
align-items: center;
justify-content: space-between;
}

.check-group {
column-gap: 0.2rem;
margin-top: 30px;
font-size: 15px;
}

.login-check {
margin-left: 20px;
zoom: 1.1;
font-family: 'Inter', sans-serif;
}

/* forgot password */
.forgot {
color: var(--white-color);
margin-bottom: -20px;
margin-right: 20px;
font-size: 15px;
font-family: 'Inter', sans-serif;
}

/* signin button */
.submit {
align-items: center;
justify-content: center;
display: flex;
}

button {
margin-top: 30px;
margin-bottom: -5px;
height: 40px;
width: 120px;
position: relative;
border: none;
transition: all 0.5s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
background-color: black;
color: white;
font-size: 20px;
margin-bottom: 15px;
opacity: 0.7;
}

button::before,
button::after {
content: "";
position: absolute;
z-index: -1;
}

button:hover {
background: blue;
box-shadow: 0 0 5px blue, 0 0 25px blue, 0 0 50px blue,
0 0 200px blue;
color: whitesmoke
}

/* or signin using */
.heading {
margin-top: -10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #222;
}

/* icons */
.icons {
margin-top: -10px;
margin-bottom: -2px;
display: inline-block;
align-items: center;
justify-content: center;
margin-right: 15px;
margin-inline-start: 25px;
font-size: 25px;
cursor: pointer;
}

.signup {
margin-top: -15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #222;
}

/* signup link */
.create {
margin-top: -21px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}

h5 {
font-family: 'Inter', sans-serif;
}
Loading