Last active
May 6, 2019 20:28
-
-
Save SageStarCodes/252ded441e0488d138e9612644d4a68e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>3Dcases</title> | |
| <link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet"> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| overflow-x: hidden; | |
| } | |
| #headerWrapper { | |
| position: fixed; | |
| height: 485px; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 15; | |
| } | |
| #slanted { | |
| z-index: 1; | |
| width: 120vw; | |
| height: 600px; | |
| transform: translate(-10vw, -200px) rotate(5deg); | |
| background: linear-gradient(135deg, #ffde00, #82ff00, #ffde00, #ff6300); | |
| background-size: 800% 800%; | |
| animation: headanim 10s ease-in-out infinite; | |
| text-align: center; | |
| position: absolute; | |
| display: inline-block; | |
| } | |
| #blade { | |
| margin-top: 400px; | |
| position: relative; | |
| width: 120vw; | |
| height: 200px; | |
| transform: translate(-10vw, 0) rotate(5deg); | |
| background-color: blue; | |
| z-index: 19; | |
| } | |
| #heading { | |
| z-index: 10; | |
| font-family: 'Megrim', cursive; | |
| font-weight: 500; | |
| color: white; | |
| font-size: 6rem; | |
| position: absolute; | |
| top: 200px; | |
| transform: translate(0%, -50%); | |
| width: 100vw; | |
| text-align: center; | |
| display: inline-block; | |
| } | |
| #contentWrapper { | |
| z-index: 20; | |
| width: calc(100%-6rem); | |
| height: auto; | |
| overflow-x: hidden; | |
| margin-top:-115px; | |
| background-color: white; | |
| position: relative; | |
| padding: 0.5rem 3rem 3rem; | |
| } | |
| @keyframes headanim { | |
| 0%{background-position:0% 50%} | |
| 50%{background-position:100% 50%} | |
| 100%{background-position:0% 50%} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header id="headerWrapper"> | |
| <div id="slanted"> | |
| | |
| </div> | |
| <div id="heading"> | |
| 3Dcases | |
| </div> | |
| </header> | |
| <div id="blade"> </div> | |
| <main id="contentWrapper"> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec metus at risus malesuada bibendum. Nam pharetra dui id aliquet ornare. Vestibulum imperdiet sem ante, sit amet bibendum eros scelerisque in. Sed ultrices eu lorem quis sodales. Quisque fringilla faucibus mi non accumsan. Nunc malesuada dui id neque dignissim, in consectetur quam finibus. Curabitur molestie gravida metus, in lacinia odio gravida a. Ut in tincidunt mauris. Sed iaculis in mauris vitae efficitur. Nunc non orci non nibh dapibus viverra. Aenean dictum lorem eu enim accumsan egestas. Etiam tristique vulputate porta. Quisque rhoncus vel nunc ut egestas. Duis dictum tellus eu sem maximus sollicitudin.<br><br> | |
| Aliquam finibus felis odio, nec suscipit ligula hendrerit eu. Donec viverra congue blandit. Praesent vel ipsum rutrum, pretium arcu ut, efficitur justo. Sed bibendum, nulla in lacinia fermentum, diam nisi tincidunt neque, eget egestas neque mi quis purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat ex libero, eu rutrum nibh pretium et. Vivamus convallis lobortis iaculis. In interdum urna sit amet molestie mattis. Duis rutrum aliquam convallis. Mauris quis nisi tincidunt, lacinia libero non, vehicula enim. Nullam porttitor, mauris eu rutrum venenatis, tellus lacus feugiat arcu, id maximus metus mi nec urna. Praesent lacus nulla, bibendum vel interdum in, pulvinar quis neque. Morbi eget nunc a ante sodales vulputate in ac ante. Duis in hendrerit metus, quis pellentesque metus. Vestibulum in hendrerit purus, non sollicitudin est. Nullam sodales euismod ultricies.<br><br> | |
| Fusce volutpat lorem nec nunc viverra bibendum. Quisque a turpis in orci ultricies placerat sit amet nec lectus. Morbi aliquam bibendum facilisis. Maecenas orci nisi, pellentesque mattis diam eget, faucibus sagittis arcu. Aliquam erat volutpat. Sed non bibendum tortor. Suspendisse vitae velit vestibulum, blandit mauris nec, blandit metus. Pellentesque accumsan purus neque, vel cursus elit maximus nec. Aenean dignissim dolor ipsum, vel accumsan dolor gravida in. Nulla a mauris justo. Quisque a lobortis dolor. Pellentesque ullamcorper egestas enim, ut euismod leo congue nec. Etiam tincidunt ut ligula at pulvinar. Maecenas fermentum, nulla sit amet bibendum sagittis, dolor nisl efficitur ipsum, in consequat purus urna a ligula. Nulla eu arcu non orci efficitur fermentum sed nec nulla. Sed odio odio, vulputate in auctor quis, laoreet pellentesque leo.<br><br> | |
| Donec augue dui, finibus et lacinia et, molestie eget enim. Fusce vitae nulla sollicitudin, fermentum nunc non, ullamcorper risus. Nulla molestie nibh mi, sit amet consectetur lacus dapibus eget. Aenean rhoncus vestibulum nisl vel venenatis. Donec mattis sapien in nulla iaculis, non pulvinar nisi facilisis. Suspendisse sit amet ultrices mi. Proin ultricies lacus non viverra aliquam. Duis eu dictum sem.<br><br> | |
| Mauris et ullamcorper nisl. Etiam gravida magna enim, eu dignissim dolor ullamcorper id. Maecenas faucibus scelerisque nulla sit amet ultricies. Fusce vel erat bibendum, interdum urna eget, porttitor elit. Sed sagittis pulvinar erat ut consectetur. Cras sed nisl nec massa eleifend condimentum. Morbi ac volutpat dui. Proin dapibus congue elit a vestibulum. Donec fermentum, dui imperdiet accumsan vehicula, lorem lectus pellentesque diam, non facilisis odio nisl vel ligula. Nulla et diam ut augue feugiat posuere. Etiam sodales vulputate est vel placerat. Vivamus porttitor rutrum purus ac sodales.<br><br> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec metus at risus malesuada bibendum. Nam pharetra dui id aliquet ornare. Vestibulum imperdiet sem ante, sit amet bibendum eros scelerisque in. Sed ultrices eu lorem quis sodales. Quisque fringilla faucibus mi non accumsan. Nunc malesuada dui id neque dignissim, in consectetur quam finibus. Curabitur molestie gravida metus, in lacinia odio gravida a. Ut in tincidunt mauris. Sed iaculis in mauris vitae efficitur. Nunc non orci non nibh dapibus viverra. Aenean dictum lorem eu enim accumsan egestas. Etiam tristique vulputate porta. Quisque rhoncus vel nunc ut egestas. Duis dictum tellus eu sem maximus sollicitudin.<br><br> | |
| Aliquam finibus felis odio, nec suscipit ligula hendrerit eu. Donec viverra congue blandit. Praesent vel ipsum rutrum, pretium arcu ut, efficitur justo. Sed bibendum, nulla in lacinia fermentum, diam nisi tincidunt neque, eget egestas neque mi quis purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat ex libero, eu rutrum nibh pretium et. Vivamus convallis lobortis iaculis. In interdum urna sit amet molestie mattis. Duis rutrum aliquam convallis. Mauris quis nisi tincidunt, lacinia libero non, vehicula enim. Nullam porttitor, mauris eu rutrum venenatis, tellus lacus feugiat arcu, id maximus metus mi nec urna. Praesent lacus nulla, bibendum vel interdum in, pulvinar quis neque. Morbi eget nunc a ante sodales vulputate in ac ante. Duis in hendrerit metus, quis pellentesque metus. Vestibulum in hendrerit purus, non sollicitudin est. Nullam sodales euismod ultricies.<br><br> | |
| Fusce volutpat lorem nec nunc viverra bibendum. Quisque a turpis in orci ultricies placerat sit amet nec lectus. Morbi aliquam bibendum facilisis. Maecenas orci nisi, pellentesque mattis diam eget, faucibus sagittis arcu. Aliquam erat volutpat. Sed non bibendum tortor. Suspendisse vitae velit vestibulum, blandit mauris nec, blandit metus. Pellentesque accumsan purus neque, vel cursus elit maximus nec. Aenean dignissim dolor ipsum, vel accumsan dolor gravida in. Nulla a mauris justo. Quisque a lobortis dolor. Pellentesque ullamcorper egestas enim, ut euismod leo congue nec. Etiam tincidunt ut ligula at pulvinar. Maecenas fermentum, nulla sit amet bibendum sagittis, dolor nisl efficitur ipsum, in consequat purus urna a ligula. Nulla eu arcu non orci efficitur fermentum sed nec nulla. Sed odio odio, vulputate in auctor quis, laoreet pellentesque leo.<br><br> | |
| Donec augue dui, finibus et lacinia et, molestie eget enim. Fusce vitae nulla sollicitudin, fermentum nunc non, ullamcorper risus. Nulla molestie nibh mi, sit amet consectetur lacus dapibus eget. Aenean rhoncus vestibulum nisl vel venenatis. Donec mattis sapien in nulla iaculis, non pulvinar nisi facilisis. Suspendisse sit amet ultrices mi. Proin ultricies lacus non viverra aliquam. Duis eu dictum sem.<br><br> | |
| Mauris et ullamcorper nisl. Etiam gravida magna enim, eu dignissim dolor ullamcorper id. Maecenas faucibus scelerisque nulla sit amet ultricies. Fusce vel erat bibendum, interdum urna eget, porttitor elit. Sed sagittis pulvinar erat ut consectetur. Cras sed nisl nec massa eleifend condimentum. Morbi ac volutpat dui. Proin dapibus congue elit a vestibulum. Donec fermentum, dui imperdiet accumsan vehicula, lorem lectus pellentesque diam, non facilisis odio nisl vel ligula. Nulla et diam ut augue feugiat posuere. Etiam sodales vulputate est vel placerat. Vivamus porttitor rutrum purus ac sodales.<br><br> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec metus at risus malesuada bibendum. Nam pharetra dui id aliquet ornare. Vestibulum imperdiet sem ante, sit amet bibendum eros scelerisque in. Sed ultrices eu lorem quis sodales. Quisque fringilla faucibus mi non accumsan. Nunc malesuada dui id neque dignissim, in consectetur quam finibus. Curabitur molestie gravida metus, in lacinia odio gravida a. Ut in tincidunt mauris. Sed iaculis in mauris vitae efficitur. Nunc non orci non nibh dapibus viverra. Aenean dictum lorem eu enim accumsan egestas. Etiam tristique vulputate porta. Quisque rhoncus vel nunc ut egestas. Duis dictum tellus eu sem maximus sollicitudin.<br><br> | |
| Aliquam finibus felis odio, nec suscipit ligula hendrerit eu. Donec viverra congue blandit. Praesent vel ipsum rutrum, pretium arcu ut, efficitur justo. Sed bibendum, nulla in lacinia fermentum, diam nisi tincidunt neque, eget egestas neque mi quis purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat ex libero, eu rutrum nibh pretium et. Vivamus convallis lobortis iaculis. In interdum urna sit amet molestie mattis. Duis rutrum aliquam convallis. Mauris quis nisi tincidunt, lacinia libero non, vehicula enim. Nullam porttitor, mauris eu rutrum venenatis, tellus lacus feugiat arcu, id maximus metus mi nec urna. Praesent lacus nulla, bibendum vel interdum in, pulvinar quis neque. Morbi eget nunc a ante sodales vulputate in ac ante. Duis in hendrerit metus, quis pellentesque metus. Vestibulum in hendrerit purus, non sollicitudin est. Nullam sodales euismod ultricies.<br><br> | |
| Fusce volutpat lorem nec nunc viverra bibendum. Quisque a turpis in orci ultricies placerat sit amet nec lectus. Morbi aliquam bibendum facilisis. Maecenas orci nisi, pellentesque mattis diam eget, faucibus sagittis arcu. Aliquam erat volutpat. Sed non bibendum tortor. Suspendisse vitae velit vestibulum, blandit mauris nec, blandit metus. Pellentesque accumsan purus neque, vel cursus elit maximus nec. Aenean dignissim dolor ipsum, vel accumsan dolor gravida in. Nulla a mauris justo. Quisque a lobortis dolor. Pellentesque ullamcorper egestas enim, ut euismod leo congue nec. Etiam tincidunt ut ligula at pulvinar. Maecenas fermentum, nulla sit amet bibendum sagittis, dolor nisl efficitur ipsum, in consequat purus urna a ligula. Nulla eu arcu non orci efficitur fermentum sed nec nulla. Sed odio odio, vulputate in auctor quis, laoreet pellentesque leo.<br><br> | |
| Donec augue dui, finibus et lacinia et, molestie eget enim. Fusce vitae nulla sollicitudin, fermentum nunc non, ullamcorper risus. Nulla molestie nibh mi, sit amet consectetur lacus dapibus eget. Aenean rhoncus vestibulum nisl vel venenatis. Donec mattis sapien in nulla iaculis, non pulvinar nisi facilisis. Suspendisse sit amet ultrices mi. Proin ultricies lacus non viverra aliquam. Duis eu dictum sem.<br><br> | |
| Mauris et ullamcorper nisl. Etiam gravida magna enim, eu dignissim dolor ullamcorper id. Maecenas faucibus scelerisque nulla sit amet ultricies. Fusce vel erat bibendum, interdum urna eget, porttitor elit. Sed sagittis pulvinar erat ut consectetur. Cras sed nisl nec massa eleifend condimentum. Morbi ac volutpat dui. Proin dapibus congue elit a vestibulum. Donec fermentum, dui imperdiet accumsan vehicula, lorem lectus pellentesque diam, non facilisis odio nisl vel ligula. Nulla et diam ut augue feugiat posuere. Etiam sodales vulputate est vel placerat. Vivamus porttitor rutrum purus ac sodales.<br><br> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec metus at risus malesuada bibendum. Nam pharetra dui id aliquet ornare. Vestibulum imperdiet sem ante, sit amet bibendum eros scelerisque in. Sed ultrices eu lorem quis sodales. Quisque fringilla faucibus mi non accumsan. Nunc malesuada dui id neque dignissim, in consectetur quam finibus. Curabitur molestie gravida metus, in lacinia odio gravida a. Ut in tincidunt mauris. Sed iaculis in mauris vitae efficitur. Nunc non orci non nibh dapibus viverra. Aenean dictum lorem eu enim accumsan egestas. Etiam tristique vulputate porta. Quisque rhoncus vel nunc ut egestas. Duis dictum tellus eu sem maximus sollicitudin.<br><br> | |
| Aliquam finibus felis odio, nec suscipit ligula hendrerit eu. Donec viverra congue blandit. Praesent vel ipsum rutrum, pretium arcu ut, efficitur justo. Sed bibendum, nulla in lacinia fermentum, diam nisi tincidunt neque, eget egestas neque mi quis purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat ex libero, eu rutrum nibh pretium et. Vivamus convallis lobortis iaculis. In interdum urna sit amet molestie mattis. Duis rutrum aliquam convallis. Mauris quis nisi tincidunt, lacinia libero non, vehicula enim. Nullam porttitor, mauris eu rutrum venenatis, tellus lacus feugiat arcu, id maximus metus mi nec urna. Praesent lacus nulla, bibendum vel interdum in, pulvinar quis neque. Morbi eget nunc a ante sodales vulputate in ac ante. Duis in hendrerit metus, quis pellentesque metus. Vestibulum in hendrerit purus, non sollicitudin est. Nullam sodales euismod ultricies.<br><br> | |
| Fusce volutpat lorem nec nunc viverra bibendum. Quisque a turpis in orci ultricies placerat sit amet nec lectus. Morbi aliquam bibendum facilisis. Maecenas orci nisi, pellentesque mattis diam eget, faucibus sagittis arcu. Aliquam erat volutpat. Sed non bibendum tortor. Suspendisse vitae velit vestibulum, blandit mauris nec, blandit metus. Pellentesque accumsan purus neque, vel cursus elit maximus nec. Aenean dignissim dolor ipsum, vel accumsan dolor gravida in. Nulla a mauris justo. Quisque a lobortis dolor. Pellentesque ullamcorper egestas enim, ut euismod leo congue nec. Etiam tincidunt ut ligula at pulvinar. Maecenas fermentum, nulla sit amet bibendum sagittis, dolor nisl efficitur ipsum, in consequat purus urna a ligula. Nulla eu arcu non orci efficitur fermentum sed nec nulla. Sed odio odio, vulputate in auctor quis, laoreet pellentesque leo.<br><br> | |
| Donec augue dui, finibus et lacinia et, molestie eget enim. Fusce vitae nulla sollicitudin, fermentum nunc non, ullamcorper risus. Nulla molestie nibh mi, sit amet consectetur lacus dapibus eget. Aenean rhoncus vestibulum nisl vel venenatis. Donec mattis sapien in nulla iaculis, non pulvinar nisi facilisis. Suspendisse sit amet ultrices mi. Proin ultricies lacus non viverra aliquam. Duis eu dictum sem.<br><br> | |
| Mauris et ullamcorper nisl. Etiam gravida magna enim, eu dignissim dolor ullamcorper id. Maecenas faucibus scelerisque nulla sit amet ultricies. Fusce vel erat bibendum, interdum urna eget, porttitor elit. Sed sagittis pulvinar erat ut consectetur. Cras sed nisl nec massa eleifend condimentum. Morbi ac volutpat dui. Proin dapibus congue elit a vestibulum. Donec fermentum, dui imperdiet accumsan vehicula, lorem lectus pellentesque diam, non facilisis odio nisl vel ligula. Nulla et diam ut augue feugiat posuere. Etiam sodales vulputate est vel placerat. Vivamus porttitor rutrum purus ac sodales.<br><br> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am fully aware that the fixed "heading" does not need to be rotated, I was experimenting with a different style before I added the blade