diff --git a/about.html b/about.html index b4883e5..0d07f1d 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..5bad06f 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..36a8fbe 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..1ee24b5 --- /dev/null +++ b/loginpage.css @@ -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; +} \ No newline at end of file diff --git a/loginpage.html b/loginpage.html new file mode 100644 index 0000000..a88d26d --- /dev/null +++ b/loginpage.html @@ -0,0 +1,60 @@ + + + + + + Login Page + + + + +
+
+
+ +
+

Sign In

+
+ +
+
+ +
+
+
+ + +
+ Forget Password? +
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 93f9648..71fe205 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "FusionVision", + "name": "Fusionvision", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/reviews.html b/reviews.html index e82bcf4..2b85c3c 100644 --- a/reviews.html +++ b/reviews.html @@ -8,7 +8,11 @@ - +