Zpulley Posted February 3, 2021 Share Posted February 3, 2021 Site URL: http://www.zoepulley.com/ hi! i'm attempting to inject custom code to create a fixed-position cover page for my site. I'm not sure how to do this properly, because I see the only way to insert code into cover pages only allows for the code itself to be placed in the <head> tag. i've attached a screenshot of what the site should look like vs. how it looks on my squarespace and the code is the following: </head> <style> * { box-sizing: border-box; } @font-face { font-family:'Trap' ; src: url('Trap-Bold.otf')format('otf'); } @font-face { font-family:'Trap-Black' ; src: url('Trap-Black.otf')format('otf'); } body { width: 100vw; height: 100vh; margin: 0; font-family: 'Trap'; background-color:rgb(0, 0, 0); color: rgb(255, 255, 255); background-image:url("img/zp-logo.gif") ; background-repeat: no-repeat; background-size:45% ; background-position:center; margin-bottom: -8%; } .tcontainer { width: 100%; overflow:hiden; position: fixed; margin: 0 auto; max-width: 2000px; bottom:0; } .ticker-wrap { width: 100%; height: 80px; padding-left: 100%; background-color: #BBFD00; margin: 0px; } .ticker-move { display: inline-block; white-space:nowrap; padding-right: 100%; animation-timing-function: linear; animation: ticker 20s infinite; animation-name: ticker; } @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-50, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } .ticker-move:hover { animation-play-state:paused; } .ticker-item { display:-ms-inline-flexbox; font-size: 40px; width: 100%; font-family: 'Trap'; font-weight: 900; color: rgb(0, 0, 0); margin-top: 20px; text-transform:lowercase; letter-spacing: 2px; } .divbutton{ display: block; } a:hover { position: relative; background-image: url(img/hibutton-02.png); display: block; position: absolute; } </style> <body> <div class="divbutton"> <a href="www.zoepulley.com"> </div> <div class="tcontainer"> <div class="ticker-wrap"> <div class="ticker-move"> <div class="ticker-item">Zoe is a designer (most of the time) currently based in Providence, Rhode Island. </div> </div> </div> <script src="https://unpkg.com/floating.js"></script> <script> floating({ content: "💘", number: 3, duration: 11 }); floating({ content: "🍉", number: 5, duration: 8 }); floating({ content: "🍊", number: 5, duration: 15 }); floating({ content: "🤙🏾", number: 1, duration: 10, size: 6 }); </script> </body> </html> how it looks.mov how it should look.mov Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 You can create a standard page > Add a Code Block > Paste html/css/jquery Then use CSS to remove header, footer on that page only to make it to "cover page" Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.