rafszul

<?php
/**
 * Register block patterns.
 * Include this file in your theme, and update image paths, prefix and text domain.
 *
 * @link https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/
 */

/**
 * Make sure that block patterns are enabled before registering.

rafszul

/**
 * Enqueue Block Filters.
 */
function enqueue_my_block_filters() {
	wp_register_script(
		'block-style-filter',
		plugins_url( 'block-style-filter', __FILE__ ),
		array( 'wp-blocks', 'wp-element' )
	);
}

rafszul

const WordpressPurgeCSS = {
    whitelist: [
        "rtl",
        "home",
        "blog",
        "archive",
        "date",
        "error404",
        "logged-in",
        "admin-bar",

rafszul

<div class="video-container">
                      <img src="img/yt-video.jpg"/ id="play-video" class="img-responsive">
                      <iframe style="display:none" id="video" src="https://www.youtube.com/embed/SzmioR4Dj8E" frameborder="0" allowfullscreen></iframe>                
</div>

rafszul

counter

basic example; followed from https://www.codementor.io/jamesezechukwu/how-to-create-a-simple-counter-using-javascript-html-css-bxcjgbbxa

A Pen by rafszul on CodePen.

License.

rafszul

<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 720 960" version="1">
  <path fill="#0E0900" d="M0 0h720v960H0z"/>
  <path fill="#fffef1" stroke="#fffef1" stroke-width=".7" d="M0 959v1h1v-1l4-20 4-20 4.5-18.5L18 882l4.5-19 4.5-19 4-19.5 4-19.5 3-20 3-20 2.5-19 2.5-19 3-19.5 3-19.5 3.5-20 3.5-20-5.5-17.5L48 613l7-8.5 7-8.5-14-9.5-14-9.5-17-26-17-26v434z" stroke-linejoin="round"/>
  <path fill="#8b867b" stroke="#8b867b" stroke-width=".7" d="M1 959v1h2v-1l8-32.5 8-32.5v-1l9.5-39 9.5-39v-1l3.5-20.5L45 773l5.5-26.5L56 720l5 20 5 20 7.5 18.5L81 797l1-1.5 1-1.5-6.5-16-6.5-16-6-18-6-18 6-8.5 6-8.5 5 9.5 5 9.5 2.5 12 2.5 12 8 3.5 8 3.5 22.5 16 22.5 16h-7l-1.5-.5-1.5-.5-11.5-9-11.5-9-15.5-25.5L82 721l-11.5-17L59 687l-.5-.5-.5-.5 2.5-21 2.5-21-2-28-2-28-.5-1-.5-1-.5-.5-.5-.5-.5-1-.5-1-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5-.5h-3l-.5-.5-.5-.5h-4l-1-.5-1-.5h-2l-.5-.5-.5-.5h-2l-1-.5-1-.5-1-.5-1-.5-7.5-18-7.5-18v-1l2.5-3 2.5-3-11.5-9L0 513v12l17 26 17 26 14 9.5 14 9.5-7 8.5-7 8.5 5.5 17.5L59 648l-3.

rafszul

<div id="screen">
	<img id="i1" class="in" src="http://i0.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/11/image-2.jpeg" alt="">
	<img id="i2" class="in" src="http://i1.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/12/p1050538.jpg" alt="">
	<img id="i3" class="in" src="http://i2.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/11/Untitled-2.jpg" alt="">
	<img id="i4" class="in" src="http://i2.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/11/Untitled-1.jpg" alt="">
	<img id="i5" class="in" src="http://i1.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/11/image.jpeg" alt="">
	<img id="i6" class="in" src="http://i2.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/11/Untitled-3.jpg" alt="">
	<img id="i7" src="http://i0.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/11/image-2.jpeg" alt="">
	<img id="i8" src="http://i1.wp.com/www.thehouseofdreams.co.uk/blog/wp-content/uploads/2015/12/p1050538.jpg" alt="">

rafszul

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 712">
  <g xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <path fill="#0A090C" d="M0 0h960v712H0z"/>
    <path fill="#0A090C" stroke="#0A090C" stroke-width=".7" d="M13 712h141l-.5-1.5-.5-1.5-1-1-1-1-.5-1-.5-1-4-7.5-4-7.5-5.5-1-5.5-1-4-5.5-4-5.5-6-.5-6-.5-5.5-5-5.5-5 .5-3 .5-3-4-3-4-3-1 1-1 1-.5.5-.5.5-.5-.5-.5-.5-.5-1-.5-1-.5-.5-.5-.5-5.5-6.5L76 640l-4.5-1-4.5-1-3-7-3-7-8-1.5-8-1.5-5.5-7.5L34 606l-5-3-5-3-7.5-3-7.5-3-4 2.5-4 2.5H0v32l11 6.5 11 6.5 4 8.5 4 8.5-1.5 8.5L27 678l-1.5-2-1.5-2-5 7-5 7-6-3.5-6-3.5-.5 4.5L1 690H0v22h13z" stroke-linejoin="round"/>
    <path fill="#0A3A62" stroke="#0A3A62" stroke-width=".7" d="M1.5 685.5L2 681l6 3.5 6 3.5 5-7 5-7 1.5 2 1.5 2 1.5-8.5L30 661l-4-8.5-4-8.5-11-6.5L0 631v59h1l.5-4.5zm3.5-89l4-2.5 7.5 3 7.5 3 5 3 5 3 5.5 7.5L45 621l8 1.5 8 1.5 3 7 3 7 4.5 1 4.5 1 5.5 6.5L87 653v-4l.5-

rafszul

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 824 1104" version="1">
  <path fill="#0C0C0F" d="M0 0h824v1104H0z"/>
  <path fill="#f7e3b1" stroke="#f7e3b1" stroke-width=".7" d="M0 1104h10l-2-1-1-2-4-2-3-2v7z" stroke-linejoin="round"/>
  <path fill="#9ec52f" stroke="#9ec52f" stroke-width=".7" d="M10 1104h7l-2-2-2-3-2-2-2-2-3-2-2-2-2-2-2-2v10l3 2 4 2 1 2 2 1z" stroke-linejoin="round"/>
  <path fill="#cdf293" stroke="#cdf293" stroke-width=".7" d="M17 1104h11l-14-11-14-12v6l2 2 2 2 2 2 3 2 2 2 2 2 2 3 2 2z" stroke-linejoin="round"/>
  <path fill="#cef1b2" stroke="#cef1b2" stroke-width=".7" d="M28 1104h10l-8-5-7-6-12-10-11-10v8l14 12 14 11z" stroke-linejoin="round"/>
  <path fill="#d4edd4" stroke="#d4edd4" stroke-width=".7" d="M38 1104h6v-13l1-13 1-16 1-17v-12l1-13-1-2-1-3-1-1v-3h-4l-4 1-4 1h-4l-7 9-7 8-8 11-7 10v22l11 10 12 10 7 6 8 5z" stroke-linejoin="round"/>
  <path fill="#8cc68e" stroke="#8cc68e" stroke-width=".7" d="M44 1104h3v-3l-1-4v-6l1-2v-14l1-2v-32l1-2v-12l-1-4v-4 1l-1 13v12l-1 17-1 16-1 13v13z" 

rafszul

<div class="cube">
	<div class="front">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/73058/resized.jpg"/>
	</div>
	<div class="bottom">
		you are beautiful
	</div>
</div>