diff --git a/Css-Files/caduceus.css b/Css-Files/caduceus.css new file mode 100644 index 00000000..af22df86 --- /dev/null +++ b/Css-Files/caduceus.css @@ -0,0 +1,184 @@ +#caduceus-container { + position: fixed; + top: 85px; + right: 30px; + z-index: 1000; + transform-origin: top center; + animation: swing 3s ease-in-out infinite; + } + + .rope { + width: 2px; + height: 100px; + margin: 0 auto; + background: linear-gradient( + 45deg, + #3bfcc0 0%, + #ffffff 50%, + #000000 100% + ); + background-size: 400% 400%; + animation: + gradientBackground 15s ease infinite, + waveMotion 3s ease-in-out infinite; + position: relative; + } + + .rope::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: inherit; + filter: blur(1px); + } + + @keyframes gradientBackground { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } + } + + @keyframes waveMotion { + 0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } + 25% { clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); } + 50% { clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); } + 75% { clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); } + } + #caduceus { + width: 100px; + height: auto; + display: block; + margin: 0 auto; + } + + @keyframes swing { + 0% { transform: rotate(0deg); } + 25% { transform: rotate(5deg); } + 50% { transform: rotate(0deg); } + 75% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } + } + + + /* Responsive styles */ +@media screen and (max-width: 768px) { + #caduceus-container { + top: 120px; + right: 30px; + } + } + + @media screen and (max-width: 320px) { + #caduceus-container { + top: 120px; + right: 60px; + } + } + + /* Tablet-specific styles *//*COrrect*/ + @media screen and (min-width: 768px) and (max-width: 1024px) { + #caduceus-container { + top: 120px; + right: 30px; + } +.rope { + height: 100px; + } + + #caduceus { + width: 100px; + } + } + + /*Correect*/ /* iPhone SE, 5, 5S, 5C, iPod Touch 5g and up */ +@media only screen +and (min-device-width: 320px) +and (max-device-width: 568px) +and (-webkit-min-device-pixel-ratio: 2) { +#caduceus-container { + top: 120px; + right: 60px; +} + +.rope { + height: 100px; +} + +#caduceus { + width: 100px; +} +} + +/* iPhone 6, 6S, 7, 8 */ +@media only screen +and (min-device-width: 375px) +and (max-device-width: 667px) +and (-webkit-min-device-pixel-ratio: 2) { +#caduceus-container { + right: 8px; +} + +.rope { + height: 100px; +} + +#caduceus { + width: 100px; +} +} + +/* iPhone 6+, 7+, 8+ */ +@media only screen +and (min-device-width: 414px) +and (max-device-width: 736px) +and (-webkit-min-device-pixel-ratio: 3) { +#caduceus-container { + top: 35px; + right: 10px; +} + +.rope { + height: 70px; +} + +#caduceus { + width: 35px; +} +} + +/* iPhone X, XS, 11 Pro */ +@media only screen +and (min-device-width: 375px) +and (max-device-width: 812px) +and (-webkit-min-device-pixel-ratio: 3) { +#caduceus-container { + top: 40px; + right: 12px; +} + +.rope { + height: 75px; +} + +#caduceus { + width: 38px; +} +} + +/* iPhone XR, XS Max, 11, 11 Pro Max */ +@media only screen +and (min-device-width: 414px) +and (max-device-width: 896px) +and (-webkit-min-device-pixel-ratio: 2) { + +.rope { + height: 100px; +} + +#caduceus { + width: 100px; +} +} \ No newline at end of file diff --git a/img/2jghCPWR6g8S6w5Nv6bF6WCSHzJ.svg b/img/2jghCPWR6g8S6w5Nv6bF6WCSHzJ.svg new file mode 100644 index 00000000..8a198c39 --- /dev/null +++ b/img/2jghCPWR6g8S6w5Nv6bF6WCSHzJ.svg @@ -0,0 +1,15 @@ + + diff --git a/img/Caduceus.svg.png b/img/Caduceus.svg.png new file mode 100644 index 00000000..98a275bc Binary files /dev/null and b/img/Caduceus.svg.png differ diff --git a/index.html b/index.html index 10d34f37..fdc45461 100644 --- a/index.html +++ b/index.html @@ -79,9 +79,11 @@ } +
+