neocities tutorial #1 css

// animation
/* ----------------------------------------------
 * Generated by Animista on 2025-5-9 16:44:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

// fonts
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}
@font-face {
font-family: kinkie;
src: url(https://dl.dropbox.com/s/b2jkn3py4agc9nn/kinkie.regular.ttf);
}
@font-face {
src: url(https://dl.dropbox.com/s/gavkuhehligvhz8/PsycheLover-Regular.otf);
font-family: psyche;
}

// main container
border: 1px solid white;
  background-image: url('IMG LINK HERE');
  background-attachment: fixed;
  background-repeat: repeat;
  margin: auto;
  margin-top: 120px;
  width: 600px;
  height: 450px;
  position: relative;
  padding: 5px;
  z-index: 4;
  box-shadow: 0rem -0rem 0.5rem 0.5rem #FFFFFF;

// section containers
font-family: jojoba;
  color: black;
  font-size: 1em;
  background: white;
  border: 3px solid #color;
  padding: 5px;
  width: 330px;
  height: 250px;
  overflow-y: scroll;
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

// positioning for container of buttons
position: absolute;
  top: 10em;
  left: 21.875em;
  height: 200px;
  width: 100px;
  z-index: 5;

// style of buttons
border-right: 3px solid color;
  border-top: 3px solid color;
  border-bottom: 3px solid color;
  border-radius: 0px 10px 10px 0px;
  border-left: none;
  padding: 3px;
  background: white;
  height: 50px;
  width: 50px;

// marquee container positioning
width: 560px;
  height: 50px;
  position: absolute;
  top: 26em;
  left: 3em;
  z-index: 9999;

// outer image (this will be border code) the purple border code i used is there as placeholder but go to scripted neocities (in video description) for more styling/color options :)
border-width:8px;
  border-style:solid;
  border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
  width: 94.5%;
  height: 49%;

// inner image (the actual image itself)
width: 100%;
  height: 100%;
  background-image: url('IMG LINK HERE');
  background-size: cover;

// mark (highlight code)
font-family: kinkie;
  font-size: 1.5em;
  background: linear-gradient(to top, #color 0%, #color 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;

// marquee text - music player lyrics (my exact code - make edits as needed)
 <div class="marquee-container">
    <style>

    #hehe {
    font-family: jojoba;
    color: #6f2da8;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    font-style: bold;
    font-size: 1.5em;
    letter-spacing: 1px;
    }

    </style>

    <div id="hehe"> <marquee behavior="scroll" direction="left"> Touch you one more time I would've made you mine Hope I don't see you again (Again)~</marquee>
    </div></div>