Jump to content

Correct code does not appear, am I crazy?

Recommended Posts

Site URL: https://decagon-prism-llwa.squarespace.com/

Dear doozers 😍

The correct code in "Custom CSS" and "Code Injection" is entered (se text). But it hides in the background (see photo).

How to show it? (Yes, it is two spotlights #show #stage)

Site: https://decagon-prism-llwa.squarespace.com/
Password: SesameTrain

 

Text:

HTML

<!-- these need to go inside the article on the front page - tested inside <div class="section-background"> container -->
<div class="mgp-lights" aria-hidden="true">
    <div class="mgp-lights__beam mgp-lights__beam--one"></div>
        <div class="mgp-lights__beam mgp-lights__beam--two"></div>
</div>


CUSTOM CSS

.mgp-lights {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.mgp-lights__beam {
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,136,204,.95)),to(rgba(0,136,204,0))) no-repeat;
    background: linear-gradient(180deg,rgba(0,136,204,.95) 0,rgba(0,136,204,0)) no-repeat;
    background-size: 280% 100%;
    background-position-y: 50%;
    height: 30%;
    width: 3rem;
    -webkit-animation: scan-1 3s cubic-bezier(.4,0,.4,1) infinite alternate;
    animation: scan-1 3s cubic-bezier(.4,0,.4,1) infinite alternate;
    position: absolute;
    top: -2rem;
    pointer-events: none;
    will-change: transform;
    -webkit-clip-path: polygon(45% 0,55% 0,100% 100%,0 100%);
    clip-path: polygon(45% 0,55% 0,100% 100%,0 100%);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    opacity: .05;
    height: 50%;
    width: 16rem;
}

.mgp-lights__beam.mgp-lights__beam--one {
    -webkit-animation-name: scan-1;
    animation-name: scan-1;
    background-position-x: 80%;
    left: 23%;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.mgp-lights__beam.mgp-lights__beam--two {
    -webkit-animation-name: scan-2;
    animation-name: scan-2;
    background-position-x: 20%;
    right: 23%;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

@keyframes scan-1{50%{opacity:.15}to{-webkit-transform:rotate(-50deg);transform:rotate(-50deg);opacity:.05}}@keyframes scan-2{50%{opacity:.15}to{-webkit-transform:rotate(50deg);transform:rotate(50deg);opacity:.05}}

 My example.jpg

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.