diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5c0e1664 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 34f19f48..c6544c5e 100644 --- a/README.md +++ b/README.md @@ -411,6 +411,7 @@ Your browser does not support the video tag. [](https://codepen.io/Sahil-Patil-the-sans/pen/WNPbVqK) [](https://codepen.io/sugeng-sulistiyawan/pen/PoyjPWd) [](http://codepen.io/rcjasub/pen/zxrddOP) +[](https://codepen.io/Guarionex-Tavares/pen/emJVdgN) **[⬆ back to top](#quick-links)** @@ -509,6 +510,7 @@ Your browser does not support the video tag. --- ## Mondrian Composition + [](https://codepen.io/VINAY-MADIVAL/pen/VYerdxY) **[⬆ back to top](#quick-links)** diff --git a/images/Screenshot (43).png b/images/Screenshot (43).png new file mode 100644 index 00000000..e7f77a0c Binary files /dev/null and b/images/Screenshot (43).png differ diff --git a/retro-loader/index.html b/retro-loader/index.html new file mode 100644 index 00000000..a5f7bca9 --- /dev/null +++ b/retro-loader/index.html @@ -0,0 +1,15 @@ + + + Retro Loader + + + +

Retro Loader

+
+ Retro Computer Loading +
+

AltStyle によって変換されたページ (->オリジナル) /

+ diff --git a/retro-loader/style.css b/retro-loader/style.css new file mode 100644 index 00000000..4c66b9c5 --- /dev/null +++ b/retro-loader/style.css @@ -0,0 +1,38 @@ +html, +body { + height: 100%; + margin: 0; + background-color: #f3a5f9; + + /* Center content horizontally and vertically */ + display: flex; + justify-content: center; + align-items: center; +} + +.loader-container { + background: white; + padding: 20px; + border-radius: 25px; + + /* Shadow for depth */ + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + + /* Smooth pop animation: scales up and down forever */ + animation: pop 1.5s ease-in-out infinite alternate; +} + +img { + width: 220px; + height: auto; + border-radius: 12px; +} + +@keyframes pop { + 0% { + transform: scale(1); + } + 100% { + transform: scale(1.05); + } +}