diff --git a/index.html b/index.html index 0c5e0bf..ea81deb 100755 --- a/index.html +++ b/index.html @@ -9,77 +9,7 @@ - +
diff --git a/style.css b/style.css new file mode 100755 index 0000000..4795875 --- /dev/null +++ b/style.css @@ -0,0 +1,103 @@ +/*-----------------------------------------------------------------------------------*/ +/* GENERAL STYLING +/*-----------------------------------------------------------------------------------*/ +@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); + +*, *::before, *::after { + padding: 0; + margin: 0 auto; + box-sizing: border-box; +} + +body { + font-family: Raleway, sans-serif; + background-color: #000; + color: #fff; + font-size: 24px; +} + +.content { + width: 95%; + max-width: 40ch; + padding: 3em 1em; +} + +.marquee { + position: relative; + width: 100%; + height: 2em; + font-size: 5em; + display: grid; + place-items: center; + overflow: hidden; + + &_text { + position: absolute; + min-width: 100%; + white-space: nowrap; + animation: marquee 16s infinite linear; + + @keyframes marquee { + from { translate: 70%; } + to { translate: -70%; } + } + } + + &_blur { + position: absolute; + inset: 0; + display: grid; + place-items: center; + background-color: black; + background-image: + linear-gradient(to right, white, 1rem, transparent 50%), + linear-gradient(to left, white, 1rem, transparent 50%); + filter: contrast(15); + + p { + filter: blur(0.07em); + } + } + + &_clear { + position: absolute; + inset: 0; + display: grid; + place-items: center; + } +} + +.text { + margin-block: 2em; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +