From 99f99ae48843e6b4728bc9e80df935d387fc9551 Mon Sep 17 00:00:00 2001 From: Divyanjali-Mudili Date: Wed, 29 Jan 2025 14:00:04 +0530 Subject: [PATCH 1/4] Updated package-lock.json --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 6e55578..43621ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "FusionVision", + "name": "Fusionvision", "lockfileVersion": 3, "requires": true, "packages": { From 17429206c54847150e3af4b265e5cc8a573350e6 Mon Sep 17 00:00:00 2001 From: Divyanjali-Mudili Date: Wed, 29 Jan 2025 15:59:56 +0530 Subject: [PATCH 2/4] sign in page created --- about.html | 8 +- contact.html | 8 +- features.html | 7 +- index.html | 8 +- loginpage.css | 313 +++++++++++++++++++++++++++++++++++++++++++++++++ loginpage.html | 62 ++++++++++ reviews.html | 8 +- styles.css | 4 +- 8 files changed, 407 insertions(+), 11 deletions(-) create mode 100644 loginpage.css create mode 100644 loginpage.html diff --git a/about.html b/about.html index b4883e5..afa7d45 100644 --- a/about.html +++ b/about.html @@ -8,7 +8,11 @@ - +
@@ -24,7 +28,7 @@

Fusion Vision

Reviews
- +
diff --git a/contact.html b/contact.html index aea93df..d7d423a 100644 --- a/contact.html +++ b/contact.html @@ -8,7 +8,11 @@ - + +
@@ -68,7 +73,7 @@

Fusion Vision

Reviews
- +
diff --git a/index.html b/index.html index 14724eb..ada3d7f 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,11 @@ - +
@@ -26,7 +30,7 @@

Fusion Vision

Reviews
- +
diff --git a/loginpage.css b/loginpage.css new file mode 100644 index 0000000..786fc80 --- /dev/null +++ b/loginpage.css @@ -0,0 +1,313 @@ +: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); +} + +.bg { + /* height: 100vh; + width: 100%; + background: linear-gradient(45deg, gray, #0047f3, #0070f3, whitesmoke); + background-size: 300% 300%; + animation: color 5s ease-in-out infinite; + align-items: center; + justify-content: center; + display: flex; */ + /* #004da7 */ + 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; +} +/* @keyframes color { + 0% { + background-position: 0 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0 50%; + } +} */ + +.box { + height: 700px; + width: 400px; + background: rgba(255, 255, 255, 0.8); + align-items: center; + justify-content: center; + border-radius: 4px; +} + +.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; +} + +h2 { + text-align: center; + margin-top: 30px; + margin-bottom: -20px; + color: black; + font-size: 30px; + font-family: 'Inter', sans-serif; +} + +/* label { + margin-top: 30px; + display: block; + margin-bottom: 5px; + font-size: 14px; +} + +input { + margin-top: 20px; + width: 300px; + padding: 8px; + margin: 5px 0; + border: 1px solid black; + border-radius: 4px; +} */ + + + /* start */ +.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; +} + +.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 { + color: var(--white-color); + margin-bottom: -20px; + margin-right: 20px; + font-size: 15px; + font-family: 'Inter', sans-serif; +} + +.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 +} + +.heading { + margin-top: -10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + color: #222; +} + +.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; +} + +.create { + margin-top: -21px; + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; +} + +h5 { + font-family: 'Inter', sans-serif; +} \ No newline at end of file diff --git a/loginpage.html b/loginpage.html new file mode 100644 index 0000000..3ecd761 --- /dev/null +++ b/loginpage.html @@ -0,0 +1,62 @@ + + + + + + Login Page + + + + + +
+ +
+
+ +
+

Sign In

+
+ +
+
+ +
+
+
+ + +
+ Forget Password? +
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/reviews.html b/reviews.html index e82bcf4..2bae8a0 100644 --- a/reviews.html +++ b/reviews.html @@ -8,7 +8,11 @@ - + diff --git a/index.html b/index.html index ada3d7f..36a8fbe 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ diff --git a/loginpage.css b/loginpage.css index 0f67e67..1ee24b5 100644 --- a/loginpage.css +++ b/loginpage.css @@ -8,7 +8,7 @@ --radius: 8px; --shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } - +/* background */ .bg { height: 100vh; width: 100%; @@ -24,6 +24,7 @@ justify-content: center; } +/* sign in box */ .box { height: 700px; width: 400px; @@ -33,6 +34,7 @@ border-radius: 4px; } +/* logo */ .image { height: 120px; width: 100%; @@ -51,6 +53,7 @@ scale: 1.2; } +/* sign in heading */ h2 { text-align: center; margin-top: 30px; @@ -60,6 +63,7 @@ h2 { font-family: 'Inter', sans-serif; } +/* input boxes */ .input-boxes { margin-top: 20px; position: relative; @@ -167,6 +171,7 @@ h2 { height 0.3s ease 0.9s; } +/* checkbox */ .check, .check-group { display: flex; @@ -186,6 +191,7 @@ h2 { font-family: 'Inter', sans-serif; } +/* forgot password */ .forgot { color: var(--white-color); margin-bottom: -20px; @@ -194,6 +200,7 @@ h2 { font-family: 'Inter', sans-serif; } +/* signin button */ .submit { align-items: center; justify-content: center; @@ -232,6 +239,7 @@ button:hover { color: whitesmoke } +/* or signin using */ .heading { margin-top: -10px; display: flex; @@ -241,6 +249,7 @@ button:hover { color: #222; } +/* icons */ .icons { margin-top: -10px; margin-bottom: -2px; @@ -262,6 +271,7 @@ button:hover { color: #222; } +/* signup link */ .create { margin-top: -21px; display: flex; diff --git a/loginpage.html b/loginpage.html index 082f0d0..a88d26d 100644 --- a/loginpage.html +++ b/loginpage.html @@ -6,7 +6,6 @@ Login Page -
diff --git a/reviews.html b/reviews.html index 2bae8a0..2b85c3c 100644 --- a/reviews.html +++ b/reviews.html @@ -10,7 +10,7 @@