This is a paragraph! Here's how you make a link: Neocities.
Here's how you can make bold and italic text.
.parallax-wrapper .hero.parallax-content img( src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/sterling-davis-4iXagiKXn3Y-unsplash-min.jpg", alt="Photo of city during a sunset by Sterling Davis" ) .hero__title h1 CSS Parallax Hero p Photo by Sterling Davis on Unsplash .main-content .scroll-icon-container svg.icon--down-arrow(viewBox="0 0 24 24") path( d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" ) @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,600&display=swap"); :root { --hero-gap: 60px; } * { box-sizing: border-box; } body { font-family: "Lora", serif; } h1 { font-size: calc(0.5rem + 8vmin); font-weight: 600; font-style: italic; } h2 { font-size: calc(0.8rem + 4vmin); font-weight: 600; font-style: italic; line-height: 1.2; } p { font-size: calc(0.8rem + 1.25vmin); line-height: 1.65; } .caption { position: absolute; bottom: 1rem; right: 1rem; color: white; z-index: 2; font-size: 0.6rem; } .parallax-wrapper { height: 100vh; overflow-x: hidden; overflow-y: scroll; perspective: 10px; } .parallax-content { position: relative; width: 100%; height: calc(100vh - var(--hero-gap)); } .hero { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; img { position: absolute; top: 0; left: 0; width: 100%; height: 110%; object-fit: cover; z-index: 1; transform: translateZ(1px); } .hero__title { color: white; z-index: 2; text-align: center; transform: translateZ(-2px) scale(1.2); p { margin-top: 0.5rem; font-size: calc(0.6rem + 0.75vmin); } a { color: white; } } &::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 100%; transform-origin: 0 100%; transform: translateZ(8px); pointer-events: none; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.013) 8%, hsla(0, 0%, 0%, 0.049) 14.8%, hsla(0, 0%, 0%, 0.104) 20.8%, hsla(0, 0%, 0%, 0.175) 26%, hsla(0, 0%, 0%, 0.259) 30.8%, hsla(0, 0%, 0%, 0.352) 35.3%, hsla(0, 0%, 0%, 0.45) 39.8%, hsla(0, 0%, 0%, 0.55) 44.5%, hsla(0, 0%, 0%, 0.648) 49.5%, hsla(0, 0%, 0%, 0.741) 55.2%, hsla(0, 0%, 0%, 0.825) 61.7%, hsla(0, 0%, 0%, 0.896) 69.2%, hsla(0, 0%, 0%, 0.951) 77.9%, hsla(0, 0%, 0%, 0.987) 88.1%, hsl(0, 0%, 0%) 100% ); z-index: 3; } } .main-content { position: relative; margin: 0 auto; padding: var(--hero-gap) 2rem; max-width: 725px; background-color: white; > * + * { margin-top: 2rem; } } .scroll-icon-container { --size: 30px; display: flex; align-items: center; justify-content: center; position: absolute; overflow: hidden; top: calc(var(--size) * -1); left: 0; right: 0; margin: 0 auto; width: calc(var(--size) * 2); height: calc(var(--size) * 2); border-radius: 0.15rem; background-color: inherit; box-shadow: 0 6px 12px -3px rgba(black, 0.1); z-index: 4; .icon--down-arrow { width: var(--size); height: var(--size); } }