Snippets Collections
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
<?php

add_filter( 'woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields' );
function xa_remove_billing_checkout_fields( $fields ) {
    // change below for the method
    $shipping_method ='local_pickup:1'; 
    // change below for the list of fields
    $hide_fields = array( 'billing_address_1', 'billing_address_2', 'billing_city', 'billing_state', 'billing_postcode' );

    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    // uncomment below line and reload checkout page to check current $chosen_methods
     print_r($chosen_methods);
    $chosen_shipping = $chosen_methods[0];

    foreach($hide_fields as $field ) {
        if ($chosen_shipping == $shipping_method) {
            $fields['billing'][$field]['required'] = false;
            $fields['billing'][$field]['class'][] = 'hide';
        }
        $fields['billing'][$field]['class'][] = 'billing-dynamic';
    }

    return $fields;
}

add_action( 'wp_footer', 'cart_update_script', 999 );
function cart_update_script() {
    if (is_checkout()) :
    ?>
    <style>
        .hide {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {

            // woocommerce_params is required to continue, ensure the object exists
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }

            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:1 accordingly 
                $('.billing-dynamic').toggleClass('hide', this.value == 'local_pickup:1');
            });
        });
    </script>
    <?php
    endif;
}
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
.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";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
/* 
	https://www.youtube.com/watch?v=q0E1hbcj-NI
    Browsersync + Sass + Gulp in 15 minutes
    
	install as devDependencies:
	npm install browser-sync cssnano gulp gulp-cli gulp-postcss gulp-sass gulp-terser sass -D    
*/

// run gulp by typing on terminal : gulp
// error: gulp-sass no longer has a default Sass compiler; please set one yourself.

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// sass task
function sassTask() {
  return src("./sass/style.scss", { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest("dist/css", { sourcemaps: "." }));
}

// javascript task
function jsTask() {
  return src("./js/index.js", { sourcemaps: true })
    .pipe(terser())
    .pipe(dest("dist/js", { sourcemaps: "." }));
}

// browsersync
function browserSyncServer(callback) {
  browsersync.init({
    server: {
      baseDir: ".",
    },
  });
  callback();
}

function browserSyncReload(callback) {
  browsersync.reload();
  callback();
}

// watch task
function watchTask() {
  watch("*.html", browserSyncReload);
  watch(
    ["./sass/**/*.scss", ".js/**/*.js"],
    series(sassTask, jsTask, browserSyncReload)
  );
}

// gulp workflow
exports.default = series(sassTask, jsTask, browserSyncServer, watchTask);
<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
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');
});
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
.gradient {
  background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);
  color: transparent;
  -webkit-background-clip: text;
}
#flyout1, #flyout2, #flyout3 {
    margin:0;
    padding:0;
    width:990px;
    overflow:hidden;
}
#flyout1 {
}
#flyout2 {
    background:transparent url(../images/popupBG1.png) top left no-repeat;
}
#flyout3 {
}
UL.paginate {
    float:left;
    margin:0;
    padding:0;
    height:260px;
    display:block;
}
UL.paginate LI {
    float:left;
    margin:40px 30px 20px 27px;
    padding:0;
    display:inline;
    width:130px;
    height:200px;
}
#scrollable {
    margin-top:10px;
    float:left;
    background-color:#eee;
    width:990px;
    border-top: 1px;
    border-top-color: #CCC;
    border-top-style: solid;
}
.pager {
    margin-right:10px;
    overflow:hidden;
    padding:1em 0;
    float:right;
}
.pager li {
    float:left;
    list-style-type:none;
    margin-right:.3em;
    font-size:1.1em;
}
.pager a {
    color:#FF9182;
    outline:none;
    text-decoration:underline;
}
.pager a:hover {
    text-decoration:none;
}
.pager .active a {
    color:#666;
    font-weight:bold;
}
.pager .disabled {
    width:32px;
    text-indent:-9999px;
}
/* PAGINATED CONTENT */
 #subProd {
    float:left;
    margin:0;
    padding:0;
    width:130px;
}
#subProd img.thumb {
    margin:0;
    padding:0 10px;
    background-color:#fff;
    border:1px solid #ccc;
}
.button, .button1, .button2, .button3, .button4, .button5, .qv {
    float:left;
    background-image: linear-gradient(#ffffff, #eeeeee);
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #666;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    min-height: 18px;
    padding: 5px 10px;
    text-decoration:none;
}
#subProd .qv {
    float:right;
    margin:0;
    padding:0;
    cursor: pointer;
    padding:5px 5px 5px 6px;
}
#subProd .qv IMG {
    border:0 none;
    margin:0;
    padding:0;
}
#subProd .product P {
    margin:5px 0;
    padding:0;
    line-height:13px;
    min-height:13px;
}
#subProd .product .title {
    color:#666;
    font-size:13px;
}
#subProd .product .number {
    color:#666;
    font-size:11px;
}
#subProd .product .price {
    font-size:20px;
    font-weight:bold;
    margin-bottom:3px;
    line-height:20px;
}
// Change text read more boton woocommerce
add_filter( 'gettext', 'ds_change_readmore_text', 20, 3 );

function ds_change_readmore_text( $translated_text, $text, $domain ) {
if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more') {
$translated_text = 'Quote';
}
return $translated_text;
}
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  margin: -1px;
}
.bg-scrolling-element-when-modal-active {
    /* when modal active */
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
}
.paragraph {
  whitespace: no-break;
  text-overflow: ellipsis;
  width: 100px;
}
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
}
body {
  font-family: Camphor, Open Sans, Segoe UI, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.smol-centering {
  display: grid;
  place-content: center;
}
.smol-css-grid {
  --min: 15ch;
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}
.holder {
  position: relative;
}
.holder:after {
  left: 0;
  right: 0;
  width: 100%;
  bottom: -21px;
  content: "";
  height: 21px;
  display: block;
  position: absolute;
  /* Here's the SVG embedded into the CSS BG using https://yoksel.github.io/url-encoder/ */
  background: url("data:image/svg+xml, %3Csvg width='1166' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='1166' height='21'%3E%3Crect width='1166' height='21' fill='url(%23paint0_linear)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='1166' height='21' fill='url(%23paint1_radial)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x2='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(-1166 -7 2608 -438157 -138 219063)'%3E%3Cstop offset='0' stop-color='%23333' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23000' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint1_radial' cx='0.5' cy='0.5' r='0.5' gradientUnits='userSpaceOnUse' gradientTransform='translate(1453 -10) scale(1740 62) rotate(90)'%3E%3Cstop offset='0.0' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
<div class="alert alert--success toast toast--top--right hide">
    This is success alert
    <button class="alert--close">×</button>
</div>
<div class="alert alert--message toast toast--bottom--left hide">
    This is message alert
    <button class="alert--close">×</button>
</div>
<div class="alert alert--error toast toast--bottom--center hide">
    This is danger alert
    <button class="alert--close">×</button>
</div>
<p class="para--lg">
...
</p>
<p class="para--md text--center text--grey">
...
</p>
<p class="para--sm text--bold">
...
</p>
<h1 class="heading--1">Heading 1</h1>
<h2 class="heading--2">Heading 2</h2>
<h3 class="heading--3">Heading 3</h3>
<h4 class="heading--4">Heading 4</h4>
<h5 class="heading--5">Heading 5</h5>
<h6 class="heading--6">Heading 6</h6>
/*HTML CODE*/

<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />

  
  
  
  
  
 /* JavaScript */
  

const slider = document.querySelector(".slider");

slider.addEventListener("input", () => {
updateSlider();
});

const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};

updateSlider();
<div class="rating--container">
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
</div>
<div class="rating--container ">
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
</div>
<div class="nav--container">
    <div class="hamburger--icon">
        <i class="fas fa-bars"></i>
    </div>
    <div class="logo">Brand Name</div>
    <nav class="nav--items">
        <ul class="list list--space">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </nav>
</div>
<div class="modal modal--alert hide">
    <h5 class="modal--heading heading--4">Delete Element</h5>
    <p class="modal--text">Are you sure you want to delete it?</p>
    <div class="modal--actions">
        <a href="#" class="link link--primary m-r-1" onclick="closeModal()">Yes</a>
        <a href="#" class="link link--secondary m-r-1" onclick="closeModal()">No</a>
    </div>
</div>
<div class="overlay hide"></div>
<ul class="list list--stacked list--primary p-v-1">
    <li class="list--item">This is stacked list item 1</li>
    <li class="list--item">This is stacked list item 2</li>
    <li class="list--item">This is stacked list item 3</li>
    <li class="list--item">This is stacked list item 4</li>
    <li class="list--item">This is stacked list item 5</li>
</ul>
<ul class="list list--stacked p-v-1">
    <li class="list--item">This is stacked list item 1</li>
    <li class="list--item">This is stacked list item 2</li>
    <li class="list--item">This is stacked list item 3</li>
    <li class="list--item">This is stacked list item 4</li>
    <li class="list--item">This is stacked list item 5</li>
</ul>
<ul class="list list--space p-v-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<span class="m-r-1 input--primary">
    <input type="radio" name="radio" id="radio1" />
    <label for="radio1">Radio 1</label>
</span>
<span class="m-r-1 input--primary">
    <input type="radio" name="radio" id="radio2" checked />
    <label for="radio2">Radio 2</label>
</span>
<span class="input--primary">
    <input type="checkbox" id="checkbox" name="radio" checked />
    <label for="checkbox">check this check box</label>
</span>
<div class="input--container input--error">
    <label for="phonenumber" class="input--label">Phone Number </label>
    <input type="number" id="phonenumber" class="input" />
</div>
<div class="input--container input--error">
    <label for="phonenumber" class="input--label">Phone Number </label>
    <input type="number" id="phonenumber" class="input" />
    <span class="input--error--message">Phone number should only contain numbers</span>
</div>
<div class="input--container input--standard">
    <label for="name" class="input--label">Name </label>
    <input type="text" id="name" class="input" />
</div>
<div class="input--container input--primary">
    <label for="email" class="input--label">Email </label>
    <input type="email" id="email" class="input" />
</div>
<div class="input--container input--primary input--disabled">
    <label for="address" class="input--label">Address </label>
    <input type="text" id="address" class="input" readonly autocomplete="off" />
</div>
<img class="img--round" 
src="https://picsum.photos/id/1024/300/300" 
alt="sample image" />
<img class="img--res" 
src="https://i.picsum.photos/id/1024/1920/1280.jpg?hmac=-PIpG7j_fRwN8Qtfnsc3M8-kC3yb0XYOBfVzlPSuVII"
alt="sample image" />
<div class="grid grid--3--cols">
    <div>.....</div>
    <div>.....</div>
    <div>.....</div>
</div>
<div class="grid grid--3--cols">
    <div>.....</div>
    <div>.....</div>
    <div>.....</div>
</div>
<div class="card card--overlay">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Tanay Pratap</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div class="card card--text">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Tanay Pratap</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>
<div class="card card--horizontal">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content--btn--container">
        <div class="card--content">
            <div class="card--title">Stylish Blue Shirt</div>
            <div class="card--manufacturer">By LP fashion</div>
            <div class="card--review--container">
                <div class="card--review--star">
                    4.2
                    <i class="far fa-star" aria-hidden="true"></i>
                </div>
                <div class="card--review--number">(256)</div>
            </div>
            <div class="card--price--container">
                <div class="actual--price">₹600</div>
                <div class="strike--price">₹1200</div>
                <div class="offer--percentage">(50%off)</div>
            </div>
        </div>
        <div class="card--btn">
            <button class="btn btn--primary w-100">Add to cart</button>
        </div>
    </div>
</div>
<div class="card">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="far fa-heart" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="fas fa-times" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--new">New</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text card--disabled">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<button class="btn btn--fab btn--primary m-r-1">
    <i class="fas fa-plus" aria-hidden="true"></i>
</button>
<button class="btn btn--fab btn--secondary">
    <i class="fas fa-arrow-up"></i>
</button>
<button class="btn icon--btn m-r-1">
    <i class="fas fa-shopping-cart fa-2x" aria-hidden="true"></i>
</button>
<button class="btn icon--btn">
    <i class="fas fa-times-circle fa-2x" aria-hidden="true"></i>
</button>
<a href="#" class="link link--primary m-r-1">Link</a>
<a href="#" class="link link--secondary m-r-1">Link</a>
<a href="#" class="link link--information m-r-1">Link</a>
<button class="btn btn--outline btn--primary">Button</button>
<button class="btn btn--outline btn--secondary">Button</button>
<button class="btn btn--outline btn--icon btn--information">
    <i class="fas fa-check" aria-hidden="true"></i>Button
</button>
<button class="btn btn--outline btn--disabled btn--secondary">
    Button
</button>
<button class="btn btn--primary">Button</button>
<button class="btn btn--icon btn--secondary">
    <i class="fas fa-times" aria-hidden="true"></i>Button
</button>
<button class="btn btn--information">Button</button>
<button class="btn btn--primary btn--disabled">
    Button
</button>
<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--online">
    </span>
</div>

<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--offline">
    </span>
</div>
<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--busy"></span>
</div>
<div class="badge--container m-v-1 m-r-2">
    <i class="fas fa-bell fa-2x" aria-hidden="true"></i>
    <span class="badge badge--top--right badge--primary">9</span>
</div>
<div class="badge--container m-v-1 m-r-2">
    <i class="fas fa-envelope fa-2x" aria-hidden="true"></i>
    <span class="badge badge--top--right badge--secondary">9+</span>
</div>
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--xs" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--sm" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--md" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--lg" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--xl" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--xs" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--sm" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--md" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--lg" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--xl" />
/* HTML Code */
<link rel="stylesheet" href="https://roarui.netlify.app/css/roarui.css">
  
 /* Import CSS */
  @import url("https://roarui.netlify.app/css/roarui.css");
<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>
.grid{
  display: grid;
  gap: 2rem;
  padding: 2rem;
}


@media screen and screen and (min-width: 1200px) {
    .grid{
		grid-template-columns: repeat(3, 1fr);
    }
}

@media and screen and (min-width: 900px){
  .grid{
	grid-template-columns: repeat(2, 1fr);
  }
}

@media and screen and (min-width: 0px){
	.grid{
       grid-template-columns: repeat(1, 1fr);
    }
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.text-gradient {
    background: linear-gradient(94.23deg,#5374fa 12.41%,#fd9179 52.55%,#ff6969 89.95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<!-- 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>
<!-- 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>
<div class="alert alert--success m-v-1">
 This is success alert
<button class="alert--close">×< /button>
 < /div>
 <div class="alert alert--error m-v-1">
  This is error alert
<button class="alert--close">×< /button>
< /div>
 <div class="alert alert--message m-v-1">
  This is message alert<button class="alert--close">×< /button>
 < /div>
 <div class="alert alert--information m-v-1">
 This is information alert
 <button class="alert--close">×< /button>
< /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>
.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}
ins {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: lightgreen
}
del {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: pink;
}
mark {
  padding: 0 0.125em;
}
.note {
  padding: 0 0.125em;
  background-color: lightblue;
}
aside.note {
  padding: 0.5em 1em;
}
u {
  text-decoration: none;
  border-bottom: 3px red dashed;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
/*CSS*/
.field-item__wrapper {
    position: relative;
    padding-top: 15px;
}
.form__field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #000;
    outline: 0;
    color: #000;
    padding: 7px 0;
    background: 0 0;
    transition: border-color 0.2s;
}
.form__field::placeholder {
    color: transparent;
    opacity: 0;
}
.form__field:placeholder-shown ~ .form__label {
    cursor: text;
    top: 20px !important;
}
.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    color: #000;
}
.form__field:focus {
    padding-bottom: 6px;
    border-width: 3px;
    border-image-slice: 1;
    border-color: #000 !important;
}
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0 !important;
    font-size: 0.8em;
    display: block;
    transition: 0.2s;
}
.form__field:invalid,
.form__field:required {
    box-shadow: none;
}
.w-input.error {
    border-color: #cc3131;
}
label.error {
    font-size: 10px;
    line-height: 24px;
    color: #cc3131;
    position: absolute;
    bottom: -25px;
}
/*CSS*/
/*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*/
/*CSS*/
.text__underline {
    transform: translateX(-300%);
    transition: 0.7s;
}
.header__nav-button {
    max-width: fit-content;
    overflow: hidden;
}
.header__nav-button:hover .text__underline {
    animation: toMiddlePos 0.7s;
    transform: translateX(0);
    opacity: 100%;
}
.header__nav-button:not(:hover) .text__underline {
    transform: translateX(300%);
    opacity: 0;
}
@keyframes toMiddlePos {
    from {
        transform: translateX(-300%);
    }
    to {
        transform: translateX(0);
    }
}
/*CSS*/

/*HTML markup*/
<a class="button header__nav-button">
  <span>Your text</span>
  <div class="content-list-item__line line-primary text__underline line__black" style="width: 0%; 	display: block; height: 1px;" />
</a>
/*HTML markup*/
/*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*/
/*CSS*/
#nav__wrapper {
  transform: translateY(0%);
  transition: all 0.3s ease-out;
}

#nav__wrapper.header_hide {
  transform: translateY(-100%);
}
/*CSS*/
  
/*JS*/
const header_el = $("#nav__wrapper"),
    mywindow = $(window);
let mypos = mywindow.scrollTop(),
    up = !1,
    newscroll = 0;
mywindow.scroll(function () {
    (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll);
});
/*JS*/
body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: #DDDDDD;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 100px;
}
.outlined__text-white {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px white;
}

.outlined__text-black {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
}
Si es un elemento display: inline; entonces solo por Es innecesario justify-content: center;
son funciones en el plano cartesiano 0.0 y 1.1
cubic-bezier(p1, p2, p3, p4): p<=1

Todas las funciones cubicas tienen un punto de inflexión(o dos puntos de concavidad):
T1= (p1,p2) cordenada donde termina concavo hacia abajo(punto 1 de inflexión)
T2= (p3,p4) cordenada donde termina convexo hacia arriba(punto 2 de inflexión)
Nota: si tiene dos puntos de inflexión es porque entre en 1 y el 2 hay una recta 
Ya sabemos que transition no tiene "animación" porque no tiene intervalo de acción
-- esto condiciona a que todas la propiedades existen despues de que el elemento aparesca
-- si le ponemos transition: color 3s; no surgira la animación porque en el display none
   aun no exite el color, luego , en el display block ya existe y no se da la niamción por que
   no logra tener un intervalo donde cambia su valor, sino que no existe y luego exite
   (sinintervalo)
la unidad 1fr en css grid tiene un comportamiento maximo 
yaque si solo se lo pones a un elemento sera el maximo y si le pones a 3
sera 1/3 que es el maximo; por eso no puede ir en el minimo de minmax(30%, 1fr) eso es lo correcto.

__NOTA__
minmax(min,max):es solo de grid y en su parte min no se le pone 1fr porque tiene comportamiento max
-min(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
-max(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
<sl-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-scrolling');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>
<!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>CSS Specificity</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="main">
            <p>
                <a href="#">Link here</a>
            </p>
        </div>
    </div>
</body>
</html>

a {
    color: black;
}

p a {
    color: purple;
}

div #main p a {
    color: yellow;
}

#main a {
    color: blue;
}

.container #main a {
    color: red;
}
.feed-item {
  border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
}
add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}
add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}
-webkit-text-stroke: 3px black;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: fixed; /* or absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
body, html { margin: 0; padding: 0; }
* { box-sizing: border-box; }
.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
  object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;
<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>
.revealLTR,
.revealRTL,
.revealTTB,
.revealBTT {
	position: relative;
	overflow: hidden;
}
.revealLTR[data-aos=fade].aos-animate > *,
.revealRTL[data-aos=fade].aos-animate > *,
.revealTTB[data-aos=fade].aos-animate > *,
.revealBTT[data-aos=fade].aos-animate > * {
	animation: fadeIn 0s 0.6s;
	animation-fill-mode: backwards;
}
.revealLTR[data-aos=fade]:not[.aos-animate],
.revealRTL[data-aos=fade]:not[.aos-animate],
.revealTTB[data-aos=fade]:not[.aos-animate],
.revealBTT[data-aos=fade]:not[.aos-animate] {
	opacity: 0;
}
.revealLTR[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateX(-100%);
	animation: revealInLTR 0.6s 0s, revealOutLTR 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealRTL[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateX(100%);
	animation: revealInRTL 0.6s 0s, revealOutRTL 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealTTB[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateY(-100%);
	animation: revealInTTB 0.6s 0s, revealOutTTB 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealBTT[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateY(100%);
	animation: revealInBTT 0.6s 0s, revealOutBTT 0.6s 0.6s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes revealInLTR {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOutLTR {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(101%);
	}
}
@keyframes revealInRTL {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOutRTL {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-101%);
	}
}
@keyframes revealInTTB {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes revealOutTTB {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(101%);
	}
}
@keyframes revealInBTT {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes revealOutBTT {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-101%);
	}
}
// style.scss
:root{
  --color-property: $var1;
}

// style.css
:root{
  --color-property: $var1;
}

// No compila nada de las variables:
//tal vez porque :root es el unico pseudo elemento al que se puede aceder directamentes, incluso //desde JS, como; let root = document.querySelector(":root")
// etiqueta: especificidad= 0;
// class: especificidad= 1;
// id: especificidad= 2;
 /* luego de acuerdo a las combinaciones, se sumaran sus especificidades implicadas*/

// EL ORDEN QUE APARECEN EN LA HOJA DE STYLE DE navegador es segun a su especificidad; aparece //primero el de mayor especificidad y los de menor abajo:
//- segun a eso se aanula propiedades:


<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>
html {
  /* 62.5% of 16px base font size is 10px */
  font-size: 62.5%;
}
@media (max-width: 980px) {
.forceRowOrder {
	display: flex;
  flex-wrap: wrap;
}

.Order1 {
	order: 1;
	margin-bottom: 30px !important;
}

.Order2 {
	order: 2;
	margin-bottom: 0px !important;
}
}
<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>
  <!-- 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://spectre-ui.netlify.app/documentation/styles.css"
/>
@media screen and (min-width: 640px){
  .Index {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap !important;
  }
  section[id*="split"]{
    width: 50%!important;
  }
  section[id*="full"]{
    width: 100%!important;
  }
}
	
<!-- 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>
/* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Pop In */
.animate.pop { animation-name: animate-pop; }

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow { animation-name: animate-grow; }

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat { animation-name: animate-splat; }

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}

/* Roll In */
.animate.roll { animation-name: animate-roll; }

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}
<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 -->
:root {
	
/*** COLOR SYSTEM ***/
	
/* 
GLOBAL COLOR SETUP (HSL)
Set the global colors below using HSL variables.
*/
	
	--primary-h: 44;
	--primary-s: 98%;
	--primary-l: 50%;

	--secondary-h: 41.1;
	--secondary-s: 100%;
	--secondary-l: 63.3%;

	--accent-h: 54.5;
	--accent-s: 15.5%;
	--accent-l: 86.1%;

	--base-h: 357.2;
	--base-s: 70.5%;
	--base-l: 47.8%;

/* 
SHADING VARIABLES
If you want to adjust the generated shade variants, you can adjust the percentages here.
Higher percentages are lighter and lower are darker.
*/

	--ultra-light: 95%;
	--light: 85%;
	--dark: 25%;
	--ultra-dark: 10%;

/* 
GLOBAL COLOR VARIABLES
These are the variables you can use in styling. They don't need to be edited.
Future plans: Auto generate full complimentary, triadic, analogous, etc. color schemes.
*/

	--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--ultra-light));
	--primary-light: hsl(var(--primary-h), var(--primary-s), var(--light));
	--primary-dark: hsl(var(--primary-h), var(--primary-s), var(--dark));
	--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--ultra-dark));
	--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
	--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
	--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
	--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
	--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
	--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
	--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-light));
	--secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--light));
	--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--dark));
	--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-dark));
	--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
	--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
	--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
	--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
	--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
	--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--ultra-light));
	--accent-light: hsl(var(--accent-h), var(--accent-s), var(--light));
	--accent-dark: hsl(var(--accent-h), var(--accent-s), var(--dark));
	--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--ultra-dark));
	--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
	--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
	--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
	--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
	--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
	--base: hsl(var(--base-h), var(--base-s), var(--base-l));
	--base-ultra-light: hsl(var(--base-h), var(--base-s), var(--ultra-light));
	--base-light: hsl(var(--base-h), var(--base-s), var(--light));
	--base-dark: hsl(var(--base-h), var(--secondary-s), var(--dark));
	--base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--ultra-dark));
	--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
	--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
	--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
	--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
	--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
	
/*** END COLOR SYSTEM ***/
}
<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>
/* To use REM units effectively, you'll want to make sure you reset your root font-size to 62.5% */

html {
     font-size: 62.5%;
}

/* MAX WIDTH UTILITY CLASSES */

.max-w--320 {
  width: 100%;
  max-width: 32rem;
}

.max-w--480 {
  width: 100%;
  max-width: 48rem;
}

.max-w--640 {
  width: 100%;
  max-width: 64rem;
}

.max-w--720 {
  width: 100%;
  max-width: 72rem;
}

.max-w--960 {
  width: 100%;
  max-width: 96rem;
}

.max-w--1120 {
  width: 100%;
  max-width: 112rem;
}

.max-w--full {
  width: 100%;
  max-width: 100%;
}
/* Owl Spacing */

.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}

.ct-section.owl-spacing--m .ct-section-inner-wrap > * + *,
.owl-spacing--m:not(.ct-section) > * + * {
margin-top: 1vmax;
}

.ct-section.owl-spacing--l .ct-section-inner-wrap > * + *,
.owl-spacing--l:not(.ct-section) > * + * {
margin-top: 2vmax;
}

.ct-section.owl-spacing--xl .ct-section-inner-wrap > * + *,
.owl-spacing--xl:not(.ct-section) > * + * {
margin-top: 4vmax;
}
<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>
.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
// 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"
*/
<!-- 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="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>



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>

@import url("https://bliss-ui.netlify.app/lib/index.css");
<link rel="stylesheet" href="https://bliss-ui.netlify.app/lib/index.css" />
  .home__button {
  outline-color: transparent;
  padding: 0;
  border-radius: 5em;
  border: 0px solid #000;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2em;
  text-transform: uppercase;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  max-width: 450px;
  font-size: 14px;
  background: #6f75ff;
  color: #ffffff;
  margin-right: 10px;
  width: 96px;
  height: 40px;
}
<!-- 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 style={{position: 'absolute', width: '300px', height: '300px'}}>
        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%">
          <path fill="url(#gradient)">
            <animate
              attributeName='d'
              dur='10000ms'
              repeatCount='indefinite'
              values='
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
                M382.5,342Q310,434,205.5,396Q101,358,98.5,248Q96,138,207.5,87.5Q319,37,387,143.5Q455,250,382.5,342Z;
                M399.5,340.5Q309,431,207.5,393Q106,355,101.5,247Q97,139,201.5,108.5Q306,78,398,164Q490,250,399.5,340.5Z;
                M383.5,362Q323,474,210.5,417Q98,360,78,235Q58,110,185.5,83Q313,56,378.5,153Q444,250,383.5,362Z;
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
              '
            >
            </animate>
          </path>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style={{stopColor: 'rgb(255, 95, 109)'}}/>
              <stop offset="100%" style={{stopColor: 'rgb(255, 195, 113)'}}/>
            </linearGradient>
          </defs>
        </svg>
      </div>
<script src="https://gist.github.com/shmbajaj53/f67cacf4cfbdb3b236dc7e62d76acf5e.js"></script>
<div class="rating-container">
    <h1>Rate Product</h1>
    <div class="star-icon">
        <input type="radio" name="rating1" id="rating1" />
        <label for="rating1" class="material-icons"> star </label>
        <input type="radio" name="rating2" id="rating2" />
        <label for="rating2" class="material-icons"> star </label>
        <input type="radio" name="rating3" id="rating3" />
        <label for="rating3" class="material-icons"> star </label>
        <input type="radio" name="rating4" id="rating4" />
        <label for="rating4" class="material-icons"> star </label>
        <input type="radio" name="rating5" id="rating5" />
        <label for="rating5" class="material-icons"> star </label>
    </div>
</div>
<div class="parent">
    <img src="../assets/tourism.png" alt="" />
    <section class="snackbar">
        <span>Can't send Photos. Retry in 5 seconds.</span>
        <h3 class="retry">RETRY</h3>
        <div class="cross">X</div>
    </section>
</div>
<!DOCTYPE html>  
<html>  
<head>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("h1").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<h1>This is first paragraph.</h1>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>  

 
<!-- h1 to h6 -->
<div class="txt-util-wrap">
    <h1>This is H1 HEADING</h1>
    <h2>This is H2 HEADING</h2>
    <h3>This is H3 HEADING</h3>
    <h4>This is H4 HEADING</h4>
    <h5>This is H5 HEADING</h5>
    <h6>This is H6 HEADING</h6>
</div>

<!-- alignment -->
<div class="txt-util-wrap">
    <p class="txt-left">This text is left aligned</p>
    <p class="txt-center">This text is Center aligned</p>
    <p class="txt-right">This text is right aligned</p>
</div>
<!-- decoration -->
<div class="txt-util-wrap">
    <p class="txt-grey">This text GREY COLORED</p>
    <p class="txt-underline">Underline text</p>
</div>
<!-- diff sizes -->
<div class="txt-util-wrap">
    <p class="txt-lg">This is large text</p>
    <p class="txt-md">This is medium text</p>
    <p class="txt-sm">This is small text</p>
    <p>This is Default text</p>
</div>
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}
<div class="navigation">
    <ul class="nav-list">
        <li class="nav-list-item">Logo</li>
    </ul>
    <ul class="nav-list">
        <li class="nav-list-item"><input type="text" placeholder="Search"></li>
    </ul>
    <ul class="nav-list">
        <li class="nav-list-item"><button>Login</button></li>
        <li class="nav-list-item">WishList</li>
        <li class="nav-list-item">Cart</li>
    </ul>
</div>
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}
<ul class="stacked-list">
  <li class="list-border">
    <img src="your_img_loc" alt=""> 
    <span>Friend 1 commented on your post</span></li>
  <li class="list-border">
    <img src="your_img_loc" alt="">
    <span>Friend 2 liked your post</span> </li>
  <li class="list-border">
    <img src="your_img_loc" alt="">
    <span>Friend 3 sent Friend request</span></li>
</ul>
<ul class="spaced-list">
    <li class="list-normal">Item 1</li>
    <li class="list-normal">Item 2</li>
    <li class="list-normal">Item 3</li>
</ul>

<ul class="spaced-list">
    <li class="text-decoration-none">Item 1</li>
    <li class="text-decoration-none">Item 2</li>
    <li class="text-decoration-none">Item 3</li>
</ul>
public class Simba{
	public static void main(String args[]){
	System.out.println("Hello Element Tutorials");
	}}
<?php
  $myVar = 'red';
  
  switch ($myVar) {
      case 'red':
          echo 'It is red';
          break;
      case 'blue':
          echo 'It is blue';
          break;
      case 'green':
          echo 'It is green';
          break;
  }
  ?> 
  
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<!DOCTYPE html>  
<html>  
<head>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("h1").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<h1>This is first paragraph.</h1>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>  

 
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript can change HTML content</h1>

<p id="one">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("one").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>
<!DOCTYPE html>
  <html>
  <head>
  <style>
  body {
    background-color: lightpink;
  }
  
  h1 {
    color: yellow;
    text-align: center;
  }
  
  p {
    font-family: roboto;
    font-size: 27px;
  }
  </style>
  </head>
  <body>
  
  <h1>My First CSS Example</h1>
  <p>This is a paragraph.</p>
  
  </body>
  </html>
  
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid red;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alura</td>
                <td>alura@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>john@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Milinda</td>
                <td>milida@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>




	
<!DOCTYPE html>
<html>
<head>
    <title>HTML style tag</title>
    <style type="text/css">
        h1 { color: red; }
        p { color: yellow; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML input tag</title>
</head>
<body>
    <form action="yourfile" method="post">
        <label for="first-name">First name:</label>
        <input type="text" name="first-name" id="first-name">
        <input type="submit" value="Submit">
        <input type="reset" name="Reset">
    </form>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML img tag</title>
</head>
<body>
    <div>
   		<img src="/img/example.png" alt="html">
    	
    </div>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML iframe tag</title>
</head>
<body>
    <iframe src="/index.html" width="400" height="300" scrolling="auto">
        <p>[Your browser does not support frames or is currently configured not to display frames. However, you may visit <a href="https://www.elementtutorials.com/">the related document.</a>]</p>
    </iframe>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML i tag</title>
</head>
<body>
    <p>Here is some <i>italic</i> text.</p>
	<p>Here is some <i>more italic</i> text.</p>
</body>
</html>
<h1 class="heading-1">This is h1 heading</h1>
<h2 class="heading-2">This is h2 heading</h2>
<h3 class="heading-3">This is h3 heading</h3>
<h4 class="heading-4">This is h4 heading</h4>
<h5 class="heading-5">This is h5 heading</h5>
<h6 class="heading-6">This is h6 heading</h6>

<div>
    <span class="small-text">This is small text</span>
</div>

<div>
    <span class="gray-text">This is gray text</span>
</div>

<p class="center-text">This is center text</p>
<!DOCTYPE html>
<html>
<head>
    <title>A Complete HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML hr tag</title>
</head>
<body>
    <p>This is the first paragraph of text.</p>
    <hr>
    <p>This is second paragraph of text.</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML headings tag</title>
</head>
<body>
    <h1>Heading  1</h1>
    <h2>Heading  2</h2>
    <h3>Heading  3</h3>
    <h4>Heading  4</h4>
    <h5>Heading  5</h5>
    <h6>Heading  6</h6>
</body>
</html> 







<!DOCTYPE html>
<html>
<head>
<title>Example of HTML header Tag</title>
</head>
<body>
    <header>
		<h1>Top Browsers</h1>
		<nav>
			<p>
                <a href="https://www.google.com">google</a> | 
                <a href="https://www.yahhoo.com">yahoo</a> | 
                <a href="https://www.bing.com">bing</a>
            </p>
		</nav>
	</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML head tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML form tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML footer Tag</title>
</head>
<body>
    <footer>
		<nav>
			<p>
				<a href="https://www.google.com/">Terms of Use</a> |
				<a href="https://www.google.com/">Privacy Policy</a>
			</p>
		</nav>
		<p>Copyright &copy; 1998 </p>
	</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML figure Tag</title>
</head>
<body>
    <figure>
		<img src="image.jpg" alt="Space Shuttle">
		
	</figure>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML fieldset tag</title>
</head>
<body>
    <form action="http://www.google.com/" method="post">
        <fieldset>
            <legend>Gender</legend>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">Female</label>
        </fieldset>
    </form>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML embed Tag</title>
</head>
<body>
    <embed src="/index.html" width="500" height="500">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML em tag</title>
</head>
<body>
    <p>This is an <em>important point</em> to consider.</p>
	<p>This is one more <em>important point</em> to consider.</p>
</body>
</html>
	<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dt tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dl tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML div tag</title>
    <style type="text/css">
        .welcome-box{
            background:lightblue;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="welcome-box">
        <h1>Welcome</h1>
        <p>Hi, welcome to our website.</p>
    </div>
    <p><strong>Note:</strong> To learn more about style rules please study tutorials on <a href="">CSS</a>.</p>
</body>
</html> 
<!DOCTYPE>
<html>  
<body>  
 
<dialog> <p>This is an HTML dialog popup</p> <button id="close">Close Dialog</button>
  </dialog> 
  <button id="show">Show Me the Dialog</button> 

  <script>  
    
    var dialog = document.querySelector('dialog'); 
    document.querySelector('#show').onclick = function() { 
      dialog.show(); }; document.querySelector('#close').onclick = 
        function() { dialog.close(); }; 
  </script>
  

</body>
</html>  
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dfn tag</title>
</head>
<body>
    <p>The <dfn title="Hyper Text Markup Language">HTML</dfn> is the publishing language of the World Wide Web.</p>
</body>
</html> 
<html>
<head>
<title>Example of HTML details Tag</title>
<style type="text/css">
    details{
    	margin: 10px;
    }
</style>
</head>
<body>
<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of web pages.</p>
</details>
<details>
    <summary>What is Twitter Bootstrap?</summary>
    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. </p>
</details>
<details>
    <summary>What is CSS?</summary>
    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. </p>
</details>
<p><strong>Note:</strong> The details tag currently not supported in Firefox and Internet Explorer.</p>
</body>
</html>                                		
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML del tag</title>
</head>
<body>
    <h1>To Do</h1>
    <ul>
        <li>$2000</li>
        <li>$3000</li>
        <li><del>$4000</del></li>
        <li>$5000</li>
    </ul>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dd tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML data Tag</title>
<style>
    data:hover::after {
        content: ' (ID ' attr(value) ')';
        font-size: .7em;
    }
</style>
</head>
<body>
    <p>New Movie Makers</p>
    <ul>
        <li><data value="204">Alson</data></li>
        <li><data value="205">Corner</data></li>
        <li><data value="206">John</data></li>
    </ul>
	<p><strong>Note:</strong> Place the mouse pointer over the list item to see how it actually works.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML col Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color:red">
            <col span="2" style="background-color:yellow">
        </colgroup>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alson</td>
            <td>Alson@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Corner</td>
            <td>Corner@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John doe</td>
            <td>John@mail.com</td>
        </tr>
    </table>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML code tag</title>
</head>
<body>
    <p>This is paragraph <code>computer code</code> another line.</p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML cite Tag</title>
</head>
<body>
    <p>My favorite movie is <cite>Avengers</cite>.</p>
	<p>My another favorite movie is <cite>Bloodshoot</cite>.</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML caption Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid gray;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alson</td>
                <td>Alson@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Conner</td>
                <td>Conner@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Doe</td>
                <td>John@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>



  

<!DOCTYPE html>
  <html>
  <body>
  
  <canvas id="firstcanvas" width="500" height="500" style="border:1px solid red;">
  Your browser does not support the HTML canvas tag.
  </canvas>
  
  </body>
  </html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML button tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML br tag</title>
</head>
<body>
    <p>This paragraph contains<br>a line break.</p>
	<p>This paragraph contains <br>multiple <br>line breaks.</p>
</body>
</html> 






<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML body tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML blockquote tag</title>
</head>
<body>
    <blockquote>
        <p>This is an example of a long quotation.</p>
    </blockquote>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML bdo tag</title>
</head>
<body>
    <p>The sequence "1-2-3-4-5" was reversed as: <bdo dir="rtl">1-2-3-4-5</bdo></p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML bdi Tag</title>
</head>
<body>
  <p>If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text</p>
    <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML base tag</title>
    <base href="https://www.elementtutorials.com/">
</head>
<body>
	<p>Learn <a href="https://www.elementtutorials.com/">CSS</a>.</p>
</body>
</html> 


<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML b Tag</title>
</head>
<body>
    <p>This <b>sentence</b> contains some <b>bold</b> words.</p>
	<p>Here are <b>some</b> more <b>bold</b> words.</p>
</body>
</html> 


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML audio Tag</title>
</head>
<body>
	<audio controls="controls" src="/audio.mp3">
        Your browser does not support the HTML5 audio element.
    </audio>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML aside Tag</title>
</head>
<body>
	<h1>Apollo 13 Mission</h1>
	<p>This is paragraph</p>
	<p>[...]</p>
    <aside>
		<h1>Apollo 13 Facts</h1>
		<p>The aside element represents a section of the web page that encloses content which is tangentially related to the content around it.</p>
	</aside>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML article Tag</title>
</head>
<body>
    <article>
		<h1>Introduction to HTML</h1>
		<p>HTML is a markup language that is used for creating web pages.</p>
	</article>
</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="/img/favicon.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML address tag </title>
</head>
<body>
    <address>
        Written by <a href="mailto:hello@example.com">Alson</a>.<br> 
        Contact us at:<br>
        street NO:, Hollywood<br>
        USA
    </address>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML a tag</title>
</head>
<body>
<a href="https://www.elementtutorials.com/">ElementTutorials</a>
</body>
</html> 

<div class="image-round">
    <img src="your_img_loc" alt="">
</div>
<div class="image-responsive">
    <img src="your_img_loc" alt="">
</div>
<form action="" class="input-wrap flex-col">
    <!-- textbox -->
    <div class="textbox flex-col">
        <label for="review" class="heading">Give Feedback</label>
        <textarea name="review" id="" cols="30" rows="10"></textarea>
    </div>
    <!-- input with validation -->
    <div class="input-group correct flex-col">
        <label for="email">Email</label>
        <input type="email" class="input-area" placeholder="rushikesh@neog" />
        <p>Email matches with database</p>
    </div>
    <div class="input-group error flex-col">
        <label for="pass">Enter Password</label>
        <input type="password" class="input-area" placeholder="pass@1234" />
        <p>Password must contain special characters*</p>
    </div>
</form>
<form class="form-container mb-1" action="">
	<div class="form-header">Form</div>
	<div class="form-body">
		<label for="email">Email</label>
		<input type="email" placeholder="example@example.com">
	</div>
    <div class="form-body">
    	<label for="password">Password</label>
        <input type="password" placeholder="password">
    </div>
    <button class="btn-primary">Submit</button>
</form>
<div>
    <div class="input-container">
        <label for="name">Name</label>
        <input type="text" placeholder="Enter name" class="input-default" name="name" />
        <span>Default Message</span>
    </div>
    <div class="input-container">
        <label for="email">Email</label>
        <input type="email" placeholder="Enter Email" class="input-fail" name="email" />
        <span class="text-fail">Error Message</span>
    </div>
    <div class="input-container">
        <label for="password">Password</label>
        <input type="password" placeholder="Password" class="input-success" name="password" />
        <span class="text-success">Success Message</span>
    </div>
</div>
<div class="textarea-container">
    <textarea class="textarea" placeholder="Write here..."></textarea>
    <button>Send</button>
</div>
img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="responsive-img-set">
    <p>Responsive image</p>
    <img class="img-resp" src="../assets/gamepad.jpg" alt="img-resp" />
    <p>Round and Responsive image</p>
    <img class="img-resp img-round" src="../assets/gamepad.jpg" alt="rsp-round-img" />
</div>
<div class="rel">
    <img class="av" src="your_img_loc" alt="" />
    <span class="status red"></span>
</div>
<div class="rel">
    <img class="av" src="your_img_loc" alt="" />
    <span class="status green"></span>
</div>
<div class="rel">
    <img class="av" src="your_img_loc" alt="" />
    <span class="status gray"></span>
</div>
<div class="rel">
    <img class="av" src="your_icon_loc" alt="" />
    <span class="status icon-status green"></span>
</div>
<div class="badge-container">
    <img class="badge-img" src="" alt="" />
    <span class="badge-avatar">5</span>
</div>
<div class="badge-container">
    <span class="material-icons black"> notifications </span>
    <span class="badge-icon">5</span>
</div>
<div class="alert alert-primary">This is Primary Alert</div>
<div class="alert alert-secondary">This is Secondary Alert</div>
<div class="alert alert-error">This is Error Alert</div>
<div class="alert alert-warning">This is Warning Alert</div>
<div class="alert alert-success">This is Success Alert</div>
 <!-- Cards with shadow -->
 <div class="card-with-shadow">
     <div class="card">
         <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
         <div class="card-info">
             <h5 class="product-name">God of War</h5>
             <p class="description">PEGI Rating: Ages 16 and Above</p>
             <div class="green-rate">
                 4.5 <span class="material-icons star-icon"> star </span>
             </div>

             <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>
             <button class="card-btn primary-btn">BUY NOW</button>
             <button class="card-btn card-icon-btn">
                 <span class="material-icons icon"> shopping_cart </span>
                 Add to Cart
             </button>
         </div>
     </div>
 </div>
  <!-- Horizontal cards -->
  <div class="card hori-card">
      <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
      <div class="card-info">
          <h5 class="product-name">God of War</h5>
          <p class="description">PEGI Rating: Ages 16 and Above</p>
          <div class="green-rate">
              4.5 <span class="material-icons star-icon"> star </span>
          </div>

          <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>
          <button class="card-btn primary-btn">BUY NOW</button>
          <button class="card-btn card-icon-btn">
              <span class="material-icons icon"> shopping_cart </span>
              Add to Cart
          </button>
      </div>
  </div>
  <div class="text-only">
      <h3>This is text only card</h3>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam
          expedita laudantium qui libero omnis praesentium veritatis dicta eos
          itaque consequatur repellendus mollitia possimus labore dolor,
          doloribus, animi perspiciatis provident maiores.
      </p>
  </div>
<!-- Cards with text overlay -->
<div class="overlay relative-wrap">
    <img src="https://picsum.photos/200" alt="img" />
    <div class="text-overlay top">
        <h3>This is text overlay card</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam
            expedita laudantium qui libero omnis praesentium veritatis dicta eos
            itaque consequatur repellendus mollitia possimus labore dolor,
            doloribus, animi perspiciatis provident maiores.
        </p>
    </div>
</div>
<!-- 2nd one -->
<div class="overlay relative-wrap">
    <img src="../assets/uncharted.jpeg" alt="img" />
    <div class="text-overlay bg-color">
        <h3>Uncharted 4</h3>
        <p>
            Uncharted 4: A Thief's End is a 2016 action-adventure game developed
            by Naughty Dog and published by Sony Computer Entertainment
        </p>
    </div>
</div>
  <!-- Cards with dismiss -->
  <div class="card opa relative-wrap">
      <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
      <div class="card-info">
          <h5 class="product-name">God of War</h5>
          <p class="description">PEGI Rating: Ages 16 and Above</p>
          <div class="green-rate">
              4.5 <span class="material-icons star-icon"> star </span>
          </div>

          <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>

          <button class="card-btn primary-btn">BUY NOW</button>
          <button class="card-btn card-icon-btn">
              <span class="material-icons icon"> shopping_cart </span>
              Add to Cart
          </button>
      </div>
      <h3 class="out-stock">OUT OF STOCK</h3>
      <button class="btn dismiss float-action">
          <span class="material-icons close"> close </span>
      </button>
  </div>
<!-- Cards with badges -->
<div class="card relative-wrap">
    <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
    <div class="card-info">
        <h5 class="product-name">God of War</h5>
        <p class="description">PEGI Rating: Ages 16 and Above</p>
        <div class="green-rate">
            4.5 <span class="material-icons star-icon"> star </span>
        </div>

        <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>

        <button class="card-btn primary-btn">BUY NOW</button>
        <button class="card-btn card-icon-btn">
            <span class="material-icons icon"> shopping_cart </span>
            Add to Cart
        </button>
    </div>
    <h3 class="card-badge">Gamer's <span>choice</span></h3>
</div>
<!-- Simple card -->
<div class="card">
    <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
    <div class="card-info">
        <h5 class="product-name">God of War</h5>
        <p class="description">PEGI Rating: Ages 16 and Above</p>
        <div class="green-rate">
            4.5 <span class="material-icons star-icon"> star </span>
        </div>

        <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>
        <button class="card-btn primary-btn">BUY NOW</button>
        <button class="card-btn card-icon-btn">
            <span class="material-icons icon"> shopping_cart </span>
            Add to Cart
        </button>
    </div>
</div>
// hay dos formas de hacer: 1(variables css y .setProperty para modificar las propiedades);
                          y 2(usando vien `` y clipPath=`circle()`).
                          
1) 
//solo agregamos correcatamente objeto.style.clipPath = `circle(50px at $(x) $(y))`; siendo x,y //variables de la función que gracias a `` se podran incluir.

2)
//javascript
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
function moverCursor(e){
    let m = e.pageX - t.left  ;
    let n = e.pageY - t.top  ;
    img1.style.setProperty(`--x`,`${m}px`);
    img1.style.setProperty(`--y`,`${n}px`);
}
img1.addEventListener("mousemove", moverCursor);

//css
.box {
   width: 500px;
   height: 250px;
   border: 2px solid red;
   position: relative;
}

.img1 {
   width: 450px;
   height: 240px;
   background-color: purple;
   --x: 0px;
   --y: 0px;
   --r: 50px;
   clip-path: circle(var(--r) at var(--x) var(--y));
}
//html
    <div class="box">
	<div class="img1">Hello word, hola mundo<br>Hello word, hola mundo<br>Hello word, hola mundo</div>
    </div>
 <button class="btn primary-btn">PRIMARY BUTTON</button>
 <a style="text-decoration: none" href="https://coolors.co"> <button class="btn linked-btn">
         <span class="material-icons">
             link
         </span>
         Click here
     </button></a>
 <button class="btn icon-btn">
     <span class="material-icons">
         shopping_cart
     </span>
     Add to Cart
 </button>
 <button class="btn float-action">
     +
 </button>
 <div class="alert_wrap success">
     <i class="material-icons">
         check_circle</i>
     <h3>NEOG-ALERT.COM: Success Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>

 <div class="alert_wrap info">
     <i class="material-icons">
         info
     </i>
     <h3>NEOG-ALERT.COM: Info Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>

 <div class="alert_wrap danger">
     <i class="material-icons">
         warning
     </i>
     <h3>NEOG-ALERT.COM: Danger Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>

 <div class="alert_wrap warning">
     <i class="material-icons">
         error_outline
     </i>
     <h3>NEOG-ALERT.COM: Warning Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>
<div class="badge-collection">
    <!-- 1st  -->
    <div class="relative-container">
        <p>Notification</p>
        <div class="badge top-right">4</div>
    </div>
    <!-- 2nd  -->
    <div class="relative-container">
        <p>Messages</p>
        <div class="badge lrg top-right">1</div>
    </div>
    <div class="relative-container">
        <i class="fab fa-twitter icon-badge"></i>
        <div class="badge lrg top-right">1</div>
    </div>
    <!-- 3rd  -->
    <div class="relative-container">
        <button class="btn-1">Action</button>
        <div class="badge top-left">8</div>
    </div>
    <!-- 4th  -->
    <div class="relative-container">
        <button class="btn-2 hide">Hide</button>
        <div class="badge top-right hide_it">7</div>
    </div>

</div>
<div class="img_avatar_set">
    <div class="relative-wrap">
        <img class="img-avatar small" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right"></div>
    </div>
    <div class="relative-wrap">
        <img class="img-avatar medium" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right online"></div>
    </div>
    <div class="relative-wrap">
        <img class="img-avatar large" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right issue"></div>
    </div>
    <div class="relative-wrap">
        <img class="img-avatar largest" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right offline"></div>
    </div>
</div>
<div class="img_avatar_set">
    <img class="img-avatar small maron-border" src="https://picsum.photos/200" alt="" />
    <img class="img-avatar medium online-border" src="https://picsum.photos/200" alt="" />
    <img class="img-avatar large issue-border" src="https://picsum.photos/200" alt="" />
    <img class="img-avatar largest" src="https://picsum.photos/200" alt="" />
</div>
 <div class="text_avatar">
     <div class="named-avatar small-na"><span>RT</span></div>
     <div class="named-avatar medium-na"><span>RT</span></div>
     <div class="named-avatar large-na"><span>RT</span></div>
     <div class="named-avatar"><span>RT</span></div>
 </div>
<div class="rel">
  <img class="avatar" src="you_img_loc" alt="img" />
  <span class="status red"></span>
</div>
<div class="rel">
  <img class="avatar" src="you_img_loc" alt="img" />
  <span class="status green"></span>
</div>
<div class="rel">
  <img class="avatar" src="you_img_loc" alt="img" />
  <span class="status gray"></span>
</div>
<div class="rel">
  <img class="avatar" src="your_icon_loc" alt="icon" />
  <span class="status icon-status green"></span>
</div>
<img class="avatar avatar-sm" src="your_img_loc" alt="img" />
<img class="avatar avatar-md" src="your_img_loc" alt="img" />
<img class="avatar avatar-lg" src="your_img_loc" alt="img" />
<img class="avatar avatar-xl" src="your_img_loc" alt="img" />
<style>
.thrivecart-courses-page {
background-image: url( ADD IMAGE URL HERE );
background-repeat: no-repeat;
background-size: cover; }
</style>
<style>
/* Font Rendering */
body 
{
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: 
 antialiased; -text-rendering: 
 auto;
}      
h1, h2, h3 {-text-rendering: optimizeLegibility;} 
</style>
//paste in the body of the page and place a div with an id of “instagram-feed”//
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/jquery.instagramFeed.js"></script>
<script>
$(window).on('load', function(){
  $.instagramFeed({
    'username': 'flux.academy',
    'container': "#instagram-feed",
    'items': 5,
    'margin': 1
  });
});
</script>
//Hide unnessesary stuf and wrap all (paste the code in the head of the page)//
<style>
.instagram_profile {
  display: none
}

