diff --git a/Captain-america-animation/README.md b/Captain-america-animation/README.md new file mode 100644 index 0000000..1a1898b --- /dev/null +++ b/Captain-america-animation/README.md @@ -0,0 +1,3 @@ +# Captain America animation + +by [JonathanAllisson](https://github.com/JonathanAllisson) \ No newline at end of file diff --git a/Captain-america-animation/captain.png b/Captain-america-animation/captain.png new file mode 100644 index 0000000..8f24b23 Binary files /dev/null and b/Captain-america-animation/captain.png differ diff --git a/Captain-america-animation/index.html b/Captain-america-animation/index.html new file mode 100644 index 0000000..bf8e212 --- /dev/null +++ b/Captain-america-animation/index.html @@ -0,0 +1,19 @@ + + + + + + + + Captain America + + + + + + + + + + + \ No newline at end of file diff --git a/Captain-america-animation/styles.css b/Captain-america-animation/styles.css new file mode 100644 index 0000000..c3322e4 --- /dev/null +++ b/Captain-america-animation/styles.css @@ -0,0 +1,34 @@ +body { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + + background: #0f5ccf; +} + +.captain-america{ + fill-opacity: 0; + + animation: captain-america 5s ease-in infinite alternate; +} + +@keyframes captain-america { + 0% { + stroke-dasharray: 150 30; + stroke-dashoffset: 300; + fill-opacity: 0; + } + 80% { + stroke-dasharray: 800 0; + stroke-dashoffset: 0; + fill-opacity: 0; + } + 90% { + fill-opacity: 1; + } + 100% { + fill-opacity: 1; + } +} \ No newline at end of file diff --git a/Loading Tiles Animation/index.html b/Loading Tiles Animation/index.html new file mode 100644 index 0000000..2dfe6e9 --- /dev/null +++ b/Loading Tiles Animation/index.html @@ -0,0 +1,20 @@ + + + + + + + + + Loading Tiles + + +
+
+
+
+
+
+ +

CSS LOADER TILES

+ diff --git a/Loading Tiles Animation/styles.css b/Loading Tiles Animation/styles.css new file mode 100644 index 0000000..1f34829 --- /dev/null +++ b/Loading Tiles Animation/styles.css @@ -0,0 +1,31 @@ +body{ + background-color: #000000; +} + +.container{ + width: 120px; + margin: 200px auto; + margin-bottom: 100px; +} + +.box{ + width: 50px; + height: 50px; + background-color: #14d6b6; + display: inline-block; + animation: pulse 0.6s ease-in infinite alternate; +} +.box2, .box3{ + animation-delay: 0.6s; +} + +@Keyframes pulse{ + 100%{ + opacity: 0; + } +} +h2{ + color: #14d6b6; + font-style: italic; + text-align: center; +} \ No newline at end of file diff --git a/README.md b/README.md index 815b183..9004321 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ | Credit Cards | https://iqbalutomo.github.io/credit-cards/ | | Loader Glowing | https://jonathanallisson.github.io/loader/ | | Parallax Sunset | https://sinc0115.github.io/parallax-sunset/ | +| Captain America Animation | https://jonathanallisson.github.io/Captain/ | ---