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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment