idk
This commit is contained in:
@@ -21,6 +21,7 @@
|
||||
<a href="https://github.com/mileswolfallen2/funforyou-wedsite/releases/tag/1.9.0" target="_blank">offline</a>
|
||||
<a href="/dextensify-master/dextensify-master/index2.html">unblocker</a>
|
||||
<a href="coment.html">contact me</a></p>
|
||||
<a href="/playful/playful/dist/index.html">text 2</a>
|
||||
<p></p>
|
||||
<h1>there Is A Christmas hunt find the lost santas thay look like this 🎅🏼🎅🏼🎅🏼 there is over 5 of them happy holadays</h1>
|
||||
<a href="https://disqus.com/profile/signup/">login signup comments</a>
|
||||
|
||||
BIN
Binary file not shown.
Executable
+22
@@ -0,0 +1,22 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2023 mileswolfallen2 (https://codepen.io/mileswolfallen2-the-typescripter/pen/dyaLExe)
|
||||
Fork of an original work Playful (https://codepen.io/mileswolfallen2-the-typescripter/pen/dyaLExe)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
Executable
+5
@@ -0,0 +1,5 @@
|
||||
# Playful
|
||||
|
||||
A Pen created on CodePen.io. Original URL: [https://codepen.io/mileswolfallen2-the-typescripter/pen/dyaLExe](https://codepen.io/mileswolfallen2-the-typescripter/pen/dyaLExe).
|
||||
|
||||
Inspired by Nordstrom Rack's brand promo by jkrGlobal (https://jkrglobal.com/): https://twitter.com/offgrid_design/status/1725770853777084578
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CodePen - Playful</title>
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=B612+Mono&family=Roboto+Mono:wght@400;600&family=Slackey&display=swap'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div>
|
||||
<span><span>fun</span></span><span><span>miles</span></span><span><span>1</span></span><span><span>.n</span></span>
|
||||
</div>
|
||||
<small>Click to trigger</small>
|
||||
<!-- partial -->
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
const d = document.querySelector('div');
|
||||
|
||||
setTimeout(() => {
|
||||
d.classList.add('loaded');
|
||||
}, 500);
|
||||
|
||||
document.body.addEventListener('click', () => {
|
||||
d.classList.toggle('loaded');
|
||||
});
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
body {
|
||||
align-items: center;
|
||||
background: #3692ff;
|
||||
box-sizing: border-box;
|
||||
color: #001e51;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Slackey', sans-serif;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 10vw;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
div > span {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: transform;
|
||||
}
|
||||
|
||||
div > span span {
|
||||
display: inline-block;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
div > span:nth-child(odd) {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
div > span:nth-child(odd) span {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
div > span:nth-child(even) {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
div > span:nth-child(even) span {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
div.loaded > span {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
div.loaded > span span {
|
||||
transform: translateY(0);
|
||||
}
|
||||
Executable
+4
@@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<span><span>fun</span></span><span><span>miles</span></span><span><span>1</span></span><span><span>.n</span></span>
|
||||
</div>
|
||||
<small>Click to trigger</small>
|
||||
Executable
+9
@@ -0,0 +1,9 @@
|
||||
const d = document.querySelector('div');
|
||||
|
||||
setTimeout(() => {
|
||||
d.classList.add('loaded');
|
||||
}, 500);
|
||||
|
||||
document.body.addEventListener('click', () => {
|
||||
d.classList.toggle('loaded');
|
||||
});
|
||||
Executable
+57
@@ -0,0 +1,57 @@
|
||||
body {
|
||||
align-items: center;
|
||||
background: #3692ff;
|
||||
box-sizing: border-box;
|
||||
color: #001e51;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Slackey', sans-serif;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 10vw;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
div > span {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: transform;
|
||||
}
|
||||
|
||||
div > span span {
|
||||
display: inline-block;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
div > span:nth-child(odd) {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
div > span:nth-child(odd) span {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
div > span:nth-child(even) {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
div > span:nth-child(even) span {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
div.loaded > span {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
div.loaded > span span {
|
||||
transform: translateY(0);
|
||||
}
|
||||
Binary file not shown.
Reference in New Issue
Block a user