Snippets Collections
<picture>
    <source media="(min-width: 1440px)" srcset="/wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-l-850h.webp" type="image/webp">
    <source media="(min-width: 900px)" srcset="/wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-m-850h.webp" type="image/webp">
    <source srcset="/wp-content/uploads/2022/04/unternehmer-zitadelle-start-hero-s-700h.webp" type="image/webp">
    <img srcset="/wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-m-850h.png 900w, /wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-l-850h.png 1440w" src="/wp-content/uploads/2022/04/unternehmer-zitadelle-start-hero-s-700h.png" type="image/png" alt="Collage: Menschen im Gespräch">
</picture>
function makeActive(a) {
    const items = document.querySelectorAll('.tab-active');
    if (items.length) items[0].className = null;
    a.className = 'tab-active';
  }

<a href="" className="tab-active" onClick={(e) => {makeActive(e.target)}}>Moulds</a>
<a href="" className='tab' onClick={(e) => {makeActive(e.target)}}>Fractionalization</a>
<div class="posts">
            <h2 class="mb-40">
                Recommended Powerlister
            </h2>

            <?php

            $query_args = array(
                'post_type' => 'post',
                'posts_per_page' => 4,
                'meta_key'        => 'show_in_recommended',
                'meta_value'    => '1',
                'orderby'     => 'modified',
                'order'       => 'DESC',
            );

            // The Query
            $the_query = new WP_Query($query_args);

            // The Loop
            if ($the_query->have_posts()) {
                while ($the_query->have_posts()) {

                    $the_query->the_post();
                    $recommended = get_field('show_in_recommended', get_the_ID());



                    $photo = get_field('photo', get_the_ID());
                    $company = get_field('company', get_the_ID());

            ?>

                    <div class="card" style="text-align:left;padding: 0px;width: 100%; margin-left: 4px;">
                        <img src="<?php echo esc_url($photo['url']); ?>" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h2 class="card-title"> <?php the_title(); ?></h2>
                            <p style="font-size: 14px;margin-bottom:0;font-weight: 300;"><?php echo $company; ?></p>
                            <p class="card-text" style="color:#AFAFAF;margin-bottom:0;"><?php echo get_the_date(); ?></p>
                            <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/arow.png" alt=""></a>
                        </div>
                    </div>
                    <hr>

            <?php

                }
                /* Restore original Post Data */
                wp_reset_postdata();
            } else {
                // no posts found
            }

            ?>



        </div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
.overflowing {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
<svg width="110" height="110" viewBox="0 0 176 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M88 0C64.5336 0 49.8664 11.0825 44 33.2468C52.8 22.1643 63.0664 18.0084 74.8 20.7792C81.4942 22.3597 86.2792 26.9474 91.5757 32.0247C100.204 40.2967 110.189 49.8701 132 49.8701C155.466 49.8701 170.134 38.7877 176 16.6234C167.2 27.7058 156.934 31.8617 145.2 29.0909C138.506 27.5104 133.721 22.9227 128.424 17.8455C119.796 9.57338 109.811 0 88 0ZM44 49.8701C20.5336 49.8701 5.86644 60.9526 0 83.1169C8.8 72.0344 19.0664 67.8786 30.8 70.6493C37.4942 72.2299 42.2792 76.8175 47.5757 81.8948C56.2038 90.1669 66.1891 99.7403 88 99.7403C111.466 99.7403 126.134 88.6578 132 66.4935C123.2 77.576 112.934 81.7318 101.2 78.961C94.5058 77.3805 89.7208 72.7928 84.4243 67.7156C75.7962 59.4435 65.8109 49.8701 44 49.8701Z" fill="#46D3FF"/>
</svg>
<svg width="100" height="100" viewBox="0 0 176 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M164.362 33.803L92.0811 163.053C91.7417 163.661 91.2467 164.168 90.647 164.521C90.0473 164.875 89.3643 165.063 88.6681 165.066C87.9719 165.068 87.2874 164.886 86.6849 164.537C86.0823 164.188 85.5834 163.686 85.2391 163.081L11.5281 33.814C11.1575 33.1654 10.9796 32.4246 11.0152 31.6784C11.0509 30.9323 11.2986 30.2118 11.7293 29.6014C12.1601 28.9911 12.756 28.5163 13.4471 28.2328C14.1382 27.9492 14.8958 27.8686 15.6311 28.0005L87.9891 40.9365C88.4492 41.0194 88.9204 41.0194 89.3806 40.9365L160.226 28.0225C160.958 27.8887 161.714 27.9658 162.404 28.245C163.094 28.5241 163.691 28.9937 164.125 29.599C164.558 30.2043 164.811 30.9204 164.853 31.6638C164.895 32.4072 164.725 33.1472 164.362 33.7975V33.803Z" fill="url(#paint0_linear_129_36)"/>
<path d="M122.452 11.0385L68.9702 21.516C68.5421 21.5996 68.154 21.8234 67.8672 22.152C67.5803 22.4807 67.4111 22.8955 67.3862 23.331L64.0972 78.903C64.0791 79.2079 64.1323 79.5128 64.2526 79.7935C64.373 80.0742 64.5571 80.3229 64.7905 80.52C65.0238 80.717 65.2999 80.8569 65.5968 80.9285C65.8937 81.0001 66.2032 81.0015 66.5007 80.9325L81.3892 77.495C81.71 77.4209 82.0442 77.4286 82.3612 77.5175C82.6782 77.6063 82.9677 77.7734 83.2032 78.0035C83.4387 78.2335 83.6126 78.519 83.7089 78.8338C83.8052 79.1486 83.8208 79.4826 83.7542 79.805L79.3322 101.47C79.264 101.803 79.2836 102.149 79.3892 102.472C79.4948 102.796 79.6828 103.086 79.9346 103.316C80.1864 103.545 80.4935 103.704 80.8256 103.779C81.1578 103.853 81.5036 103.84 81.8292 103.741L91.0252 100.947C91.3513 100.847 91.6978 100.834 92.0306 100.909C92.3633 100.984 92.6708 101.144 92.9228 101.374C93.1748 101.604 93.3626 101.895 93.4677 102.219C93.5728 102.544 93.5916 102.89 93.5222 103.224L86.4877 137.253C86.0477 139.381 88.8802 140.542 90.0627 138.721L90.8492 137.5L134.437 50.5175C134.6 50.1898 134.669 49.8228 134.635 49.458C134.601 49.0933 134.466 48.7454 134.244 48.4536C134.023 48.1618 133.724 47.9377 133.382 47.8068C133.04 47.6758 132.668 47.6431 132.308 47.7125L116.98 50.666C116.65 50.7291 116.309 50.7066 115.99 50.6005C115.672 50.4943 115.385 50.3082 115.159 50.0599C114.933 49.8116 114.774 49.5094 114.698 49.1821C114.622 48.8549 114.631 48.5137 114.725 48.191L124.724 13.508C124.818 13.1843 124.827 12.8418 124.751 12.5134C124.674 12.1851 124.514 11.882 124.287 11.6333C124.059 11.3847 123.771 11.1988 123.451 11.0937C123.13 10.9885 122.788 10.9676 122.458 11.033L122.452 11.0385Z" fill="url(#paint1_linear_129_36)"/>
<defs>
<linearGradient id="paint0_linear_129_36" x1="9.72693" y1="23.3798" x2="99.6804" y2="145.544" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear_129_36" x1="83.8311" y1="13.8808" x2="100.103" y2="125.506" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.083" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
<svg width="100" height="100" viewBox="0 0 176 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.25 41.25H156.75V145.75H19.25V41.25Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.75 46.75L88 101.75L151.25 46.75" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg width="92" height="100" viewBox="0 0 176 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_131_46)">
<path d="M149.088 11.9265C137.546 6.28174 125.335 2.2709 112.779 0C111.215 2.95557 109.387 6.93083 108.127 10.0934C94.589 7.9656 81.1751 7.9656 67.8858 10.0934C66.6263 6.93155 64.7576 2.95557 63.1791 0C50.6102 2.27194 38.389 6.293 26.8413 11.9559C3.86233 48.2514 -2.36711 83.6442 0.747265 118.536C15.9885 130.433 30.7587 137.659 45.2801 142.388C48.889 137.201 52.0792 131.709 54.8178 125.969C49.604 123.895 44.5776 121.338 39.7986 118.329C41.0563 117.355 42.2843 116.34 43.4809 115.285C72.4398 129.442 103.905 129.442 132.519 115.285C133.721 116.333 134.948 117.348 136.201 118.329C131.414 121.346 126.378 123.908 121.154 125.984C123.908 131.748 127.093 137.245 130.692 142.403C145.227 137.675 160.011 130.448 175.252 118.536C178.907 78.0881 169.009 43.0193 149.088 11.9258V11.9265ZM58.7633 97.0783C50.0699 97.0783 42.9405 88.5953 42.9405 78.2656C42.9405 67.9358 49.918 59.4384 58.7633 59.4384C67.6094 59.4384 74.7381 67.9207 74.5861 78.2656C74.5999 88.5953 67.6094 97.0783 58.7633 97.0783ZM117.236 97.0783C108.542 97.0783 101.414 88.5953 101.414 78.2656C101.414 67.9358 108.391 59.4384 117.236 59.4384C126.082 59.4384 133.211 67.9207 133.059 78.2656C133.059 88.5953 126.082 97.0783 117.236 97.0783V97.0783Z" fill="#5865F2"/>
</g>
<defs>
<clipPath id="clip0_131_46">
<rect width="176" height="143" fill="white"/>
</clipPath>
</defs>
</svg>
1<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
2  <h2 id="dialogTitle">Your personal details were successfully updated</h2>
3  <p id="dialogDesc">You can change your details at any time in the user account section.</p>
4  <button>Close</button>
5</div>
<p> Teste do aço </p>
<svg width="100" height="100" viewBox="0 0 176 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M87.9998 146.667C103.559 146.667 118.481 140.486 129.483 129.484C140.486 118.482 146.667 103.559 146.667 88.0001C146.667 72.4407 140.486 57.5186 129.483 46.5165C118.481 35.5144 103.559 29.3334 87.9998 29.3334C72.4405 29.3334 57.5184 35.5144 46.5162 46.5165C35.5141 57.5186 29.3332 72.4407 29.3332 88.0001C29.3332 103.559 35.5141 118.482 46.5162 129.484C57.5184 140.486 72.4405 146.667 87.9998 146.667V146.667ZM87.9998 161.333C47.4978 161.333 14.6665 128.502 14.6665 88.0001C14.6665 47.4981 47.4978 14.6667 87.9998 14.6667C128.502 14.6667 161.333 47.4981 161.333 88.0001C161.333 128.502 128.502 161.333 87.9998 161.333Z" fill="#0FA958"/>
<path d="M113.131 111.085V74.4186H76.4645V72.1306C76.4645 68.3393 79.5445 65.252 83.3432 65.252H90.2145V51.502H83.3432C77.8739 51.5078 72.6303 53.683 68.7629 57.5504C64.8956 61.4177 62.7203 66.6613 62.7145 72.1306V74.4186H53.5479V88.1686H62.7145V111.085H53.5479V124.835H85.6312V111.085H76.4645V88.1686H99.5132V111.085H90.2145V124.835H122.298V111.085H113.131Z" fill="#0FA958"/>
<path d="M105.615 65.7949C109.669 65.7949 112.955 62.5083 112.955 58.4542C112.955 54.4001 109.669 51.1135 105.615 51.1135C101.56 51.1135 98.2739 54.4001 98.2739 58.4542C98.2739 62.5083 101.56 65.7949 105.615 65.7949Z" fill="#0FA958"/>
</svg>
HTML

<div class="sticky"></div>


CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%;
}


jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="../examples/inlineframes1.html" > </iframe>
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">
  <img src="menu.svg" alt="">
  Menu
</button>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="/action_page.php">
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Submit">
      </form>

<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>

<script type="text/javascript">
hotkeys('alt+z,alt+x,alt+c,alt+v,alt+b,alt+n,alt+m,alt+1', function (event, handler){
  switch (handler.key) {
    case 'alt+z': document.getElementById("fname").value = "alt+z";
      break;
    case 'alt+x': document.getElementById("fname").value = "alt+x";
      break;
    case 'alt+c': document.getElementById("fname").value = "alt+c";
      break;
    case 'alt+v': document.getElementById("fname").value = "alt+v";
      break;
    case 'alt+b': document.getElementById("fname").value = "alt+b";
      break;
    case 'alt+n': document.getElementById("fname").value = "alt+n";
      break;
    case 'alt+m': document.getElementById("fname").value = "alt+m";
      break;
    case 'alt+1': document.getElementById("fname").value = "alt+1";
      break;
    default: alert(event);
  }
});
</script>
</body>
</html>
<iframe src="https://calendly.com/username" width="100%" height="950" scrolling="no" frameborder="0"></iframe>
<link rel="stylesheet" href="/path/to/main.css" fetchpriority="high" />
<link rel="stylesheet" href="/path/to/third-party-plugin.css" fetchpriority="low" />
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
<!-- Remove Fundrasing Features OFF from SS -->
<script type="text/javascript">
    // <![CDATA[
    var collection = document.getElementsByClassName("tpl-main-content-side");
    collection[0].style.display = "none";
    // ]]>
</script>


<!-- Toggle Fundrasing Thermometer ON from SS -->
<!-- Paste this code into the WYSIWYG HTML area for a project -->
<script type="text/javascript">
    // <![CDATA[
    var container = document.getElementsByClassName("tpl-main-content-side");
    var button = document.getElementsByClassName("tpl-start-a-campaign");
    container[0].style.display = "block";
    button[0].style.display = "none";
    // ]]>
</script>
<Modal outerclick onClose={onClose} open={isOpen}> </Modal>
<div id="flyout2">
    <ul class="paginate">
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-1.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 1</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
        </span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-2.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 2</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-3.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 3</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-4.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 4</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-5.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 5</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-6.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 6</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-7.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 7</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
	<a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-8.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 8</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-9.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 9</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-10.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 10</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
		</span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
        <li>
            <div id="subProd">
                <img class="thumb" src="images/outfits-11.jpg" width="110" height="110" /> <span class="product">
        <p class="title">Outfit 11</p>
            <p class="number">1111-1111</p>
            <p class="price">12.99</p>
        </span>
 <a href="#" id="one" class="button1">+ Add item</a>
 <a href="#" class="qv"><img src="images/subProd_qv.png" width="17" height="17" /></a>

            </div>
        </li>
    </ul>
</div>
<script>
    $(document).ready(function() {
        $('.paginate').flexipage();
    });
</script>
<!-- INSERT BETWEEN BRACKETS { perpage:5, carousel: true, speed:800, animation: "swing" } -->
<button type="button" aria-expanded="false">
  <svg aria-hidden="true"> … </svg>
  Menu
</button>
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
</script>
<a class="js-cta blog-video" aria-label="Watch the Video" href="#mcui-modal" data-modal-type="youtube" data-toggle="modal" data-docid="OnB1TgxgwEA">
  <div class="img-wrapper">
    <div class="play-button">
      <span>Play</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="7" height="10" viewBox="0 0 7 10" fill="none">
        <path d="M7 5L0.25 9.33013L0.25 0.669872L7 5Z"></path>
      </svg>
    </div>
    <img src="https://www.mastercontrol.com/images/default-source/mcui-design-system/image-library/555x312/man-holding-tablet-555x312.jpg" alt="Man holding tablet" class="img-fluid" width="555" height="312" loading="lazy">
  </div>
  <!-- <p>This is the sub-title if you want one.</p> -->
</a>
<a href="#blog-ref-link-01" class="smooth-scroll-link">(1)</a>
<!-- The link it is scrolling to needs this id ** Doesn't need to be an <a> tag just the id to the element you want to scroll to -->
<a id="blog-ref-link-01" href="link to page here">Text</a>
<p><i class="fab fa-whatsapp fa-lg"></i><a href="https://wa.me/491730000000" target="_blank"> anrufen per Whatsapp</a></p>
defaults write com.apple.finder AppleShowAllFiles -boolean true; killall Finder
defaults write com.apple.finder AppleShowAllFiles -boolean false; killall Finder
{exp:channel:form channel="news"}
  <input name="title" type="text">
  <input type="submit" value="Submit">
{/exp:channel:form}
<!-- 2 column grid -->
<div class="grid grid-col-2">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
</div>

<!-- 3 column grid -->
<div class="grid grid-col-3">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
  <div class="grid-col-item">item3</div>
</div>
<input type="button" value="Some text" onclick="@("window.location.href='" + @Url.Action("actionName", "controllerName") + "'");" />
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="5" fill="black"/>
<path d="M20.5519 20.21L20.3381 20.2444L20.4455 20.4325C20.7905 21.0361 20.8808 21.7332 20.8808 22.451V26.181C20.8808 26.3786 20.8219 26.5223 20.7378 26.6148C20.6545 26.7064 20.5366 26.759 20.3938 26.759L20.3917 26.7591C20.3157 26.7601 20.2404 26.746 20.17 26.7174C20.0997 26.6888 20.0358 26.6464 19.9821 26.5928C19.9284 26.5391 19.886 26.4751 19.8574 26.4048C19.8289 26.3344 19.8147 26.2591 19.8158 26.1831V26.181V22.4603C19.8647 22.0591 19.8212 21.6519 19.6883 21.2701C19.5654 20.9165 19.3689 20.5935 19.1124 20.3219L19.5007 19.3122C20.8876 19.1276 22.3201 18.8 23.4123 17.9034C24.5367 16.9803 25.2758 15.4762 25.2758 12.988C25.2758 11.7765 24.8138 10.6598 23.9883 9.73068L23.8269 9.08601C24.1691 8.19365 24.1961 7.21056 23.9025 6.30002L23.8616 6.17295L23.7306 6.19891C23.2631 6.29159 22.3409 6.47982 20.7915 7.56862L20.3092 7.64797C18.1551 7.10634 15.9004 7.10634 13.7463 7.64797L13.259 7.56779C11.6362 6.57773 10.7022 6.28705 10.2038 6.28705H10.0922L10.0601 6.39394C9.78448 7.31269 9.7762 8.3297 10.136 9.18005L9.97719 9.81775C9.05902 10.7515 8.59778 11.9588 8.59778 13.079C8.59778 15.5195 9.28992 17.0234 10.3909 17.9586C11.4607 18.8673 12.8924 19.2172 14.365 19.403L14.6743 20.4084C14.1432 20.9738 13.8755 21.7141 13.9658 22.4602L13.9658 26.272L13.9658 26.2741C13.9669 26.3501 13.9527 26.4254 13.9241 26.4958C13.8956 26.5661 13.8532 26.6301 13.7995 26.6838C13.7458 26.7374 13.6819 26.7798 13.6115 26.8084C13.5412 26.837 13.4658 26.8511 13.3899 26.8501L13.3899 26.85L13.3857 26.8501C13.3097 26.8511 13.2344 26.837 13.164 26.8084C13.0937 26.7798 13.0298 26.7374 12.9761 26.6838C12.9224 26.6301 12.88 26.5661 12.8514 26.4958C12.8229 26.4254 12.8087 26.3501 12.8098 26.2741H12.8098V26.272V24.18V23.9949L12.6286 24.0333C11.1588 24.3452 10.1513 24.1202 9.403 23.6864C8.64755 23.2485 8.14078 22.5903 7.68363 21.9965L7.68372 21.9965L7.68001 21.992C7.6626 21.9711 7.64526 21.9503 7.628 21.9295C7.42236 21.6824 7.22715 21.4478 7.03077 21.2624C6.8307 21.0734 6.61652 20.9225 6.37021 20.8603C6.3304 20.8128 6.27026 20.7292 6.22255 20.626C6.16177 20.4945 6.12931 20.3494 6.1633 20.2134C6.20001 20.0666 6.29148 19.9415 6.40359 19.8726C6.51163 19.8061 6.63892 19.7905 6.77084 19.8563L6.78874 19.8652L6.80836 19.8691C7.58689 20.0248 8.07998 20.607 8.58761 21.2063C8.6318 21.2585 8.67609 21.3108 8.72069 21.3629C9.12823 21.9056 9.55576 22.4542 10.2028 22.7896C10.8573 23.1288 11.7144 23.2401 12.9653 22.9625L13.0828 22.9364V22.816V22.452V22.4428L13.0816 22.4336C12.9962 21.7426 13.1675 21.0468 13.518 20.4335L13.6213 20.2528L13.4172 20.212C12.0654 19.9416 10.6192 19.4265 9.51147 18.3519C8.40807 17.2815 7.62378 15.6396 7.62378 13.08C7.62378 11.6582 8.06706 10.4184 8.95401 9.35407L9.00075 9.29798L8.98544 9.22659C8.72087 7.99291 8.80662 6.67519 9.23572 5.62098L9.6454 5.29324C9.67952 5.28003 9.76889 5.25458 9.92256 5.24401C10.0949 5.23215 10.3409 5.23959 10.6652 5.30001C11.3138 5.42086 12.2742 5.75343 13.5807 6.56449L13.6346 6.59798L13.6962 6.58255C15.8526 6.04262 18.1089 6.04262 20.2653 6.58255L20.3304 6.59885L20.386 6.56118C21.6474 5.70559 22.6075 5.35072 23.2668 5.21875C23.5966 5.15276 23.851 5.14251 24.0306 5.15311C24.1919 5.16264 24.2855 5.18849 24.3192 5.20128L24.7257 5.52645C25.1593 6.76182 25.241 7.99029 24.8906 9.21581L25.0348 9.25705L24.9195 9.35307C25.8064 10.4174 26.2488 11.6571 26.2488 13.079C26.2488 15.6877 25.5078 17.3519 24.4391 18.4207C23.3671 19.4928 21.9465 19.985 20.5519 20.21Z" fill="black" stroke="white" stroke-width="0.3"/>
<rect x="4.5" y="4.5" width="23" height="23" stroke="black"/>
</svg>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
<!-- Basic Snackbar -->
<div class="snackbar">
    <span class="white">Moved to Trash</span>
    <span class="material-icons snackbar-close"> close </span>
</div>

<!-- Stacked Snackbar -->
<div class="stacked-snackbar">
    <div class="snackbar">
        <span class="white">Moved to Trash</span>
        <span class="material-icons snackbar-close"> close </span>
    </div>
    <div class="snackbar">
        <span class="white">Moved to Trash</span>
        <span class="material-icons snackbar-close"> close </span>
    </div>
</div>
 <audio controls>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
No audio support.
</audio> 
<video width="200" height="150" controls>
<source src="vid.mp4" type="video/mp4">
<source src="vid.ogg" type="video/ogg">
No video support.
</video>
<input type="checkbox" name="animal[]" value="Cat" />
<input type="checkbox" name="animal[]" value="Dog" />
<input type="checkbox" name="animal[]" value="Bear" />

<?php

if ( isset( $_POST['animal'] ) ) {
    foreach ( $_POST['animal'] as $animal ) {
        echo $animal;
    }
}

?>
preventZeroFirst($event)

	preventZeroFirst(e) {
		if (/^0/.test(e.target.value)) {
			e.target.value = e.target.value.replace(/^0/, "")
		}
    },
<fieldset class="contenedorp-div-static"><legend><h3>Ejemplo de Static</h3></legend>
    <div id="cuadro1"><i class="fa-solid fa-face-grin-beam"></i></div>
    <div id="cuadro2"><i class="fa-solid fa-face-grin-beam"></i></div>
    <div id="cuadro3"><i class="fa-solid fa-face-grin-beam"></i></div>
    <div id="cuadro4"> Elemento con position:static</div>
</fieldset>
<h3 style="text-align: center;"><span class="material-icons">room</span><br> <a style="color: #faa098;" href="https://g.page/wastewood?share" target="_blank" rel="noopener"><strong>69 Whites Creek Lane Annandale NSW</strong></a>
<br>(Enter via Alfred Street)</h3>
<h3 style="text-align: center;"><span class="material-icons">email</span><br><a style="color: #faa098;" href="mailto:reuse@wastewood.com.au"><strong>reuse@wastewood.com.au</strong></a>
<br><br><span class="material-icons">call</span><br> <a href="tel:0432 087 678">0432 087 678</a></h3>
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
 var preloader = document.getElementById("loading");
    var body = document.querySelector("body");
    var html = document.querySelector("html");
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function loader() {
        preloader.style.display = "none";
        body.classList.remove("no-scroll-y");
        body.classList.add("no-scroll-x");
        html.classList.add("no-scroll-x");
      }, 1500);
    });
 <div class="modal-container">
     <button id="alert-modal-btn" class="btn primary-btn">
         LOG OUT
     </button>
     <dialog id="alert-modal" class="modal">
         <div class="modal-wrapper">
             <h2 class="modal-header">LOGOUT</h2>
             <span class="modal-text">Are you sure you want to log out?</span>
             <form method="dialog" class="modal-actions">
                 <button class="btn secondary-btn modal-action">
                     NO
                 </button>
                 <button class="btn primary-btn modal-action">YES</button>
             </form>
         </div>
     </dialog>
 </div>
 <div class="grid-3">
     <img class="img-responsive" src="/Assets/Images/img6.svg" alt="grid-img" />
     <img class="img-responsive" src="/Assets/Images/img6.svg" alt="grid-img" />
     <img class="img-responsive" src="/Assets/Images/img6.svg" alt="grid-img" />
 </div>
<div class="grid-2">
    <img class="img-responsive" src="/Assets/Images/img6.svg" alt="grid-img" />
    <h1>Design Beautiful Websites Quickly</h1>
</div>
<p class="center-text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
    libero magni excepturi minima a architecto officiis dolor quisquam
    dolores. Quibusdam!
</p>
<p class="gray-text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
    eligendi, cupiditate accusamus nostrum minima veniam voluptatum dolore
    soluta hic amet!
</p>
<small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quia vel
    voluptatibus cumque eaque earum minus laboriosam? Soluta, accusamus
    deserunt.</small>
<h1>H1-Heading</h1>
<h2>H2-Heading</h2>
<h3>H3-Heading</h3>
<h4>H4-Heading</h4>
<h5>H5-Heading</h5>
<h6>H6-Heading</h6>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="header">
      <div class="menuheader">
          <div class="container">
            <nav class="navbar navbar-default navbar-fixed-top tm_navbar negro" role="navigation">
                <ul class="nav sf-menu">
                  <li class="active"><a href="index.html">Casa</a>
                  </li>
                  <li><a href="index.html">Sobre mi</a></li>
                  <li><a href="index-2.html">Guisos</a></li>
                  <li><a target="_blank" href="#">Postres</a></li>
                </ul>
            </nav>
          </div>
      </div>
</header>
<div id="content">
    <div class="slider">
        <div class="camera_wrap">
          <div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
          <div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
          <div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
        </div>
    </div>
    <div class="row_1">
        <div class="container">
            <p class="title1">Aprendamos a cocinar</p>
            <p class="title2">Sencillamente.</p>
        </div>
    </div>
    <div class="row_2">
        <div class="container">
            <div class="row">
                <ul class="list1">
                    <li class="col-lg-4 col-md-4 col-sm-4 listbox1">
                        <div class="box1">
                            <a href="#">
                                <figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
                                <p>Guisos</p>
                            </a>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-4 listbox2">
                        <div class="box2">
                            <a href="galeri_vallas.html">
                                <p>VAsado</p>
                                <figure><img src="images/vallas_img/vallas9.jpg" height="500 px" alt=""></figure>
                            </a>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-4 listbox3">
                        <div class="box3">
                            <a href="galeri_podas.html">
                                <figure><img src="http://i64.tinypic.com/2qdmuis.jpg"  alt=""></figure>
                                <p>Postres</p>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row_3">
        <div class="container">
            <div class="row">
                <ul class="list3">
                    <li class="col-lg-6 col-md-6 col-sm-6">
                        <div class="box4">
                            <figure><img src="images/forestal_img/fores13.jpg" alt=""></figure>
                            <div class="info1 maxheight">
                                <p class="list3title1">Guiso</p>                                  
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-6 col-md-6 col-sm-6">
                        <div class="box4">
                            <figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
                        </div>
                    </li>
                    <li class="col-lg-6 col-md-6 col-sm-6">
                        <div class="box4">
                            <figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
                    </li>
                    <li class="col-lg-6 col-md-6 col-sm-6">
                        <div class="box4">
                            <figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<div class="reset">
    <table class="blank-wrapper" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td style="font-size: 0px; height: 10px;" height="10"></td>
        </tr>
        <tr>
            <td>
                <table class="template-wrapper" border="0" cellspacing="0" cellpadding="0" width="510" style="width:510px;">
                    <tr>
                        <td>
                            <table cellspacing="0" cellpadding="0" border="0"></table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top: 10px;">
                            <!-- Vertical Line 2020-->
                            <div class="ws-corp core-9">
                                <div class="html">
                                    <table border="0" cellpadding="0" cellspacing="0" style="width: 510px;" width="510">
                                        <tr>
                                            <td valign="top" style="vertical-align: top; padding-right: 12px; border-right: 5px solid #D4D4D4; width: 130.0px;" width="130.0">
                                                <table border="0" cellpadding="0" cellspacing="0" align="center">
                                                    <tr>
                                                        <td width="130.0" style="width: 130.0px;"><img src="https://s3.amazonaws.com/landing.wisestamp.com/18f70058bdd3ec31673a0caf60c930ab/wisestamp-for-teams-generic-logo.png" width="130.0" height="146.0" style="width: 130.0px; height: 146.0px;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" /></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td valign="top" style="vertical-align: top; padding-right: 7px; padding-left: 12px;">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%;">
                                                    <tr>
                                                        <td style="padding-bottom: 12px;">
                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-left: 2px; font-weight: normal; width: 100%;">
                                                                <tr>
                                                                    <td style="font-size: 14px; line-height: 21px; color: #4e4b4c;"><span style="color: #1BA2EB; padding: 0px; margin: 0px; font-size: 16px; font-weight: bold; font-family: Arial;font-size:16px;">Jason Tauriello</span><br /> <span style="font-family: Arial;font-size:14px;;">Founder</span> <span style="font-family: Arial;font-size:14px;;">at </span><span style="font-family: Arial;color:#1BA2EB;font-size:14px;">Gambl</span><br /><br /><span style="color:#1BA2EB; font-weight: bold;font-family: Arial;">P </span><a href="tel:123-456-7890" style="text-decoration: none; color: #4e4b4c;font-family: Arial;" target="_blank">123-456-7890 </a><i style="color: #FFF;"> ­</i><span style="color:#1BA2EB; font-weight: bold;font-family: Arial;">E </span><a href="mailto:jason@gambl.io" style="text-decoration: none; color: #4e4b4c;font-family: Arial;" target="_blank">jason@gambl.io</a><i style="color: #FFF;"> ­</i><span style="color:#1BA2EB; font-weight: bold;font-family: Arial;">W </span><a href="http://www.gambl.io/?utm_source=WiseStamp&utm_medium=email&utm_term=&utm_content=&utm_campaign=signature" style="text-decoration: none; color: #4e4b4c;font-family: Arial;" target="_blank">http://www.gambl.io/</a><i style="color: #FFF;"> ­</i></td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <table cellpadding="0" cellspacing="0" border="0">
                                                                <tr></tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-top:6px;"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td style='padding-top: 8px; padding-right: 8px;'>
                                        <div class="wisestamp_app youtube_status" style="max-width: 510px; font-size: 12px; color: #020202; text-align:  left ;">
                                            <table style="display: inline-table; font-size: 12px; color: #020202;">
                                                <tr>
                                                    <td>
                                                        <table width="100%" style="border: 1px solid #cdcdcd;border-left: 0;border-right: 0;border-collapse: initial;">
                                                            <tr valign="top">
                                                                <td width="25%" style="width:25%;padding: 7px 0 5px 0;"><a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="text-decoration: none;"><img src="https://i.ytimg.com/vi/cUsJMYL_tpA/default.jpg" style="float: left; margin-right: 10px;" /></a></td>
                                                                <td style="font-size: 12px; color: #020202; padding: 7px 7px 5px 0;font-family:  Arial ;font-style: normal; font-variant: normal; font-weight: normal; vertical-align: middle;text-align:  left ; ">
                                                                    <div style="height: 75px;width: 375px;line-height: 15px;"><span style="font-family: inherit;font-weight: bold;"><a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="text-decoration: none; color: #020202"><img src="https://s3.amazonaws.com/images.wisestamp.com/icons/youtube.png" style="font-family:  Arial ;margin: 1px 3px 0;" />Welcome to Gaming 3.0 and GAMBL - The Blockchain YOU Can Bet On!</a><br /><span style="width: 375px; overflow: hidden; display: inline-block;margin-top: 2px; font-family:  Arial ;font-weight:normal">GAMBL is a blockchain gaming platform that utilizes innovative technology to create new opportunities in the gaming industry.
                                                                                 
                                                                            </span></span></div>
                                                                    <div style="font-family:  Arial ">by <a href="https://www.youtube.com/channel/UCU9qSWFauxB5RVaVAZ3DFBQ" style="margin-top: 5px;color:rgb(17, 75, 187);text-decoration:none;vertical-align: bottom;font-family:  Arial " target="_blank">GAMBL</a> | <a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="font-family:  Arial ;margin-left: 3px;text-decoration: none; color: #888888;font-family:  Arial ">2022-03-22</a> | <a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="text-decoration: none; color: #888888"><b style="color: #343434;font-family:  Arial ">29</b></a></div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div
<div class="reset"><table class="blank-wrapper" border="0" cellspacing="0" cellpadding="0" ><tr><td style="font-size: 0px; height: 10px;" height="10"></td></tr><tr><td><table class="template-wrapper" border="0" cellspacing="0" cellpadding="0" width="510" style="width:510px;"><tr><td><table cellspacing="0" cellpadding="0" border="0"></table></td></tr><tr><td style="padding-top: 10px;"><!-- Vertical Line 2020--><div class="ws-corp core-9"><div class="html"><table border="0" cellpadding="0" cellspacing="0" style="width: 510px;" width="510"><tr><td valign="top" style="vertical-align: top; padding-right: 12px; border-right: 5px solid #D4D4D4; width: 130.0px;" width="130.0"><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td width="130.0" style="width: 130.0px;"><img src="https://s3.amazonaws.com/landing.wisestamp.com/18f70058bdd3ec31673a0caf60c930ab/wisestamp-for-teams-generic-logo.png" width="130.0" height="146.0" style="width: 130.0px; height: 146.0px;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" /></td></tr></table></td><td valign="top" style="vertical-align: top; padding-right: 7px; padding-left: 12px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%;"><tr><td style="padding-bottom: 12px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-left: 2px; font-weight: normal; width: 100%;"><tr><td style="font-size: 14px; line-height: 21px; color: #4e4b4c;"><span style="color: #1BA2EB; padding: 0px; margin: 0px; font-size: 16px; font-weight: bold; font-family: Arial;font-size:16px;">Jason Tauriello</span><br /> <span style="font-family: Arial;font-size:14px;;">Founder</span> <span style="font-family: Arial;font-size:14px;;">at&nbsp;</span><span style="font-family: Arial;color:#1BA2EB;font-size:14px;">Gambl</span><br /><br /><span style="color:#1BA2EB; font-weight: bold;font-family: Arial;">P&nbsp;</span><a href="tel:123-456-7890" style="text-decoration: none; color: #4e4b4c;font-family: Arial;" target="_blank">123-456-7890&nbsp;</a><i style="color: #FFF;">&#8197;&shy;</i><span style="color:#1BA2EB; font-weight: bold;font-family: Arial;">E&nbsp;</span><a href="mailto:jason@gambl.io" style="text-decoration: none; color: #4e4b4c;font-family: Arial;" target="_blank">jason@gambl.io</a><i style="color: #FFF;">&#8197;&shy;</i><span style="color:#1BA2EB; font-weight: bold;font-family: Arial;">W&nbsp;</span><a href="http://www.gambl.io/?utm_source=WiseStamp&amp;utm_medium=email&amp;utm_term=&amp;utm_content=&amp;utm_campaign=signature" style="text-decoration: none; color: #4e4b4c;font-family: Arial;" target="_blank">http://www.gambl.io/</a><i style="color: #FFF;">&#8197;&shy;</i></td></tr></table></td></tr><tr><td> <table cellpadding="0" cellspacing="0" border="0"><tr></tr></table> </td></tr><tr><td style="padding-top:6px;"> </td></tr></table></td></tr></table></div></div></td></tr><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td style='padding-top: 8px; padding-right: 8px;'><div class="wisestamp_app youtube_status" style="max-width: 510px; font-size: 12px; color: #020202; text-align:  left ;"><table style="display: inline-table; font-size: 12px; color: #020202;"><tr><td><table width="100%" style="border: 1px solid #cdcdcd;border-left: 0;border-right: 0;border-collapse: initial;"><tr valign="top"><td width="25%" style="width:25%;padding: 7px 0 5px 0;"><a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="text-decoration: none;"><img src="https://i.ytimg.com/vi/cUsJMYL_tpA/default.jpg" style="float: left; margin-right: 10px;"/></a></td><td style="font-size: 12px; color: #020202; padding: 7px 7px 5px 0;font-family:  Arial ;font-style: normal; font-variant: normal; font-weight: normal; vertical-align: middle;text-align:  left ; "><div style="height: 75px;width: 375px;line-height: 15px;"><span style="font-family: inherit;font-weight: bold;"><a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="text-decoration: none; color: #020202"><img src="https://s3.amazonaws.com/images.wisestamp.com/icons/youtube.png" style="font-family:  Arial ;margin: 1px 3px 0;"/>Welcome to Gaming 3.0 and GAMBL - The Blockchain YOU Can Bet On!</a><br/><span style="width: 375px; overflow: hidden; display: inline-block;margin-top: 2px; font-family:  Arial ;font-weight:normal">GAMBL is a blockchain gaming platform that utilizes innovative technology to create new opportunities in the gaming industry.

</span></span></div><div style="font-family:  Arial ">by <a href="https://www.youtube.com/channel/UCU9qSWFauxB5RVaVAZ3DFBQ" style="margin-top: 5px;color:rgb(17, 75, 187);text-decoration:none;vertical-align: bottom;font-family:  Arial " target="_blank">GAMBL</a>&nbsp;|&nbsp;<a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="font-family:  Arial ;margin-left: 3px;text-decoration: none; color: #888888;font-family:  Arial ">2022-03-22</a>&nbsp;|&nbsp;<a href="https://youtu.be/cUsJMYL_tpA" target="_blank" style="text-decoration: none; color: #888888"><b style="color: #343434;font-family:  Arial ">29</b></a></div></td></tr></table></td></tr></table></div></td></tr></table></td></tr></table></td></tr></table></div>
<h1>Hello, world!</h1>
/*CSS*/
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}

.youtube img {
	width: 100%;
}

.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
/*CSS*/

/*JS*/
(function() {

	var youtube = document.querySelectorAll(".youtube");

	for (var i = 0; i < youtube.length; i++) {

		var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";

		var image = new Image();
		image.src = source;
		image.addEventListener("load", function() {
			youtube[i].appendChild(image);
		}(i));

		youtube[i].addEventListener("click", function() {

			var iframe = document.createElement("iframe");

			iframe.setAttribute("frameborder", "0");
			iframe.setAttribute("allowfullscreen", "");
			iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=0");

			this.innerHTML = "";
			this.appendChild(iframe);
		});
	};

})();
/*JS*/

/*HTML*/
<div data-embed="YOUTUBE_VIDEO_ID" class="video-modal youtube">
  <div class="play-button"></div>
</div>
/*HTML*/
/*JS*/
/*connect luxy.js with CDN*/
<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

/*script to make luxy.js work properly*/
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
	luxy.init({
		wrapper: '#luxy',
		wrapperSpeed: 0.085,

	});
}
/*JS*/

/*HTML*/
<div id="luxy" class="scroll-container">
	... //your content goes here
</div>
/*HTML*/

/*CSS*/
.scroll-container {
  position: fixed;
}
/*CSS*/
{exp:low_options:channel_field_short_name}
  {if option:group != ''}<optgroup label="{option:group}">{/if}
  {options}<option value="{option:value}">{option:label}</option>{/options}
  {if option:group != ''}</optgroup>{/if}
{/exp:low_options:channel_field_short_name}
$(window).trigger('broadcast.greatAddon', { maxVolume: 11 });
$(window).on('broadcast.greatAddon', function(msg) {
  console.log(msg.maxVolume);
});
$('form').on('interact', function() {
    // I see typing!
});
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
  document.documentElement.className += " fonts-loaded";
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>

    <title>

        CSS

    </title>

    <style>
        p::first-letter {
        
          font-size: 130%;
        
        }
        
    </style>

</head>

<body>

    <p>

        First letter

    </p>

</body>

</html>
import React, { useCallback, useEffect, useRef, useState } from 'react';

import useEventListener from './useEventListener';

interface UseFadeAudioProps {
  audioRef: React.RefObject<HTMLAudioElement>;
  cloneAudioRef: React.RefObject<HTMLAudioElement>;
  startFade: boolean;
  paused: boolean;
}

const TIMING = 10;

const useFadeAudio = ({ audioRef, cloneAudioRef, startFade, paused }: UseFadeAudioProps) => {
  const [isStartFadeClone, setIsStartFadeClone] = useState<boolean>(false);

  const currentTimeRef = useRef<number>(0);
  const cloneCurrentTimeRef = useRef<number>(0);
  const timerIdRef = useRef<number>(0);
  const cloneTimerIdRef = useRef<number>(0);

  const canStartAudio1Ref = useRef<boolean>(true);
  const canStartAudio2Ref = useRef<boolean>(true);

  const fadeAudio = useCallback(
    (
      audio: HTMLAudioElement,
      nextAudio: HTMLAudioElement,
      isCloneAudio: boolean,
      canStartCurrentAudioRef: React.MutableRefObject<boolean>,
      canStartNextAudioRef: React.MutableRefObject<boolean>,
    ) => {
      const { duration } = audio;
      const startPoint = 50;
      const startRange = (duration * startPoint) / 100; // ex: duration = 10s, startPoint = 50% => startRange = 5s
      const fadeStart = (startRange * 1000) / TIMING;

      const timerId = window.setInterval(() => {
        const currentTime = !isCloneAudio ? currentTimeRef.current : cloneCurrentTimeRef.current;

        // Start fade in for next audio
        if (duration - currentTime <= startRange && canStartCurrentAudioRef.current) {
          nextAudio.volume = 0;
          nextAudio.play();
          cloneCurrentTimeRef.current = 0;
          canStartCurrentAudioRef.current = !canStartCurrentAudioRef.current; // Prevent
          canStartNextAudioRef.current = true;

          if (!isCloneAudio) setIsStartFadeClone(true);
        }

        // Fade in
        if (audio.volume < 1 && duration - currentTime > startRange) {
          const newVolume = audio.volume + 1 / fadeStart;

          console.log('FADE In');

          if (newVolume >= 1) audio.volume = 1;
          else audio.volume = newVolume;

          return;
        }

        // Fade out
        if (audio.volume > 0 && duration - currentTime <= startRange) {
          const newVolume = audio.volume - 1 / fadeStart;

          if (newVolume <= 0) audio.volume = 0;
          else audio.volume = newVolume;
        }

        console.log('PAUSED', timerId);
      }, TIMING);

      return timerId;
    },
    [],
  );

  useEffect(() => {
    if (paused) {
      clearInterval(timerIdRef.current);
      clearInterval(cloneTimerIdRef.current);
    }
  }, [paused]);

  useEffect(() => {
    const audio = audioRef.current;
    const nextAudio = cloneAudioRef.current;

    if (!audio || !nextAudio || !startFade) return;

    timerIdRef.current = fadeAudio(audio, nextAudio, false, canStartAudio2Ref, canStartAudio1Ref);

    return () => clearInterval(timerIdRef.current);
  }, [audioRef, cloneAudioRef, startFade, paused, fadeAudio]);

  useEffect(() => {
    const audio = cloneAudioRef.current;
    const nextAudio = audioRef.current;

    if (!audio || !nextAudio || !isStartFadeClone) return;

    cloneTimerIdRef.current = fadeAudio(
      audio,
      nextAudio,
      true,
      canStartAudio1Ref,
      canStartAudio2Ref,
    );

    return () => clearInterval(cloneTimerIdRef.current);
  }, [audioRef, cloneAudioRef, paused, isStartFadeClone, fadeAudio]);

  useEventListener(
    'timeupdate',
    () => {
      currentTimeRef.current = audioRef.current?.currentTime ?? 0;
    },
    audioRef,
  );

  useEventListener(
    'timeupdate',
    () => {
      cloneCurrentTimeRef.current = cloneAudioRef.current?.currentTime ?? 0;
    },
    cloneAudioRef,
  );
};

export default useFadeAudio;
--Al escribir palabras en un parrafo o "div" las letras se ordenan una tras otra horizontalmente
  y habra un espacio si lo pides(pero no habra 2 espacios); y si saltas, no se mostrara en el         navegador porque lo completa horizontalmete con un espacio(entendiendo como si hisieras espace)
  -span dentro de "div o parrafo": se comporta completamente igula que las letras
  -ojo si el "div" tiene "display: flex;" ya no sera identica que una palabra

-- span>span(span.s dentro de span) si saltas lo juntara dandole espacio; y si juntas 2 span
  (horizontalmente y sin espacio) dentro de un span los mantendra juntos sin espacio.
   -OJO: es igual, como si estubiera dentro de un "div" o "p"

--------- NOTA: Es muy importante conocer el comportamiento de los elementos anidados
                y los espacios que el navegador da por defecto -------------
<form action="https://formspree.io/your@email.com" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name" />
  <label for="mail">E-mail:</label>
  <input type="email" id="mail" name="user_mail" />
  <label for="msg">Message:</label>
  <textarea id="msg" name="user_message"></textarea>
  <button type="submit">Send your message</button>
</form>
audio_meta["duration"].astype(np.int8).value_counts().rename_axis('duration').reset_index(name='counts')
	

		
locaweb

		

			


				

					Usuário
					

				


				

					Senha
					

				


				Esqueci minha senha

				

				

Não possui um usuário na Locaweb?
					Cadastre-se agora
				



			

		

	



<link rel="manifest" href="/manifest.json">
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

*{
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
  	font-family: "Open Sans", sans-serif;
    height: 100vh;
    overflow: hidden;
    margin:0;
}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="style.css">
         
        <script src="https://kit.fontawesome.com/507b8a18c4.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <script src=""></script>
    </body>
</html>
// Build a results array by comparing ** uses lodash
{{ results array }} = _.filter({{ orig array }}, item => {
  return _.isEqual({{ item to compare a }}, {{ to compare b }} );
});

// Build an array based on date
var todayDate = new Date();
    todayDate.setDate(new Date().getDate());
    {{ results array}} = _.filter({{ orig array }}, item => {
                        return _.isDate({{ valid date in UTC format }}) && {{ valid date in UTC format }} <= todayDate;
});
var x = setInterval(function() {
  var d = new Date();
  var gmtTime = d.toUTCString();
  var gmtCompare = d.toISOString(gmtTime);

  // var eventDate = new Date('March 01, 2022, 16:44:00 GMT-07:00').toUTCString(); // Mountain Standard Time
  var eventDate = new Date('March 23, 2022, 12:00:00 GMT+05:30').toUTCString(); // India Standard Time
  var compareString = new Date(eventDate).toISOString();
  console.log(gmtCompare, compareString);

  if(gmtCompare >= compareString) {
    alert('event is done');
    clearInterval(x);
  }
}, 1000);
U+2302  ⌂   HOUSE
U+2303  ⌃   UP ARROWHEAD
U+2304  ⌄   DOWN ARROWHEAD
U+2305  ⌅   PROJECTIVE
U+2306  ⌆   PERSPECTIVE
U+2307  ⌇   WAVY LINE
U+2315  ⌕   TELEPHONE RECORDER
U+2316  ⌖   POSITION INDICATOR
U+2317  ⌗   VIEWDATA SQUARE
U+2318  ⌘   PLACE OF INTEREST SIGN
U+231A  ⌚   WATCH
U+231B  ⌛   HOURGLASS
U+2326  ⌦   ERASE TO THE RIGHT
U+2327  ⌧   X IN A RECTANGLE BOX
U+2328  ⌨   KEYBOARD
U+2329  〈   LEFT-POINTING ANGLE BRACKET
U+232A  〉   RIGHT-POINTING ANGLE BRACKET
U+232B  ⌫   ERASE TO THE LEFT
U+23E9  ⏩   BLACK RIGHT-POINTING DOUBLE TRIANGLE
U+23EA  ⏪   BLACK LEFT-POINTING DOUBLE TRIANGLE
U+23EB  ⏫   BLACK UP-POINTING DOUBLE TRIANGLE
U+23EC  ⏬   BLACK DOWN-POINTING DOUBLE TRIANGLE
U+23ED  ⏭   BLACK RIGHT-POINTING DOUBLE TRIANGLE WITH VERTICAL BAR
U+23EE  ⏮   BLACK LEFT-POINTING DOUBLE TRIANGLE WITH VERTICAL BAR
U+23EF  ⏯   BLACK RIGHT-POINTING TRIANGLE WITH DOUBLE VERTICAL BAR
U+23F0  ⏰   ALARM CLOCK
U+23F1  ⏱   STOPWATCH
U+23F2  ⏲   TIMER CLOCK
U+23F3  ⏳   HOURGLASS WITH FLOWING SAND
U+2600  ☀   BLACK SUN WITH RAYS
U+2601  ☁   CLOUD
U+2602  ☂   UMBRELLA
U+2603  ☃   SNOWMAN
U+2604  ☄   COMET
U+2605  ★   BLACK STAR
U+2606  ☆   WHITE STAR
U+2607  ☇   LIGHTNING
U+2608  ☈   THUNDERSTORM
U+2609  ☉   SUN
U+260A  ☊   ASCENDING NODE
U+260B  ☋   DESCENDING NODE
U+260C  ☌   CONJUNCTION
U+260D  ☍   OPPOSITION
U+260E  ☎   BLACK TELEPHONE
U+260F  ☏   WHITE TELEPHONE
U+2610  ☐   BALLOT BOX
U+2611  ☑   BALLOT BOX WITH CHECK
U+2612  ☒   BALLOT BOX WITH X
U+2613  ☓   SALTIRE
U+2614  ☔   UMBRELLA WITH RAINDROPS
U+2615  ☕   HOT BEVERAGE
U+2616  ☖   WHITE SHOGI PIECE
U+2617  ☗   BLACK SHOGI PIECE
U+2618  ☘   SHAMROCK
U+2619  ☙   REVERSED ROTATED FLORAL HEART BULLET
U+261A  ☚   BLACK LEFT-POINTING INDEX
U+261B  ☛   BLACK RIGHT-POINTING INDEX
U+261C  ☜   WHITE LEFT POINTING INDEX
U+261D  ☝   WHITE UP POINTING INDEX
U+261E  ☞   WHITE RIGHT POINTING INDEX
U+261F  ☟   WHITE DOWN POINTING INDEX
U+2620  ☠   SKULL AND CROSSBONES
U+2621  ☡   CAUTION SIGN
U+2622  ☢   RADIOACTIVE SIGN
U+2623  ☣   BIOHAZARD SIGN
U+262A  ☪   STAR AND CRESCENT
U+262B  ☫   FARSI SYMBOL
U+262C  ☬   ADI SHAKTI
U+262D  ☭   HAMMER AND SICKLE
U+262E  ☮   PEACE SYMBOL
U+262F  ☯   YIN YANG
U+2638  ☸   WHEEL OF DHARMA
U+2639  ☹   WHITE FROWNING FACE
U+263A  ☺   WHITE SMILING FACE
U+263B  ☻   BLACK SMILING FACE
U+263C  ☼   WHITE SUN WITH RAYS
U+263D  ☽   FIRST QUARTER MOON
U+263E  ☾   LAST QUARTER MOON
U+263F  ☿   MERCURY
U+2640  ♀   FEMALE SIGN
U+2641  ♁   EARTH
U+2642  ♂   MALE SIGN
U+2643  ♃   JUPITER
U+2644  ♄   SATURN
U+2645  ♅   URANUS
U+2646  ♆   NEPTUNE
U+2647  ♇   PLUTO
U+2648  ♈   ARIES
U+2649  ♉   TAURUS
U+264A  ♊   GEMINI
U+264B  ♋   CANCER
U+264C  ♌   LEO
U+264D  ♍   VIRGO
U+264E  ♎   LIBRA
U+264F  ♏   SCORPIUS
U+2650  ♐   SAGITTARIUS
U+2651  ♑   CAPRICORN
U+2652  ♒   AQUARIUS
U+2653  ♓   PISCES
U+2654  ♔   WHITE CHESS KING
U+2655  ♕   WHITE CHESS QUEEN
U+2656  ♖   WHITE CHESS ROOK
U+2657  ♗   WHITE CHESS BISHOP
U+2658  ♘   WHITE CHESS KNIGHT
U+2659  ♙   WHITE CHESS PAWN
U+265A  ♚   BLACK CHESS KING
U+265B  ♛   BLACK CHESS QUEEN
U+265C  ♜   BLACK CHESS ROOK
U+265D  ♝   BLACK CHESS BISHOP
U+265E  ♞   BLACK CHESS KNIGHT
U+265F  ♟   BLACK CHESS PAWN
U+2660  ♠   BLACK SPADE SUIT
U+2661  ♡   WHITE HEART SUIT
U+2662  ♢   WHITE DIAMOND SUIT
U+2663  ♣   BLACK CLUB SUITE
U+2664  ♤   WHITE SPADE SUIT
U+2665  ♥   BLACK HEART SUIT
U+2666  ♦   BLACK DIAMOND SUIT
U+2667  ♧   WHITE CLUB SUITE
U+2668  ♨   HOT SPRINGS
U+2669  ♩   QUARTER NOTE
U+266A  ♪   EIGHTH NOTE
U+266B  ♫   BEAMED EIGHTH NOTES
U+266C  ♬   BEAMED SIXTEENTH NOTES
U+266D  ♭   MUSIC FLAT SIGN
U+266E  ♮   MUSIC NATURAL SIGN
U+266F  ♯   MUSIC SHARP SIGN
U+267A  ♺   RECYCLING SYMBOL FOR GENERIC MATERIALS
U+267B  ♻   BLACK UNIVERSAL RECYCLING SYMBOL
U+267C  ♼   RECYCLED PAPER SYMBOL
U+267D  ♽   PARTIALLY-RECYCLED PAPER SYMBOL
U+267E  ♾   PERMANENT PAPER SIGN
U+267F  ♿   WHEELCHAIR SYMBOL
U+2680  ⚀   DIE FACE-1
U+2681  ⚁   DIE FACE-2
U+2682  ⚂   DIE FACE-3
U+2683  ⚃   DIE FACE-4
U+2684  ⚄   DIE FACE-5
U+2685  ⚅   DIE FACE-6
U+2686  ⚆   WHITE CIRCLE WITH DOT RIGHT
U+2687  ⚇   WHITE CIRCLE WITH TWO DOTS
U+2688  ⚈   BLACK CIRCLE WITH WHITE DOT RIGHT
U+2689  ⚉   BLACK CIRCLE WITH TWO WHITE DOTS
U+268A  ⚊   MONOGRAM FOR YANG
U+268B  ⚋   MONOGRAM FOR YIN
U+268C  ⚌   DIGRAM FOR GREATER YANG
U+268D  ⚍   DIGRAM FOR LESSER YIN
U+268E  ⚎   DIGRAM FOR LESSER YANG
U+268F  ⚏   DIGRAM FOR GREATER YIN
U+2690  ⚐   WHITE FLAG
U+2691  ⚑   BLACK FLAG
U+2692  ⚒   HAMMER AND PICK
U+2693  ⚓   ANCHOR
U+2694  ⚔   CROSSED SWORDS
U+2695  ⚕   STAFF OF AESCULAPIUS
U+2696  ⚖   SCALES
U+2697  ⚗   ALEMBIC
U+2698  ⚘   FLOWER
U+2699  ⚙   GEAR
U+269A  ⚚   STAFF OF HERMES
U+269B  ⚛   ATOM SYMBOL
U+269C  ⚜   FLEUR-DE-LIS
U+269D  ⚝   OUTLINED WHITE STAR
U+269E  ⚞   THREE LINES CONVERGING RIGHT
U+269F  ⚟   THREE LINES CONVERGING LEFT
U+26A0  ⚠   WARNING SIGN
U+26A1  ⚡   HIGH VOLTAGE SIGN
U+26A2  ⚢   DOUBLED FEMALE SIGN
U+26A3  ⚣   DOUBLED MALE SIGN
U+26A4  ⚤   INTERLOCKED FEMALE AND MALE SIGN
U+26A5  ⚥   MALE AND FEMALE SIGN
U+26A6  ⚦   MALE WITH STROKE SIGN
U+26A7  ⚧   MALE WITH STROKE AND MALE AND FEMALE SIGN
U+26A8  ⚨   VERTICAL MALE WITH STROKE SIGN
U+26A9  ⚩   HORIZONTAL MALE WITH STROKE SIGN
U+26AA  ⚪   MEDIUM WHITE CIRCLE
U+26AB  ⚫   MEDIUM BLACK CIRCLE
U+26BD  ⚽   SOCCER BALL
U+26BE  ⚾   BASEBALL
U+26BF  ⚿   SQUARED KEY
U+26C0  ⛀   WHITE DRAUGHTSMAN
U+26C1  ⛁   WHITE DRAUGHTS KING
U+26C2  ⛂   BLACK DRAUGHTSMAN
U+26C3  ⛃   BLACK DRAUGHTS KING
U+26C4  ⛄   SNOWMAN WITHOUT SNOW
U+26C5  ⛅   SUN BEHIND CLOUD
U+26C6  ⛆   RAIN
U+26C7  ⛇   BLACK SNOWMAN
U+26C8  ⛈   THUNDER CLOUD AND RAIN
U+26C9  ⛉   TURNED WHITE SHOGI PIECE
U+26CA  ⛊   TURNED BLACK SHOGI PIECE
U+26CB  ⛋   WHITE DIAMOND IN SQUARE
U+26CC  ⛌   CROSSING LANES
U+26CD  ⛍   DISABLED CAR
U+26CE  ⛎   OPHIUCHUS
U+26CF  ⛏   PICK
U+26D0  ⛐   CAR SLIDING
U+26D1  ⛑   HELMET WITH WHITE CROSS
U+26D2  ⛒   CIRCLED CROSSING LANES
U+26D3  ⛓   CHAINS
U+26D4  ⛔   NO ENTRY
U+26D5  ⛕   ALTERNATE ONE-WAY LEFT WAY TRAFFIC
U+26D6  ⛖   BLACK TWO-WAY LEFT WAY TRAFFIC
U+26D7  ⛗   WHITE TWO-WAY LEFT WAY TRAFFIC
U+26D8  ⛘   BLACK LEFT LANE MERGE
U+26D9  ⛙   WHITE LEFT LANE MERGE
U+26DA  ⛚   DRIVE SLOW SIGN
U+26DB  ⛛   HEAVY WHITE DOWN-POINTING TRIANGLE
U+26DC  ⛜   LEFT CLOSED ENTRY
U+26DD  ⛝   SQUARED SALTIRE
U+26DE  ⛞   FALLING DIAGONAL IN WHITE CIRCLE IN BLACK SQUARE
U+26DF  ⛟   BLACK TRUCK
U+26E0  ⛠   RESTRICTED LEFT ENTRY-1
U+26E1  ⛡   RESTRICTED LEFT ENTRY-2
U+26E2  ⛢   ASTRONOMICAL SYMBOL FOR URANUS
U+26E3  ⛣   HEAVY CIRCLE WITH STROKE AND TWO DOTS ABOVE
U+26E4  ⛤   PENTAGRAM
U+26E5  ⛥   RIGHT-HANDED INTERLACED PENTAGRAM
U+26E6  ⛦   LEFT-HANDED INTERLACED PENTAGRAM
U+26E7  ⛧   INVERTED PENTAGRAM
U+26E8  ⛨   BLACK CROSS ON SHIELD
U+26E9  ⛩   SHINTO SHRINE
U+26EA  ⛪   CHURCH
U+26EB  ⛫   CASTLE
U+26EC  ⛬   HISTORIC SITE
U+26ED  ⛭   GEAR WITHOUT HUB
U+26EE  ⛮   GEAR WITH HANDLES
U+26EF  ⛯   MAP SYMBOL FOR LIGHTHOUSE
U+26F0  ⛰   MOUNTAIN
U+26F1  ⛱   UMBRELLA ON GROUND
U+26F2  ⛲   FOUNTAIN
U+26F3  ⛳   FLAG IN HOLE
U+26F4  ⛴   FERRY
U+26F5  ⛵   SAILBOAT
U+26F6  ⛶   SQUARE FOUR CORNERS
U+26F7  ⛷   SKIER
U+26F8  ⛸   ICE SKATE
U+26F9  ⛹   PERSON WITH BALL
U+26FA  ⛺   TENT
U+26FD  ⛽   FUEL PUMP
U+26FE  ⛾   CUP ON BLACK SQUARE
U+26FF  ⛿   WHITE FLAG WITH HORIZONTAL MIDDLE BLACK STRIPE
U+2701  ✁   UPPER BLADE SCISSORS
U+2702  ✂   BLACK SCISSORS
U+2703  ✃   LOWER BLADE SCISSORS
U+2704  ✄   WHITE SCISSORS
U+2705  ✅   WHITE HEAVY CHECK MARK
U+2706  ✆   TELEPHONE LOCATION SIGN
U+2707  ✇   TAPE DRIVE
U+2708  ✈   AIRPLANE
U+2709  ✉   ENVELOPE
U+270A  ✊   RAISED FIST
U+270B  ✋   RAISED HAND
U+270C  ✌   VICTORY HAND
U+270D  ✍   WRITING HAND
U+270E  ✎   LOWER RIGHT PENCIL
U+270F  ✏   PENCIL
U+2710  ✐   UPPER RIGHT PENCIL
U+2711  ✑   WHITE NIB
U+2712  ✒   BLACK NIB
U+2713  ✓   CHECK MARK
U+2714  ✔   HEAVY CHECK MARK
U+2715  ✕   MULTIPLICATION X
U+2716  ✖   HEAVY MULTIPLICATION X
U+2717  ✗   BALLOT X
U+2718  ✘   HEAVY BALLOT X
U+2719  ✙   OUTLINED GREEK CROSS
U+271A  ✚   HEAVY GREEK CROSS
U+271B  ✛   OPEN CENTRE CROSS
U+271C  ✜   HEAVY OPEN CENTRE CROSS
U+271D  ✝   LATIN CROSS
U+271E  ✞   SHADOWED WHITE LATIN CROSS
U+271F  ✟   OUTLINED LATIN CROSS
U+2720  ✠   MALTESE CROSS
U+2721  ✡   STAR OF DAVID
U+2722  ✢   FOUR TEARDROP-SPOKED ASTERISK
U+2723  ✣   FOUR BALLOON-SPOKED ASTERISK
U+2724  ✤   HEAVY FOUR BALLOON-SPOKED ASTERISK
U+2725  ✥   FOUR CLUB-SPOKED ASTERISK
U+2726  ✦   BLACK FOUR POINTED STAR
U+2727  ✧   WHITE FOUR POINTED STAR
U+2728  ✨   SPARKLES
U+2729  ✩   STRESS OUTLINED WHITE STAR
U+272A  ✪   CIRCLED WHITE STAR
U+272B  ✫   OPEN CENTRE BLACK STAR
U+272C  ✬   BLACK CENTRE WHITE STAR
U+272D  ✭   OUTLINED BLACK STAR
U+272E  ✮   HEAVY OUTLINED BLACK STAR
U+272F  ✯   PINWHEEL STAR
U+2730  ✰   SHADOWED WHITE STAR
U+2731  ✱   HEAVY ASTERISK
U+2732  ✲   OPEN CENTRE ASTERISK
U+2733  ✳   EIGHT SPOKED ASTERISK
U+2734  ✴   EIGHT POINTED BLACK STAR
U+2735  ✵   EIGHT POINTED PINWHEEL STAR
U+2736  ✶   SIX POINTED BLACK STAR
U+2737  ✷   EIGHT POINTED RECTILINEAR BLACK STAR
U+2738  ✸   HEAVY EIGHT POINTED RECTILINEAR BLACK STAR
U+2739  ✹   TWELVE POINTED BLACK STAR
U+273A  ✺   SIXTEEN POINTED ASTERISK
U+273B  ✻   TEARDROP-SPOKED ASTERISK
U+273C  ✼   OPEN CENTRE TEARDROP-SPOKED ASTERISK
U+273D  ✽   HEAVY TEARDROP-SPOKED ASTERISK
U+273E  ✾   SIX PETALLED BLACK AND WHITE FLORETTE
U+273F  ✿   BLACK FLORETTE
U+2740  ❀   WHITE FLORETTE
U+2741  ❁   EIGHT PETALLED OUTLINED BLACK FLORETTE
U+2742  ❂   CIRCLED OPEN CENTRE EIGHT POINTED STAR
U+2743  ❃   HEAVY TEARDROP-SPOKED PINWHEEL ASTERISK
U+2744  ❄   SNOWFLAKE
U+2745  ❅   TIGHT TRIFOLIATE SNOWFLAKE
U+2746  ❆   HEAVY CHEVRON SNOWFLAKE
U+2747  ❇   SPARKLE
U+2748  ❈   HEAVY SPARKLE
U+2749  ❉   BALLOON-SPOKED ASTERISK
U+274A  ❊   EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
U+274B  ❋   HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
U+274C  ❌   CROSS MARK
U+274D  ❍   SHADOWED WHITE CIRCLE
U+274E  ❎   NEGATIVE SQUARED CROSS MARK
U+2753  ❓   BLACK QUESTION MARK ORNAMENT
U+2754  ❔   WHITE QUESTION MARK ORNAMENT
U+2755  ❕   WHITE EXCLAMATION MARK ORNAMENT
U+2756  ❖   BLACK DIAMOND MINUS WHITE X
U+2757  ❗   HEAVY EXCLAMATION MARK SYMBOL
U+275B  ❛   HEAVY SINGLE TURNED COMMA QUOTATION MARK ORNAMENT
U+275C  ❜   HEAVY SINGLE COMMA QUOTATION MARK ORNAMENT
U+275D  ❝   HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT
U+275E  ❞   HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT
U+275F  ❟   HEAVY LOW SINGLE COMMA QUOTATION MARK ORNAMENT
U+2760  ❠   HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT
U+2761  ❡   CURVED STEM PARAGRAPH SIGN ORNAMENT
U+2762  ❢   HEAVY EXCLAMATION MARK ORNAMENT
U+2763  ❣   HEAVY HEART EXCLAMATION MARK ORNAMENT
U+2764  ❤   HEAVY BLACK HEART
U+2765  ❥   ROTATED HEAVY BLACK HEART BULLET
U+2766  ❦   FLORAL HEART
U+2767  ❧   ROTATED FLORAL HEART BULLET
U+276C  ❬   MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT
U+276D  ❭   MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT
U+276E  ❮   HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT
U+276F  ❯   HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT
U+2770  ❰   HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT
U+2771  ❱   HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT
U+2794  ➔   HEAVY WIDE-HEADED RIGHTWARDS ARROW
U+2795  ➕   HEAVY PLUS SIGN
U+2796  ➖   HEAVY MINUS SIGN
U+2797  ➗   HEAVY DIVISION SIGN
U+2798  ➘   HEAVY SOUTH EAST ARROW
U+2799  ➙   HEAVY RIGHTWARDS ARROW
U+279A  ➚   HEAVY NORTH EAST ARROW
U+279B  ➛   DRAFTING POINT RIGHTWARDS ARROW
U+279C  ➜   HEAVY ROUND-TIPPED RIGHTWARDS ARROW
U+279D  ➝   TRIANGLE-HEADED RIGHTWARDS ARROW
U+279E  ➞   HEAVY TRIANGLE-HEADED RIGHTWARDS ARROW
U+279F  ➟   DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
U+27A0  ➠   HEAVY DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
U+27A1  ➡   BLACK RIGHTWARDS ARROW
U+27A2  ➢   THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD
U+27A3  ➣   THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD
U+27A4  ➤   BLACK RIGHTWARDS ARROWHEAD
U+27A5  ➥   HEAVY BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW
U+27A6  ➦   HEAVY BLACK CURVED UPWARDS AND RIGHTWARDS ARROW
U+27A7  ➧   SQUAT BLACK RIGHTWARDS ARROW
U+27A8  ➨   HEAVY CONCAVE-POINTED BLACK RIGHTWARDS ARROW
U+27A9  ➩   RIGHT-SHADED WHITE RIGHTWARDS ARROW
U+27AA  ➪   LEFT-SHADED WHITE RIGHTWARDS ARROW
U+27AB  ➫   BACK-TILTED SHADOWED WHITE RIGHTWARDS ARROW
U+27AC  ➬   FRONT-TILTED SHADOWED WHITE RIGHTWARDS ARROW
U+27AD  ➭   HEAVY LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27AE  ➮   HEAVY UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27AF  ➯   NOTCHED LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27B0  ➰   CURLY LOOP
U+27B1  ➱   NOTCHED UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
U+27B2  ➲   CIRCLED HEAVY WHITE RIGHTWARDS ARROW
U+27B3  ➳   WHITE-FEATHERED RIGHTWARDS ARROW
U+27B4  ➴   BLACK-FEATHERED SOUTH EAST ARROW
U+27B5  ➵   BLACK-FEATHERED RIGHTWARDS ARROW
U+27B6  ➶   BLACK-FEATHERED NORTH EAST ARROW
U+27B7  ➷   HEAVY BLACK-FEATHERED SOUTH EAST ARROW
U+27B8  ➸   HEAVY BLACK-FEATHERED RIGHTWARDS ARROW
U+27B9  ➹   HEAVY BLACK-FEATHERED NORTH EAST ARROW
U+27BA  ➺   TEARDROP-BARBED RIGHTWARDS ARROW
U+27BB  ➻   HEAVY TEARDROP-SHANKED RIGHTWARDS ARROW
U+27BC  ➼   WEDGE-TAILED RIGHTWARDS ARROW
U+27BD  ➽   HEAVY WEDGE-TAILED RIGHTWARDS ARROW
U+27BE  ➾   OPEN-OUTLINED RIGHTWARDS ARROW
U+27C0  ⟀   THREE DIMENSIONAL ANGLE
U+27E8  ⟨   MATHEMATICAL LEFT ANGLE BRACKET
U+27E9  ⟩   MATHEMATICAL RIGHT ANGLE BRACKET
U+27EA  ⟪   MATHEMATICAL LEFT DOUBLE ANGLE BRACKET
U+27EB  ⟫   MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET
U+27F0  ⟰   UPWARDS QUADRUPLE ARROW
U+27F1  ⟱   DOWNWARDS QUADRUPLE ARROW
U+27F2  ⟲   ANTICLOCKWISE GAPPED CIRCLE ARROW
U+27F3  ⟳   CLOCKWISE GAPPED CIRCLE ARROW
U+27F4  ⟴   RIGHT ARROW WITH CIRCLED PLUS
U+27F5  ⟵   LONG LEFTWARDS ARROW
U+27F6  ⟶   LONG RIGHTWARDS ARROW
U+27F7  ⟷   LONG LEFT RIGHT ARROW
U+27F8  ⟸   LONG LEFTWARDS DOUBLE ARROW
U+27F9  ⟹   LONG RIGHTWARDS DOUBLE ARROW
U+27FA  ⟺   LONG LEFT RIGHT DOUBLE ARROW
U+27FB  ⟻   LONG LEFTWARDS ARROW FROM BAR
U+27FC  ⟼   LONG RIGHTWARDS ARROW FROM BAR
U+27FD  ⟽   LONG LEFTWARDS DOUBLE ARROW FROM BAR
U+27FE  ⟾   LONG RIGHTWARDS DOUBLE ARROW FROM BAR
U+27FF  ⟿   LONG RIGHTWARDS SQUIGGLE ARROW
U+2900  ⤀   RIGHTWARDS TWO-HEADED ARROW WITH VERTICAL STROKE
U+2901  ⤁   RIGHTWARDS TWO-HEADED ARROW WITH DOUBLE VERTICAL STROKE
U+2902  ⤂   LEFTWARDS DOUBLE ARROW WITH VERTICAL STROKE
U+2903  ⤃   RIGHTWARDS DOUBLE ARROW WITH VERTICAL STROKE
U+2904  ⤄   LEFT RIGHT DOUBLE ARROW WITH VERTICAL STROKE
U+2905  ⤅   RIGHTWARDS TWO-HEADED ARROW FROM BAR
U+2906  ⤆   LEFTWARDS DOUBLE ARROW FROM BAR
U+2907  ⤇   RIGHTWARDS DOUBLE ARROW FROM BAR
U+2908  ⤈   DOWNWARDS ARROW WITH HORIZONTAL STROKE
U+2909  ⤉   UPWARDS ARROW WITH HORIZONTAL STROKE
U+290A  ⤊   UPWARDS TRIPLE ARROW
U+290B  ⤋   DOWNWARDS TRIPLE ARROW
U+290C  ⤌   LEFTWARDS DOUBLE DASH ARROW
U+290D  ⤍   RIGHTWARDS DOUBLE DASH ARROW
U+290E  ⤎   LEFTWARDS TRIPLE DASH ARROW
U+290F  ⤏   RIGHTWARDS TRIPLE DASH ARROW
U+2910  ⤐   RIGHTWARDS TWO-HEADED TRIPLE DASH ARROW
U+2911  ⤑   RIGHTWARDS ARROW WITH DOTTED STEM
U+2912  ⤒   UPWARDS ARROW TO BAR
U+2913  ⤓   DOWNWARDS ARROW TO BAR
U+2914  ⤔   RIGHTWARDS ARROW WITH TAIL WITH VERTICAL STROKE
U+2915  ⤕   RIGHTWARDS ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2916  ⤖   RIGHTWARDS TWO-HEADED ARROW WITH TAIL
U+2917  ⤗   RIGHTWARDS TWO-HEADED ARROW WITH TAIL WITH VERTICAL STROKE
U+2918  ⤘   RIGHTWARDS TWO-HEADED ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2919  ⤙   LEFTWARDS ARROW-TAIL
U+291A  ⤚   RIGHTWARDS ARROW-TAIL
U+291B  ⤛   LEFTWARDS DOUBLE ARROW-TAIL
U+291C  ⤜   RIGHTWARDS DOUBLE ARROW-TAIL
U+291D  ⤝   LEFTWARDS ARROW TO BLACK DIAMOND
U+291E  ⤞   RIGHTWARDS ARROW TO BLACK DIAMOND
U+291F  ⤟   LEFTWARDS ARROW FROM BAR TO BLACK DIAMOND
U+2920  ⤠   RIGHTWARDS ARROW FROM BAR TO BLACK DIAMOND
U+2921  ⤡   NORTHWEST AND SOUTH EAST ARROW
U+2922  ⤢   NORTHEAST AND SOUTH WEST ARROW
U+2923  ⤣   NORTH WEST ARROW WITH HOOK
U+2924  ⤤   NORTH EAST ARROW WITH HOOK
U+2925  ⤥   SOUTH EAST ARROW WITH HOOK
U+2926  ⤦   SOUTH WEST ARROW WITH HOOK
U+2927  ⤧   NORTH WEST ARROW AND NORTH EAST ARROW
U+2928  ⤨   NORTH EAST ARROW AND SOUTH EAST ARROW
U+2929  ⤩   SOUTH EAST ARROW AND SOUTH WEST ARROW
U+292A  ⤪   SOUTH WEST ARROW AND NORTH WEST ARROW
U+292B  ⤫   RISING DIAGONAL CROSSING FALLING DIAGONAL
U+292C  ⤬   FALLING DIAGONAL CROSSING RISING DIAGONAL
U+292D  ⤭   SOUTH EAST ARROW CROSSING NORTH EAST ARROW
U+292E  ⤮   NORTH EAST ARROW CROSSING SOUTH EAST ARROW
U+292F  ⤯   FALLING DIAGONAL CROSSING NORTH EAST ARROW
U+2930  ⤰   RISING DIAGONAL CROSSING SOUTH EAST ARROW
U+2931  ⤱   NORTH EAST ARROW CROSSING NORTH WEST ARROW
U+2932  ⤲   NORTH WEST ARROW CROSSING NORTH EAST ARROW
U+2933  ⤳   WAVE ARROW POINTING DIRECTLY RIGHT
U+2934  ⤴   ARROW POINTING RIGHTWARDS THEN CURVING UPWARDS
U+2935  ⤵   ARROW POINTING RIGHTWARDS THEN CURVING DOWNWARDS
U+2936  ⤶   ARROW POINTING DOWNWARDS THEN CURVING LEFTWARDS
U+2937  ⤷   ARROW POINTING DOWNWARDS THEN CURVING RIGHTWARDS
U+2938  ⤸   RIGHT-SIDE ARC CLOCKWISE ARROW
U+2939  ⤹   LEFT-SIDE ARC ANTICLOCKWISE ARROW
U+293A  ⤺   TOP ARC ANTICLOCKWISE ARROW
U+293B  ⤻   BOTTOM ARC ANTICLOCKWISE ARROW
U+293C  ⤼   TOP ARC CLOCKWISE ARROW WITH MINUS
U+293D  ⤽   TOP ARC ANTICLOCKWISE ARROW WITH PLUS
U+293E  ⤾   LOWER RIGHT SEMICIRCULAR CLOCKWISE ARROW
U+293F  ⤿   LOWER LEFT SEMICIRCULAR ANTICLOCKWISE ARROW
U+2940  ⥀   ANTICLOCKWISE CLOSED CIRCLE ARROW
U+2941  ⥁   CLOCKWISE CLOSED CIRCLE ARROW
U+2942  ⥂   RIGHTWARDS ARROW ABOVE SHORT LEFTWARDS ARROW
U+2943  ⥃   LEFTWARDS ARROW ABOVE SHORT RIGHTWARDS ARROW
U+2944  ⥄   SHORT RIGHTWARDS ARROW ABOVE LEFTWARDS ARROW
U+2945  ⥅   RIGHTWARDS ARROW WITH PLUS BELOW
U+2946  ⥆   LEFTWARDS ARROW WITH PLUS BELOW
U+2962  ⥢   LEFTWARDS HARPOON WITH BARB UP ABOVE LEFTWARDS HARPOON WITH BARB DOWN
U+2963  ⥣   UPWARDS HARPOON WITH BARB LEFT BESIDE UPWARDS HARPOON WITH BARB RIGHT
U+2964  ⥤   RIGHTWARDS HARPOON WITH BARB UP ABOVE RIGHTWARDS HARPOON WITH BARB DOWN
U+2965  ⥥   DOWNWARDS HARPOON WITH BARB LEFT BESIDE DOWNWARDS HARPOON WITH BARB RIGHT
U+2966  ⥦   LEFTWARDS HARPOON WITH BARB UP ABOVE RIGHTWARDS HARPOON WITH BARB UP
U+2967  ⥧   LEFTWARDS HARPOON WITH BARB DOWN ABOVE RIGHTWARDS HARPOON WITH BARB DOWN
U+2968  ⥨   RIGHTWARDS HARPOON WITH BARB UP ABOVE LEFTWARDS HARPOON WITH BARB UP
U+2969  ⥩   RIGHTWARDS HARPOON WITH BARB DOWN ABOVE LEFTWARDS HARPOON WITH BARB DOWN
U+296A  ⥪   LEFTWARDS HARPOON WITH BARB UP ABOVE LONG DASH
U+296B  ⥫   LEFTWARDS HARPOON WITH BARB DOWN BELOW LONG DASH
U+296C  ⥬   RIGHTWARDS HARPOON WITH BARB UP ABOVE LONG DASH
U+296D  ⥭   RIGHTWARDS HARPOON WITH BARB DOWN BELOW LONG DASH
U+296E  ⥮   UPWARDS HARPOON WITH BARB LEFT BESIDE DOWNWARDS HARPOON WITH BARB RIGHT
U+296F  ⥯   DOWNWARDS HARPOON WITH BARB LEFT BESIDE UPWARDS HARPOON WITH BARB RIGHT
U+2989  ⦉   Z NOTATION LEFT BINDING BRACKET
U+298A  ⦊   Z NOTATION RIGHT BINDING BRACKET
U+2991  ⦑   LEFT ANGLE BRACKET WITH DOT
U+2992  ⦒   RIGHT ANGLE BRACKET WITH DOT
U+2993  ⦓   LEFT ARC LESS-THAN BRACKET
U+2994  ⦔   RIGHT ARC GREATER-THAN BRACKET
U+2995  ⦕   DOUBLE LEFT ARC GREATER-THAN BRACKET
U+2996  ⦖   DOUBLE RIGHT ARC LESS-THAN BRACKET
U+29A8  ⦨   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING UP AND RIGHT
U+29A9  ⦩   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING UP AND LEFT
U+29AA  ⦪   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING DOWN AND RIGHT
U+29AB  ⦫   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING DOWN AND LEFT
U+29AC  ⦬   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING RIGHT AND UP
U+29AD  ⦭   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING LEFT AND UP
U+29AE  ⦮   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING RIGHT AND DOWN
U+29AF  ⦯   MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING LEFT AND DOWN
U+29BE  ⦾   CIRCLED WHITE BULLET
U+29BF  ⦿   CIRCLED BULLET
U+29C9  ⧉   TWO JOINED SQUARES
U+29CE  ⧎   RIGHT TRIANGLE ABOVE LEFT TRIANGLE
U+29CF  ⧏   LEFT TRIANGLE BESIDE VERTICAL BAR
U+29D0  ⧐   VERTICAL BAR BESIDE RIGHT TRIANGLE
U+29D1  ⧑   BOWTIE WITH LEFT HALF BLACK
U+29D2  ⧒   BOWTIE WITH RIGHT HALF BLACK
U+29D3  ⧓   BLACK BOWTIE
U+29D4  ⧔   TIMES WITH LEFT HALF BLACK
U+29D5  ⧕   TIMES WITH RIGHT HALF BLACK
U+29D6  ⧖   WHITE HOURGLASS
U+29D7  ⧗   BLACK HOURGLASS
U+29E8  ⧨   DOWN-POINTING TRIANGLE WITH LEFT HALF BLACK
U+29E9  ⧩   DOWN-POINTING TRIANGLE WITH RIGHT HALF BLACK
U+29EA  ⧪   BLACK DIAMOND WITH DOWN ARROW
U+29EB  ⧫   BLACK LOZENGE
U+29EC  ⧬   WHITE CIRCLE WITH DOWN ARROW
U+29ED  ⧭   BLACK CIRCLE WITH DOWN ARROW
U+29F4  ⧴   RULE-DELAYED
U+29FC  ⧼   LEFT-POINTING CURVED ANGLE BRACKET
U+29FD  ⧽   RIGHT-POINTING CURVED ANGLE BRACKET
U+29FE  ⧾   TINY
U+29FF  ⧿   MINY
U+2B00  ⬀   NORTH EAST WHITE ARROW
U+2B01  ⬁   NORTH WEST WHITE ARROW
U+2B02  ⬂   SOUTH EAST WHITE ARROW
U+2B03  ⬃   SOUTH WEST WHITE ARROW
U+2B04  ⬄   LEFT RIGHT WHITE ARROW
U+2B05  ⬅   LEFTWARDS BLACK ARROW
U+2B06  ⬆   UPWARDS BLACK ARROW
U+2B07  ⬇   DOWNWARDS BLACK ARROW
U+2B08  ⬈   NORTH EAST BLACK ARROW
U+2B09  ⬉   NORTH WEST BLACK ARROW
U+2B0A  ⬊   SOUTH EAST BLACK ARROW
U+2B0B  ⬋   SOUTHWEST BLACK ARROW
U+2B0C  ⬌   LEFT RIGHT BLACK ARROW
U+2B0D  ⬍   UP DOWN BLACK ARROW
U+2B0E  ⬎   RIGHTWARDS ARROW WITH TIP DOWNWARDS
U+2B0F  ⬏   RIGHTWARDS ARROW WITH TIP UPWARDS
U+2B10  ⬐   LEFTWARDS ARROW WITH TIP DOWNWARDS
U+2B11  ⬑   LEFTWARDS ARROW WITH TIP UPWARDS
U+2B12  ⬒   SQUARE WITH TOP HALF BLACK
U+2B13  ⬓   SQUARE WITH BOTTOM HALF BLACK
U+2B14  ⬔   SQUARE WITH UPPER RIGHT DIAGONAL HALF BLACK
U+2B15  ⬕   SQUARE WITH LOWER LEFT DIAGONAL HALF BLACK
U+2B16  ⬖   DIAMOND WITH LEFT HALF BLACK
U+2B17  ⬗   DIAMOND WITH RIGHT HALF BLACK
U+2B18  ⬘   DIAMOND WITH TOP HALF BLACK
U+2B19  ⬙   DIAMOND WITH BOTTOM HALF BLACK
U+2B1A  ⬚   DOTTED SQUARE
U+2B1B  ⬛   BLACK LARGE SQUARE
U+2B1C  ⬜   WHITE LARGE SQUARE
U+2B1D  ⬝   BLACK VERY SMALL SQUARE
U+2B1E  ⬞   WHITE VERY SMALL SQUARE
U+2B1F  ⬟   BLACK PENTAGON
U+2B20  ⬠   WHITE PENTAGON
U+2B21  ⬡   WHITE HEXAGON
U+2B22  ⬢   BLACK HEXAGON
U+2B23  ⬣   HORIZONTAL BLACK HEXAGON
U+2B24  ⬤   BLACK LARGE CIRCLE
U+2B25  ⬥   BLACK MEDIUM DIAMOND
U+2B26  ⬦   WHITE MEDIUM DIAMOND
U+2B27  ⬧   BLACK MEDIUM LOZENGE
U+2B28  ⬨   WHITE MEDIUM LOZENGE
U+2B29  ⬩   BLACK SMALL DIAMOND
U+2B2A  ⬪   BLACK SMALL LOZENGE
U+2B2B  ⬫   WHITE SMALL LOZENGE
U+2B30  ⬰   LEFT ARROW WITH SMALL CIRCLE
U+2B31  ⬱   THREE LEFTWARDS ARROWS
U+2B32  ⬲   LEFT ARROW WITH CIRCLED PLUS
U+2B33  ⬳   LONG LEFTWARDS SQUIGGLE ARROW
U+2B34  ⬴   LEFTWARDS TWO-HEADED ARROW WITH VERTICAL STROKE
U+2B35  ⬵   LEFTWARDS TWO-HEADED ARROW WITH DOUBLE VERTICAL STROKE
U+2B36  ⬶   LEFTWARDS TWO-HEADED ARROW FROM BAR
U+2B37  ⬷   LEFTWARDS TWO-HEADED TRIPLE DASH ARROW
U+2B38  ⬸   LEFTWARDS ARROW WITH DOTTED STEM
U+2B39  ⬹   LEFTWARDS ARROW WITH TAIL WITH VERTICAL STROKE
U+2B3A  ⬺   LEFTWARDS ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2B3B  ⬻   LEFTWARDS TWO-HEADED ARROW WITH TAIL
U+2B3C  ⬼   LEFTWARDS TWO-HEADED ARROW WITH TAIL WITH VERTICAL STROKE
U+2B3D  ⬽   LEFTWARDS TWO-HEADED ARROW WITH TAIL WITH DOUBLE VERTICAL STROKE
U+2B3E  ⬾   LEFTWARDS ARROW THROUGH X
U+2B3F  ⬿   WAVE ARROW POINTING DIRECTLY LEFT
U+2B40  ⭀   EQUALS SIGN ABOVE LEFTWARDS ARROW
U+2B41  ⭁   REVERSE TILDE OPERATOR ABOVE LEFTWARDS ARROW
U+2B42  ⭂   LEFTWARDS ARROW ABOVE REVERSE ALMOST EQUAL TO
U+2B43  ⭃   RIGHTWARDS ARROW THROUGH GREATER-THAN
U+2B44  ⭄   RIGHTWARDS ARROW THROUGH SUPERSET
U+2B45  ⭅   LEFTWARDS QUADRUPLE ARROW
U+2B46  ⭆   RIGHTWARDS QUADRUPLE ARROW
U+2B47  ⭇   REVERSE TILDE OPERATOR ABOVE RIGHTWARDS ARROW
U+2B48  ⭈   RIGHTWARDS ARROW ABOVE REVERSE ALMOST EQUAL TO
U+2B49  ⭉   TILDE OPERATOR ABOVE LEFTWARDS ARROW
U+2B4A  ⭊   LEFTWARDS ARROW ABOVE ALMOST EQUAL TO
U+2B4B  ⭋   LEFTWARDS ARROW ABOVE REVERSE TILDE OPERATOR
U+2B4C  ⭌   RIGHTWARDS ARROW ABOVE REVERSE TILDE OPERATOR
U+2B50  ⭐   WHITE MEDIUM STAR
U+2B51  ⭑   BLACK SMALL STAR
U+2B52  ⭒   WHITE SMALL STAR
U+2B53  ⭓   BLACK RIGHT-POINTING PENTAGON
U+2B54  ⭔   WHITE RIGHT-POINTING PENTAGON
U+2B55  ⭕   HEAVY LARGE CIRCLE
U+2B56  ⭖   HEAVY OVAL WITH OVAL INSIDE
U+2B57  ⭗   HEAVY CIRCLE WITH CIRCLE INSIDE
U+2B58  ⭘   HEAVY CIRCLE
U+2B59  ⭙   HEAVY CIRCLED SALTIRE
<style>
body {
  margin: 1em auto;
  max-width: 40em;
  width: 88%;
}
  
/* The CSS aspect-ratio property tells browsers to preserve a specific aspect ratio on an element when scaling the size of it up or down. */

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}
</style>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_VDGysJGNoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<style>
 .spacer {
  height: 100vh;
}

a {
  color: #3d3d3d;
  font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
  scroll-behavior: smooth;
}

  /* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
  
 </style>

<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1> 

<div class="spacer">
  &nbsp;
</div>

<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>

<div class="spacer">
  &nbsp;
</div>

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>
// get Url
var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)
const slider = document.querySelector(".simple-slider");
const value = document.querySelector("#slider-value");

slider.addEventListener("input", () => {
value.innerHTML = `You selected ${slider.value}`;
});
const closeBtns = document.querySelectorAll(".btn-toast-close");
const successDemoBtn = document.querySelector("#success-toast-demo-btn");
const successToast = document.querySelector("#toast-success");
const errorDemoBtn = document.querySelector("#error-toast-demo-btn");
const errorToast = document.querySelector("#toast-error");

// close toast when clicked on close icon button
closeBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    btn.parentElement.parentElement.style.display = "none";
  });
});

// show success toast for 3 sec
successDemoBtn.addEventListener("click", () => {
  successToast.style.display = "flex";

  setTimeout(() => {
    successToast.style.display = "none";
  }, 3000);
});

// show error toast for 3 sec
errorDemoBtn.addEventListener("click", () => {
  errorToast.style.display = "flex";

  setTimeout(() => {
    errorToast.style.display = "none";
  }, 3000);
});
const hamburgerMenuBtn = document.querySelector("#hamburger-btn");
const hamburgerMenu = document.querySelector("#hamburger-nav-menu");

// toggle display none class
hamburgerMenuBtn.addEventListener("click", () => {
  const classes = hamburgerMenu.classList;
  classes.toggle("d-none");
});
// take refernece of html elements
const listModalWrapper = document.querySelector("#list-modal-wrapper");
const listModalDemoBtn = document.querySelector("#list-modal-demo-btn");
const actionBtns = document.querySelectorAll(".btn-action");
const body = document.querySelector("body");

// event listener for live demo button for list modal
listModalDemoBtn.addEventListener("click", () => {
  listModalWrapper.style.display = "flex";
});

// event listeners for buttons in modal
// here for example i just closed modal on click on action ,
// you can perform any action you want to do on click of action buttons
actionBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    if (btn.parentNode.id === "list-modal-buttons") {
      listModalWrapper.style.display = "none";
    }
  });
});

//event listener for closing modal when it is open and we click anywhere on screen/window
window.addEventListener("click", event => {
   if (event.target === listModalWrapper) {
    listModalWrapper.style.display = "none";
  }
});
// take refernece of html elements
const simpleModalWrapper = document.querySelector("#simple-modal-wrapper");
const simpleModalDemoBtn = document.querySelector("#simple-modal-demo-btn");

const actionBtns = document.querySelectorAll(".btn-action");
const body = document.querySelector("body");

// event listener for live demo button for simple modal
simpleModalDemoBtn.addEventListener("click", () => {
  simpleModalWrapper.style.display = "flex";
});

// event listeners for buttons in modal
// here for example i just closed modal on click on action ,
// you can perform any action you want to do on click of action buttons
actionBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    if (btn.parentNode.id === "simple-modal-buttons") {
      simpleModalWrapper.style.display = "none";
    } 
  });
});

//event listener for closing modal when it is open and we click anywhere on screen/window
window.addEventListener("click", event => {
  if (event.target === simpleModalWrapper) {
    simpleModalWrapper.style.display = "none";
  }
});
const closeIcon = document.querySelector(".close-icon-wrapper");
const cardWrapper = document.querySelector(".dismiss-card-wrapper");
const dismissCard = () => {
    cardWrapper.style.display= "none";
    resetCardBtn.style.display = "block";
}
closeIcon.addEventListener("click",dismissCard);
<button type="button" class="btn btn-primary rounded-sm text-sm p-3">
    Save
</button>

<!-- you can iverride styling of the class -->
<style>
    .btn-primary {
      background-color:#f44336;
      color: #000; 
    }  
</style>
<link rel="stylesheet" href="https://cool-ui.netlify.app/styles/main.css" />
<div class="gu-icon-container">
    <div class="gu-slider-container">
        <input type="range" min="0" max="20000" list="datalist" class="gu-slider" step="2500" />
        <datalist id="datalist" class="flex-between txt-sm">
            <option value="0"></option>
            <option value="5000"></option>
            <option value="10000"></option>
            <option value="15000"></option>
            <option value="20000"></option>
        </datalist>
    </div>
</div>
<div class="gu-icon-container">
    <div class="gu-slider-container">
        <input type="range" min="0" max="1000" class="gu-slider" />
    </div>
</div>
const imagesMarkup = imageData && imageData.map((line: any) => (
        <BannerStripeImage
            img={line.src} key={line.src}/>
    ))

    return (
        <div>
            {imagesMarkup}
        </div>
    )
<ul class="gu-list style-none">
    <li class="gu-list-item stacked">
        Message from friend 1</i>
    </li>
    <li class="gu-list-item stacked">
        Message from friend 2</i>
    </li>
    <li class="gu-list-item stacked">
        Message from friend 3</i>
    </li>
</ul>
<ul class="gu-list style-none">
    <li class="gu-list-item">list item</li>
    <li class="gu-list-item">list item</li>
    <li class="gu-list-item">list item</li>
</ul>
<ul class="gu-list">
    <li class="gu-list-item">list item</li>
    <li class="gu-list-item">list item</li>
    <li class="gu-list-item">list item</li>
</ul>
<div class="slider">
    <div class="slider-value">
        <span>0</span>
        <span>500</span>
        <span>1000</span>
    </div>
    <input type="range" min="0" max="1000" value="500">
</div>
<div class="filter-wrap flex-col">
    <label for="price">
        <h4>Price Range Slider:</h4>
    </label>
    <div class="flex-row spc-btwn">
        <h5>₹0</h5>
        <h5>₹2500</h5>
        <h5>₹5000</h5>
    </div>

    <input type="range" name="price" class="prange" min="0" max="5000" value="2500" />
</div>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <a class="brand-name text-dec-none headline-lg font-wt-bold p-4" href="../index.html">Gamers Zone</a>
    <button id="hamburger-btn" class="btn text-md ml-auto mr-8 p-4">
        <i class="fas fa-bars hamburger-icon"></i>
    </button>
    <section id="nav-menu-without-hamburger" class="d-flex">
        <div class="search-box d-flex align-center justify-between my-8 w-50">
            <input type="text" class="search-input p-2 m-2 text-sm" placeholder="Search for products..." required />
            <button type="submit" class="btn btn-icon p-4">
                <i class="fas fa-search text-md"></i>
            </button>
        </div>
        <nav class="nav-links d-flex align-center">
            <a href="./signup.html" class="btn text-dec-none btn-primary rounded-sm text-sm p-4 ml-4">
                Signup
            </a>

            <a class="nav-link-icon p-relative icon-badge-wrapper m-3 d-flex flex-col align-center text-dec-none" href="./products.html">
                <i class="fas fa-store text-md"></i>
                <span class="nav-link-description text-sm">Products</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex flex-col align-center text-dec-none" href="./cart.html">
                <span class="p-relative"><i class="fas fa-shopping-cart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span></span>
                <span class="nav-link-description text-sm">Cart</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex flex-col align-center text-dec-none" href="#">
                <span class="p-relative">
                    <i class="fas fa-heart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span></span>
                <span class="nav-link-description text-sm">Wishlist</span>
            </a>
        </nav>
    </section>
</header>

<!-- hamburger nav menu -->
<section id="hamburger-nav-menu" class="d-none my-8">
    <div class="d-flex align-center justify-center">
        <div class="search-box ml-8 d-flex align-center justify-between my-8 w-50">
            <input type="text" class="search-input p-2 m-2 text-sm" placeholder="Search for products..." required />
            <button type="submit" class="btn btn-search btn-icon p-4 p-relative">
                <i class="fas fa-search text-md"></i>
            </button>
        </div>
        <div class="ml-8">
            <a href="./signup.html" class="btn text-dec-none btn-primary rounded-sm text-sm p-4 mr-4">
                Signup
            </a>
        </div>
    </div>
    <nav class="nav-links">
        <div class="d-flex ml-4 justify-around">
            <a class="nav-link-icon p-relative icon-badge-wrapper m-3 d-flex align-center text-dec-none" href="./products.html">
                <i class="fas fa-store text-md"></i>
                <span class="nav-link-description text-sm ml-6">Products</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex align-center text-dec-none" href="./cart.html">
                <span class="p-relative"><i class="fas fa-shopping-cart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span></span>
                <span class="nav-link-description text-sm ml-6">Cart</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex align-center text-dec-none" href="./wishlist.html">
                <span class="p-relative">
                    <i class="fas fa-heart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span></span>
                <span class="nav-link-description text-sm ml-6">Wishlist</span>
            </a>
        </div>
    </nav>
</section>
 <div class="d-flex align-center">
     <input type="range" name="slider" class="styled-slider" min="0" max="500" value="200" />
 </div>
<ul class="rating">
    <li class="rating-icon"><i class="far fa-star"></i></li>
    <li class="rating-icon"><i class="far fa-star"></i></li>
    <li class="rating-icon"><i class="far fa-star"></i></li>
    <li class="rating-icon"><i class="far fa-star"></i></li>
    <li class="rating-icon"><i class="far fa-star"></i></li>
</ul>
<ul class="rating">
    <li class="rating-icon"><i class="fas fa-star filled"></i></li>
    <li class="rating-icon"><i class="fas fa-star filled"></i></li>
    <li class="rating-icon"><i class="fas fa-star filled"></i></li>
    <li class="rating-icon"><i class="fas fa-star filled"></i></li>
    <li class="rating-icon"><i class="fas fa-star half-filled"></i></li>
</ul>
<div class="grid grid-3">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>
<div class="grid grid-2">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
</div>
<div class="modal-container">
    <div class="modal">
        <div class="modal-heading">Save</div>
        <div class="modal-text">
            Are you sure that you want to save changes?
        </div>
        <div class="modal-btn">
            <button class="btn outlined-default">Cancel</button>
            <button class="btn secondary">Save Changes</button>
        </div>
        <div class="modal-close-btn">
            <i class="fas fa-times"></i>
        </div>
    </div>
</div>
  <!-- Navigation -->
  <nav class="flex-row header-bar">
      <div class="flex-row header-left">
          <i class="material-icons header-icon"> menu </i>

          <h1 class="web-logo">Gaming</h1>
      </div>
      <div class="flex-row header-right">
          <button class="btn primary-btn btn-active">LOGIN</button>
          <div class="relative-container">
              <i class="material-icons header-icon">
                  favorite_border</i>
              <div class="badge top-right flex-row center-it nav-badge-color">3</div>
          </div>

          <div class="flex-row relative-container">
              <i class="material-icons header-icon"> shopping_cart </i>
              <div class="badge top-right flex-row center-it nav-badge-color">2</div>
          </div>
          <i class="material-icons header-icon"> logout </i>
      </div>
  </nav>
 <!-- GRIDS -->
 <h1>GRIDS</h1>
 <div class="grid">
     <div class="grid-container grid-two bgGrey">
         <div class="bgred"></div>
         <div class="bggreen"></div>

     </div>
     <div class="grid-container grid-three bgGrey">
         <div class="bgred"></div>
         <div class="bggreen"></div>
         <div class="bgblue"></div>
     </div>
 </div>
<ul class="flex-col center-it stk-list-container">
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/modi.jfif" alt="" class="stk-list-img" />
    </li>
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/river.jfif" alt="" class="stk-list-img" />
    </li>
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/cricket.jfif" alt="" class="stk-list-img" />
    </li>
</ul>
     <ul class="flex-col center-it list-container">
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of mangoes:</p>
             <div>18</div>
         </li>
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of bananas:</p>
             <div>10</div>
         </li>
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of apples :</p>
             <div>12</div>
         </li>
     </ul>
<link rel="stylesheet" href="https://crave-ui.netlify.app/styles/main.css" />
<span class="fa fa-star star-checked"></span>
<span class="fa fa-star star-checked"></span>
<span class="fa fa-star star-checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<div class="grid__column__container--3">
    <div class="img__container">
        <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
    </div>
    <div class="img__container">
        <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
    </div>
    <div class="img__container">
        <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
    </div>
</div>
 <div class="grid__container--50-50">
     <div class="img__container">
         <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
     </div>
     <div class="img__container">
         <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
     </div>
 </div>
<div class="grid__container--70-30">
    <div class="img__container">
        <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
    </div>
    <div class="img__container">
        <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
    </div>
</div>
<div class="slidecontainer">
    <p>Default range slider:</p>
    <input type="range" min="1" max="100" value="50">
</div>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 <link rel="stylesheet" href="https://sugar-ui.vercel.app/componentfinalcss/component.css" />
<link
  rel="stylesheet"
  href="https://spectre-ui.netlify.app/documentation/styles.css"
/>
<div class="d-flex align-center">
    <label class="disabled-slider-label" for="disabled-slider"><i class="fas fa-volume-up text-md mr-2"></i></label>
    <input type="range" name="slider" class="disabled-slider" min="0" max="500" value="300" disabled />
</div>
<div class="d-flex align-center">
    <label for="icon-slider"><i class="fas fa-volume-up text-md mr-2"></i></label>
    <input type="range" name="slider" class="icon-slider" min="0" max="500" value="250" />
</div>
 <div class="d-flex align-center">
     <input type="range" name="slider" class="simple-slider" min="0" max="500" value="200" />
 </div>
<p class="font-size--xxlg font-weight--800">Typography</p>
<p class="font-size--xlg font-weight--700">Typography</p>
<p class="font-size--lg font-weight--600">Typography</p>
<p class="font-size--md font-weight--500">Typography</p>
<p class="font-size--sm font-weight--400">Typography</p>
<p class="font-size--xsm font-weight--300">Typography</p>
<p class="font-size--xxlg">Typography</p>
<p class="font-size--xlg">Typography</p>
<p class="font-size--lg">Typography</p>
<p class="font-size--md">Typography</p>
<p class="font-size--sm">Typography</p>
<p class="font-size--xsm">Typography</p>
<div class="form form-input">
    <textarea name="message" cols="30" rows="10" class="input-textarea">Enter your message</textarea>
	<button class="btn btn-primary btn-input">Confirm</button>
    <button class="btn btn-secondary btn-input">Cancel</button>
</div>
<div class="form form-input">
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" id="email" class="field form-error" placeholder="Enter email">
    </div>
	<p>Please enter valid username/ password</p>
    <div class="form-group">
        <label for="password">Email password</label>
        <input type="password" id="password" class="field form-error" placeholder="Enter password">
    </div>
	<button class="btn btn-primary btn-input">Sign In</button>
    <button class="btn btn-secondary btn-input">Sign Up</button>    
</div>
<div class="form form-input">
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" id="email" class="field form-field" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="password">Email password</label>
        <input type="password" id="password" class="field form-field" placeholder="Enter password">
    </div>
	<button class="btn btn-primary btn-input">Sign In</button>
    <button class="btn btn-secondary btn-input">Sign Up</button>
</div>
<div class="drawer-container">
    <div class="drawer-heading">
        <h3>Title</h3>
        <h6 class="grey-text">subtext<h6>
    </div>
    <div class="drawer-items">
        <li class="drawer-list">
            <i class="material-icons">inbox</i>
            <span>Inbox</span>
        </li>
        <li class="drawer-list">
            <i class="material-icons">star</i>
            <span>Star</span>
        </li>
        <li class="drawer-list">
            <i class="material-icons">send</i>

            <span>Sent Mail</span>
        </li>
        <li class="drawer-list">
            <i class="material-icons">drafts</i>
            <span>Drafts</span>
        </li>
    </div>
</div>
<img class="image-thumbnail" src="...">
<ul class="align-image">
    <li><img class="square-image" src="..."></li>
    <li><img class="square-image" src="..."></li>
    <li><img class="square-image" src="..."></li>
</ul>
<img class="square-image" src="...">
<button class="btn-icon btn-float fa fa-thumbs-up"></button>
<button class="btn-icon btn-float fa fa-thumbs-down"></button>
<button class="btn-icon btn-float fa fa-plus"></button>
<button class="btn-icon btn-float fa fa-address-book"></button>
<button class="btn-icon fa fa-facebook"></button>
<button class="btn-icon fa fa-envelope"></button>
<button class="btn-icon fa fa-calendar"></button>
<button class="btn-icon fa fa-headphones"></button>
<button class="btn-icon fa fa-user"></button>
<button class="btn-icon fa fa-bluetooth"></button>
<a href="#"><button class="btn btn-primary">Primary</button></a>
<a href="#"><button class="btn btn-secondary">Secondary</button></a>
<a href="#"><button class="btn btn-success">Success</button></a>
<a href="#"><button class="btn btn-danger">Danger</button></a>
<a href="#"><button class="btn btn-warning">Warning</button></a>
<a href="#"><button class="btn btn-info">Info</button></a>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<ul class="list list-group">
    <li class="list-group-item list-group-item-primary list-item-dark">This is a primary list group item</li>
    <li class="list-group-item list-group-item-secondary list-item-dark">This is a secondary list item</li>
    <li class="list-group-item list-group-item-success list-item-dark">This is a success list group item</li>
    <li class="list-group-item list-group-item-danger list-item-dark">This is a danger list group item</li>
    <li class="list-group-item list-group-item-warning list-item-dark">This is a warning list group item</li>
    <li class="list-group-item list-group-item-info list-item-dark">This is a info list group item</li>
    <li class="list-group-item list-group-item-light list-item-dark">This is a light list group item</li>
    <li class="list-group-item list-group-item-dark list-item-dark">This is a dark list group item</li>
</ul>
<ul class="list list-group">
    <li class="list-group-item disabled">This is a list</li>
    <li class="list-group-item">NeoG 2022</li>
    <li class="list-group-item">Tanay Pratap</li>
    <li class="list-group-item">Css component library</li>
    <li class="list-group-item">Unordered list</li>
</ul>
<ul class="list list-group">
    <li class="list-group-item active">This is a list</li>
    <li class="list-group-item">NeoG 2022</li>
    <li class="list-group-item">Tanay Pratap</li>
    <li class="list-group-item">Css component library</li>
    <li class="list-group-item">Unordered list</li>
</ul>
<ul class="list list-group">
    <li class="list-group-item">This is a list</li>
    <li class="list-group-item">NeoG 2022</li>
    <li class="list-group-item">Tanay Pratap</li>
    <li class="list-group-item">Css component library</li>
    <li class="list-group-item">Unordered list</li>
</ul>
<div class="card card-image">
    <img class="card-img" src="..." alt="Card image">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle">Card subtitle</h6>
        <p class="card-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link ml-16">Another link</a>
    </div>
</div>
<div class="card card-vertical">
  <div class="card-body">
   <h5 class="card-title card-header">Card title</h5>
   <p class="card-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
   <h5 class="card-title card-footer">Footer text</h5>
  </div>
</div>
<div class="card card-horizontal">
    <div class="card-body">
        <h5 class="card-title card-header">Card title</h5>
        <p class="card-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link ml-16">Another link</a>
    </div>
</div>
<div class="badge-container">
    <a href="#" class="fa fa-facebook "></a>
    <span class="badge-icon-img  icon">2</span>
</div>
<div class="badge-container">
    <a href="#" class="fa fa-twitter"></a>
    <span class="badge-icon-img icon">20</span>
</div>
<div class="badge-container">
    <a href="#" class="fa fa-linkedin"></a>
    <span class="badge-icon-img icon">83</span>
</div>
<div class="badge-container">
    <a href="#" class="fa fa-github"></a>
    <span class="badge-icon-img icon">3</span>
</div>
 <!-- success toast -->
 <div id="toast-success" class="toast text-sm d-flex align-center p-3 rounded-sm d-none">
     Added Successfully !
     <button type="button" class="btn btn-icon">
         <i class="fas fa-times text-md btn-toast-close ml-4"></i>
     </button>
 </div>

 <!-- error toast -->
 <div id="toast-error" class="toast text-sm d-flex align-center p-3 rounded-sm d-none">
     Try Again Later !
     <button type="button" class="btn btn-icon">
         <i class="fas fa-times text-md btn-toast-close ml-4"></i>
     </button>
 </div>
<div class="badge-container">
	<img class="round-img avatar--xsm" src="../../assets/Square_Profile.jpg" alt="avatar-image" >
    <span class="badge-round-img badge--xsm"></span>
</div>
<div class="badge-container">
	<img class="round-img avatar--sm" src="../../assets/Square_Profile.jpg" alt="avatar-image">
    <span class="badge-round-img badge--sm"></span>
</div>
<div class="badge-container">
    <img class="round-img avatar--md" src="../../assets/Square_Profile.jpg" alt="avatar-image">
    <span class="badge-round-img badge--md"></span>
</div>
<div class="badge-container">
	<img class="round-img avatar--lg" src="../../assets/Square_Profile.jpg" alt="avatar-image">
	<span class="badge-round-img badge--lg"></span>
</div>
<div class="badge-container">
	<img class="round-img avatar--xlg" src="../../assets/Square_Profile.jpg" alt="avatar-image">
	<span class="badge-round-img badge--xlg"></span>
</div>
<div class="rating-container text-md">
    <input type="checkbox" id="star-1" checked disabled />
    <label for="star-1" class="fas fa-star rating-checked"></label>
    <input type="checkbox" id="star-2" checked disabled />
    <label for="star-2" class="fas fa-star rating-checked"></label>
    <input type="checkbox" id="star-3" checked disabled />
    <label for="star-3" class="fas fa-star rating-checked"></label>
    <input type="checkbox" id="star-4" disabled />
    <label for="star-4" class="fas fa-star rating-unchecked"></label>
    <input type="checkbox" id="star-5" disabled />
    <label for="star-5" class="fas fa-star rating-unchecked"></label>
</div>
<div class="card card-basic">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle">Card subtitle</h6>
      <p class="card-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link ml-16">Another link</a>
   </div>
</div>
<div class="d-grid grid-3-column gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
    <div class="grid-item text-center text-md">Column 3</div>
</div>
<div class="d-grid grid-50-50 gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
</div>
<div class="d-grid grid-30-70 gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
</div>
<div class="d-grid grid-20-80 gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Bangers&family=Comfortaa&family=Emblema+One&family=Luckiest+Guy&family=Nova+Flat&family=Permanent+Marker&family=Sigmar+One&family=Vujahday+Script&display=swap" rel="stylesheet">
<img class="round-img avatar--xsm" src="image_source" alt="avatar-image">
  
<img class="round-img avatar--sm" src="image_source" alt="avatar-image">
  
<img class="round-img avatar--md" src="image_source" alt="avatar-image">
  
<img class="round-img avatar--lg" src="image_source" alt="avatar-image">
  
<img class="round-img avatar--xlg" src="image_source" alt="avatar-image">
<!-- Basic Rating -->
<div class="rating-simple">
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
</div>

<!-- Number Rating -->
<div class="rating-number-container">
    4.5 <span class="material-icons rating-number"> star </span>
</div>
<style>
    @media all and (max-width: 600px) {
    .table-wrapper {
      width: 95%;
    }
    .td-inline {
      display: inline-table !important;
      width: 100%;
    }
    .img-100 img {
      width: 100%;
      height: auto; 
    }
    
    .show {
      display: block;
    }
    
    }
</style>


<!-- Image left + Text Right-->
<table width="638" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td>
            <!-- Image -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="48%">
                <tr>
                    <td class="img-100">
                        <img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
                    </td>
                </tr>
            </table>
            <!-- Text -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
                <tr>
                    <td width="30" class="width-20"></td>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                            <tr>
                                <td height="34" class="height-10"></td>
                            </tr>
                            <tr>
                                <td style="
                        font-size: 28px;
                        font-weight: 500;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.3;
                      ">
                                    Lorem ipsum dolor sit amet
                                </td>
                            </tr>
                            <tr>
                                <td height="16" class="height-10mid"></td>
                            </tr>

                            <tr>
                                <td style="
                        font-size: 18px;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.5;
                      ">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </td>
                            </tr>
                            <tr>
                                <td height="30"></td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td width="200" align="center" height="45" style="border: 2px solid #000">
                                                <a target="_blank" href="#" style="
                                font-size: 18px;
                                     color: #000;
                                text-transform: uppercase;
                                font-family: 'Open Sans', Arial, sans-serif;
                                font-weight: 700;
                                text-align: center;
                                display: block;
                                line-height: 45px;
                                vertical-align: middle;
                                text-decoration: none;
                              ">Shop the Sale</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr class="show">
                                <td height="20"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="30"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Image left + Text Right -->

<!-- Blank space / divider -->
<table width="640" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td height="40" class="mob-height-20"></td>
    </tr>
</table>
<!-- End Blank space / divider -->

<!-- Text Left - Image Right -->
<table width="638" border="0" cellpadding="0" cellspacing="0" dir="ltr" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td>
            <!-- Image -->
            <table cellpadding="0" cellspacing="0" border="0" align="right" class="td-inline" width="48%">
                <tr>
                    <td class="img-100">
                        <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
                    </td>
                </tr>
            </table>
            <!-- Text -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
                <tr>
                    <td width="30" class="width-20"></td>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                            <tr>
                                <td height="34"></td>
                            </tr>
                            <tr>
                                <td style="
                        font-size: 28px;
                        font-weight: 500;
                        color: #000;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.3;
                      ">
                                    Lorem ipsum dolor sit amet
                                </td>
                            </tr>
                            <tr>
                                <td height="16"></td>
                            </tr>

                            <tr>
                                <td style="
                        font-size: 18px;
                        color: #000;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.5;
                      ">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </td>
                            </tr>
                            <tr>
                                <td height="30"></td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td width="200" align="center" height="45" style="border: 2px solid #000">
                                                <a target="_blank" href="#" style="
                                font-size: 18px;
                                color: #000;
                                text-transform: uppercase;
                                font-family: 'Open Sans', Arial, sans-serif;
                                font-weight: 700;
                                text-align: center;
                                display: block;
                                line-height: 45px;
                                vertical-align: middle;
                                text-decoration: none;
                              ">Watch the Video</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr class="show">
                                <td height="20"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="30"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Text Left - Image Right -->
<div class="modal">
    <div class="modal-header">
        Content...
    </div>
    <div class="modal-body">
        Content...
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary">...</button>
        <button class="btn btn-primary">...</button>
    </div>
</div>
<div class="card-shadow">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
        <span class="card-badge-text">content...</span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-vertical">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-horizontal">
    <div class="card-img-container">
        <img class="card-horizontal-img" src="" alt="" />
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-text-only">
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-overlay">
    <div class="card-img-container">
        <img class="card-img img-text" src="" alt="" />
        <span class="card-text-overlay">content...</span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-dismiss">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
        <span class="material-icons card-dismiss-icon"> close </span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content......</div>
    </div>
</div>
div class="card-badge">
<div class="card-img-container">
    <img class="card-img" src="" alt="" />
    <span class="card-badge-text">content...</span>
</div>
<div class="card-body">
    <div class="card-content">content...</div>
    <div class="card-sub-content">content...</div>
</div>
</div>
<v-btn icon href="/fooRoute" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>
<svg width="381" height="29" viewBox="0 0 381 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 6.28396C0 10.934 4.17988 14.4684 8.76527 13.6956L33.098 9.59459C34.4709 9.36321 35.8607 9.24692 37.2529 9.24692H61.6701C63.0821 9.24692 64.4916 9.36655 65.8835 9.60452L94.8234 14.5527C97.2286 14.9639 99.6809 15.0208 102.103 14.7216L188.368 4.0623C189.701 3.89758 191.046 3.84057 192.388 3.89182L239.996 5.70947C241.401 5.76315 242.8 5.93539 244.177 6.22436L282.15 14.1943C285.231 14.8408 288.406 14.8998 291.508 14.3682L341.563 5.79013L376.313 0.744935C377.375 0.590791 378.447 0.946822 379.205 1.70543C380.014 2.51361 380.362 3.6738 380.132 4.79337L378.639 12.06C378.217 14.1178 377.42 16.0805 376.289 17.8509L375.058 19.7785C373.698 21.9069 371.947 23.7581 369.898 25.234C366.498 27.6825 362.415 29 358.225 29H22.7161C10.1703 29 0 18.8297 0 6.28396Z" fill="#FFAB07"/>
</svg>
.Buttonbg {
  width: 380px;
  height: 48px;
  background-color: red;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
  color: white;
  position: absolute;
  left: 180px;
  top: -5px;
  z-index: 2;
}
svg {
  position: absolute;
  top: 27px;
  z-index: 0;
}
<svg width="316" height="28" viewBox="0 0 316 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="0.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="0.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="0.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="0.5" y="0.5" width="29" height="27" stroke="black"/>
<rect x="3.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="3.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="3.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="3.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="3.5" y="3.5" width="23" height="21" stroke="black"/>
<rect x="6.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="6.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="6.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="6.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="6.5" y="6.5" width="17" height="15" stroke="black"/>
<rect x="10.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="10.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="10.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="10.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="10.5" y="9.5" width="10" height="9" stroke="black"/>
<rect x="286.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="286.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="286.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="286.5" y="0.5" width="29" height="27" fill="#F36868"/>
<rect x="286.5" y="0.5" width="29" height="27" stroke="black"/>
<rect x="289.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="289.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="289.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="289.5" y="3.5" width="23" height="21" fill="#F36868"/>
<rect x="289.5" y="3.5" width="23" height="21" stroke="black"/>
<rect x="292.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="292.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="292.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="292.5" y="6.5" width="17" height="15" fill="#F36868"/>
<rect x="292.5" y="6.5" width="17" height="15" stroke="black"/>
<rect x="296.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="296.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="296.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="296.5" y="9.5" width="10" height="9" fill="#F36868"/>
<rect x="296.5" y="9.5" width="10" height="9" stroke="black"/>
</svg>
.Buttonbg {
  width: 380px;
  height: 48px;
  background-color: pink;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
  color: Black;
  position: absolute;
  left: 180px;
  top: -5px;
  z-index: 2;
}
svg {
  position: absolute;
  top: 18px;
  left: 35px;
  z-index: 999;
}
.Buttonbg {
  width: 380px;
  height: 48px;
  background-color: cyan;
  border-radius: 25px;
  outline: solid;
  outline-width: 5px;
}

#txt {
  font-family: Simonetta;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
  color: Black;
  position: absolute;
  left: 180px;
  top: -5px;
  z-index: 2;
}
svg {
  position: absolute;
  top: 18px;
  left: 330px;
  z-index: 999;
}
  <svg width="34" height="38" viewBox="0 0 34 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3L3 18L4 34L5.5 37.5L10 38H0L2.5 36.5L1.5 30.5V23.5L0 3Z" fill="#02832E"/>
<path d="M34 3L30.4 18L29.2 34L27.4 37.5L22 38H34L31 36.5L32.2 30.5V23.5L34 3Z" fill="#02832E"/>
<path d="M10 10L8.2 22L7.6 34.8L6.7 37.6L4 38H10L8.5 36.8L9.1 32V26.4L10 10Z" fill="#02832E"/>
<path d="M22 10L24.1 22L24.8 34.8L25.85 37.6L29 38H22L23.75 36.8L23.05 32V26.4L22 10Z" fill="#02832E"/>
<path d="M17 0L12.8 16.2857L11.4 33.6571L9.3 37.4571L3 38H17L13.5 36.3714L14.9 29.8571V22.2571L17 0Z" fill="#02832E"/>
<path d="M13 0L18.1 16.2857L19.8 33.6571L22.35 37.4571L30 38H13L17.25 36.3714L15.55 29.8571V22.2571L13 0Z" fill="#02832E"/> 
  </svg>
<nav class="saiyan-navbar">
  <div class="navbar__brand-container">
    <a class="navbar__brand__name navbar__links" href="#">Saiyan Merch</a>
  </div>

  <div class="navbar__search">
    <input class="navbar__searchbar" type="text" placeholder="Search Items" />
  </div>

  <div class="navbar__list-container">
    <ul class="navbar__list">
      <li class="navbar__items">
        <a href="#">
          <div class="navbar__icon-badge">
            <span class="navbar__badge__icon"
              ><i class="fa-solid fa-user"></i
            ></span>
          </div>
        </a>
      </li>
      <li class="navbar__items">
        <a href="#">
          <div class="navbar__icon-badge">
            <span class="navbar__badge__icon"
              ><i class="fa-solid fa-heart"></i
              ><span class="navbar__badge__icon-badge">3</span></span
            >
          </div>
        </a>
      </li>
      <li class="navbar__items">
        <a href="#">
          <div class="navbar__icon-badge">
            <span class="navbar__badge__icon"
              ><i class="fas fa-shopping-cart"></i
              ><span class="navbar__badge__icon-badge">2</span></span
            >
          </div>
        </a>
      </li>
    </ul>
  </div>
</nav>
else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
            $_SESSION['errors'][] = "Invalid email format!";   
        }
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16" fill="white" />
    <circle cx="16" cy="16" r="14" fill="black" />
    <circle cx="10" cy="12" r="3" fill="white" />
    <circle cx="22" cy="12" r="3" fill="white" />
  </svg>
.Buttonbg {
  width: 380px;
  height: 48px;
  background-color: Black;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
  color: White;
  position: absolute;
  left: 180px;
  top: -5px;
  z-index: 2;
}
svg {
  position: absolute;
  top: 15px;
  left: 340px;
  z-index: 999;
}
.Buttonbg {
  width: 380px;
  height: 48px;
  background-color: #FF5555;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
  color: White;
  position: absolute;
  left: 180px;
  top: -5px;
  z-index: 2;
}
svg {
  position: absolute;
  top: -20px;
  left: 50px;
  z-index: 0;
}
<div itemscope itemtype="http://schema.org/Person">
  <h1 itemprop="name">Sir John A. Macdonald</h1>
  <span itemprop="jobTitle">Prime Minister of Canada</span>
  <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">24 Sussex Dr.</span>
    <br>
    <span itemprop="addressLocality">Ottawa</span>,
    <span itemprop="addressRegion">ON</span>,
    <span itemprop="addressCountry">Canada</span>
    <br>
    <span itemprop="postalCode">K1A 0A3</span>
  </p>
  <dl>
    <dt>E-mail:</dt>
    <dd><a href="mailto:primeminister@canada.ca" itemprop="email">primeminister@canada.ca</a></dd>
    <dt>Tel:</dt>
    <dd><a href="tel:+16139416900" itemprop="telephone">613-941-6900</a></dd>
    <dt>Website:</dt>
    <dd><a href="http://canada.ca/" itemprop="url">http://canada.ca/</a></dd>
  </dl>
</div>
// NOTAS 
 /*
 1) SVG , PNG ,JPG: 
 para una misma imagen, puede pasar que el peso de svg sea mayor que png o jpg; porque
 dependera de que grafica se lleva a svg, si son figuras simples -> svg pesa poco; pero si son
 muchas imagenes intrincadas entonces svg terminara pesando mas, ya que jpg y png cuardan bits y svg guarda codigo vectorias.
 */

