Skip to content

Instantly share code, notes, and snippets.

@Luen

Luen/index.css

Created February 18, 2023 10:58
Show Gist options
  • Save Luen/772e0d5d1c1ec7e8f3280bc896b9fc15 to your computer and use it in GitHub Desktop.
Save Luen/772e0d5d1c1ec7e8f3280bc896b9fc15 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.css
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&family=Monoton&family=Righteous&display=swap");
html, body {
padding: 0;
height: 100%;
display: grid;
place-content: center;
background: #0A0A27;
}
div {
position: fixed;
font-family: "Monoton",
"Fugaz One", cursive;
inset: 0;
background: #000;
color: #fff;
z-index: 1;
text-align: center;
line-height: 100vh;
font-size: 160px;
mix-blend-mode: color-burn;
letter-spacing: 20px;
}
Raw
media.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script
src="https://unpkg.com/[email protected]/css-doodle.min.js">
</script>
<title>1000 Subscribe </title>
</head>
<body>
<div>1000</div>
<css-doodle>
<style>
@grid: 40 / 800px;
background: cyan;
scale: 0;
opacity: 0;
animation: m 10s linear infinite;
animation-delay: calc(-4s/@I * @i * @sin(@i));
@keyframes m {
0%,
50%,
90% {
scale: 1;
opacity: 1
}
25%,
75%,
100% {
scale: 0;
opacity: 0
}
}
</style>
</css-doodle>
</body>
</html>
<!--
<script src="index.js"></sc>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
-->
<!-- https://www.youtube.com/watch?v=wqb0kaRdyyA
Border Animation CSS | Quick Animation
-->
<!-- Pure CSS Rotating Image Slider || Rotating Image Gallery using HTML & CSS -->
<!-- https://dribbble.com/ -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment