File manager

File manager - Edit - /home/custbahd/vianmedicalcenter.com/css/navbarr/style.css

Back
/Responsive Header/ .navbarr { overflow: hidden; background-color: white; height: 150px; } .navbarr-nav { margin-top: 45px; } .navbarr-nav-links { position: absolute; top: 45px; margin-left: 670px; } .navbarr-nav a.home { background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr-nav-links a { background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr a { float: left; margin-left: 20px; font-size: 16px; text-align: center; padding: 14px 16px; color: white; text-decoration: none; } .navbarr a:hover { font-size: 15px; } .navbarr-nav-links a:hover { background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr-nav a.home:hover { background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr button:hover { background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .subnav-content a:hover { background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr .head-icons .head-icons-container i:hover { background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr button i:hover { margin-left: 10px; background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 100% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .navbarr button i { margin-left: 10px; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 100% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .subnav { overflow: hidden; } .subnav .subnavbtn { font-size: 16px; border: none; outline: none; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; margin-left: 20px; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .subnav-content { display: none; position: absolute; left: 0; width: 100%; z-index: 9; } .subnav-content a { margin-left: 0; } .subnav-content .sub-content{ margin-top: 10px; width: 100%; height: 100px; background-image: url('../../images/common/diabetes1.jpeg'); background-position: center; background-size: cover; } .subnav-content a { float: left; text-decoration: none; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .subnav-content a:hover { background-color: #eee; color: black; } .subnav:hover .subnav-content { display: block; } /Logo/ /* If the screen size is 768px wide or more / @media screen and (min-width: 768px) { .navbarr a.navbar-brand { margin-right: 40px; } .navbarr a.navbar-brand img { float: left; margin-left: 10px; margin-top: 10px; width: 200px; } .navbarr .navbar-brand .icon-img { margin-top: 10px; margin-left: 10px; width: 80px; } .navbarr .head-icons { width: 250px; right: 50px; top: 30px; border-radius: 6px; } .navbarr .head-icons .head-icons-container { margin-top: 10px; margin-left: 15px; } .navbarr .navbarr-nav .head-icons .appointment-btn { margin: 3px 0 0 20px; } .navbarr .navbarr-nav .head-icons .appointment-btn a { right: 60px; border-radius: 3px; color: white !important; font-weight: 600; padding-top: 12px; padding-bottom: 12px; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 400% 400%; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } .navbarr .navbarr-nav .head-icons .appointment-btn a:hover { color: #ffffff !important; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); } } / If the screen size is btn 991.98px less and 768px wide / @media screen and (max-width: 867.98px) and (min-width: 768px) { .navbarr-nav { margin-top: 45px; } .navbarr-nav-links { top: 45px; } .navbarr a { margin-left: 5px; } .subnav .subnavbtn { margin-left: 5px; } .navbarr-nav-links { margin-left: 485px; } .navbarr .head-icons { width: 100%; right: 0; top: 80px; border-radius: 6px; } .navbarr .head-icons .head-icons-container { margin-left: 25px; } .navbarr .navbarr-nav .head-icons .appointment-btn a { right: 60px; margin-left: 330px; margin-top: 10px; } .subnav .subnavbtn { margin-left: 5px; } .subnav-content .sub-content { height: 160px; } .navbarr-nav-links { margin-left: 520px; } .navbarr a.navbar-brand { margin-right: 0; } .navbarr a.navbar-brand img { float: left; margin-left: 10px; margin-top: 10px; } .navbarr .navbar-brand .icon-img { margin-top: 10px; margin-left: -10px; } } / If the screen size is btn 991.98px less and 768px wide / @media screen and (max-width: 991.98px) and (min-width: 868px) { .navbarr-nav { margin-top: 45px; } .navbarr-nav-links { top: 45px; } .navbarr a { margin-left: -15px; } .subnav .subnavbtn { margin-left: -15px; } .navbarr-nav-links { margin-left: 470px; } .navbarr .head-icons { width: 240px; right: -10px; top: 25px; } .navbarr .head-icons .head-icons-container { margin-left: 25px; } .navbarr .head-icons .head-icons-container a { margin-left: 5px; } .navbarr .navbarr-nav .head-icons .appointment-btn a { right: 60px; margin-top: 10px; margin-left: 0; } .subnav-content .sub-content { height: 160px; } .subnav-content .sub-content a { margin-left: 5px; } .navbarr a.navbar-brand { margin-right: 0; } .navbarr a.navbar-brand img { float: left; margin-left: 10px; margin-top: 10px; margin-right: -2px; width: 200px; } .navbarr .navbar-brand .icon-img { margin-top: 10px; margin-left: 0; width: 80px; } } / If the screen size is btn 119.98px less and 992px wide */ @media screen and (max-width: 1199.98px) and (min-width: 992px) { .navbarr-nav { margin-top: 45px; } .navbarr a { margin-left: -5px; } .navbarr-nav-links { top: 45px; margin-left: 500px; } .subnav .subnavbtn { margin-left: 5px; } .navbarr .head-icons { width: 250px; right: 10px; top: 30px; border-radius: 6px; } .navbarr .head-icons .head-icons-container { margin-left: 25px; } .navbarr .head-icons .head-icons-container a { margin-left: 5px; } .navbarr .navbarr-nav .head-icons .appointment-btn a { right: 60px; margin-left: 0; } .navbarr a.navbar-brand { margin-right: 0; } .navbarr .navbar-brand .icon-img { margin-left: -16px; } .navbarr a.navbar-brand img { float: left; margin-left: 10px; margin-top: 10px; } .navbarr .navbar-brand .icon-img { margin-top: 10px; margin-left: -30px; } }

| ver. 1.4 | Github | . | PHP 8.1.33 | Generation time: 1.7 | proxy | phpinfo | Settings