Custom CSS for one page?

Shaver443 · May 11, 2020

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%;
    }
}
  
}

derricksrandomviews · May 12, 2020

Here is a tutorial for what you are looking for I believe. It is for a 7.0 site.

Custom CSS for one page?

Recommended Posts

Shaver443

Link to comment

derricksrandomviews

Link to comment

Archived

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources