Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- }
- body {
- font-family: 'Poppins', sans-serif;
- background-color: #111;
- }
- button {
- font-family: 'Poppins', sans-serif;
- }
- header {
- display: flex;
- width: 90%;
- height: 10vh;
- margin: auto;
- align-items: center;
- }
- .logo-container,
- .nav-links,
- .cart {
- display: flex;
- }
- .logo-container {
- flex: 1;
- }
- .logo {
- font-weight: 400;
- margin: 5px;
- }
- nav {
- flex: 2;
- }
- .nav-links {
- justify-content: space-around;
- list-style: none;
- }
- .nav-link {
- color: #acacac;
- font-size: 20px;
- font-weight: 900;
- font-family: Arial, Helvetica, sans-serif;
- filter: drop-shadow(0px 0px 0px rgb(255, 0, 128));
- text-decoration: none;
- animation: drop 1.5s ease-in-out;
- }
- .nav-link::after{
- content: '';
- height: 5px;
- width: 0;
- background: #ff8aef;
- position: absolute;
- left: 0;
- bottom: -5px;
- transition: 0.5s;
- }
- .nav-link:hover::after{
- width: 100%;
- }
- .cart {
- flex: 1;
- justify-content: flex-end;
- }
- .presentation {
- display: flex;
- width: 90%;
- margin: auto;
- min-height: 80vh;
- align-items: center;
- }
- .introduction {
- flex: 1;
- }
- #shadowBox {
- background-color: rgb(0, 0, 0);
- /* Fallback color */
- background-color: rgba(0, 0, 0, 0.2);
- /* Black w/opacity/see-through */
- border: 3px solid;
- }
- .intro-text {
- text-align: center;
- text-decoration: underline;
- font-size: 25px;
- font-family: monospace;
- letter-spacing: 2px;
- }
- .intro-text {
- background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
- animation: rainbow_animation 6s ease-in-out infinite;
- background-size: 400% 100%;
- }
- @keyframes rainbow_animation {
- 0%,100% {
- background-position: 0 0;
- }
- 50% {
- background-position: 100% 0;
- }
- }
- .intro-text p {
- margin-top: 5px;
- font-size: 22px;
- color: #585772;
- animation: drop 1.5s ease;
- }
- .cta {
- padding: 50px 0px 0px 0px;
- }
- .glow-on-hover {
- width: 300px;
- height: 50px;
- border: none;
- outline: none;
- color: #fff;
- background: #111;
- cursor: pointer;
- position: relative;
- left: 200px;
- z-index: 0;
- border-radius: 10px;
- font-size: 17px;
- }
- .glow-on-hover:before {
- content: '';
- background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
- position: absolute;
- top: -2px;
- left:-2px;
- background-size: 400%;
- z-index: -1;
- filter: blur(5px);
- width: calc(100% + 4px);
- height: calc(100% + 4px);
- animation: glowing 20s linear infinite;
- opacity: 0;
- transition: opacity .3s ease-in-out;
- border-radius: 10px;
- }
- .glow-on-hover {
- color: #000
- }
- .glow-on-hover:before {
- opacity: 1;
- }
- .glow-on-hover:active {
- z-index: -1;
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- background: #111;
- left: 0;
- top: 0;
- border-radius: 10px;
- }
- @keyframes glowing {
- 0% { background-position: 0 0; }
- 50% { background-position: 400% 0; }
- 100% { background-position: 0 0; }
- }
- .cover {
- flex: 1;
- display: flex;
- justify-content: center;
- height: 60vh;
- }
- .cover img {
- height: 100%;
- filter: drop-shadow(0px 8px 3px rgb(255, 0, 128));
- animation: drop 1.5s ease;
- }
- .big-circle {
- position: absolute;
- top: 0px;
- right: 0px;
- z-index: -1;
- height: 80%;
- animation: drop 0.5s ease;
- }
- .medium-circle {
- position: absolute;
- top: 40%;
- right: 25%;
- z-index: -1;
- height: 60%;
- animation: drop 0.7s ease;
- }
- .small-circle {
- position: absolute;
- bottom: 0%;
- left: 20%;
- z-index: -1;
- animation: drop 0.8s ease;
- }
- @keyframes drop {
- 0% {
- opacity: 0;
- transform: translateY(-80px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0px);
- }
- }
- @media screen and (max-width: 1024px) {
- .presentation {
- flex-direction: column;
- }
- .introduction {
- margin-top: 5vh;
- text-align: center;
- }
- .intro-text h1 {
- font-size: 30px;
- }
- .intro-text p {
- font-size: 18px;
- }
- .cta {
- padding: 10px 0px 0px 0px;
- }
- .cover img {
- height: 80%;
- }
- .small-circle,
- .medium-circle,
- .big-circle {
- opacity: 0.2;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement