diff --git a/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt b/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt index 56b654ac04..05db4606ec 100644 --- a/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt +++ b/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt @@ -12,22 +12,22 @@ fun Card(className: String, title: String, subTitle: String, imgUrl: String) { H2 { Text(title) } P { Text(subTitle) } } - Img(src = imgUrl) + Img(src = imgUrl, alt = "") } } fun main() { renderComposable(rootElementId = "root") { - Card("adidas", "I-5923 RUNNER PRIDE", "£99.95", "https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg") - Card("tiger", "TIGER ALLY", "£95.00", "/pycharm.png") - Card("adidas", "NMD_R1", "£109.95", "https://upload.wikimedia.org/wikipedia/commons/c/c9/PhpStorm_Icon.svg") - Card("tiger", "CALIFORNIA 78", "£75.00", "/webstorm.png") - Card("adidas", "TUBULAR DUSK PRIMEKNIT", ">£109.95", "https://upload.wikimedia.org/wikipedia/commons/9/95/RubyMine_Icon.svg") - Card("tiger", "GSM", "£80.00", "https://upload.wikimedia.org/wikipedia/commons/5/5f/AppCode_Icon.svg") - Card("adidas", "NMD_CS2 PRIMEKNIT", "£149.95", "/goland.png") - Card("tiger", "MEXICO 66", "£75.00", "/datagrip.png") - Card("adidas", "STAN SMITH", "£74.95", "/datalore.png") - Card("tiger", "ALVARADO", "£70.00", "/clion.png") + Card("adidas", "IDEA", "£99.95", "https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg") + Card("tiger", "PyCharm", "£95.00", "https://upload.wikimedia.org/wikipedia/commons/1/1d/PyCharm_Icon.svg") + Card("adidas", "PHPStorm", "£109.95", "https://upload.wikimedia.org/wikipedia/commons/c/c9/PhpStorm_Icon.svg") + Card("tiger", "WebStorm", "£75.00", "/webstorm.png") + Card("adidas", "RubyMine", ">£109.95", "https://upload.wikimedia.org/wikipedia/commons/9/95/RubyMine_Icon.svg") + Card("tiger", "AppCode", "£80.00", "https://upload.wikimedia.org/wikipedia/commons/5/5f/AppCode_Icon.svg") + Card("adidas", "GoLand", "£149.95", "/goland.png") + Card("tiger", "DataGrip", "£75.00", "/datagrip.png") + Card("adidas", "Datalore", "£74.95", "/datalore.png") + Card("tiger", "Clion", "£70.00", "/clion.png") } } diff --git a/examples/web_grid_animation/src/jsMain/resources/app.css b/examples/web_grid_animation/src/jsMain/resources/app.css index f2d2abbd92..2688f51107 100644 --- a/examples/web_grid_animation/src/jsMain/resources/app.css +++ b/examples/web_grid_animation/src/jsMain/resources/app.css @@ -60,21 +60,19 @@ p{ font-size: 2em; } -img{ +li > img{ position: absolute; left: 50%; transform: translateX(-50%); width: 62%; bottom: -10%; - -webkit-filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20)); filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20)); transition-property: bottom, filter, -webkit-filter; transition-duration: .3s; } -img:hover{ +li > img:hover{ bottom: 0; - -webkit-filter: drop-shadow(0 80px 40px rgba(0, 0, 0, 0.20)); filter: drop-shadow(0 80px 30px rgba(0, 0, 0, 0.20)); } diff --git a/examples/web_grid_animation/src/jsMain/resources/clion.png b/examples/web_grid_animation/src/jsMain/resources/clion.png new file mode 100644 index 0000000000..629151a10c Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/clion.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/datagrip.png b/examples/web_grid_animation/src/jsMain/resources/datagrip.png new file mode 100644 index 0000000000..62831fd54d Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/datagrip.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/datalore.png b/examples/web_grid_animation/src/jsMain/resources/datalore.png new file mode 100644 index 0000000000..4847b64d06 Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/datalore.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/goland.png b/examples/web_grid_animation/src/jsMain/resources/goland.png new file mode 100644 index 0000000000..87a8e5c51d Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/goland.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/kotlin.png b/examples/web_grid_animation/src/jsMain/resources/kotlin.png new file mode 100644 index 0000000000..eeb5add69d Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/kotlin.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/pycharm.png b/examples/web_grid_animation/src/jsMain/resources/pycharm.png new file mode 100644 index 0000000000..ddf59fb265 Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/pycharm.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/webstorm.png b/examples/web_grid_animation/src/jsMain/resources/webstorm.png new file mode 100644 index 0000000000..c7a3415335 Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/webstorm.png differ