.instagram_profile {
  display: none
}

.instagram_gallery {
    display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;

   -webkit-flex-direction: row;
   -ms-flex-direction: row;
    flex-direction: row;

   -webkit-align-items: center;
   -ms-flex-align: center;
    align-items: center;

   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
    justify-content: space-between; 
    
   -webkit-flex-flow:row wrap;
   -ms-flex-flow:row wrap;
   flex-flow:row wrap;
}

//controll number of images per row with the "%"
.instagram_gallery a {
  width: 33.33% !important;
}

.instagram_gallery a img {
  width: 98%!important;
  display: block;
  height: auto;
}
</style>
<!--ESTILOS:
- Toda la barra se llama: scrollbar(barra = en ingles "bar")
- thumb: se le llama al pulgar que esta dentro
- track: se le llama al camino, pista.
Entonces cuendo quieras editar solo tienes que combinar:
::-webkit-scrollbar{}
::-webkit-scrollbar-thumb{}
::-webkit-scrollbar-track{}
A todos puedes aplicarles: puedes aplicarle border-radious, background, etc..
EXEPTO: dimenciones como whidth(esto le corresponde a la barra (scrollbar)).
NOTA: primero se deve editar(aunque sea minimo) scrollbar sino no correra las ediciones de los 
      otros componentes     
-->

<!--TRANSICIÓN: Se le denomina Smooth Scroll al efecto de transición
-CSS: scroll-behavior: smooth; para transiciones suabes
  html {
  scroll-behavior: smooth; // se le aplica al elemento que genera el scroll, ejemp la pagina.
  }
-Javascript: 
  window.scroll({
    top: 2500, 
    left: 0, 
    behavior: 'smooth'
  }); // aplicado a la ventana principal. vea el link hay otro caso
-->
/*
Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.
*/

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
/* 
Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings). 
*/

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
<div id="container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>
<!--
const element = document.querySelector("#container");

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
    
  });
});
-->

<!--
#container {
  display: flex;
  overflow-x: scroll;
  
  max-width: 50rem;
  margin: 0 auto;
}

#container p {
  font-family: sans-serif;
  
  border-radius: 8px;
  background: #ff6961;
  color: white;
  
  padding: 2rem 3rem;
  margin: 2rem 1rem;
}
-->
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
/* Language Switcher */
header ul.sub-menu{
    padding: 14px 20px !important;
    background-color: #FFF;
    box-shadow: 0 10px 25px rgb(32 32 35 / 14%);
    border-radius: 6px;
}
header ul.sub-menu > li > a{
    text-align: left !important;
    transition: all .3s ease-in-out;
}
header ul.sub-menu > li span.menu-item-text > img{
    vertical-align: sub;
    width: 16px !important;
    max-height: 16px !important;
    height: 16px !important;
    border-radius: 50%;
}
.pp-advanced-menu .pp-has-submenu-container img{
    display: none;
}
.pp-advanced-menu .pp-has-submenu-container span.menu-item-text::before{
    content: "\f0ac";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    display: inline-block;
    font-size: 16px;
    margin-right: 5px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.pp-advanced-menu .pp-has-submenu-container .pp-menu-toggle{
    right: -10px;
}
header .pp-advanced-menu ul.menu > li.menu-item-has-children.pp-has-submenu:hover span.pp-menu-toggle {
    transform: rotate(-180deg);
}
header .pp-advanced-menu ul.menu > li.menu-item-has-children.pp-has-submenu span.pp-menu-toggle {
    transition: all .3s ease-in-out;
}
body:not(.fl-builder-edit) header .pp-advanced-menu ul.menu > li.menu-item-has-children.pp-has-submenu {
    padding: 25px 0;
}
ul.sub-menu > li.lang-item-en span.menu-item-text img,
ul.sub-menu > li.lang-item-id span.menu-item-text img,
ul.sub-menu > li.lang-item.current-lang{
    display: none;
}
ul.sub-menu > li.lang-item > a{
    padding: 0 !important;
}
ul.sub-menu > li.lang-item-en span.menu-item-text::before,
ul.sub-menu > li.lang-item-id span.menu-item-text::before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
}
ul.sub-menu > li.lang-item span.menu-item-text > span{
    margin-left: 10px !important;
}
ul.sub-menu > li.lang-item-en span.menu-item-text::before{
    background: url('/wp-content/uploads/australia.svg');
}
ul.sub-menu > li.lang-item-id span.menu-item-text::before{
    background: url('/wp-content/uploads/indonesia.svg');
}
@media(min-width: 860px){
  header .pp-advanced-menu ul.menu > li.menu-item > a{
    position: relative;
  }
  header .pp-advanced-menu ul.menu > li.menu-item > a:before{
      position: absolute;
      width: 0;
      height: 2px;
      content: "";
      bottom: -10px;
      left: 50%;
      transform: translatex(-50%);
      -webkit-transform: translatex(-50%);
      -moz-transform: translatex(-50%);
      background-color: #EF9A9A;
      border-radius: 5px;
      transition: 0.6s width ease;
  }
  header .pp-advanced-menu ul.menu > li.menu-item > a:hover:before,
  header .pp-advanced-menu ul.menu > li.active > a:before{
      width: 25px;
  }
  header .pp-advanced-menu ul.menu > li.active > a{
      color: #EF9A9A !important;
  }
}
header.fl-theme-builder-header-shrink .fl-row-content-wrap {
    box-shadow: 0 1px 25px rgba(57,63,72,.1);
    padding: 10px 20px;
}
header .menu > li.menu-item:last-child{
    display: none;
}
header .pp-advanced-menu ul.menu > li.menu-item{
    position: relative;
}
header .pp-advanced-menu ul.menu > li.menu-item > a{
    transition: all .3s ease-in-out;
}
.fl-page a{
    text-decoration: none !important;
    transition: all .3s ease-in-out;
}
.fl-rich-text p{
  margin-bottom: 0;
}
.fl-rich-text p:not(:first-child){
    margin-top: 25px;
}
a.fl-button{
    transition: all .3s ease-in-out;
}
body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<style> .wf-force-outline-none[tabindex="-1"]:focus{outline:none;} </style>


<style>

[data-option-label="color-name-link"] {
background-image: url("image-color-name"); // you get those field from a cms colors collections / put as many data option label field as maximum colors swatch you would like to have
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-2:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-2:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-3:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-3:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-4:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-4:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-5:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-5:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
ֿ/*/ ((--=.lw-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
   kjborder: 3px solid  #ffb700;))--
}
/*/
video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}

</style>

<style>
.color-buttons:focus {
outline: none;
}
.color-buttons{
box-shadow: 0 0 0 1px #1f2d1c;
border: 2.5px solid #faf5f2;
}

.color-buttons:active {
box-shadow: 0 0 0 1px #bababa;
}
.color-buttons:hover {
box-shadow: 0 0 0 1px #bababa;
}

body {
 overflow-x: hidden !important;
  position: relative !important;
  width:100% !important;
  }
  

</style>

