diff --git a/assets/css/styles.css b/assets/css/styles.css index d496a529..334d6be7 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -47,6 +47,7 @@ --normal-font-size: 1rem; --small-font-size: .875rem; --smaller-font-size: .813rem; + background-color:black; } } diff --git a/log/login.css b/log/login.css index 8808ee42..c98a19c5 100644 --- a/log/login.css +++ b/log/login.css @@ -2,11 +2,16 @@ * { box-sizing: border-box; -} + +} +.login-cont{ + background-color: #001d1f; + /* height: 100vh; */ +} body { - display: flex; - background: black; + display:contents; + justify-content: center; align-items: center; flex-direction: column; @@ -14,46 +19,750 @@ body { overflow: hidden; height: 100vh; } -.top-left-corner { + +h1 { + font-weight: 700; + letter-spacing: -1.5px; + margin: 0; + margin-bottom: 15px; + color: rgb(23, 23, 23); +} + +h1.title { + font-size: 45px; + line-height: 45px; + margin: 0; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); + color: white; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +span { + font-size: 14px; + margin-top: 25px; + color: black; +} + +a { + color: #faf3f3; + font-size: 14px; + text-decoration: none; + margin: 15px 0; + transition: 0.3s ease-in-out; +} + +a:hover { + color: #4bb6b7; +} +.logo{ + background: url("rd1.png"); +} +.content { + display: flex; + width: 100%; + height: 50px; + align-items: center; + justify-content: space-around; +} +.container { + margin-top: 100px; + margin-left: 300px; + background-color: #fff; + border-radius: 25px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 500px; + background-color: #001d1f; +} + +/* .content .checkbox { + display: flex; + align-items: center; + justify-content: center; +} + +.content input { + accent-color: #333; + width: 12px; + height: 12px; +} + +.content label { + font-size: 14px; + user-select: none; + padding-left: 5px; + color: black; +} + +button { + position: relative; + border-radius: 20px; + border: 1px solid #4bb6b7; + background-color: #4bb6b7; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 10px; + padding: 12px 80px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; +} + + +button:hover { + letter-spacing: 3px; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: rgba(225, 225, 225, 0.2); + border: 2px solid #fff; + color: #fff; +} + +button.ghost i{ position: absolute; - top: 10px; - left: 50px; + opacity: 0; + transition: 0.3s ease-in-out; } -.eye.active { - color: #007bff; /* Change this to whatever color you prefer */ + +button.ghost i.register{ + right: 70px; } +button.ghost i.login{ + left: 70px; +} -.home-button { - display: inline-flex; +button.ghost:hover i.register{ + right: 40px; + opacity: 1; +} + +button.ghost:hover i.login{ + left: 40px; + opacity: 1; +} + +form { + background-color: #fff; + display: flex; align-items: center; justify-content: center; - width: 40px; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border-radius: 10px; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} +.login-cont{ + background-color: #001d1f; + /* height: 100vh; */ +/* } */ + +/* + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.login-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .login-container { + transform: translateX(100%); +} + +.register-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .register-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, + 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container { + transform: translate(-100%); +} + +.overlay { + background-image: url('image.gif'); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #fff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient( + to top, + rgba(46, 94, 109, 0.4) 40%, + rgba(46, 94, 109, 0) + ); +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.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%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #dddddd; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; height: 40px; - background-color: #f8f9fa; - border: 1px solid #ddd; + width: 40px; + transition: 0.3s ease-in-out; +} + +.social-container a:hover { + border: 1px solid #4bb6b7; +} */ + + + + +.navbar { + margin-top:0cqmax; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #022a2d; + padding: 0px 20px; + gap: 20px; + height: 100px; +} + +.logo img { + height: 60px; /* Adjust the logo size as needed */ + width: 60px; + background: url("rd1.png"); + /* background-size: contain; */ + margin-top: 6px; + + background-repeat: no-repeat; + +} +.nav-links { + list-style: none; + display: flex; + gap: 20px; + margin-left: 123px; + width: 2500px; +} + +.nav-links li { + display: inline; +} + +.nav-links a { + text-decoration: none; + color: white; + font-size: 16px; +} + +.find-doctor { + background-color: #3abca7; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} +.find-doctor a { + + color: white; + +} + +.find-doctor:hover { + background-color: #32a695; +} +footer { + margin-top: 56px; + background-color: #022a2d; + color: #afbcc7; + padding: 20px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + height: 400px; +} +.footer-wrapper { + display: flex; + width: 100%; + justify-content: space-around; + /* padding: 20px 0; */ +} +.footer-columns { + display: flex; + justify-content: space-around; + width: 80%; + flex-wrap: wrap; +} +.other-columns { + display: flex; + justify-content: space-around; + width: 100%; +} +section { + margin: 20px; +} +section h4 { + color: #fff; + font-size: 18px; + margin-bottom: 10px; +} +section ul { + list-style: none; + padding: 0; +} +section ul li { + margin: 5px 0; +} +section ul li a { + color: #afbcc7; + text-decoration: none; +} +section ul li a:hover { + text-decoration: underline; +} +.subscribe-form input[type="email"] { + padding: 20px; + border: none; border-radius: 8px; + margin-right: 51px; + border: 1px solid slateblue; + width: 140px; +} +.subscribe-form button { + padding: 10px 20px; + border: none; + background-color: #fff; + color: #15332e; + border-radius: 3px; + cursor: pointer; +} +.footer-bottom { + background-color: #143C3D; + padding: 10px 0; + text-align: center; + width: 100%; +} +.footer-bottom-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding: 0 20px; +} +.social-wrapper { + display: flex; + align-items: center; +} +.social-wrapper a { + color: #afbcc7; + margin: 0 5px; +} +.social-wrapper a:hover { + color: #fff; +} +.social-links div { + display: inline-block; +} + +.header_container { + background-color: #022a2d; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + /* position: fixed; */ + width: 100%; + height: 95px; + margin: auto; + margin-top: 0px; + padding-top: 15px; + z-index: 555; +} +.nav_menu.active .nav_link { + display: flex; + flex-direction: column; + position: absolute; + top: 85px; + left: 0; + width: 100%; + background-color: #022a2d; + border-top: 1px solid #ddd; + padding-top: 10px; + z-index: 1; /* Ensure the nav items are above other elements */ +} +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger .line { + width: 25px; + height: 3px; + background-color: white; + margin: 4px 0; +} +.mobile-logo-text { + display: inline-block; + color: white; + font-weight: bold; + margin-left: 50px; + margin-right: 5px; + font-size: 30px; +} +@media (min-width: 769px) { + .mobile-logo-text { + display: none; + } +} +.nav_link{ + display: flex; + text-align: center; + margin-right: 30px; + + +} +.nav_link li { + margin-right: 1px; + padding: 35px 10px; + display: inline-block; + color: white; + + +} +.nav_link li a { + transition: all 0.3s ease 0s; + color: white; + font-size: 1rem; +} +.nav_link li a:hover { + color: #55a5ea; +} +.btn1{ + padding:10px; + border: none; + color: white; + border-radius: 10px; + width: 100px; + height: 50px; + margin-bottom: 10px; +} +.footer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 1280px; + width: 95%; + background: #3fbcc051; + border-radius: 6px; +} + +.footer .footer-row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 3.5rem; + padding: 60px; +} + +.footer-row .footer-col h4 { + color: #f0f0f0; + font-size: 1.2rem; + font-weight: 400; +} + +.footer-col .links { + margin-top: 20px; +} + +.footer-col .links li { + list-style: none; + margin-bottom: 10px; +} + +.footer-col .links li a { text-decoration: none; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: background-color 0.3s, box-shadow 0.3s; + color: #bfbfbf; +} + +.footer-col .links li a:hover { + color: #fff; +} + +.footer-col p { + margin: 20px 0; + color: #bfbfbf; + max-width: 300px; +} + +.footer-col form { + display: flex; + gap: 5px; +} + + +.footer-col input::placeholder { + color: #ccc; } -.home-button:hover { - background-color: #6be1f9; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +.footer-col form button { + background: #fff; + border: none; + color: #08434551; + padding: 10px 15px; + border-radius: 6px; + cursor: pointer; + font-weight: 1000; + transition: 0.2s ease; +} + +.footer-col form button:hover { + background: #cecccc; +} + +@media (max-width: 768px) { + .footer { + position: relative; + bottom: 0; + left: 0; + transform: none; + width: 100%; + border-radius: 0; + } + + .footer .footer-row { + padding: 20px; + gap: 1rem; + } + + .footer-col form { + display: block; + } + + .footer-col form :where(input, button) { + width: 100%; + } + + .footer-col form button { + margin: 10px 0 0 0; + } +} +footer { + position: relative; + padding: 50px 0; +} + +:root { + --text-color: #959DA5; + --footer-bg: #3fbcc051; + --footer-bottom-bg: #3fbcc051s; + --white: white; + --link-color: #959DA5; + --link-hover: #2F81CF; + --button-border: #848D97; +} + +.footer-col p { + margin: 20px 0; + color: #bfbfbf; + max-width: 300px; +} + +.footer-col form { + display: flex; + gap: 5px; +} + +.footer-col input { + height: 40px; + border-radius: 6px; + background: none; + width: 100%; + outline: none; + border: 1px solid #7489c6; + caret-color: #fff; + color: #fff; + padding-left: 10px; +} + +.footer-col input::placeholder { + color: #ccc; +} + +.footer-col form button { + background: #fff; + border: none; + color: #08434551; + padding: 10px 15px; + border-radius: 6px; + cursor: pointer; + font-weight: 1000; + transition: 0.2s ease; + display: flex; + margin-top: -52px; + margin-left: 272px; } -.home-button svg { - fill: #4bb6b7; - width: 30px; - height: 30px; +.footer-col form button:hover { + background: #cecccc; } + .subscribe-form{ + background-color: transparent; + /* border: 1px solid #7489c6; */ + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + height:50px; + width: 190px; + margin-top: 10px; + text-align: center; +} +.footer-col input { + height: 40px; + border-radius: 6px; + background: none; + width: 100%; + outline: none; + /* border: 1px solid #7489c6; */ + caret-color: #fff; + color: #fff; + padding-left: 10px; +} + + + h1 { font-weight: 700; letter-spacing: -1.5px; margin: 0; margin-bottom: 15px; + color: rgb(19, 18, 18); } h1.title { @@ -118,8 +827,8 @@ a:hover { button { position: relative; border-radius: 20px; - border: 1px solid #022a2d; - background-color: #022a2d; + background-color: #4bb6b7; + border: 1px solid #4bb6b7; color: #fff; font-size: 15px; font-weight: 700; @@ -330,6 +1039,8 @@ input { .social-container { margin: 20px 0; + display: flex; + gap: 30px; } .social-container a { @@ -505,11 +1216,11 @@ input { .container{ background-color: #143C3D; } -form{ +/* form{ background-color: #143C3D; -} +} */ .pass-link a{ - color: cadetblue; + color: rgb(7, 7, 7); } .pass-link a:hover{ color:aqua; @@ -519,7 +1230,7 @@ input[type="checkbox"] { accent-color: aqua; } .checkbox label{ - color:whitesmoke; + color:rgb(17, 17, 17); } span{ color:whitesmoke; diff --git a/log/login.html b/log/login.html index f6eba182..ea147d6a 100644 --- a/log/login.html +++ b/log/login.html @@ -1,46 +1,87 @@
-