gicolek

<?php
/*
  Plugin Name: Bunny vs Ghosts Shortcode
  Plugin URI: https://wp-doin.com/2023/12/02/a-simple-platform-game-concept-made-with-ai/
  Description: A Shortcode to display the HTML and CSS of a Side Scroller Game
  Version: 1.0.0
  Author: Rafał Gicgier
  Author URI: https://wp-doin.com/
  Text Domain: 
  Domain Path: /

gicolek

<?php
/*
  Plugin Name: Galaga Style Game
  Plugin URI: https://wp-doin.com/2023/11/04/a-simple-javascript-dodge-and-shoot/
  Description: A Shortcode to display the HTML and CSS and JS of a Shooter Game
  Version: 1.0.0
  Author: Rafał Gicgier
  Author URI: https://wp-doin.com/
  Text Domain: wp-doin
  Domain Path: /lang

gicolek

<?php
// kudos https://wp-doin.com/2022/10/19/a-simple-accordion-image-gallery/
add_shortcode( 'anim_block', 'wpd_anim_block_shortcode' );

function wpd_anim_block_shortcode(){
		ob_start();
		?>
		<div class="c-anim-block">
				<div class="c-anim_block__img-wrap c-anim_block__img-wrap--1">
						<img class="c-anim-block__img c-anim-block__img--1" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-hitesh-choudhary-340152-980x551.jpg" />

gicolek

jQuery( document ).ready(function() {
		jQuery('.c-anim_block__img-wrap').hover(function () { // while hoverin on our container
        	jQuery(this).toggleClass('is-active'); // add is-active class to the hovered element
        	jQuery('.c-anim_block__img-wrap').not(this).toggleClass('is-inactive'); // and inactive class to each other element
	});
});

gicolek

.c-anim-block {
	overflow: hidden; /* make sure images don't go outside of our container */
	border-radius: 25px;
	display: flex;
	justify-content: space-between;
}
		
.c-anim_block__img-wrap {
	flex: 0 0 20%; /* initial width of each image */
	max-width: 20%;

gicolek

<div class="c-anim-block">
	<div class="c-anim_block__img-wrap c-anim_block__img-wrap--1">
		<img class="c-anim-block__img c-anim-block__img--1" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-hitesh-choudhary-340152-980x551.jpg" />
	</div>
	<div class="c-anim_block__img-wrap c-anim_block__img-wrap--2">
		<img class="c-anim-block__img c-anim-block__img--2" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-negative-space-169573-980x653.jpg" />
	</div>
	<div class="c-anim_block__img-wrap c-anim_block__img-wrap--3">
		<img class="c-anim-block__img c-anim-block__img--3" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-jeshoots-4316-980x653.jpg" />
	</div>

gicolek

jQuery(document).ready(function(e){
    console.log( 'This is my custom widget script' );
});

gicolek

.c-posts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1024px;
}

.c-post {
    flex: 0 0 25%;

gicolek

<?php
// make sure this line is here, the Widget Base belongs to Elementor Namespace 
namespace Elementor;

if ( !defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// Extend the \Elementor\Widget_Base class
class My_Widget_Custom_Blog_Loop extends Widget_Base {

gicolek

<?php
/**
 * Custom Elementor Widgets
 */
class Custom_Elementor_Widgets {

    protected static $instance = null;

    public static function get_instance(){
        if ( !isset( static::$instance ) ) {