Jump to content

Custom CSS for one page?

Recommended Posts

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

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.