/*
2) -webkit-mask-img "solo funciona para firefox" 
   por lo tanto para enmascarar es mejor usar SVG
   -donde se usara "<image> con width y height obligatorios" y no <img>  
   -aplicar stdDeviation="10" entre 1 y 10 se pasa como que va perdiendo espacio
*/

/*
3) es mejor mover la mascara modificando cx y cy , sera mas simple.

  NOTA: las forma de escalar para un mismo tamaño con  background-image  y <img src=""/>
        No son iguales. es mejor usar un mismo tipo si quiere sobreponer imagenes parecidas y dar           efecto collage
*/

/*
  ENMASCARAR CON 	clipPath esta muy bien, incluso para moverlo con el mousemove es simple; pero 
  "no tiene forma de difuminar los bordes de lamascara con la función gauss"
*/
.Buttonbg {
  width: 380px;
  height: 48px;
  background-color: white;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0;
  color: black;
  position: absolute;
  left: 180px;
  top: -5px;
  z-index: 2;
}
svg {
  position: absolute;
  top: -20px;
  left: 50px;
  z-index: 0;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="nav">
    <div><a class="nav__brand" href="#">Navbar</a></div>
    <div class="nav__links">
        <ul class="nav__list">
            <li class="nav__item">
                <a class="nav__link" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>

        <ul class="nav__list">
            <li class="nav__item">
                <a class="nav__link" href="#">
                    <span>SignIn</span>
                    <i class="ri-user-line"></i>
                </a>
            </li>
            <li class="nav__item">
                <a class="nav__link" aria-current="page" href="#">
                    <span> WishList </span><i class="ri-heart-line"></i>
                </a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#"><span>Cart</span>

                    <i class="ri-shopping-cart-2-line"></i>
                </a>
            </li>
        </ul>
    </div>
</nav>
<!-- Primary/ Secondary Button -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- Link Button -->
<button class="btn btn-primary-link">
    <a href="">Primary Link Button</a>
</button>
<button class="btn btn-secondary-link">
    <a href="">Secondary Link Button</a>
</button>

<!-- Icon Button -->
<button class="btn btn-primary-icon btn-flex">
    <span class="material-icons"> account_circle </span>
    Primary Icon Button
</button>
<button class="btn btn-secondary-icon btn-flex">
    <span class="material-icons"> notifications </span>
    Secondary Icon Button
</button>

<!-- Floating Action Button -->
<button class="btn btn-float">
    <span class="material-icons"> add </span>
</button>
<button class="btn btn-float">
    <span class="material-icons"> arrow_upward </span>
</button>
<div class="modal p-relative bg-gray-200">
    <button id="modalClearBtn" class="material-icons top-right-minus ">clear</button>
    <form class="d-flex flex-column">
        <label class="font-size-regular font-weight-600" for="Username">Name</label>
        <input class="input-outline" type="text" id="Username">
    </form>
    <form class="d-flex flex-column">
        <label class="font-size-regular font-weight-600" for="Username">Email</label>
        <input class="input-outline" type="text" id="Username">
    </form>
    <button class="btn btn-primary font-size-regular">Log In</button>
    <button class="btn btn-outline font-size-regular">Sign up</button>
</div>
<nav class="nav-container">
    <div class="nav-left">
        <h1>Ecom</h1>
        <form class="d-flex p-relative">
            <input type="text" class="searchbar-input" placeholder="Search for products">
            <span class="material-icons searchbar-icon">search</span>
        </form>
    </div>
    <div class="nav-right">
        <div class="badge-parent">
            <span class="material-icons"> shopping_cart </span>
            <div class="badge-with-icon">5</div>
        </div>

        <div class="badge-parent">
            <span class="material-icons"> favorite_border </span>
            <div class="badge-with-icon">3</div>
        </div>

        <div class="badge-parent">
            <span class="material-icons"> notifications_none </span>
            <div class="badge-with-icon">1</div>
        </div>
    </div>
</nav>
<form class="rating-container">
    <input type="radio" id="star-1"><label for="star-1"></label>
    <input type="radio" id="star-2"><label for="star-2"></label>
    <input type="radio" id="star-3"><label for="star-3"></label>
    <input type="radio" id="star-4"><label for="star-4"></label>
    <input type="radio" id="star-5"><label for="star-5"></label>
</form>
<div class="toast toast__success mb-2">
    <span> Saved!</span>
    <button type="button" class="toast__close">
        <i class="ri-close-fill"></i>
    </button>
</div>

<div class="toast toast__error">
    <span> Error Fetching Data</span>
    <button type="button" class="toast__close">
        <i class="ri-close-fill"></i>
    </button>
</div>
 <ul class="row-list">
     <li>this is queue list</li>
     <li>this is queue list</li>
     <li>this is queue list</li>
     <li>this is queue list</li>
     <li>this is queue list</li>
     <li>this is queue list</li>
 </ul>
<ul class="stacked-list">
    <li>this is stacked-list </li>
    <li>this is stacked-list </li>
    <li>this is stacked-list</li>
    <li>this is stacked-list</li>
    <li>this is stacked-list</li>
    <li>this is stacked-list</li>
</ul>
<div class="toast fixed-bottom-center bg-gray-600">
    <div class="toast-msg color-white">Message Sent </div>
    <div class="toast-clear">
        <a class="toast-link" href="#">View Message</a>
        <button class="btn-icon"> <span class="material-icons">clear</span> </button>
    </div>
</div>
<div class="toast fixed-bottom-right bg-gray-600">
    <div class="toast-msg color-white">Message Sent </div>
    <div class="toast-clear">
        <a class="toast-link" href="#">View Message</a>
        <button class="btn-icon"> <span class="material-icons">clear</span> </button>
    </div>
</div>
 <div class="toast fixed-bottom-left bg-green-200">
     <div class="toast-msg color-green-600"> <span class="material-icons">task_alt</span> Message Sent </div>
     <div class="toast-clear">
         <a class="toast-link" href="#">View Message</a>
         <button class="btn-icon"> <span class="material-icons">clear</span> </button>
     </div>
 </div>
 <p>This is <span class="hilighted-text bg-gray-200">Bold</span> text</p>
 <p>This is <span class="hilighted-text bg-warn-200">orange</span> text</p>
 <p class="text-muted">This is disabled text</p>
 <p class="text-striketrough text-muted">This is disabled text</p>
 <p class="font-weight-600 ">This is Bold text</p>
<p class="font-size-lg">This is large text</p>
<p class="font-size-md">This is medium text</p>
<p class="font-size-regular">This is regular text</p>
<p class="font-size-sm ">This is small text</p>
<p class="text-center">This is centered text</p>
<p class="text-left">This is left text</p>
<p class="text-right">This is right text</p>
<div class="modal p-relative bg-gray-200">
    <form class="d-flex flex-column">
        <label class="font-size-regular font-weight-600" for="Username">Name</label>
        <input class="input-outline" type="text" id="Username">
    </form>
    <form class="d-flex flex-column">
        <label class="font-size-regular font-weight-600" for="Username">Email</label>
        <input class="input-outline" type="text" id="Username">
    </form>
    <button class="btn btn-primary font-size-regular">Log In</button>
    <button class="btn btn-outline font-size-regular">Sign up</button>
</div>
<form class="input-parent flex-column">
    <label class="font-size-regular font-weight-600" for="Username">Name</label>
    <input class="input-outline" type="text" id="Username">
    <div class=" font-size-sm color-green-600">Error password should be longer</div>
</form>
<form class="input-parent flex-column">
    <label class="font-size-regular font-weight-600" for="Username">Email</label>
    <input class="input-outline" type="text" id="Username">
    <div class=" font-size-sm color-red-600">email should contain @</div>
</form>
<form class="input-parent">
    <label class="input-label" for="Username">Sucess</label>
    <input class="input-filled sucess" type="text" id="Username">
</form>
<form class="input-parent">
    <label class="input-label" for="Username">Error</label>
    <input class="input-filled error" type="text" id="Username">
</form>
<div class="rating__container rating--disabled">
    <i class="ri-star-fill"></i>
    <i class="ri-star-fill"></i>
    <i class="ri-star-line"></i>
    <i class="ri-star-line"></i>
    <i class="ri-star-line"></i>
</div>
<div class="rating__container">
    <i class="ri-star-fill"></i>
    <i class="ri-star-fill"></i>
    <i class="ri-star-line"></i>
    <i class="ri-star-line"></i>
    <i class="ri-star-line"></i>
</div>
<div class="list__stack">
    <ul class="list__style--none">
        <li class="list__item">
            <img class="avatar avatar--xsm" src="../../assets/avatarimg.jpg" alt="avatar-image" />
            <span> Notification 1 </span>
        </li>
        <li class="list__item">
            <img class="avatar avatar--xsm" src="../../assets/avatarimg.jpg" alt="avatar-image" />
            <span> Notification 2 </span>
        </li>
        <li class="list__item">
            <img class="avatar avatar--xsm" src="../../assets/avatarimg.jpg" alt="avatar-image" />
            <span> Notification 3 </span>
        </li>
    </ul>
</div>
<div class="list__container">
    <ol>
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ol>
</div>

<div class="list__container">
    <ol class="list__style--upperAlpha">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ol>
</div>

<div class="list__container">
    <ol class="list__style--lowerAlpha">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ol>
</div>

<div class="list__container">
    <ol class="list__style--lowerRoman">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ol>
</div>

<div class="list__container">
    <ol class="list__style--upperRoman">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ol>
</div>
<div class="list__container">
    <ul>
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ul>
</div>

<div class="list__container">
    <ul class="list__style--square">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ul>
</div>

<div class="list__container">
    <ul class="list__style--none">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ul>
</div>

<div class="list__container">
    <ul class="list__style--round">
        <li class="list__item">Item1</li>
        <li class="list__item">Item2</li>
        <li class="list__item">Item3</li>
    </ul>
</div>
<div class="modal">
    <div class="modal__header">
        <h5 class="modal__title">Modal title</h5>
        <button type="button" class="modal__close" data-bs-dismiss="modal" aria-label="Close">
            <i class="ri-close-line"></i>
        </button>
    </div>
    <div class="modal__body">
        <p>Modal body text goes here.</p>
    </div>
    <div class="modal__footer">
        <button type="button" class="btn btn--secondary" data-bs-dismiss="modal">
            Close
        </button>
        <button type="button" class="btn btn--primary">
            Save changes
        </button>
    </div>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Woodstone</h1>
  <h5>Neque porro quisquam</h5>
  <h6>Est. 1958</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Vanguard</h1>
  <h5>Cras ornare tristique elit</h5>
  <h6>Est. 1965</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Spartacus</h1>
  <h5>At vero eos et accusamus</h5>
  <h6>Est. 1977</h6>
</div>
_______________________________-
  
  @import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1306 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  color: #bdbdbd;
  margin: 40px 25px;
  max-width: 285px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.snip1306 h1,
.snip1306 h5 {
  margin: 0;
  text-transform: uppercase;
}
.snip1306 h1 {
  font-family: 'Righteous', Arial, sans-serif;
  font-size: 1.8em;
  line-height: 50px;
  position: relative;
  background-color: #bdbdbd;
  color: #212121;
  text-align: center;
  margin: 0 30px 10px;
}
.snip1306 h1:before,
.snip1306 h1:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  border-width: 25px 10px;
  border-style: solid;
}
.snip1306 h1:before {
  left: -23px;
  border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.snip1306 h1:after {
  right: -23px;
  border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.snip1306 h5 {
  font-weight: 500;
}
.snip1306 h6 {
  margin: 0;
  display: inline-block;
  position: relative;
}
.snip1306 h6:before,
.snip1306 h6:after {
  position: absolute;
  height: 1px;
  content: '';
  background: #bdbdbd;
  width: 30px;
  top: 50%;
}
.snip1306 h6:before {
  left: -35px;
}
.snip1306 h6:after {
  right: -35px;
}
.snip1306 .diamond {
  width: 10px;
  height: 10px;
  margin: 15px 5px;
  display: inline-block;
  line-height: 80px;
  background: #bdbdbd;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
.snip1306 .diamond:nth-of-type(2) {
  -webkit-transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
  transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
}
/* Demo purposes only */
body {
  background-color: #212121;
}
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample47.jpg" alt="sample47" /></div>
  <figcaption>
    <h3>Fleece Marigold</h3>
    <h4>Founder</h4>
    <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" alt="sample83" /></div>
  <figcaption>
    <h3>Norman Gordon</h3>
    <h4>Web Designer</h4>
    <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" /></div>
  <figcaption>
    <h3>Ruby Von Rails</h3>
    <h4>Public Relations</h4>
    <p>The only skills I have the patience to learn are those that have no real application in life. </p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>


____________________________________________________________________________________-
  @import url(https://fonts.googleapis.com/css?family=Open+sans);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
.snip1515 {
  font-family: 'Open Sans', Arial, sans-serif;
  position: relative;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: center;
  line-height: 1.4em;
  font-size: 14px;
  box-shadow: none !important;
}

.snip1515 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.snip1515 .profile-image {
  display: inline-block;
  width: 80%;
  z-index: 1;
  position: relative;
  padding: 10px;
  border: 2px solid #e8b563;
}

.snip1515 .profile-image img {
  max-width: 100%;
  vertical-align: top;
}

.snip1515 figcaption {
  width: 100%;
  background-color: #F2F2F2;
  color: #555;
  padding: 125px 25px 25px;
  margin-top: -100px;
  display: inline-block;
}

.snip1515 h3,
.snip1515 h4,
.snip1515 p {
  margin: 0 0 5px;
}

.snip1515 h3 {
  font-weight: 600;
  font-size: 1.3em;
  font-family: 'Playfair Display', Arial, sans-serif;
}

.snip1515 h4 {
  color: #8c8c8c;
  font-weight: 400;
  letter-spacing: 2px;
}

.snip1515 p {
  font-size: 0.9em;
  letter-spacing: 1px;
  opacity: 0.9;
}

.snip1515 .icons {
  text-align: center;
  width: 100%;
}

.snip1515 i {
  padding: 10px 2px;
  display: inline-block;
  font-size: 18px;
  font-weight: normal;
  color: #e8b563;
  opacity: 0.75;
}

.snip1515 i:hover {
  opacity: 1;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
+++++++++++++++++++++_________________________________________________

/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
<div class="card-horizontal">
    <div class="card-horizontal-media">
        <img class="responsive-img" src="/src/img/backpack1.jpg" alt="no img">
    </div>
    <div class="d-flex flex-column p-1 gap-1 w-100-per">
        <div class="card-body-header">
            <h2 class="font-size-md m-0">Backpack</h2>
            <h class="font-size-sm color-gray-500">Grey & Black</h>
            <div class="d-flex flex-column font-weight-600">
                <div class="d-flex gap-1">
                    <span>₹ 699 </span>
                    <span class="text-decoration-linethrough"> ₹ 1398</span>
                </div>
                <div class="color-green-600">50% off</div>
            </div>
        </div>
        <button class="btn btn-add-cart btn-secondary w-100-per font-size-regular">Add to Cart</button>
        <button class="btn btn-add-cart btn-outline w-100-per font-size-regular">Remove From Wishlist</button>
    </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
.snip1241 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.snip1241 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1241 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1em;
  padding: 0;
}
.snip1241 a {
  padding: 0.5em 0.8em;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}
.snip1241 a:before,
.snip1241 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
.snip1241 a:before {
  right: 0;
  top: 0;
  border-right: 3px solid #9b59b6;
  border-top: 3px solid #9b59b6;
  -webkit-transform: translate(-100%, 50%);
  transform: translate(-100%, 50%);
}
.snip1241 a:after {
  left: 0;
  bottom: 0;
  border-left: 3px solid #9b59b6;
  border-bottom: 3px solid #9b59b6;
  -webkit-transform: translate(100%, -50%);
  transform: translate(100%, -50%);
}
.snip1241 a:hover,
.snip1241 .current a {
  color: #ffffff;
}
.snip1241 a:hover:before,
.snip1241 .current a:before,
.snip1241 a:hover:after,
.snip1241 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}
/* Demo purposes only */
body {
  background-color: #212121;
}
<ul class="snip1241">
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<ul class="snip1241">
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>
/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
@import url(https://fonts.googleapis.com/css?family=Work+Sans);
.snip1526 {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1526 *,
.snip1526 *:after {
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1526 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  -webkit-perspective: 50em;
  perspective: 50em;
}

.snip1526 a {
  backface-visibility: hidden;
  color: #ffffff;
  display: block;
  line-height: 2.2em;
  padding: 0 1.4em;
  position: relative;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #667273;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.snip1526 a:after {
  background-color: #5c122e;
  color: transparent;
  content: attr(data-hover);
  top: 0%;
  line-height: 2.2em;
  position: absolute;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(0%) rotateY(90deg);
  transform: translateX(0%) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.snip1526 li:hover a,
.snip1526 li.current a {
  -webkit-transform: translate(-50%) rotateY(-90deg);
  transform: translate(-50%) rotateY(-90deg);
  background-color: #1e2222;
  color: transparent;
}

.snip1526 li:hover a:after,
.snip1526 li.current a:after {
  background-color: #b12358;
  color: #ffffff;
  cursor: pointer;
}
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Work+Sans);
.snip1526 {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1526 *,
.snip1526 *:after {
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1526 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  -webkit-perspective: 50em;
  perspective: 50em;
}

.snip1526 a {
  backface-visibility: hidden;
  color: #ffffff;
  display: block;
  line-height: 2.2em;
  padding: 0 1.4em;
  position: relative;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #667273;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.snip1526 a:after {
  background-color: #5c122e;
  color: transparent;
  content: attr(data-hover);
  top: 0%;
  line-height: 2.2em;
  position: absolute;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(0%) rotateY(90deg);
  transform: translateX(0%) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.snip1526 li:hover a,
.snip1526 li.current a {
  -webkit-transform: translate(-50%) rotateY(-90deg);
  transform: translate(-50%) rotateY(-90deg);
  background-color: #1e2222;
  color: transparent;
}

.snip1526 li:hover a:after,
.snip1526 li.current a:after {
  background-color: #b12358;
  color: #ffffff;
  cursor: pointer;
}
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
/* Demo purposes only */
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
  snippet.forEach(function (snippet) {
    snippet.addEventListener('mouseout', function (event) {
      if (event.target.parentNode.tagName === 'figure') {
        event.target.parentNode.classList.remove('hover')
      } else {
        event.target.parentNode.classList.remove('hover')
      }
    });
  });
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>



@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1585 {
  background-color: rgb(41, 46, 57);
  color: #fff;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.snip1585 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1585:before,
.snip1585:after {
  background-color: rgba(46, 52, 64,  0.5);
  border-top: 50px solid rgba(46, 52, 64, 0.5);
  border-bottom: 50px solid rgba(46, 52, 64, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.snip1585:before {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585:after {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1585 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.snip1585 h3 {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.snip1585 h3 span {
  display: block;
  font-weight: 700;
}

.snip1585 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.snip1585:hover > img,
.snip1585.hover > img {
  opacity: 0.7;
}

.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.snip1585:hover figcaption,
.snip1585.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>



<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>



<svg width="298" height="181" viewBox="0 0 298 181" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M47 79L59.1244 155.5H34.8756L47 79Z" fill="#FF9029" />
    <path d="M203 79L215.124 155.5H190.876L203 79Z" fill="#FF9029" />
    <path d="M248 105L235.876 28.5L260.124 28.5L248 105Z" fill="#FF9029" />
    <path d="M95 76L88.0718 28.75L101.928 28.75L95 76Z" fill="#FF9029" />
    <path d="M8 113L1.0718 28.25L14.9282 28.25L8 113Z" fill="#FF9029" />
    <path d="M288.5 98L296.727 155.75H280.273L288.5 98Z" fill="#FF9029" />
  </svg>
<svg width="298" height="181" viewBox="0 0 298 181" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M47 79L59.1244 155.5H34.8756L47 79Z" fill="#FF9029" />
    <path d="M203 79L215.124 155.5H190.876L203 79Z" fill="#FF9029" />
    <path d="M248 105L235.876 28.5L260.124 28.5L248 105Z" fill="#FF9029" />
    <path d="M95 76L88.0718 28.75L101.928 28.75L95 76Z" fill="#FF9029" />
    <path d="M8 113L1.0718 28.25L14.9282 28.25L8 113Z" fill="#FF9029" />
    <path d="M288.5 98L296.727 155.75H280.273L288.5 98Z" fill="#FF9029" />
  </svg>
.Buttonbg {
  width: 356px;
  height: 128px;
  background-color: red;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: left;
  font-size: 48px;
  letter-spacing: 0;
  color: White;
  width: 87px;
  height: 60px;
  position: absolute;
  left: 145px;
  top: 0;
  z-index: 2;
}
svg {
  position: absolute;
  top: -20px;
  left: 50px;
  z-index: 0;
}
let box = document.querySelector(".box");
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
let bg = img1.querySelector('image');

function moverCursor(e) {
  let x = e.pageX - t.left - (t.width / 2);
  let y = e.pageY - t.top - (t.height / 2);
  
  img1.style.setProperty(`top`, `${y}px`);
  img1.style.setProperty(`left`, `${x}px`);
  
  bg.style.setProperty(`x`, `${-x}px`);
  bg.style.setProperty(`y`, `${-y}px`);
}
box.addEventListener("mousemove", moverCursor);

/*CSS*/
.box {
  width: 500px;
  height: 250px;
  border: 2px solid red;
  position: relative;
  background-image: url(https://picsum.photos/600/250);
  overflow: hidden;
}

.img1 {
  position: absolute;
}



/*HTML*/
<div class="box">
  <svg class="img1"  width="150" height="150">
    <defs>
      <filter id="filter">
        <feGaussianBlur stdDeviation="10" />
      </filter>
      <mask id="mask">
        <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter)"></ellipse>
      </mask>
    </defs>
    <image href="https://picsum.photos/500/250" width="500" height="250" mask="url(#mask)"></image>
  </svg>
</div>

<h1 class="mt-2 font__size--xxlg">Typography</h1>
<h2 class="mt-2 font__size--xlg">Typography</h2>
<h3 class="mt-2 font__size--lg">Typography</h3>
<h4 class="mt-2 font__size--md">Typography</h4>
<h5 class="mt-2 font__size--sm">Typography</h5>
<h6 class="mt-2 font__size--xsm">Typography</h6>
<h1 class="mt-2 font__size--xxlg font__weight--800">
    Typography - 800
</h1>
<h1 class="mt-2 font__size--xxlg font__weight--700">
    Typography - 700
</h1>
<h1 class="mt-2 font__size--xxlg font__weight--600">
    Typography - 600
</h1>
<h1 class="mt-2 font__size--xxlg font__weight--500">
    Typography - 500
</h1>
<h1 class="mt-2 font__size--xxlg font__weight--400">
    Typography - 400
</h1>
<h1 class="mt-2 font__size--xxlg font__weight--300">
    Typography - 300
</h1>
<h1 class="mt-2 font__size--xxlg font__weight--200">
    Typography - 200
</h1>
<img class="responsive-img br-round" src="https://picsum.photos/200/200" alt="no-img">
<img class="responsive-img" src="https://picsum.photos/200/200" alt="no-img">
<div class="d-flex flex-column card br-top-sm">
    <div class="card-media">
        <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img">
        <div class="card-body card-body-overlay">
            <h2 class="font-size-md m-0">Backpack</h2>
            <h6 class="font-size-sm color-gray-500 m-0">Grey & Black</h6>
            <div class="card-desc font-weight-600">
                <div>₹ 699</div>
                <div class="text-decoration-linethrough">₹ 1398</div>
                <div class="color-green-600">50% off</div>
            </div>
        </div>
    </div>
    <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">View Cart</button>
</div>
<div class="card-horizontal">
    <div class="card-horizontal-media">
        <img class="responsive-img" src="/src/img/backpack1.jpg" alt="no img">
    </div>
    <div class="d-flex flex-column p-1 gap-1 w-100-per">
        <div class="card-body-header">
            <h2 class="font-size-md m-0">Backpack</h2>
            <h class="font-size-sm color-gray-500">Grey & Black</h>
            <div class="d-flex flex-column font-weight-600">
                <div class="d-flex gap-1">
                    <span>₹ 699 </span>
                    <span class="text-decoration-linethrough"> ₹ 1398</span>
                </div>
                <div class="color-green-600">50% off</div>
            </div>
        </div>
        <button class="btn btn-add-cart btn-secondary w-100-per font-size-regular">Add to Cart</button>
        <button class="btn btn-add-cart btn-outline w-100-per font-size-regular">Remove From Wishlist</button>
    </div>
</div>
<form>
    <div class="mb-2">
        <label for="email" class="input__label">Email<span class="input__required">*</span>
        </label>
        <input id="email" class="mt-1 input__control" type="email" placeholder="Enter email" required />
    </div>

    <div class="mb-2">
        <label for="password" class="input__label">password<span class="input__required">*</span>
        </label>
        <input id="password" class="mt-1 input__control" type="password" placeholder="Enter password" required />
    </div>
</form>
<form>
    <div class="mb-2">
        <label for="email" class="input__label">Email<span class="input__required">*</span>
        </label>
        <input id="email" class="mt-1 input__control" type="email" placeholder="Enter email" required />
        <div class="invalid__feedback">Please enter correct email.</div>
    </div>

    <div class="mb-2">
        <label for="password" class="input__label">password<span class="input__required">*</span>
        </label>
        <input id="password" class="mt-1 input__control" type="password" placeholder="Enter password" required />
        <div class="invalid__feedback">
            Please enter correct Password
        </div>
    </div>
</form>
<div class="card card-textonly p-relative" style="max-width: 350px;">
    <h3 class="m-0">Backpack</h3>
    <h5>This is backpack</h5>
    <div class="card-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa iusto architecto quae? Sit, autem ab? Laboriosam fuga voluptatem dolorum, eveniet totam laborum repellat fugiat, impedit placeat ex, velit beatae.
    </div>
    <button class="btn-icon card-badge-topRight"> <span class="material-icons">clear</span> </button>
    <div class="card-footer">
        <button class="btn btn-primary">Save</button>
        <button class="btn btn-outline">Cancel</button>
    </div>
</div>
<form>
    <div class="mb-2">
        <label for="email" class="input__label">Email<span class="input__required">*</span>
        </label>
        <input id="email" class="mt-1 input__control" type="email" placeholder="Enter email" required />
        <div class="invalid__feedback">Please enter correct email.</div>
    </div>

    <div class="mb-2">
        <label for="password" class="input__label">password<span class="input__required">*</span>
        </label>
        <input id="password" class="mt-1 input__control" type="password" placeholder="Enter password" required />
        <div class="invalid__feedback">
            Please enter correct Password
        </div>
    </div>
</form>
 <div class="d-flex flex-column card br-top-sm">
     <div class="card-media">
         <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img">
         <div class="badge-text bg-green-200 color-green-600 card-badge-topLeft font-size-sm"> 			<span class="material-icons badge-icon"> task_alt </span>Best Value</div>
     </div>
     <div class="card-body">
         <h2 class="font-size-md m-0">Backpack</h2>
         <h class="font-size-sm color-gray-500">Grey & Black</h>
         <div class="card-desc font-weight-600">
             <div>₹ 699</div>
             <div class="text-decoration-linethrough">₹ 1398</div>
             <div class="color-green-600">50% off</div>
         </div>
     </div>
     <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">View Cart</button>
 </div>

 <div class="d-flex flex-column card br-top-sm">
     <div class="card-media">
         <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img">
         <div class="badge-text bg-warn-200 color-warn-600 card-badge-topLeft font-size-sm">
		 <span class="material-icons badge-icon"> trending_up </span>Best Seller</div>
     </div>
     <div class="card-body">
         <h2 class="font-size-md m-0">Backpack</h2>
         <h6 class="font-size-sm color-gray-500 m-0">Grey & Black</h6>
         <div class="card-desc font-weight-600">
             <div>₹ 699</div>
             <div class="text-decoration-linethrough">₹ 1398</div>
             <div class="color-green-600">50% off</div>
         </div>
     </div>
     <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">View Cart</button>
 </div>
<div class="d-flex flex-column card br-top-sm">
    <div class="card-media">
        <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img">
        <button class="btn-icon bg-white card-badge-topRight ">
			<span class="material-icons color-red-600 ">favorite</span>
		</button>
    </div>
    <div class="card-body">
        <h2 class="font-size-md m-0">Backpack</h2>
        <h class="font-size-sm color-gray-500">Grey & Black</h>
        <div class="card-desc font-weight-600">
            <div>₹ 699</div>
            <div class="text-decoration-linethrough">₹ 1398</div>
            <div class="color-green-600">50% off</div>
        </div>
    </div>
    <button class="btn btn-add-cart btn-secondary w-100-per font-size-regular">View Cart</button>
</div>

<div class="d-flex flex-column card br-top-sm">
    <div class="card-media">
        <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img">
        <button class="btn-icon bg-white  card-badge-topRight">
			<span class="material-icons color-gray-600 ">clear</span>
		</button>
    </div>
    <div class="card-body">
      <h2 class="font-size-md m-0">Backpack</h2>
      <h class="font-size-sm color-gray-500">Grey & Black</h>
      <div class="card-desc font-weight-600">
        <div>₹ 699</div>
        <div class="text-decoration-linethrough">₹ 1398</div>
        <div class="color-green-600">50% off</div>
      </div>
    </div>
    <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">View Cart</button>
</div>
<div class="d-flex flex-column card br-top-sm">
    <div class="card-media">
        <img class="responsive-img br-top-sm" src="https://picsum.photos/300/250" alt="no img">
    </div>
    <div class="card-body">
        <h2 class="font-size-md m-0">Backpack</h2>
        <h class="font-size-sm color-gray-500">Grey & Black</h>
        <div class="card-desc font-weight-600">
            <div>₹ 699</div>
            <div class="text-decoration-linethrough">₹ 1398</div>
            <div class="color-green-600">50% off</div>
        </div>
    </div>
    <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">Add to Cart</button>
</div>

<div class="d-flex flex-column card br-top-sm">
    <div class="card-media">
        <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img">
        <button class="btn-icon card-badge-topRight"> 
          <span class="material-icons">favorite_border</span> 
		</button>
    </div>
    <div class="card-body">
        <h2 class="font-size-md m-0">Backpack</h2>
        <h class="font-size-sm color-gray-500">Grey & Black</h>
        <div class="card-desc font-weight-600">
            <div>₹ 699</div>
            <div class="text-decoration-linethrough">₹ 1398</div>
            <div class="color-green-600">50% off</div>
        </div>
    </div>
    <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">Add to Cart</button>
</div>
<link rel="stylesheet" href="style.css" />
 <button class="btn btn-primary">Primary</button>
 <button class="btn btn-secondary">Secondary</button>
 <button class="btn-link">Link</button>
<button class="btn btn-outline">Outline</button>
<button class="btn-icon"><span class="material-icons">delete</span> </button>
<button class="btn-icon"><span class="material-icons">share</span></button>
<button class="btn-icon"><span class="material-icons">shopping_cart</span></button>
<button class="btn-icon"><span class="material-icons">send</span></button>
<button class="btn-floating fixed-bottom-right bg-red-200 square-md color-red-600 b-0 br-round">	<span class="material-icons">edit</span></button>
<button class="btn-floating fixed-bottom-right bg-green-200 square-md color-green-600 b-0 br-round">
	<span class="material-icons">add</span></button>
<div class="badge-parent">
    <img class="square-sm br-round" src="/src/img/maleavatar.svg" alt="no">
    <div class="badgesFor-status bg-red-600"></div>
</div>
<div class="badge-parent">
    <img class="square-md br-round" src="/src/img/maleavatar.svg" alt="no">
    <div class="badgesFor-status badgesFor-status-md  square-xs bg-warn-600"></div>
</div>
<div class="badge-parent">
    <img class="square-lg br-round" src="/src/img/maleavatar.svg" alt="no">
    <div class="badgesFor-status badgesFor-status-lg bg-green-600"></div>
</div>
<img class="img--round" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
<img class="img--round" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
<div class="badge-text bg-green-200 color-green-600"> <span class="material-icons badge-icon "> task_alt </span>Done</div>
<div class="badge-text bg-warn-200 color-warn-600"> <span class="material-icons badge-icon "> pending </span>In-Process</div>
<div class="badge-text bg-red-200 color-red-600"> <span class="material-icons badge-icon "> remove_circle </span>Not done </div>
<div class="badge-parent">
    <span class="material-icons"> shopping_cart </span>
    <div class="badge-with-icon">5</div>
</div>

<div class="badge-parent">
    <span class="material-icons"> mail </span>
    <div class="badge-with-icon">45</div>
</div>

<div class="badge-parent">
    <span class="material-icons"> favorite_border </span>
    <div class="badge-with-icon">3</div>
</div>

<div class="badge-parent">
    <span class="material-icons"> notifications_none </span>
    <div class="badge-with-icon">1</div>
</div>
 <img class="img--responsive" loading="lazy" src="../../assets/camera.jpg" alt="responsive-img" />
<div class="badge-parent">
    <img class="square-sm br-round" src="/src/img/femaleavatar.svg" alt="avatar not available">
    <div class="badgesFor-status bg-red-600"></div>
</div>
<div class="badge-parent">
    <img class="square-md br-round" src="/src/img/maleavatar.svg" alt="avatar not available">
    <div class="badgesFor-status badgesFor-status-md  square-xs bg-warn-600"></div>
</div>
<div class="badge-parent">
    <img class="square-lg br-round" src="/src/img/femaleavatar.svg" alt="avatar not available">
    <div class="badgesFor-status badgesFor-status-lg bg-green-600"></div>
</div>
<img class="square-sm br-round" src="/src/img/maleavatar.svg" alt="avatar not available">
<img class="square-md br-round" src="/src/img/femaleavatar.svg" alt="avatar not available">
<img class="square-lg br-round" src="/src/img/maleavatar.svg" alt="avatar not available">
@import url("https://bliss-ui.netlify.app/lib/index.css");
 <div class="card card__horizontal">
     <img class="card__img card__img__horizontal" src="../../assets/camera.jpg" alt="img" />
     <div class="card__details__horizontal">
         <div class="card__details">
             <h3 class="card__title">Canon D6500</h3>
             <small class="card__sub-title">Canon D6500 super zoom camera</small>
         </div>
         <div class="card__price-section card__horizontal__price">
             <strong class="selling__price">₹ 20000</strong>
             <small class="original__price">₹ 40000</small>
             <p class="card__discount">(50% off)</p>
         </div>

         <div class="card__quantity">
             <p>
                 Quantity:
                 <button type="button" class="btn--float card__quantity-btn">
                     <i class="ri-subtract-line"></i>
                 </button>
                 <input type="text" class="quantity-value" value="1" />
                 <button type="button" class="btn--float card__quantity-btn">
                     <i class="ri-add-line"></i>
                 </button>
             </p>
         </div>
         <div class="card__horizontal__buttons">
             <button type="button" class="btn card__btn card__btn__horizontal">
                 <i class="ri-shopping-cart-2-fill card__icon"></i> Add to
                 cart
             </button>
             <button type="button" class="btn card__btn__horizontal">
                 <i class="ri-heart-fill card__icon card__icon__horizontal"></i>
                 Wishlist
             </button>
         </div>
     </div>
 </div>
<div class="card card__text">
    <h3 class="card__text__title">PRICE DETAILS</h3>
    <hr class="line__break" />
    <p class="card__text__item">
        <span class="card__text__label">Price (<span>2</span> items)</span>
        <span class="card__price__align">₹8000</span>
    </p>
    <p class="card__text__item">
        <span class="card__text__label">Discount</span>
        <span class="discount-charges card__price__align">- ₹400</span>
    </p>
    <p class="card__text__item">
        <span class="card__text__label">Delivery charges</span>
        <span class="card__price__align">
            <span class="original__price">199</span>
            <span class="card__discount">Free</span>
        </span>
    </p>
    <hr class="line-separate" />
    <p class="card__text__item">
        <span class="card__text__label"><strong>TOTAL AMOUNT</strong></span>
        <span class="card__price__align">₹7600</span>
    </p>
    <hr class="line-separate" />
    <p class="card__text__label">
        You have saved
        <strong class="discount-charges">₹ 599</strong> on this
        purchase.
    </p>
    <button type="button" class="btn btn--success">
        Place Order
    </button>
</div>
<v-form v-model="isFormValid">
  <!-- all input elements go here -->
</v-form>

<!-- disable if form is not valid -->
<v-btn :disabled="!isFormValid">Add</v-btn>
<div class="card card__vertical">
    <div class="card__overlay__container card__overlay">
        <img class="card__img" src="../../assets/camera.jpg" alt="img" />
        <div class="card__overlay__details">
            <h3 class="card__overlay__title">OUT OF STOCK</h3>
        </div>
    </div>
    <div class="card__details">
        <h3 class="card__title">Canon D6500</h3>
        <small class="card__sub-title">Canon D6500 super zoom camera</small>
    </div>
    <div class="card__price-section">
        <strong class="selling__price">₹ 20000</strong>
        <small class="original__price">₹ 40000</small>
        <p class="card__discount">(50% off)</p>
    </div>
    <div class="card__buttons">
        <button type="button" class="btn btn__disabled">
            <i class="ri-shopping-cart-2-fill card__icon"></i> Add to cart
        </button>
        <button type="button" class="btn">
            <i class="ri-heart-fill card__icon"></i> Wishlist
        </button>
    </div>
</div>
<div class="card card__vertical">
    <div class="card__overlay__container">
        <img class="card__img" src="../../assets/camera.jpg" alt="img" />
        <small class="card__badge">Must Buy</small>
    </div>
    <div class="card__details">
        <h3 class="card__title">Canon D6500</h3>
        <small class="card__sub-title">Canon D6500 super zoom camera</small>
    </div>
    <div class="card__price-section">
        <strong class="selling__price">₹ 20000</strong>
        <small class="original__price">₹ 40000</small>
        <p class="card__discount">(50% off)</p>
    </div>
    <div class="card__buttons">
        <button type="button" class="btn">
            <i class="ri-shopping-cart-2-fill card__icon"></i> Add to cart
        </button>
        <button type="button" class="btn">
            <i class="ri-heart-fill card__icon"></i> Wishlist
        </button>
    </div>
</div>
<link rel="stylesheet" href="https://bliss-ui.netlify.app/lib/index.css" />
<div class="card card__vertical">
    <img class="card__img" src="../../assets/camera.jpg" alt="img" />
    <div class="card__details">
        <h3 class="card__title">Canon D6500</h3>
        <small class="card__sub-title">Canon D6500 super zoom camera</small>
    </div>
    <div class="card__price-section">
        <strong class="selling__price">₹ 20000</strong>
        <small class="original__price">₹ 40000</small>
        <p class="card__discount">(50% off)</p>
    </div>
    <div class="card__buttons">
        <button type="button" class="btn">
            <i class="ri-shopping-cart-2-fill card__icon"></i> Add to cart
        </button>
        <button type="button" class="btn">
            <i class="ri-heart-fill card__icon"></i> Wishlist
        </button>
    </div>
</div>
<div class="modal">
  <div class="modal__head">
    <h2 class="modal__title">Modal Title</h2>
    <span class="modal__close"><i class="fa-solid fa-xmark"></i></span>
  </div>
  <hr />
  <p class="modal__description">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, numquam.
  </p>

  <hr />
  <div class="modal__CTA">
    <a class="modal__primary--btn" href="#">Close</a>
    <a class="modal__secondary--btn" href="#">Save Changes</a>
  </div>
</div>
 <div class="ratings">
     <span class="ratings-star">
         <i class="fa-solid fa-star"></i>
         <i class="fa-solid fa-star"></i>
         <i class="fa-solid fa-star"></i>
         <i class="fa-solid fa-star off"></i>
         <i class="fa-solid fa-star off"></i>
     </span>
 </div>
<!-- CSS -->
   <style>
      .tabbed-content {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
        margin-left: 20px;
      }

      .tabs-wrapper {
        display: none;
      }

      .tabs-wrapper.current {
        display: inherit;
      }

      .tabs {
        margin: 0;
        padding: 0;
        margin-right: 30px;
        list-style: none;
        display: flex;
        line-height: normal;
      }
      .side.tabs {
        width: 200px;
        float: left;
        display: block;
        margin-top: 0px;
        height: 700px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #f2f2f2;
      }

      /* Individual tab */
      .tab-link {
        color: #fff;
        display: block;
        padding: 15px 25px;
        margin-bottom: 0px;
        background: #c2c2c2;
        cursor: pointer;
        width: 150px;
        text-align: center;
        word-break: break-word;
        letter-spacing: 1.5px;
      }
      .side.tab-link {
        width: 225px;
        text-align: left;
        margin-top: 0px !important;
      }
      .tab-link:hover {
        background: #00693c;
      }
      .tab-link.current {
        background: #00693c;
        color: #fff;
      }
      .tab-content {
        display: none;
        border: 4px solid #cccccc;
        padding: 20px;
        margin: 0;
        float: left;
        min-height: 700px;
        width: 75%;
        box-sizing: border-box;
        position: relative;
      }
      .tab-content.current {
        display: inherit;
      }
    </style>


<!-- HTML FOR THE TABS -->
<div class="tabbed-content">
    <!-- Top Tab Navigation -->
    <ul class="tabs">
        <li class="top-nav tab-link current" data-tab="tides">TIDES</li>
        <li class="top-nav tab-link" data-tab="kentico">Kentico</li>
    </ul>

    <!-- Tabs Wrapper TIDES -->
    <div class="tabs-wrapper current" id="tides">
        <!-- Archive Video -->
        <div class="tab-content current" id="archive">
            <h3>How to Add to the TIDES Feature Archive</h3>
            <p>Small Description here</p>
            <div class="video-wrapper">
                <div class="video-container" id="video-container">
                    <video controls id="video" preload="metadata" width="600" height="400">
                        <source src="../video/2022/Kentico-Staging-Instructions.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>
        </div>

        <!-- Marketing Email Calendar Video -->
        <div class="tab-content" id="calendar">
            <h3>How to Add to the Marketing Email Calendar</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- TIDES SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="archive">
                How to Add to the TIDES Feature Archive
            </li>
            <li class="side tab-link" data-tab="calendar">
                How to Add to the Marketing Email Calendar
            </li>
        </ul>
    </div>

    <!-- Tabs Wrapper KENTICO -->
    <div class="tabs-wrapper" id="kentico">
        <!-- Kentico Staging Environment Video -->
        <div class="tab-content current" id="kenticoStaging">
            <h3>How to Use the Kentico Staging Environment</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- Kentico SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="kenticoStaging">
                How to Use the Kentico Staging Environment
            </li>
        </ul>
    </div>
</div>
<!-- JAVASCRIPT FOR THE TABS -->
<script>
    const sideTabs = () => {
      let tabs = document.querySelectorAll(".side .tab-link");
    		let activeTopTab = document.getElementsByClassName("top-nav tab-link current")[0].getAttribute("data-tab");
    
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				let closestTabWraper = btn.closest(".tabs-wrapper");
    		// only want to remove + add classes to sections that are currently visible or active 
    				if(closestTabWraper.id === activeTopTab) {
            //select only btns related to that top tab and remove the current class from all. Adding it back to only the one clicked. 
    					//this accounts for if a button is clicked on itself
    					let visibleTabs = closestTabWraper.querySelectorAll(".side .tab-link")
    					visibleTabs.forEach(b => b.classList.remove("current"));
    					btn.classList.add("current");
    					//Repeat the process for sections, but adding the class to the tabContent that matches the element id of the clicked tab
    					let relatedSections = closestTabWraper.querySelectorAll(".tab-content");
    					relatedSections.forEach(s =>s.classList.remove("current"));
    					let matchingTab = btn.getAttribute("data-tab");
                  document.getElementById(matchingTab).className += " current";
    				}
    			})
    		})
    };
    
    const topTabs = () => {
      const tabs = document.querySelectorAll(".top-nav");
      const tabWrappers = document.querySelectorAll(".tabs-wrapper");
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				tabs.forEach(b => b.classList.remove("current"));
    				btn.classList.add("current");
    				tabWrappers.forEach(t => t.classList.remove("current"));
    				let matchingWrapper = btn.getAttribute("data-tab");
    				document.getElementById(matchingWrapper).classList.add("current");
    			});
    		})
    };
    
    topTabs();
    sideTabs();
</script>
<div class="slider">
    <input type="range" min="1" max="100" value="50" class="default-slider" />
</div>
<div class="grid-3">
    <div class="grid-items one">Grid Item 1</div>
    <div class="grid-items two">Grid Item 2</div>
    <div class="grid-items three">Grid Item 3</div>
</div>
<div class="grid-2">
    <div class="grid-items">Grid Item 1</div>
    <div class="grid-items">Grid Item 2</div>
</div>
<div class="card">
    <!-- cart media  -->
    <div class="card-media">
        <img class="responsive-img" src="https://picsum.photos/200" />
    </div>
    <!-- cart content  -->
    <div class="card-content">
        <span class="title"> Chrome-book 500 </span>
        <span class="subtitle"> powered by Google </span>
        <div class="card-description">
            <div class="rating">
                <span class="material-icons md-18 rated"> star_rate </span>
                <span class="material-icons md-18 rated"> star_rate </span>
                <span class="material-icons md-18 rated"> star_rate </span>
                <span class="material-icons md-18"> star_rate </span>
                <span class="material-icons md-18"> star_rate </span>
            </div>
            <span>Price : <del>$500</del> &ensp; $455 </span>
        </div>
    </div>
    <!-- cart footer-->
    <div class="card-footer">
        <button class="btn btn-secondary-outline">
            <span class="material-icons md-18"> shopping_cart </span>
            Add to cart
        </button>
        <button class="btn btn-primary">Buy Now</button>
    </div>
</div>
<div class="toast-primary">
    Can't send Message. Retry in 5 seconds.
    <a class="toast-btn">Retry</a>
    <span class="toast-close"><i class="fa-solid fa-xmark"></i></span>
</div>
</div>
<ul class="stacked-list">
              <li class="list-items">Item 1</li>
              <li class="list-items">Item 2</li>
              <li class="list-items">Item 3</li>
              <li class="list-items">Item 4</li>
              <li class="list-items">Item 5</li>
</ul>
<ul class="spaced-list">
              <li class="list-items">Item 1</li>
              <li class="list-items">Item 2</li>
              <li class="list-items">Item 3</li>
              <li class="list-items">Item 4</li>
              <li class="list-items">Item 5</li>
</ul>
<ol class="ordered-list">
    <li class="list-items">Item 1</li>
    <li class="list-items">Item 2</li>
    <li class="list-items">Item 3</li>
    <li class="list-items">Item 4</li>
    <li class="list-items">Item 5</li>
</ol>

<ul class="unordered-list">
    <li class="list-items">Item one</li>
    <li class="list-items">Item two</li>
    <li class="list-items">Item three</li>
    <li class="list-items">Item four</li>
    <li class="list-items">Item five</li>
</ul>
<ol class="ordered-list">
  <li class="list-items">Item 1</li>
  <li class="list-items">Item 2</li>
  <li class="list-items">Item 3</li>
  <li class="list-items">Item 4</li>
  <li class="list-items">Item 5</li>
</ol>

<ul class="unordered-list">
  <li class="list-items">Item one</li>
  <li class="list-items">Item two</li>
  <li class="list-items">Item three</li>
  <li class="list-items">Item four</li>
  <li class="list-items">Item five</li>
</ul>
<form class="form" action="#">
  <div class="input-group">
    <label for="email">Enter your email</label>
    <input type="email" name="email" placeholder="Email" />
    <div class="input-feedback error">Invalid email address!</div>
  </div>

  <div class="input-group">
    <label for="password">Enter your password</label>
    <input type="password" name="email" placeholder="Password" />
    <div class="input-feedback error">incorrect password</div>
  </div>
</form>
<form class="form" action="#">
    <div class="input-group">
        <label for="email">Enter your email</label>
        <input type="email" name="email" placeholder="Email" />
        <div class="success">Valid email address!</div>
    </div>

    <div class="input-group">
        <label for="password">Enter your password</label>
        <input type="password" name="email" placeholder="Password" />
        <div class="success">password accepted</div>
    </div>
</form>
</div>
<form class="form" action="#">
    <div class="input-group">
        <label for="email">Enter your email</label>
        <input type="email" name="email" placeholder="Email" />
    </div>

    <div class="input-group">
        <label for="password">Enter your password</label>
        <input type="password" name="email" placeholder="Password" />
    </div>
</form>
<img class="img-responsive img-round" src="https://picsum.photos/400/400" alt="img" />
<img class="img-responsive" src="https://picsum.photos/400/400" alt="img" />
<div class="saiyan-vertical-card card-overlay">
  <img
    class="card__img"
    src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/10523-1.jpg"
    alt="image"
  />

  <div class="card__body">
    <h3 class="card__heading">Free Authority</h3>
    <h4 class="card__subtext">Dragon Ball Z</h4>
    <div class="card__price__container">
      <span class="card__price">Rs. 599</span>
      <span class="card__price__stricked">Rs. 1499</span>
      <span class="card__price__discount">(60% OFF)</span>
    </div>
    <div class="card__actions">
      <a class="card__btn card__btn__secondary" href="#"
        ><i class="fa-solid fa-cart-arrow-down"></i> Add to Cart</a
      >

      <div class="card__like__btn">
        <div class="card__badge card__icon__badge">
          <span class="card__badge__icon"
            ><i class="fa-regular fa-heart"></i
          ></span>
        </div>
      </div>
    </div>

    <div class="card-overlay-text">
      <div class="card-overlay-text-bg">Out of Stock</div>
    </div>
  </div>
</div>
<div class="saiyan-vertical-card">
  <img
    class="card__img"
    src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/10807752/2019/11/1/343806dd-9194-4142-a930-060b851c8b551572588206480-PRINTOCTOPUS-Men-Tshirts-1101572588204523-1.jpg"
    alt="image"
  />

  <div class="card__body">
    <h3 class="card__heading">Free Authority</h3>
    <h4 class="card__subtext">Dragon Ball Z</h4>
    <div class="card__price__container">
      <span class="card__price">Rs. 599</span>
      <span class="card__price__stricked">Rs. 1499</span>
      <span class="card__price__discount">(60% OFF)</span>
    </div>
    <div class="card__actions">
      <a class="card__btn card__btn__secondary" href="#"
        ><i class="fa-solid fa-cart-arrow-down"></i> Add to Cart</a
      >

      <div class="card__like__btn">
        <div class="card__badge card__icon__badge">
          <span class="card__badge__icon"
            ><i class="fa-regular fa-heart"></i
          ></span>
        </div>

        <div class="ratings">
          <span>4.3 <i class="fa-solid fa-star ratings__icon"></i> | 1.1k</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="saiyan-vertical-card">
  <img
    class="card__img"
    src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/10807752/2019/11/1/343806dd-9194-4142-a930-060b851c8b551572588206480-PRINTOCTOPUS-Men-Tshirts-1101572588204523-1.jpg"
    alt="image"
  />

  <div class="card__body">
    <h3 class="card__heading">Free Authority</h3>
    <h4 class="card__subtext">Dragon Ball Z</h4>
    <div class="card__price__container">
      <span class="card__price">Rs. 599</span>
      <span class="card__price__stricked">Rs. 1499</span>
      <span class="card__price__discount">(60% OFF)</span>
    </div>
    <div class="card__actions">
      <a class="card__btn card__btn--primary" href="#"
        ><i class="fa-solid fa-cart-arrow-down"></i> Go to Cart</a
      >

      <div class="card__like__btn">
        <div class="card__badge card__icon__badge">
          <span class="card__badge__icon"
            ><i class="fa-solid fa-heart"></i
          ></span>
        </div>

        <div class="ratings">
          <span>4.3 <i class="fa-solid fa-star ratings__icon"></i> | 1.1k</span>
        </div>

        <div class="card__popularity__badge__container">
          <span class="card__popularity__badge">New Season</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="saiyan-vertical-card">
  <img
    class="card__img"
    src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/10807752/2019/11/1/343806dd-9194-4142-a930-060b851c8b551572588206480-PRINTOCTOPUS-Men-Tshirts-1101572588204523-1.jpg"
    alt="image"
  />

  <div class="card__body">
    <h3 class="card__heading">Free Authority</h3>
    <h4 class="card__subtext">Dragon Ball Z</h4>
    <div class="card__price__container">
      <span class="card__price">Rs. 599</span>
      <span class="card__price__stricked">Rs. 1499</span>
      <span class="card__price__discount">(60% OFF)</span>
    </div>
    <div class="card__actions">
      <a class="card__btn card__btn--primary" href="#"
        ><i class="fa-solid fa-cart-arrow-down"></i> Move to Cart</a
      >

      <div class="card__close__btn__container">
        <span class="card__close__btn"><i class="fa-solid fa-xmark"></i></span>
      </div>
    </div>
  </div>
</div>
<div class="saiyan-horizontal-card">
    <div class="card__img__container">
        <img class="card__img"
            src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/16847641.jpg"
            alt="cart-img" />
    </div>

    <div class="saiyan-horizontal-card__body">
        <h3>Men Premium Tshirt</h3>
        <h1 class="card__price">
            Rs. 799
            <span class="card__price__stricked">Rs.1599</span>
        </h1>
        <h2 class="card__price__discount">50% off</h2>

        <div class="card__quantity">
            <span>Quantity:</span>
            <span><button class="card__quantity__btn card__quantity__btn--minus">
                    -
                </button>
                <input class="card__quantity__box" type="text" name="" id="" value="2" readonly />
                <button class="card__quantity__btn card__quantity__btn--plus">
                    +
                </button></span>
        </div>

        <div class="card__CTA__container">
            <a class="card__CTA__btn card__CTA__btn--primary" href="#">Remove From Cart</a>
            <a class="card__CTA__btn card__CTA__btn--secondary" href="#">Move to Wishlist</a>
        </div>
    </div>
</div>
<div class="basic-card">
    <div class="basic-card-body">
        <div class="basic-card-header">
            <h3 class="basic-card-title">Our Changing Planet</h3>
            <h5 class="basic-card-author">by Kurt Wagner</h5>
        </div>
        <div class="basic-card-intro">
            <p>
                Visit ten places on our planet that are undergoing the
                biggest changes today.
            </p>
        </div>
    </div>
</div>
<a href="#" class="btn btn--primary">Primary-Solid</a>
<a href="#" class="btn btn--primary btn--primary__icon"><span class="btn__icon"><i class="fa-solid fa-cart-arrow-down"></i></span> Add to Cart</a>
<a href="#" class="btn btn-float">+</a>
<a href="#" class="btn btn--link__btn">Primary Link</a>
<div class="icon-badge">
    <span class="badge__icon"
      ><i class="fas fa-shopping-cart"></i
      ><span class="badge__icon-badge">3</span></span
    >
  </div>

  <div class="icon-badge">
    <span class="badge__icon"
      ><i class="fas fa-bell"></i
      ><span class="badge__icon-badge">2</span></span
    >
  </div>
</div>
<div class="avatar avatar--md">
    <img class="avatar__img avatar__img--lg" src="https://i.pravatar.cc/300
                  " alt="avatar" />
    <span class="avatar__icon--badge avatar__icon--badge--md"></span>
</div>

<div class="avatar avatar--md">
    <img class="avatar__img avatar__img--lg" src="https://i.pravatar.cc/300
                  " alt="avatar" />
    <span class="avatar__icon--badge avatar__icon--badge--md"></span>
</div>

<div class="avatar avatar--md">
    <img class="avatar__img avatar__img--lg" src="https://i.pravatar.cc/300
                  " alt="avatar" />
    <span class="avatar__icon--badge avatar__icon--badge--md"></span>
</div>
<div class="alert alert--error">
  <span class="alert__msg msg--error">This is a error message</span>
</div>

<div class="alert alert--warning">
  <span class="alert__msg msg--alert">This is a warning message</span>
</div>

<div class="alert alert--info">
  <span class="alert__msg msg--info">This is a info message</span>
</div>

<div class="alert alert--success">
  <span class="alert__msg msg--success">This is a success message</span>
</div>
<img class="avatar avatar--xl" src="https://i.pravatar.cc/300" alt="avatar" />

<img class="avatar avatar--lg" src="https://i.pravatar.cc/300" alt="avatar" />

<img class="avatar avatar--md" src="https://i.pravatar.cc/300" alt="avatar" />

<img class="avatar avatar--sm" src="https://i.pravatar.cc/300" alt="avatar" />

<img class="avatar avatar--xs" src="https://i.pravatar.cc/300" alt="avatar" />
.Buttonbg {
  width: 356px;
  height: 128px;
  background-color: #000000;
  border-radius: 25px;
}

#txt {
  font-family: Simonetta;
  text-align: left;
  font-size: 48px;
  letter-spacing: 0;
  color: White;
  width: 87px;
  height: 60px;
  position: absolute;
  left: 145px;
  top: 0;
  z-index:2
}

svg {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 0;
}
<svg width="336" height="113" viewBox="0 0 336 113" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_353_2)">
<ellipse cx="89" cy="56.5" rx="72" ry="39.5" fill="#3A0BC0"/>
</g>
<g filter="url(#filter1_d_353_2)">
<ellipse cx="168" cy="56.5" rx="72" ry="39.5" fill="#3A0BC0"/>
</g>
<g filter="url(#filter2_d_353_2)">
<ellipse cx="247" cy="56.5" rx="72" ry="39.5" fill="#3A0BC0"/>
</g>
<ellipse cx="246.5" cy="56.5" rx="68.5" ry="36.5" fill="black"/>
<ellipse cx="89.5" cy="56.5" rx="68.5" ry="36.5" fill="black"/>
<ellipse cx="164.5" cy="56.5" rx="66.5" ry="36.5" fill="black"/>
<defs>
<filter id="filter0_d_353_2" x="0" y="0" width="178" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_353_2"/>
<feOffset/>
<feGaussianBlur stdDeviation="7.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0853646 0 0 0 0 0.460193 0 0 0 0 0.620833 0 0 0 0.65 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_353_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_353_2" result="shape"/>
</filter>
<filter id="filter1_d_353_2" x="79" y="0" width="178" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_353_2"/>
<feOffset/>
<feGaussianBlur stdDeviation="7.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0853646 0 0 0 0 0.460193 0 0 0 0 0.620833 0 0 0 0.65 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_353_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_353_2" result="shape"/>
</filter>
<filter id="filter2_d_353_2" x="158" y="0" width="178" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_353_2"/>
<feOffset/>
<feGaussianBlur stdDeviation="7.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0853646 0 0 0 0 0.460193 0 0 0 0 0.620833 0 0 0 0.65 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_353_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_353_2" result="shape"/>
</filter>
</defs>
</svg>
 <button class="btn btn--primary">Primary</button>
 <button class="btn btn--secondary">Secondary</button>
 <button class="btn btn--success">Success</button>
 <button class="btn btn--danger">Danger</button>
 <button class="btn btn--warning">Warning</button>
 <button class="btn btn--info">Info</button>
<a href="#" class="btn btn--primary">Primary</a>
<a href="#" class="btn btn--secondary">Secondary</a>
<a href="#" class="btn btn--success">Success</a>
<a href="#" class="btn btn--danger">Danger</a>
<a href="#" class="btn btn--warning">Warning</a>
<a href="#" class="btn btn--info">Info</a>
<button class="btn btn--primary">
    <i class="ri-mail-add-line"></i>
</button>
<button class="btn btn--secondary">
    <i class="ri-twitch-fill"></i>
</button>
<button class="btn btn--success">
    <i class="ri-calendar-check-line"></i>
</button>
<button class="btn btn--danger">
    <i class="ri-mail-send-fill"></i>
</button>
<button class="btn btn--warning">
    <i class="ri-mail-settings-fill"></i>
</button>
<button class="btn btn--info">
    <i class="ri-customer-service-2-fill"></i>
</button>
<div class="btn--float">
    <i class="ri-mail-add-line"></i>
</div>
<div class="btn--float">
    <i class="ri-mail-settings-fill"></i>
</div>
<div class="btn--float">
    <i class="ri-mail-send-fill"></i>
</div>
<div class="toast">
    <div class="toast-item">
        Can't send photo. Retry in 5 minutes
    </div>
    <button class="toast-btn">RETRY</button>
    <i class="fa fa-times toast-icon"></i>
</div>
<div class="rating">
    <i class="fa fa-star checked"></i>
    <i class="fa fa-star checked"></i>
    <i class="fa fa-star checked"></i>
    <i class="fa fa-star"></i>
    <i class="fa fa-star"></i>
</div>
<div class="modal">
    <button onclick="document.getElementById('modal-dis').style.display='block' " class="btn" type="button" id="alert-btn">Open Modal</button>
</div>
<div class="modals" id="modal-dis">
    <div class="modal-display">
        <div onclick="document.getElementById('modal-dis').style.display='none' " class="alert-modal">
            <h4 class="modal-heading">Alert Modal</h4>
            <p class="small-text">Modal Body Text</p>
            <button class="btn action-btn">Action 1</button><button class="btn action-btn">Action 2</button>
        </div>
    </div>
</div>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <h1 class="brand headline-lg p-4">Brand</h1>
    <div class="search-box d-flex align-center justify-between my-4 w-50">
        <input type="text" class="search-input w-100 p-2 m-2 text-sm" placeholder="Search for products..." required />
        <button type="submit" class="btn btn-icon p-4">
            <i class="fas fa-search text-md"></i>
        </button>
    </div>
    <ul class="nav-links d-flex align-center">
        <li>
            <button class="btn btn-primary rounded-sm text-sm p-4">Login</button>
        </li>
        <li class="p-relative text-md icon-badge-wrapper m-4">
            <i class="fas fa-shopping-cart"></i>
            <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
        </li>
        <li class="p-relative text-md icon-badge-wrapper m-4">
            <i class="fas fa-heart"></i>
            <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span>
        </li>
    </ul>
</header>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <h1 class="brand headline-lg p-4">Brand</h1>
    <div class="search-box d-flex align-center justify-between my-4 w-50">
        <input type="text" class="search-input w-100 p-2 m-2 text-sm" placeholder="Search for products..." required />
        <button type="submit" class="btn btn-icon p-4">
            <i class="fas fa-search text-md"></i>
        </button>
    </div>
    <button class="btn btn-primary rounded-sm text-sm p-4">Login</button>
    <button class="btn btn-outline btn-primary-outline  rounded-sm text-sm p-4">Wishlist</button>
</header>