Jump to content

Creating a custom cover page using HTML, CSS & Jquery

Recommended Posts

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:


* {
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% ;
margin-bottom: -8%;
.tcontainer {
width: 100%;
position: fixed;
margin: 0 auto;
max-width: 2000px;
.ticker-wrap {
width: 100%;
height: 80px;
padding-left: 100%;
background-color: #BBFD00;
margin: 0px;
.ticker-move {
display: inline-block;
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 {
.ticker-item {
font-size: 40px;
width: 100%;
font-family: 'Trap';
font-weight: 900;
color: rgb(0, 0, 0);
margin-top: 20px;
letter-spacing: 2px;
display: block;
a:hover {
position: relative;
background-image: url(img/hibutton-02.png);
display: block;
position: absolute;
<div class="divbutton">
<a href="www.zoepulley.com">
<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>
<script src="https://unpkg.com/floating.js"></script>
content: "💘",
number: 3,
duration: 11
content: "🍉",
number: 5,
duration: 8
content: "🍊",
number: 5,
duration: 15
content: "🤙🏾",
number: 1,
duration: 10,
size: 6
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.