Jump to content

Custom CSS for one page?

Recommended Posts

Posted

Site URL: https://coralmountaingolfclub.com/test

 

Hi all!

Im looking to create a landing page for our website that is split screen so the viewer is immediately shown either "golf" or "dining" as the options.

I have my code written out is VS Code but when I go to place it in the Custom CSS section it alters styles on other pages.

I've read about using the collection id and using that to target specific pages but it doesn't work for me.

Any Ideas?

coralmountaingolfclub.com/test 

pass: test

Thanks! 

Ill post my code below...

HTML - Header Code Injection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Split Landing Page</title>
</head>

<body id=collection-5eb5f7e1ef4eb24f7af96aeb>
</body>
    <div class="container">
      
        <div class="split left">
           <h5>Golf</h5>
            <a href="#" class="button">Read More</a>
       </div>
      
       <div class="split right">
            <h5> Dining</h5>
             <a href="#" class="button">Read More</a> 
       </div>

    </div> 

    <script>

const left = document.querySelector(".left");
const right = document.querySelector(".right");
const container = document.querySelector(".container");

left.addEventListener("mouseenter", () => {
   container.classList.add("hover-left"); 
});

left.addEventListener("mouseleave", () => {
    container.classList.remove("hover-left"); 
 });

 right.addEventListener("mouseenter", () => {
    container.classList.add("hover-right"); 
 });

 right.addEventListener("mouseleave", () => {
    container.classList.remove("hover-right"); 
 });


    </script>
</body>
</html>

CSS - Custom CSS

#collection-5eb5f7e1ef4eb24f7af96aeb {

/* variables that are called upon by later code. */
:root {
    --container-bg-color: rgba(90, 90, 90, 1);
    --left-bg-color: rgba(255, 255, 255, 0.25);
    --left-button-hover-color: rgba(255, 255, 255, 0.6);
    --right-bg-color: rgba(255, 255, 255, 0.25);
    --right-button-hover-color: rgba(255, 255, 255, 0.6);
    --hover-width: 70%;
    --other-width: 30%;
    --speed: 1250ms;
}

 header {
    display: none;
}  

footer {
    display: none;
}
/* The main elements of the page. */
html, body {
    padding:0;
    margin:0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
/* H5 is the main text on the sliders. Had to choose H5 becuse 1-4 are used by squarespace. */
h5 {
    font-size: 3.5rem;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}
/* The button styles. Will probably change in squarepace to look uniform. */
.button {
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    height: 2.5rem;
    padding-top: 1.3rem;
    width: 15rem;
    text-align: center;
    color: #fff;
    border: #fff solid 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateX(-50%);
}

.split.left .button:hover {
    background-color: var(--left-button-hover-color);
    border-color: var(--left-button-hover-color);
}
.split.right .button:hover {
    background-color: var(--right-button-hover-color);
    border-color: var(--right-button-hover-color);
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--container-bg-color);
}

.split {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow-x: hidden;
}

.split.left {
    left:0;
    background: url('https://static1.squarespace.com/static/5e1952f75a573311900e4f3b/t/5eb8fa9798232c36f5f5af41/1589181080159/golfcourse.jpg') center center no-repeat;
    background-size: cover;
}

.split.left:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--left-bg-color);
}

.split.right {
    right:0;
    background: url('https://static1.squarespace.com/static/5e1952f75a573311900e4f3b/t/5eb8fa9b75c2e1070e2b37b8/1589181083618/ironsclub.jpg') center center no-repeat;
    background-size: cover;
}

.split.right:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--right-bg-color);
}

.split.left, .split.right, .split.right:before, .split.left:before {
    transition: var(--speed) all ease-in-out;
}

.hover-left .left {
    width: var(--hover-width);
}

.hover-left .right {
    width: var(--other-width);
}

.hover-left .right:before {
    z-index: 2;
}

.hover-right .right {
    width: var(--hover-width);
}

.hover-right .left {
    width: var(--other-width);
}

.hover-right .left:before {
    z-index: 2;
}

@media screen and (max-width: 800px) {
    h5 {
        font-size: 2rem;
    }

    .button {
        width: 10rem;
    }
}

@media screen and (max-height: 700px) {
    .button {
        top: 70%;
    }
}
  
}

 

  • Replies 1
  • Views 1.8k
  • 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.