Shaver443 Posted May 11, 2020 Posted 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 Posted May 12, 2020 Posted May 12, 2020 Here is a tutorial for what you are looking for I believe. It is for a 7.0 site.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.