<!-- No Highlight Tabs  -->
<style>                                  
.arrow {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */                                  
</style> 

<script>
document.querySelectorAll('[data-node-type="commerce-add-to-cart-pill"]').forEach(el => el.dataset['optionLabel'] = el.textContent)
</script>

<script>
  var FC = FC || {};
 
  FC.onLoad = function () {
    FC.client.on("ready.done", function () {
      document
        .querySelector(".w-commerce-commerceaddtocartbutton")
        .addEventListener("click", (e) => {
          e.preventDefault();
 
          const name = document.querySelector(".foxy-product-name").innerText;
          const price = document.querySelector(".foxy-product-price").innerText;
          const code = document.querySelector(".foxy-product-code").innerText;
          const image = document.querySelector(".foxy-product-image").src;
 
          const quantity = document.querySelector(".w-commerce-commerceaddtocartquantityinput").value;
 
          let cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&code=${code ?? encodeURIComponent(code)}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}`;
 
          const variantSelect = document.querySelectorAll("[data-node-type='commerce-add-to-cart-option-select']");
 
          const variantName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.previousElementSibling.innerText)
          );
 
          const variantValueName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.options[select.selectedIndex].text)
          );
 
          const variantValue = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.value)
          );
 
          if (variantSelect.length > 0 && variantValue.includes("")) {
            return;
          } else {
            variantName.forEach(
              (name, index) => (cartUrl += `&${name}=${variantValueName[index]}`)
            );
 
            FC.client.event("cart-submit").trigger({
              data: { cart: "add" },
              url: cartUrl,
            });
          }
        });
    });
  };
</script>
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}
img{
  display:block; 
  margin-left: auto; 
  margin-right: auto; 
}
   .new_banner, .sale_banner, .discount-label {
      font-size: 12px;
    }

	.product_slider .slides .image__inner {position: relative; margin: 0 auto;}
//HTML
<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li>About Us</li>
</ul>

//JS
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

while(nextSibling) {
    console.log(nextSibling);
    nextSibling = nextSibling.nextElementSibling;
}
//HTML
<div class="container">
  <div class="star-widget">
    <input type="radio" name="rate" id="rate-5" />
    <label for="rate-5" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-4" />
    <label for="rate-4" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-3" />
    <label for="rate-3" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-2" />
    <label for="rate-2" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-1" />
    <label for="rate-1" class="fas fa-star"></label>
 </div>
</div>


//CSS
html,
body {
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background-color: rgb(16, 16, 16);
}

.container {
  width: 400px;
  background-color: #111;
  padding: 20px 30px;
  border: 1px solid #444;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* STARS */
.star-widget input {
  display: none;
}

.star-widget label {
  font-size: 40px;
  color: #444;
  padding: 10px;
  float: right;
  cursor: pointer;
  transition: all 0.2s ease;
}

input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
  color: #fd4;
}
input:checked ~ label {
  color: #fd4;
}

input#rate-5:checked ~ label {
  color: #fe7;
  text-shadow: 0 0 20px #952;
}
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #082032;
}
.wrapper {
    display: flex;

}
.wrapper .static-txt{
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}
.dynamic-txt li{
    list-style: none;
    color: #ff4c29;
    font-size: 60px;
    font-weight: 500;
    top: 0;
    position: relative;
    animation: slide 12s steps(4) infinite;
}
@keyframes slide { 
    100%{
        top:-360px
    }
    
}

.wrapper .dynamic-txt{
    margin-left: 15px;
    line-height: 90px;
    height: 90px;
   
    overflow: hidden;

}
.dynamic-txt li{
    position: relative;
}
.dynamic-txt li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #082032;
    border-left: 2px solid #ff4c29;
    left: 0;
    animation: typing 3s steps(10) infinite;

}
@keyframes typing {
    40%,
    60% {
        left: calc(100% + 30px);
    }
    100% {
        left: 0;
    }
}
/* hide deal name and closed date columns on pipeline table */
.post-type-archive-deal .deal_table thead tr th:nth-child(2),
.post-type-archive-deal .deal_table tbody tr td:nth-child(2),
.post-type-archive-deal .deal_table thead tr th:nth-child(6),
.post-type-archive-deal .deal_table tbody tr td:nth-child(6) {
  display: none;
}
/*-- hide new and popular widget from group --*/
.company-id-386 .dash_widget_holder {
  display: none;
}
/* ---hide delete deal button--- */
.subscriber .btn.red.confirm_delete {
  display: none;
}
/*--- hide available content in training and presales ---*/
.post-type-archive-learn .section_holder:last-child {
  display: none;
}
/* --- hide left nav item from sub */
.subscriber li.menu-learn {display: none; }
/*-- css for partner tier styles --*/
.tier_level {
     height: auto;
     float: right;
     padding-right: 10px;
}
.tier_level img {
    height: 65px;
    width: auto;
    position: absolute;
    top: -3px;
    right: 275px;
}
@media only screen and (max-width: 600px){
  .tier_level img {
      right: 50px;
      top: 1px;
      height: 55px;
  }
}
 
 
 
// JS to display logos based on group
jQuery(document).ready(function ($) {
 
    var isLoggedIn = !!$(".logged-in").length;
    var myGroups = isLoggedIn ? abUser.group_id : [];
 
    function partnerTierFunction() {
      // set up DOM
      $("#header .wrapper").append('<div class="tier_level"></div>');
      // create object for partner tiers
      var myTier = {
        "19": {
          name: "Steel",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png"
        },
        "23": {
          name: "Cobalt",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png"
        },
        "24": {
          name: "Sky",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png",
        },
        "25": {
          name: "Sapphire",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png",
        },
      };
 
      // check if the user is in a tier group
      for (var i = 0; i < myGroups.length; i++) {
        // associate tier label to group values
        var groups = myGroups[i];
        var tier = myTier[groups];
        // populate DOM with tier label
        if (tier !== undefined) {
          var $z = $("div.tier_level");
          $z.append('<img src="' + tier["image"] + '">');
          break;
        }
      }
    }
 
    function visibilityDriver() {
      visScenarios.forEach(function(scenario) {
        if (scenario.condition) {
          scenario.outcome();
        }
      })
    }
    
    var visScenarios = [
      {
        condition: isLoggedIn,
        outcome: function () {
          partnerTierFunction();
        },
      },
    ];
    visibilityDriver();
 
}); // end ready function
/*-- CSS deal to opportunity edits --*/
.single-prospect_page ul.tab_nav li:nth-child(4) a { visibility:hidden; }
.deal-child .pipeline_overview h2.page_title,
.deal-child article h1,
#box_tab_related_deals .not_available,
#box_tab_related_deals .existing_deal_btn,
#box_tab_related_deals p,
#box_tab_related_deals h2,
.ab_header_btns .deal_reg .btn_title,
.deal_table thead tr th:nth-child(2),
.pipeline_summary .flex:nth-child(2) h3,
.pipeline_summary .flex:nth-child(3) h3,
.coach_sidebar_title,
.coach_overview__name .coach_overview__label { display:none; }

  // JS deal to opportunity edits
  $('.deal-child .pipeline_overview h2.page_title').html('Register an Opportunity').show();
  $('.deal-child article h1').html('Opportunity Registration').show();
  $('.coach_overview__name .coach_overview__label').html('Opportunity Name').show();
  $('.coach_sidebar_title').html('Opportunity Information').show();
  $('.pipeline_summary .flex:nth-child(2) h3').html('Number of Opportunities').show();
  $('.pipeline_summary .flex:nth-child(3) h3').html('Average Opportunity Size').show();
  $('.deal_table thead tr th:nth-child(2)').html('Opportunity Name').show();
  $('#tiptip_content').hide();
  $('.ab_header_btns .deal_reg').attr('title', 'Create an Opportunity');
  $('.ab_header_btns .deal_reg .btn_title').html('Opp Reg').show();
  $('.single-prospect_page ul.tab_nav li:nth-child(4) a').html('Related Opportunities').css('visibility', 'visible');
  $('#box_tab_related_deals h2').html('Related Opportunities').show();
  $('#box_tab_related_deals p').text('View Opportunities associated with this Prospect Page.').show();
  $('#box_tab_related_deals .existing_deal_btn').text('Link to a related Opportunity').show();
  $('#box_tab_related_deals .not_available').text("You don't have any Opportunities associated with this Prospect Page.").show();
.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
/* ---View Now button color--- */
.single-learn .flex.btn.block {background: #b61668; }
.single-knowledge-base .flex.btn.block {background: #b61668; }
.single-campaign .flex.btn.block {background: #b61668; }
/*-- increase size of dr button --*/
.post-type-archive-deal div.ab_header_btns {
  font-size: 1.2rem;
}
/* --- left side nav order --- */
.menu_main li.menu-dashboard {order:0; }
.menu_main li.menu-win {order: 1; }
.menu_main li.menu-learn {order: 2; }
.menu_main li.menu-events {order: 3; }
.menu_main li.menu-playbooks {order: 4; }
.menu_main li.menu-engage {order: 5; }
.menu_main li.menu-pipeline {order: 6; }
.menu_main li.menu-mdf {order: 7; }
.menu_main li.menu-prospect {order: 8; }
.menu_main li.menu-campaigns {order: 9; }
.menu_main li.menu-knowledge-base {order: 10; }
:root {
  /* primary colors */
  --primary-color: #45454f;
  --primary-color-hover: #45454fcc;

  /* secondary colors */
  --secondary-color: #45454f;
  --secondary-color-hover: #45454fcc;

  /* aditional colors */
  --tertiary-color: #696969;
  --neutral-color-black: #464145;

  --white: #ffffff;
}

/* ------------------ LOGIN PAGE ------------------ */
/* LOGIN buttons */
a.um_button.btn_idp,
#signup_form #insert_user,
.credentials_content form input[type="submit"],
.um_login_button {
  background-color: var(--primary-color);
  color: #3a94c6;
}

/* LOGIN buttons (HOVER) */
a.um_button.btn_idp:hover,
#signup_form #insert_user:hover,
.credentials_content form input[type="submit"]:hover,
.um_login_button:hover {
  background-color: var(--primary-color-hover);
  color: #91a8c4;
}

/* LOST PASSWORD */
.credentials_content a[class^="lostpassword_link"],
#signup_form > p.signin_now > a {
  color: var(--secondary-color);
  color: #3a94c6;
}

/* LOST PASSWORD (HOVER) */
.credentials_content a[class^="lostpassword_link"]:hover {
  color: var(--secondary-color-hover) !important;
  color: #91a8c4;
}

/* REQUEST AN ACCOUNT */
.join_button {
  color: var(--secondary-color) !important;
  color: #3a94c6;
}

/* REQUEST AN ACCOUNT (HOVER) */
.req_account_container .join_button:hover {
  color: var(--secondary-color-hover) !important;
  color: #91a8c4;
}

/* ------------------ DASHBOARD ------------------ */
/* Hero Image CTA button */
.dashboard-hero .btn--minimal {
  color: #f2f2f2;
  background: #3a94c6;
}

/* Hero Image CTA button (HOVER) */
.dashboard-hero .btn--minimal:hover {
  color: #f2f2f2;
  background: #91a8c4;
}

/* Quick Links Widget text */
.dashboard-quicklinks__links ol li a,
.dashboard-quicklinks__links ol li::before {
  color: #3a94c6;
}

/* View my Channel Manager Widget button */
.dashboard-minimal .btn--minimal--blue {
  margin: 10px;
  border-radius: 3px;
  background: #3a94c6 !important;
  color: #fff;
}

/* View my Channel Manager Widget button (HOVER) */
.dashboard-minimal .btn--minimal--blue:hover {
  color: #fff;
  background: #91a8c4 !important;
}

/*-------------DASHBOARD BUTTONS-------------*/
/* Dashboard Buttons - Icons */
.dashboard-btn__content span {
  color: #3a94c6;
}

/* Dashboard Buttons - Arrows */
.dashboard-btn__content__arrow svg {
  stroke: #3a94c6;
}

/*--Dashboard Buttons - Title color (right of icon)--*/
.dashboard-btn__content__category {
  color: #3a94c6;
}

/* Dashboard Buttons - background color (HOVER) */
.dashboard-btn:hover {
  background: #6e83b1;
}

/*-- DB Button Text Hover --*/
.dashboard-btn:hover .dashboard-btn__content span,
.dashboard-btn:hover .dashboard-btn__content__arrow svg,
.dashboard-btn:hover .dashboard-btn__content__category,
.dashboard-btn:hover .dashboard-btn__content__text,
.dashboard-btn:hover .dashboard-btn__content h4 {
  color: #f2f2f2;
  stroke: #f2f2f2;
}

/*---------------------- New and Popular Widget ----------------------*/
/* New and Popular Widget - Text */
.dashboard-popular-new__tab-content ul li::before,
.dashboard-popular-new__tab-content
  ul
  a
  .dashboard-popular-new__tab-content__pane__link
  p,
.dashboard-popular-new__tab-content
  ul
  a
  .dashboard-popular-new__tab-content__pane__views
  p {
  color: #272e40;
}

/* New and Popular Widget - Active Header */
.dashboard-popular-new__tab-row a.active {
  background: #6e83b1;
}

/* New and Popular Widget - Inactive Header */
.dashboard-popular-new__tab-row a {
  background: #6e83b1;
}

/* ----------------------Calendar Widget ----------------------*/
.dashboard-calendar__title a {
  color: var(--primary-color);
}

.dashboard-calendar__event__details .category {
  color: var(--primary-color);
}

/*----------------------Pinned Content----------------------*/
.dashboard-minimal .empty_asset_content h3 {
  color: var(--primary-color);
}

/*--Header initials avatar bckground color--*/
.avatar_small svg rect {
  fill: #272e40;
}

.empty_asset_content h3 {
  color: var(--primary-color);
}

.cta-button-slider__buttons li button {
  background-color: var(--primary-color);
}

/*--View Event button and Update button--*/
.btn,
.btn:link,
.btn:visited,
.ab_settings input[type="submit"] {
  background-image: none !important;
  padding: 10px 20px;
  background-color: var(--primary-color);
}

/*--View Event button and Update button (HOVER)--*/
.btn:hover,
.btn:active,
.ab_settings input[type="submit"]:hover,
.ab_settings input[type="submit"]:active {
  background-color: var(--secondary-color-hover) !important;
}

/*--Event +playbook button (BG) color--*/
.btn.dark,
.btn.dark:link,
.btn.dark:visited {
  background-color: var(--primary-color);
}

/*--Event +playbook button (text HOVER) color--*/
.btn.dark:hover,
.btn.dark:active {
  color: #f2f2f2;
}

/*--Deal header icon text color--*/
.ab_header_btns span.btn_title {
  color: #272e40;
}

/*--Deal header icon color--*/
.ab_header_btns span[class^="icon-"] {
  background-color: #3a94c6;
}

/*--Deal header icon color (HOVER)--*/
.ab_header_btns a:hover span[class^="icon-"] {
  background-color: #3a94c6;
}

/*--Header tab selection color--*/
.tab_nav.horizontal li.active a {
  border-bottom-color: var(--primary-color);
}

/*--Event title color (HOVER)--*/
a:hover .asset_content h3 {
  color: var(--primary-color) !important;
}

/*--S&E filter button text color--*/
#filter_results form input[type="submit"],
.post-type-knowledge-base #searchsubmit {
  background-color: var(--primary-color) !important;
  color: #fff;
}

/*--S&E filter button text color--*/
#filter_results form input[type="submit"]:hover,
.post-type-knowledge-base #searchsubmit:hover {
  background-color: var(--primary-color-hover) !important;
  color: #fff;
}

/*--Default dropdown menu link color--*/
.user_content a:link,
.user_content a:visited,
a.logout_link span[class^="icon-"] {
  color: #4d4d4f;
}

/*--Default dropdown menu icon color--*/
.user_content a span[class^="icon-"] {
  color: #3a94c6;
}

/*--Dropdown link color (HOVER)--*/
.user_content a:hover,
a.logout_link:hover {
  color: #3a94c6;
}

/*--Drop down menu icon color (HOVER)--*/
.user_content a:hover span[class^="icon-"],
a.logout_link:hover span[class^="icon-"] {
  color: #272e40;
}

/*--Bell header icon color--*/
#ab_notifications > a > span {
  color: #6a65ad;
}

/*--Team CoLab header icon color--*/
#ab_colab > a > span {
  color: #3a94c6;
}

#ab_notifications > a:hover > span,
#ab_colab > a:hover > span {
  opacity: 0.7;
}

/*--(/Learn) course percentage text color--*/
.asset a:link,
.asset a:visited {
  color: var(--primary-color);
}

.asset .progress span {
  background: var(--primary-color);
}

/*--System settings active selection color--*/
.content_nav ul li.active a:before {
  background-color: var(--primary-color);
}

/*--Pipeline total value color--*/
.pipeline_summary .flex.pipeline_total {
  background-color: #272e40;
}

/*--Pipeline (Deal details) milestone text--*/
.coach_overview__label {
  color: var(--primary-color);
}

/*--Pipeline (Deal details) milestone outer circle--*/
.status_check.complete .check_holder {
  border-color: var(--primary-color);
}

/*--Pipeline (Deal details) milestone inner circle--*/
.status_bar.complete,
.status_check.complete .check_holder span[class^="icon-"] {
  background-color: var(--primary-color);
}

/*--Pipeline (Deal details) deal info title--*/
.coach_sidebar_title {
  color: var(--primary-color);
}

.coach_team_avatar:hover {
  border-color: var(--primary-color);
}

#body_block > section > div.main_content.wrapper > form > a:hover {
  color: var(--primary-color-blue);
}

.profile_settings #ab_colab {
  color: var(--primary-color);
}

/*--Pinned Icon color--*/
span.icon-pin.pinned {
  color: var(--primary-color);
}

/* Show me How Widget */
#walkme-player
  > div
  > div.walkme-question-mark.walkme-override.walkme-css-reset,
.u-userLauncherColor:not([disabled]) {
  background-color: #6e83b1 !important;
}
/* update font */
body {
  font-family: "Montserrat", sans-serif !important;
}
/*-- move login box to the left --*/
.home_credentials a .ab_login_logo {
  display: none;
}
.home_credentials {
  margin-top: 2% !important;
}
@media only screen and (min-width: 1550px) {
  .home_credentials {
    margin-right: 62% !important;
  }
}
@media only screen and (min-width: 1351px) and (max-width: 1550px) {
  .home_credentials {
    margin-right: 59% !important;
  }
}
@media only screen and (min-width: 1151px) and (max-width: 1350px) {
  .home_credentials {
    margin-right: 55% !important;
  }
}
@media only screen and (min-width: 1026px) and (max-width: 1150px) {
  .home_credentials {
    margin-right: 52% !important;
  }
}
@media only screen and (min-width: 976px) and (max-width: 1025px) {
  .home_credentials {
    margin-right: 25% !important;
  }
}
@media only screen and (min-width: 751px) and (max-width: 975px) {
  .home_credentials {
    margin-right: 20% !important;
  }
}
@media only screen and (min-width: 601px) and (max-width: 750px) {
  .home_credentials {
    margin-right: 12% !important;
  }
}
@media only screen and (max-width: 600px) {
  .home_credentials {
    margin-right: 5% !important;
  }
}
section.home_login {
  background-size: 100%;
}
*{
   margin: 0;
   padding: 0;
}
header{
  background-image:linear-gradient(rgba(0,0,0.5),rgba(0,0,0,0.5)), url('img/taj.jpg');
  height: 100vh;
  background-size:cover;
  background-position:center;

}
ul{
  float: right;
  list-style-type: none;
  margin-top: 25px;
}
ul li{
  display:inline-block;
}
ul li a{
    text-decoration:none;
    color: #fff;
    padding:5px 20px;
    border:1px solid transparent;
    transition:0.6s ease;
}
ul li a:hover{
  background-color:#fff;
  color: #000;
}
ul li.active a{
  background-color:#fff;
  color: #000;

}
.logo h4{
  flood:left;
  color:#fff;
  height:10px;
  height-top:25px;
}
.main{
  max-width:1200px;
  margin:auto;
}
.title{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.title h1{
  color:#fff;
  font-size: 70px;
}
.button{
  position: absolute;
  top:60%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.btn{
    color: #fff;
    text-decoration:none;
    padding: 10px 30px;
    border: 1px solid #fff;
    transition: 0.6s ease;
    
}
.btn:hover{
  background-color:#fff;
  color: #000;

}


.next-image-button:focus {
  outline: none;
}
.next-image-button:focus-visible {
  outline: 3px solid currentColor; /* That'll show 'em */
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    /* CSS */
}
  .circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
  }

  .circle-list h2{
    position: relative;
    margin: 0;
  }

  .circle-list p{
    margin: 0;
  }

  .circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;
  }

  .circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
  }
  .rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;
  }

  .rectangle-list a:hover{
    background: #eee;
  }

  .rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
  }

  .rectangle-list a:after{
    position: absolute;
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;
  }

  .rectangle-list a:hover:after{
    left: -.5em;
    border-left-color: #fa8072;
  }
  .rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
  }

  .rounded-list a:hover{
    background: #eee;
  }

  .rounded-list a:hover:before{
    transform: rotate(360deg);
  }

  .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
  }
@import url("https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}


    .container{
        width: 100%;
        height: 100vh;
        background: #f0fff3;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .coupon-card{
        background: linear-gradient(135deg,#7158fe, #9d4de6 );
        color: #fff;
        text-align: center;
        padding: 40px 80px;
        border-radius: 15px;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0,0.15 );
        position: relative;

    }
    .logo{
        width: 100px;
        
        border-radius: 8px;
        margin-bottom: 20px
    }
    .coupon-card h3{
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
    }
    .coupon-card p{
        font-size: 15px;
    }
    .coupon-row{
        display: flex;
        align-items: center;
        margin: 25px auto;
        width: fit-content;
        font-size: 15px;
    }
    #cpncode{
        border: 1px dashed #fff;
        padding: 10px 20px;
        border-right: 0;
    }
    #cpnbtn{
        border: 1px solid #fff;
        background: #fff;
        padding: 10px 20px;
        color: #7158fe;
        cursor: pointer;
    }

    .circle1,.circle2{
        background: #f0fff3;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;  
        top: 50%;
        transform: translateY(-50%);
      }
      .circle1{
          left: -25px;
      }
      .circle2{
        right: -25px;
    }
@import url("https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}


    .container{
        width: 100%;
        height: 100vh;
        background: #f0fff3;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .coupon-card{
        background: linear-gradient(135deg,#7158fe, #9d4de6 );
        color: #fff;
        text-align: center;
        padding: 40px 80px;
        border-radius: 15px;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0,0.15 );
        position: relative;

    }
    .logo{
        width: 100px;
        
        border-radius: 8px;
        margin-bottom: 20px
    }
    .coupon-card h3{
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
    }
    .coupon-card p{
        font-size: 15px;
    }
    .coupon-row{
        display: flex;
        align-items: center;
        margin: 25px auto;
        width: fit-content;
        font-size: 15px;
    }
    #cpncode{
        border: 1px dashed #fff;
        padding: 10px 20px;
        border-right: 0;
    }
    #cpnbtn{
        border: 1px solid #fff;
        background: #fff;
        padding: 10px 20px;
        color: #7158fe;
        cursor: pointer;
    }

    .circle1,.circle2{
        background: #f0fff3;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;  
        top: 50%;
        transform: translateY(-50%);
      }
      .circle1{
          left: -25px;
      }
      .circle2{
        right: -25px;
    }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
  height: 55px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
form i{
  position: absolute;
  width: 55px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ i{
  color: #58cff1;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 50px 0 45px;
  font-size: 20px;
  caret-color: #58cff1;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input::selection{
  color: #fff;
  background: #58cff1;    
}
form input:focus,
form input:valid{
  border-color: #58cff1;
}
form input::placeholder{
  color: #c4c4c4;
}
form .counter{
  position: absolute;
  right: 3px;
  width: 55px;
  font-size: 20px;
  color: #c4c4c4;
  text-align: center;
  border-left: 1px solid #d8d8d8;
  pointer-events: none;
}
form input:valid ~ .counter{
  color: #58cff1;
  border-color: #58cff1;
}
body {
 background-image: radial-gradient(circle, #FFF, #FFF 1px, #171717 1px, #171717);
    background-size: 28px 28px;
}
/*Generic Media Query 
	========================================================================== */

h1 {
  font-size: 1.5rem;
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 2rem;
  }
}


/*Reset Border Box 
	========================================================================== */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}




/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */