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:

 

</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>
Link to comment
  • Replies 1
  • Views 353
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.