Snippets Collections
"default-src 'none'; frame-src 'self'; frame-ancestors 'self'; connect-src 'self'; font-src 'self'; img-src 'self'; media-src 'self'; base-uri 'self'; object-src 'none'; script-src 'none'; style-src 'self'; mysite.com.au *.mysite.com.au"
<a href="{{ product.url }}"> 
  ...
</a>                
<html>
<body>
	<table border="0" cellspacing="0" cellpadding="0" width="703" style="width:527.25pt">
<tbody>
<tr>
<td width="40%" style="width:40.0%;padding:11.25pt 11.25pt 11.25pt 11.25pt">
<p style="margin-top:0;margin-bottom:0;"><span style="color:#2f5496"><img width="249" height="249" style="width:2.5937in;height:2.5937in" src="https://le-chiffre.be/wp-content/uploads/2024/02/Tatiana-LeChiffre-siganture-copie.png"  tabindex="0"><div style="opacity: 0.01; left: 216px; top: 384.932px;"></div></span></p>
</td>
<td width="40%" style="width:40.0%;padding:11.25pt 11.25pt 11.25pt 11.25pt">
<p style="margin-top:0;margin-bottom:0;"><strong><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:22.5pt;color:#0f3b5a">Tatiana Travieso Torres</span></strong></p>
<p style="margin-top:0;margin-bottom:0;"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a">Stagiaire Expert-comptable</span></p>
<p style="margin-top:0;margin-bottom:0;height:31px;"><span style="color:#2f5496"><img width="296" height="31" style="width:3.0833in;height:.3229in" src="https://le-chiffre.be/images_signature/new_10.jpg" ></span><span style="color:#2f5496"></span></p>
<p style="margin-top:0;margin-bottom:0;"><span style="color:#2f5496"><a href="https://le-chiffre.be" target="_blank"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a;text-decoration:none">www.le-chiffre.be</span></a></span></p>
<p style="margin-top:10px;margin-bottom:10px;"><span style="color:#2f5496"><a style="text-decoration: none;" href="tel:+32491735670" target="_blank"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a;text-decoration:none">+32 491 73 56 70</span></a></span></p>
<p style="margin-top:10px;margin-bottom:10px;"><span style="color:#2f5496"><a style="text-decoration: none;" href="https://goo.gl/maps/7HKJ2DkUjARxSSbw8" target="_blank"><span style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:13.5pt;color:#0f3b5a;text-decoration:none;">Rue de Goz&#233;e 596,<br> 6110 Montigny-Le-Tilleul</span></a></span></p>
<p style="margin-top:0;margin-bottom:0;"><a href="https://www.facebook.com/lechiffrecomptepourvous" target="_blank"><span style="text-decoration:none"><img border="0" width="27" height="25" style="width:.2812in;height:.2812in" src="https://le-chiffre.be/images_signature/new_17.jpg" ></span></a><a href="https://www.linkedin.com/in/tatiana-travieso-torres-04848712b/" target="_blank"><span style="text-decoration:none"><img border="0" width="26" height="25" style="width:.2708in;height:.2604in" src="https://le-chiffre.be/images_signature/new_18.jpg" ></span></a><span style="color:#2f5496"><img border="0" width="243" height="25" style="width:2.5312in;height:.2604in" src="https://le-chiffre.be/images_signature/new_19.jpg" ></span><span style="color:#2f5496"></span></p>
</td>
<td width="20%" style="width:20.0%;padding:11.25pt 11.25pt 11.25pt 11.25pt">
<p style="margin-top:0;margin-bottom:0;"><span style="color:#2f5496"><img border="0" width="76" height="34" style="width:.7916in;height:.3541in" src="https://le-chiffre.be/images_signature/new_06.jpg" ></span><span style="color:#2f5496"><img border="0" width="76" height="99" style="width:.7916in;height:1.0312in" src="https://le-chiffre.be/images_signature/new_09.jpg" ></span><span style="color:#2f5496"><img border="0" width="76" height="53" style="width:.7916in;height:.552in" src="https://le-chiffre.be/images_signature/new_16.jpg" ></span><span style="color:#2f5496"></span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--HTML Code-->
  
  <form id="contact_form" method="post">
    <div class="row">
        <div class="col-md-12 form-group g-mb-20">
            <input type="text" class="form-control" id="txtContactName" name="txtContactName" placeholder="Full Name" tabindex="201" required>
            <div class="error-message" id="txtContactName-error"></div>
        </div>

        <div class="col-md-12 form-group g-mb-20">
            <input type="email" class="form-control" id="txtContactEmail" name="txtContactEmail" placeholder="Email Address" tabindex="202" required>
            <div class="error-message" id="txtContactEmail-error"></div>
        </div>

        <div class="col-md-12 form-group g-mb-20">
            <input type="text" class="form-control" id="txtContactPhone" name="txtContactPhone" placeholder="Contact Number" maxlength="10" tabindex="203" required>
            <div class="error-message" id="txtContactPhone-error"></div>
        </div> 

        <div class="col-md-12 form-group g-mb-40">
            <textarea class="form-control" id="txtContactMessage" name="txtContactMessage" rows="7" placeholder="Message" maxlength="160" tabindex="204" required></textarea>
            <div class="error-message" id="txtContactMessage-error"></div>
        </div>
    </div>
    <input type="submit" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-default rounded-0 text-uppercase g-py-15 g-px-30" id="btnContactSubmit" name="btnContactSubmit" value="SUBMIT">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
	
</script>
<script>
    $(document).ready(function() {
        $('#contact_form').validate({
            rules: {
                txtContactName: "required",
                txtContactEmail: {
                    required: true,
                    email: true
                },
                txtContactPhone: {
                    required: true,
                    digits: true,
                    maxlength: 10
                },
                txtContactMessage: "required"
            },
            messages: {
                txtContactName: "Please enter your full name",
                txtContactEmail: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                txtContactPhone: {
                    required: "Please enter your contact number",
                    digits: "Please enter only digits",
                    maxlength: "Please enter a valid 10-digit phone number"
                },
                txtContactMessage: "Please enter your message"
            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest('.form-group').find('.error-message'));
            },
            submitHandler: function(form) {
                var formData = $(form).serialize();
                $.ajax({
                    type: 'POST',
                    url: 'mail.php',
                    data: formData,
                    success: function(response) {
                        $('#contact_form').append('<div class="success-message" style="color: green;">Message sent successfully!</div>');
                        setTimeout(function() {
                            $('#contact_form')[0].reset();
                        }, 4000);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        alert('Error: ' + xhr.responseText);
                    }
                });
            }
        });
    });
</script>

PHP Miler folder should be there
Create folder name with mail.php and add below code there 
<?php
// Include PHPMailer autoload file

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

// Load Composer's autoloader
require 'phpmailer/vendor/autoload.php';

// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve form data
    $name = $_POST['txtContactName'];
    $email = $_POST['txtContactEmail'];
    $phone = $_POST['txtContactPhone'];
    $message = $_POST['txtContactMessage'];

    // Initialize PHPMailer
    $mail = new PHPMailer(true);
    try {
        // SMTP settings
		$mail->IsSMTP();        // Sets Mailer to send message using SMTP
		$mail->SMTPAuth = true; // Authentication enabled
		$mail->SMTPSecure = 'tls'; // Secure transfer enabled REQUIRED for Gmail
		$mail->Host = 'smtp-relay.brevo.com';
		$mail->Port = 587;
		$mail->Username = 'advanceindiaprojectltd@gmail.com';
		$mail->Password = 'xsmtpsib-e66045ab99d2f28608d548ca33a5a3ac8cc14a6896d682cbdc5418c80154b5eb-6B5QJOyT18GvbzmZ';
		$mail->SMTPOptions = array(
			'ssl' => array(
				'verify_peer' => false,
				'verify_peer_name' => false,
				'allow_self_signed' => true
			)
		);

        // Recipients
        $mail->setFrom($email, $name);
        $mail->addAddress('roshan@teamvariance.com'); // Add recipient email address

        // Content
        $mail->isHTML(true);
        $mail->Subject = 'Contact Form Submission';
		// Construct HTML table for the email body
        $message = '
            <h3 align="center">Details</h3>
            <table border="1" width="100%" cellpadding="5" cellspacing="5">
                <tr>
                    <td width="30%">Name</td>
                    <td width="70%">' . $name . '</td>
                </tr> 
                <tr>
                    <td width="30%">Email</td>
                    <td width="70%">' . $email . '</td>
                </tr>
                <tr>
                    <td width="30%">Phone</td>
                    <td width="70%">' . $phone . '</td>
                </tr>
                <tr>
                    <td width="30%">Message</td>
                    <td width="70%">' . $message . '</td>
                </tr>
            </table>
        ';
        $mail->Body = $message;

        // Send email
        $mail->send();
        
        // Return success message
        echo "success";
    } catch (Exception $e) {
        // Return error message
        echo "error";
    }
}
?>



<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none">
<path d="M1 1.5L6 6.5L11 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<input                       
    type="text" 
    placeholder="Start date" 
    class="px-2 py-1 text-sm rounded text-gray-800" 
    x-init="new Pikaday({ field: $el })"
    x-on:change="$wire.startDate = formatDateToYYYYMMDD(new Date($el.value))"
/>
add_action('rest_api_init', 'register_reset_password_route');

function register_reset_password_route() {
    register_rest_route('wp/v1', '/users/resetpassword', array(
        'methods' => 'POST',
        'callback' => 'reset_password_callback',
        'permission_callback' => '__return_true',
    ));
}

function reset_password_callback($request) {
    $user_data = $request->get_params();

    if (empty($user_data['email'])) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => 'البريد الإلكتروني مطلوب',
        ), 400);
    }

    $user = get_user_by('email', $user_data['email']);

    if (!$user) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => 'المستخدم غير موجود',
        ), 404);
    }

    $reset = wp_generate_password(12, false);

    $result = wp_set_password($reset, $user->ID);

    if (is_wp_error($result)) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => $result->get_error_message(),
        ), 500);
    } else {
        wp_mail($user->user_email, 'إعادة تعيين كلمة المرور', 'تمت إعادة تعيين كلمة مرورك بنجاح. كلمة مرورك الجديدة هي: ' . $reset);

        return new WP_REST_Response(array(
            'success' => true,
            'message' => 'تم إعادة تعيين كلمة المرور بنجاح. يرجى التحقق من بريدك الإلكتروني للحصول على كلمة المرور الجديدة.',
        ), 200);
    }
}
<div class="side-scroll-container container">
    <div class="side-scroll-list-wrapper">
        <ul class="side-scroll-list">
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
            <li class="side-scroll-item">
                <div class="side-scroll-item-img">
                    <!-- img src removed -->
                </div>
                <div class="side-scroll-item-text"><!-- Text removed --></div>
            </li>
        </ul>
    </div>
    <ul class="side-scroll-status">
        <li class="side-scroll-status-item current"><span>1</span></li>
        <li class="side-scroll-status-item"><span>2</span></li>
        <li class="side-scroll-status-item"><span>3</span></li>
        <li class="side-scroll-status-item"><span>4</span></li>
        <li class="side-scroll-status-item"><span>5</span></li>
        <li class="side-scroll-status-item"><span>6</span></li>
        <li class="side-scroll-status-item"><span>7</span></li>
        <li class="side-scroll-status-item"><span>8</span></li>
        <li class="side-scroll-status-item"><span>9</span></li>
    </ul>
</div>
<div id="cursor">

  <div class="cursor__circle"></div>

</div>

​

<section>

  <div class="container">

    <div class="image-container" cursor-class="arrow">

      <img src="https://i.ibb.co/HDvyzVW/vase-2.jpg" alt="minimalist vase">

    </div>

  </div>

</section>
<div class="s_section">

  <div class="gutter">

    <h1>【SimpleBar】<br>スクロールバーを実装する<br>(横スクロール)</h1>

    <div class="scroll__inner" data-simplebar data-simplebar-auto-hide="false">

      <div class="f_area">

        <div class="f_one">

          <a href="https://5naroom.com/web/4" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt=""></a>
8
        </div>

        <div class="f_one">

          <a href="https://125naroom.com/web/44" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt=""></a>

        </div>
12
        <div class="f_one">

          <a href="https://125naroom.com/web/4184" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt=""></a>
14
        </div>

      </div>

    </div>

    <a href="https://125naroom.com/web/4184" target="_blank" class="_a">詳しくはこちら</a>
18
  </div>

</div>
<div class="p-ticker js-ticker">
    <div class="p-ticker__wrapper swiper-wrapper">
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
        <div class="p-ticker__item swiper-slide">
            <div class="p-ticker__text">
                text
            </div>
        </div>
    </div>
</div>
/**
 * dateUtils
 * Format Date using php's format string.  Date to/From ymd. Get Today's date as ymd or Date, with no time.
 *
 * @type {{todayYMD: (function(): string), ymdToDate: (function(*): Date), is_ymd: ((function(*): boolean)|*), today: (function(): Date), format: ((function((Date|string|number), string=, string=): string)|*), dateToYMD: (function(*): string), dateToDay: (function(*): Date), setLanguage(*): ({shortMonth, shortDay, longMonth, longDay})}}
 */
const dateUtils = {
    version: "2024-02-22",

    dateToDay: function(date){return new Date((new Date(date)).setHours(0, 0, 0, 0) );
    },

    dateToYMD: function date(date) {return this.dateToDay(date).toISOString().split('T')[0];},

    today: function() {return new Date((new Date()).setHours(0, 0, 0, 0) );},

    todayYMD: function() {return this.today().toISOString().split('T')[0];},

    ymdToDate: function(ymd) {return ymd.length === 10 ? this.dateToDay(ymd) : new Date(ymd); },

    is_ymd: function(value, dateOnly = true) {
        if(value === null || !isNaN(value) || typeof value !== 'string')
            return false;
        if(dateOnly) {
            if(value.length !== 10)
                return false;
            const regex = /^\d\d\d\d[-.\\\/_](0[1-9]|1[0-2])[-.\\\/_](0[1-9]|[1-2][0-9]|3[0|1])$/gm;
            return value.match(regex) !== null;
        }
        if(value.length < 10 || value.length > 27)
            return false;
        const regex =
           /^\d\d\d\d[-.\\\/_](0[1-9]|1[0-2])[-.\\\/_](0[1-9]|[1-2][0-9]|3[0|1])($|([ T]([0-1]\d|2[0-4]):[0-5]\d:[0-5]\d))/gm;
        return value.match(regex) !== null;
    },

    /**
     * Formats a date according to the given format string in PHP style
     *
     * @param {Date|string|number} inputDate - The date to be formatted. Can be a Date object, a date string, or a timestamp.
     * @param {string} [formatPhpStyle="d/M/y"] - The format string to be used for formatting the date. Defaults to "d/M/y"
     *  https://www.php.net/manual/en/datetime.format.php.
     * @param {string} [language="en"] - Englinsh en, Spanish es
     * @returns {string} - The formatted date string.
     * @throws {Error} - If an error occurs during the formatting process.
     */
    format: function(inputDate, formatPhpStyle = "d/M/y", language = "en")  {
        let lang = this.setLanguage(language);
        if(inputDate === null)
            return "";
        try {
            function padZero(value) {return value < 10  ? `0${value}` : `${value}`;}
            let date;
            if(inputDate instanceof Date)
                date = inputDate;
            else if(typeof inputDate === 'object')
                return "[object]";
            else if(isNaN(inputDate))
                date = this.is_ymd(inputDate) ?
                    new Date(`${inputDate}T00:00:00`) : new Date(inputDate);
            else
                date = new Date(inputDate);

            const parts = {
                d: padZero(date.getDate()),
                j: date.getDate(),
                D: lang.shortDay[date.getDay()],
                l: lang.longDay[date.getDay()],
                w: date.getDay(),

                m: padZero(date.getMonth() + 1),
                n: date.getMonth() + 1,
                M: lang.shortMonth[date.getMonth()],
                F: lang.longMonth[date.getMonth()],

                Y: date.getFullYear(),
                y: date.getFullYear().toString().slice(-2),

                H: padZero(date.getHours()),
                G: date.getHours(),
                h: padZero(date.getHours() > 12 ? date.getHours() - 12 : date.getHours()),
                g: date.getHours() > 12 ? date.getHours() - 12 : date.getHours(),
                i: padZero(date.getMinutes()),
                s: padZero(date.getSeconds()),

                a: date.getHours() < 12 ? 'am' : 'pm',
                A: date.getHours() < 12 ? 'AM' : 'PM',
            };

            let skip = false;
            let ret = [];
            for(let i = 0, len = formatPhpStyle.length; i < len; ++i) {
                let c = formatPhpStyle[i];
                if(c === "\\") {
                    skip = true;
                    continue;
                }
                if(skip) {
                    skip = false;
                    ret.push(c);
                    continue;
                }
                ret.push(parts.hasOwnProperty(c) ? parts[c] : c);
            }
            return ret.join("");
        } catch(error) {
            console.log("ERROR: fmt.date arguments:", arguments);
            console.log("       fmt.date error:", error);
            return inputDate;
        }
    },

    setLanguage(language) {
        switch(language.toLowerCase()) {
            case 'es':
                return {
                    longMonth: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
                        'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    shortMonth: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    longDay: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    shortDay: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                };
            case 'en':
            default:
                return {
                    longMonth: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
                        'October', 'November', 'December'],
                    shortMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    longDay: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    shortDay: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                };
        }
    },

};
try {history.replaceState({content: document.title}, document.title, document.location.href);} catch(e) {}
/** Vanilla javascript **/

    // Get the value of the checked radio button, undefined on not checked or not found
   let radioButtonValue = (document.querySelector("input[name='radioName']:checked") || {}).value || undefined

    // Check radio button with value ...
    (document.querySelector("input[name='radioName'][value='A']") || {}).checked=true;

/** jQuery **/

    // Get the value of the checked radio button, undefined on not checked or not found
   let radioButtonValue = $("input[name='radioName']:checked").val();

    // Check radio button with value ...
   $("input[name='radioName'][value='A']").prop('checked',true);
<style> 
  INPUT:checked + label {color: #00F;} 
</style>

<input id="theId" type="checkbox"><label for="theId"> The cat is here</label> 
<fieldset style="width:fit-content"><legend>Where is the Cat?</legend>
	<input id="cat_garden" name="cat_where" type="radio"><label for="cat_garden"> Garden</label> 
	<input id="cat_bed" name="cat_where" type="radio"><label for="cat_bed"> Bed</label> 
	<input id="cat_cushion" name="cat_where" type="radio"><label for="cat_cushion"> Cushion</label> 
</fieldset>
 //HTML





<div class="custom-mouse"></div>





//CSS


.custom-mouse{
    border: none;
    background-color: #fff;
    transform: translate(-50%, -100%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}



//JS


let customMouse = document.querySelector(".custom-mouse");
window.addEventListener("mousemove", function(details) {
   let xValue = details.clientX;
   let yValue = details.clientY;

   setTimeout(() => {
       customMouse.style.top = `${yValue}px`;
       customMouse.style.left = `${xValue}px`;
         
   }, 100);


});
 
HTML

 <nav>
      <ul>
          <li class="item">Home</li>
          <li class="item">Content</li>
          <li class="item">About</li>
          <li class="item">Contact Us</li>

      </ul>
  </nav>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="script.js"></script>


CSS


body{
    background-color: #fff;
    overflow: hidden;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.item{
    color: grey;
    font-size: large;
    font-weight: bolder;
    cursor: pointer;
}


JS


let itemList = document.querySelectorAll(".item");


itemList.forEach(function (item, index) {

    let animation = gsap.to(item, {color: "black",x:3,y: -3, ease: "", duration:0.3, paused:true  })
    
    item.addEventListener("mouseenter", function() {
        animation.play()
    })
    item.addEventListener("mouseleave", function() {
        animation.reverse()
    })
})

var number;
Console.WriteLine("Enter a number:");
number = Convert.ToInt32(Console.ReadLine());
if (IsPrime(number))
{
    Console.WriteLine("**" + number + " is a prime number**");
}
else
{
    Console.WriteLine("**" + number + " is not a prime number**");
}

public static bool IsPrime(int number)
{
    if (number <= 1) return false;
    if (number == 2) return true;
    if (number % 2 == 0) return false;
    var boundary = (int)Math.Floor(Math.Sqrt(number));
    for (int i = 3; i <= boundary; i += 2)
        if (number % i == 0)
            return false;
    return true;
}
Clear-Site-Data: "cache", "cookies", "storage"
Here's a guide on how to start developing poker software, outlining key steps and code structure:

1. Define the Scope of Your Project:

    Game Variants: Choose which poker variants you'll include (e.g., Texas Hold'em, Omaha, 5-Card Draw).
    Features: Decide on essential features like player accounts, gameplay, betting, tournaments, chat, and multi-platform compatibility.
    Target Platforms: Determine if you're developing for web, desktop, mobile, or a combination.

2. Choose Your Programming Language and Development Environment:

    Common Languages: Python, Java, C++, C#, and JavaScript are popular choices for game development.
    Development Environments: Select an IDE (Integrated Development Environment) like Visual Studio Code, PyCharm, or Eclipse for efficient coding.

3. Structure Your Code:

    Classes: Create classes for representing cards, decks, hands, players, game tables, and the game logic itself.
    Functions: Write functions to handle shuffling, dealing, betting, evaluating hands, and managing game flow.

4. Implement Core Functionalities:

    Card Deck: Create a class to represent a deck of cards, with methods for shuffling and dealing cards.
    Player Hand: Implement a class to hold a player's hand, with methods for evaluating hand strength.
    Game Logic: Write the core game logic, including betting rounds, hand comparisons, and pot management.

5. Design the User Interface (UI):

    Visual Design: Create visually appealing UI elements using graphics libraries or frameworks.
    User Interaction: Implement intuitive controls for players to interact with the game.

6. Test Thoroughly:

    Unit Testing: Test individual code units to ensure they function as intended.
    Integration Testing: Verify that different parts of the code work together seamlessly.
    User Testing: Gather feedback from real users to identify bugs and areas for improvement.

7. Deploy and Maintain:

    Deployment: Make your poker software available to users on your chosen platforms.
    Maintenance: Address any bugs or issues, and update the software with new features or improvements over time.
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<div id="container" style="--n:5;--d:5s">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div id="container" style="--n:9">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<div id="container" style="--n:5;--d:5s">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div id="container" style="--n:9">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
curl --resolve "redditclone.com:80:<IP of Ingress>" redditclone.com
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-reddit-app
spec:
  rules:
  - host: "domain.com"
    http:
      paths:
      - pathType: Prefix
        path: "/test"
        backend:
          service:
            name: reddit-clone-service
            port:
              number: 3000
  - host: "*.domain.com"
    http:
      paths:
      - pathType: Prefix
        path: "/test"
        backend:
          service:
            name: reddit-clone-service
            port:
              number: 3000
apiVersion: v1
# Indicates this as a service
kind: Service
metadata:
  # Service name
  name: reddit-clone-service
spec:
  selector:
    # Selector for Pods
    app: reddit-clone
  ports:
    # Port Map
  - port: 3000
    targetPort: 3000
    protocol: TCP
  type: LoadBalancer
apiVersion: apps/v1
kind: Deployment
metadata:
  name: reddit-clone-deployment
  labels:
    app: reddit-clone
spec:
  replicas: 2
  selector:
    matchLabels:
      app: reddit-clone
  template:
    metadata:
      labels:
        app: reddit-clone
    spec:
      containers:
      - name: reddit-clone
        image: rohanrustagi18/redditclone
        ports:
        - containerPort: 3000
docker build . -t <username> /reddit-clone:latest
FROM node:19-alpine3.15

WORKDIR /reddit-clone

COPY . /reddit-clone
RUN npm install 

EXPOSE 3000
CMD ["npm","run","dev"]
def is_prime(n):
    
    # Assume the number is prime and try to find counterexamples
    flag = True

    # Deal with special cases
    if n == 0 or n == 1:
        flag = False
    
    # Loop through all numbers between 2 and n - 1, and check if n is NOT prime
    i = 2
    while i < n:
        if n % i == 0:
            flag = False
        i = i + 1
    
    # Output the current value of flag
    return flag
<div class="hero-video text-center">
  <div class="video"><a data-docid="{{ YouTube ID }}" data-toggle="modal" data-modal-type="youtube" href="#mcui-modal"
      aria-label="Watch the Video" class="js-cta">
      <div class="img-wrapper">
        <div class="play-button play-button-wrapper col-12 col-sm-12 col-md-4 col-lg-5 p-0 order-lg-2 order-1">
          <span>Play</span>
          <svg fill="none" viewBox="0 0 7 10" height="10" width="7" xmlns="http://www.w3.org/2000/svg"><path d="M7 5L0.25 9.33013L0.25 0.669872L7 5Z"></path></svg>
        </div><img src="{{ video thumbnail URL }}" height="380" width="540" class="img-fluid" />
      </div>
    </a>
  </div>
</div>
<div class=" w-full h-screen p-4">

    <div class="h-14 w-full bg-slate-100 rounded-md font-semibold text-gray-800 flex items-center text-center px-2 transition-colors">
        <div class=" basis-1/3 rounded-md bg-white py-2 shadow-sm">New Items</div>
        <div class=" basis-1/3 rounded-md ">Return Items</div>
        <div class=" basis-1/3 rounded-md ">Issue Items</div>
    </div>

</div>
//HTML

<div id="progress-bar"></div>



//CSS

#progress-bar {
  height: 5px;
  background-color: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}




//JS

const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (documentHeight - windowHeight);
  progressBar.style.width = `${progress * 100}%`;
});

<object data="{{ $url }}" width="100%" height="100%">
      <embed src="{{ $url }}" width="100%" height="100%"></embed>
      Error: Embedded data could not be displayed.
</object>
sudo chmod 666 /var/run/docker.sock

ls -l /lib/systemd/system/docker.socket

sudo chgrp docker /lib/systemd/system/docker.socket

sudo chmod g+w /lib/systemd/system/docker.socket
pipeline {
    agent { label 'dev' }
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-app-new'
            }
        }
        stage('Deploy') {
            steps {
                 sh "docker-compose down && docker-compose up -d"
            }
        }
    }
}
pipeline {
    agent any
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-todo-app-new'
            }
        }
        stage ('Deploy') {
            steps {
                sh 'docker run -d -p 8000:8000 node-todo-app-new:latest'
            }
        }
    }
}
pipeline {
    agent any
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-todo-app-new'
            }
        }
        stage ('Deploy') {
            steps {
                sh 'docker run -d -p 8000:8000 node-todo-app-new:latest'
            }
        }
    }
}
sudo usermod -aG docker jenkins
sudo reboot
pipeline {
    agent any
    stages {
        stage('Code') {
            steps {
                git url: 'https://github.com/ishwarshinde041/node-todo-cicd.git', branch: 'master'
            }
        }
        stage('Build') {
            steps {
                sh 'docker build . -t node-app-new'
            }
        }
        stage('Deploy') {
            steps {
                sh sh "docker-compose down && docker-compose up -d"
            }
        }
    }
}
pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                //
            }
        }
        stage('Test') {
            steps {
                //
            }
        }
        stage('Deploy') {
            steps {
                //
            }
        }
    }
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>flex yapı</title>
	<style type="text/css">
		.container{
			margin: auto;
			display: flex;
			width: 80%;
			flex-direction: column;
			height: 80%;
			position: relative;

		}
		.header{
			text-align: center;
			background-color: pink;
			width: 100%;
			border: 1px solid black;
			height: 25vh;
			margin-bottom: 5px;
		}
		.middleContainer{
			display:flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.box{
			width: 30%;
			height: 25vh;
			background-image: url(https://r.resimlink.com/fe0sC.png);
			margin-bottom: 2px;
		}
		.footer{
			text-align: center;
			background-color: whitesmoke;
			width: 100%;
			border: 1px solid black;
			height: 15vh;
			margin-bottom: 5px;
			background-image: url(https://r.resimlink.com/KIZis6lGL.png);
		}
		
        .metin2 {
           position: absolute;
           top: 85%;
           left: 32%;
        }
        .deneme{
        	background-image: url(https://r.resimlink.com/WfpQin-wy4Y.png);
        }
        .başlık{
        	background-image: url(https://r.resimlink.com/KIZis6lGL.png);
        }
        .metin3 {
           position: absolute;
           top: 92%;
           left: 32%;  
        }
        .metin4 {
           position: absolute;
           top: 92%;
           left: 53%;  
        }
        .font{
        	position: absolute;
            top: 10%;
            left: 26%;
        	font-size:70px;
        	font-weight: bolder;
        	font-style: Math Sans Bold;
        }
	</style>
 
</head>
<body background="https://r.resimlink.com/rfYMb.png">

    <div class="container">
    	<div class="header">
    		  <div class="başlık" style="height: 100%; width: 100%;">
        <div class="font"><a>KAMP MALZEMELERİ</a></div>
        <a href="https://r.resimlink.com/sGwEMYp9.png">→ site logosu ←</a>
        </div>
    	</div>
    	<div class="middleContainer">
    		<div class="box"><img src="çadır.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="lamba.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="sandalye.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="bıçak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="ocak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="masa.png" style="height: 100%; width: 100%;"></div>
        </div>
        <div class="footer"><img src="çerçeve.png" style="height: 100%; width: 100%;"></div>
        <div class="metin2"><a style="font-size:32px" href="https://www.youtube.com/@efeturda6627">→ YOUTUBE ←</a></div>
        <div class="metin3"><a style="font-size:32px" href="mailto:omerfaruksevci1726@gmail.com">→ GMAİL İÇİN ←</a></div>
        <div class="metin4"><a style="font-size:32px" href="https://www.instagram.com/umraniye75cmtal/">→ İNSTAGRAM  ←</a></div>
    </div>
</body>
</html>
<?php

	class GPSSimulation {
		private $conn;
		private $hst = null;
		private $db = null;
		private $usr = null;
		private $pwd = null;
		private $gpsdata = [];
			
		//////////////////////// PRIVATE
		
		private function fillDataTable() {
			$this->initializeDatabase();
			
			$add = $this->conn->prepare("INSERT INTO gpsmsg(dom, wagon, x, y) 
										       VALUES(?, ?, ?, ?)");
			
			
			// voorkom dubbele entries in de database.
			// als satelliet, datum, x en y al voorkomen in de tabel
			// kun je vaststellen dat de huifkar tijdelijk stilstaat
			// voor pauze, lunch of restaurantbezoek
			// en is een nieuwe entry niet nodig.
			$doesRecordExist = $this->conn->prepare(
				"SELECT COUNT(*) FROM gpsmsg 
			     WHERE dom = ? AND wagon = ? AND x = ? AND y = ?"
			);
			
			foreach($this->gpsdata as $ins) {
				
				list($dom, $wagon, $x, $y) = $ins;

				$doesRecordExist->execute([$dom, $wagon, $x, $y]);

				if($doesRecordExist->fetchColumn() == 0) {
					$add->execute([$dom, $wagon, $x, $y]);
				} 
			}
    	}
		
		private function initializeDatabase() {
			$this->conn->query("TRUNCATE TABLE gpsmsg");
			
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      100, 100];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      150, 150];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      230, 310];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",       80, 245];		    
			
			// test dubbelen, worden niet opgenomen in de database
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      100, 100];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      150, 150];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",      230, 310];
		    $this->gpsdata[] = ["2023-10-19", "Old Faithful",       80, 245];		    
					
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",       10,  54];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",       75, 194];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      175, 161];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      134, 280];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      300, 160];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      400, 290];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      544, 222];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      444, 122];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      321,  60];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",      200,  88];
		    $this->gpsdata[] = ["2023-10-15", "Jade Princess",       25,  25];

		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",       50,  50];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      300, 188];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      225,  90];			    
			
			// test dubbelen, worden niet opgenomen in de database
			$this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",       50,  50];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      300, 188];
		    $this->gpsdata[] = ["2023-10-10", "Skyblue Wonder",      225,  90];		    
			
			$this->gpsdata[] = ["2023-10-05", "Red Lobster",          50,  50];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         190, 288];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         260, 122];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         340,  90];
		    $this->gpsdata[] = ["2023-10-05", "Red Lobster",         240,  45];
		}
		
		//////////////////////// PUBLIC

		public function __construct($phst, $pdb, $pusr, $ppwd, $refresh = false) {
			$this->hst = $phst;	// bewaar de verbindingsgegevens
			$this->db  = $pdb;
			$this->hst = $pusr;
			$this->pwd = $ppwd;
			
			$this->conn = new PDO("mysql:host=$phst;dbname=$pdb", $pusr, $ppwd);
			
			if($refresh) $this->fillDataTable();
		}
	
		public function getDataRaw($wagname = null) {
        
			$sql = "SELECT * FROM gpsmsg ";
		
			if($satnm != null) {
				$sql .= "WHERE wagon = :wag";
		
				$stmt = $this->conn->prepare($sql);
        		$stmt->execute([":wag" => $wagname]);
			} else {
				$stmt = $this->conn->query($sql);
			}

			$s = "<table border='1' cellspacing='5' cellpadding='5'>";
        	$s .= "\r<tr><td>Date</td><td>Wagon</td><td>X</td><td>Y</td><tr>";
        	while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
            	$s .= "\r<tr>"
					."<td>{$row->dom}</td>"
			  	 	."<td>{$row->wagon}</td>"
				 	."<td>{$row->x}</td>"
				 	."<td>{$row->y}</td>"
				 	."</tr>";
        	}
        	$s .= "\r</table><br>";

        	return $s;
    	}

		public function getTraject() {
	
			$stmt = $this->conn->query("SELECT * FROM gpsmsg ");

			$dta = [];
        	while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
				$dta[] = [ 
					"dom"   => $row->dom, 
					"wagon" => $row->wagon, 
					"x"     => $row->x, 
					"y"     => $row->y 
				];
        	}

			return $dta;
    	}

		public function createSelectbox() {
		
			$stmt = $this->conn->query("SELECT DISTINCT wagon FROM gpsmsg");
			$s = "<div id='pleaseChooseWagon'><strong>Wagon</strong>";
			$s .= "<select name='selWagon' id='selWagon' "
			   ."onchange='getWagonSelected(this)'>";
			$s .= "<option value='0'>-- choose wagon --</option>";

			while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
				$s .= "<option value='{$row->wagon}'>{$row->wagon}</option>";
			}
			$s .= "</select></div>";

			return $s;
		}

	}  // einde class GPSSimulation
* {
	font-family: "Lucida Console", "Courier New", monospace;
}

html {
	background: #eee;
	background-image: linear-gradient(#eee, #888);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}

canvas {
	background: url(achtergrond.jpg);
	background-size: cover;
	padding: 0;
	display: block;
	width: 660px;
	height: 350px;
	margin: 1cm auto;
	border: 5px solid #800;
}

select,
option {
	font-size: 1.2em;
}

#pleaseChooseWagon {
	width: 200px;
	display: block;
	margin: 1cm auto;
}
<?php
// error_reporting(E_ALL);
// ini_set("display_errors", 1);

require('gpssimulation.class.php');
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GPS SIMULATION</title>
	<link rel="icon" href="data:,">
	<link rel="stylesheet" href="gpsstyle.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
	<style>
		body {
			font-family: Rubik, sans-serif;
		}
		
		select,
		option {
			font-size: 1.2em;
			font-family: Spectral, serif;
		}
	</style>
</head>

<body>

	<?php

	$gps = new GPSSimulation('localhost', 'gps', 'root', 'root', true); // true=refresh

	echo $gps->createSelectbox();
	echo "<hr>";

	?>
	<canvas id="myCanvas" width="660" height="350"></canvas>

	<script>
		const canvas = document.getElementById("myCanvas");
		const ctx = canvas.getContext("2d");

		function processWagonData(whichWagon) {
			ctx.clearRect(0, 0, 660, 350);
			ctx.moveTo(0, 0);
			ctx.beginPath();

			let locationData = <?php echo json_encode($gps->getTraject()); ?>;
			console.log(locationData);
			let teller = 1;

			ctx.fillStyle = "black"; // toon welke satelliet
			ctx.font = "16px Arial";
			ctx.fillText(whichWagon, canvas.width-120, 18);

			locationData.forEach((elm) => {
				if (elm.wagon === whichWagon) {
					ctx.fillStyle = "green";
					ctx.setLineDash([5, 5]);
					ctx.lineTo(elm.x, elm.y);
					ctx.stroke();

					ctx.fillStyle = "black";
					ctx.font = "11px Arial";
					ctx.fillText("(" + elm.x + "," + elm.y + ") / " + (teller++),
						elm.x - 8, elm.y + 14);

					ctx.beginPath();
					ctx.fillStyle = "red";
					ctx.arc(elm.x - 2, elm.y - 2, 5, 0, 2 * Math.PI, false);
					ctx.fill();
				}
			});
		}

		function getWagonSelected(whichOne) {
			let selvalue = document.getElementById(whichOne.name).value;

			if (selvalue != 0) {
				processWagonData(selvalue);
			}
		}

		let selectedWagon = 'Old Faithful'; // start met deze
		processWagonData(selectedWagon); // laat eventueel weg, dan lege select
	</script>
</body>

</html>
$ docker run –d –p 8000:8000 todo-node-app:latest
docker build . -t todo-node-app 
docker run –d –p 8000:8000 todo-node-app:latest
FROM node:12.2.0-alpine
WORKDIR app
COPY . .
RUN npm install
RUN npm run test
EXPOSE 8000
CMD ["node","app.js"]
sudo apt install docker.io
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers"/>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="card-group">
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This content is a little bit longer.
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to show
        that equal height action.
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>
<div class="card-group">
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This content is a little bit longer.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to show
        that equal height action.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/062.webp" class="card-img-top" alt="Chicago Skyscrapers"/>
  <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-light list-group-small">
    <li class="list-group-item px-4">Cras justo odio</li>
    <li class="list-group-item px-4">Dapibus ac facilisis in</li>
    <li class="list-group-item px-4">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
<!DOCTYPE html>
<!-- Created By TopArchives - www.toparchives.us -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar | TopArchives</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">TopArchives</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
  </body>
</html>
<!-- DON'T REMOVE CREDITS -->
<div class="subscribe-wrapper text-center snipcss-EMUGA">
  <h2 class="title">
    Subscribe to Our 
  </h2>
  <p>
    Follow our newsletter to learn more about peace and building a community connection. Stay up to date on various PLC workshops and events. Programs Available to All. Join Us Today. Located in Eagle Creek. We Can Help. Courses: Peace Learning Center, Creating Change.
  </p>
  <form class="subscribe-form mt-4" action="" method="post" id="subscribe">
    <input type="hidden" name="_token" value="McvBWd5pNNin8Ix9Hy2VHnAtxehRNZ8TRznhSNk2" autocomplete="off">
    <input type="email" required="" name="email" class="form-control email" placeholder="Enter email address" autocomplete="off" id="email">
    <button type="submit" class="subscribe-btn">
      Subscribe Now 
      <i class="far fa-paper-plane ms-2">
      </i>
    </button>
  </form>
</div>

<iframe src="https://www.thiscodeworks.com/embed/654605d94b9db40013d5293f" style="width: 100%; height: 1217px;" frameborder="0"></iframe>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function helloworld(){
            document.write("hello world");
        }
    </script>
    <form>
        <input type="submit" onclick = helloworld()>
    </form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateform(){
            var name=document.getElementById("name").value;
            var roll=document.getElementById("roll").value;
            if(name==="" || roll===""){
                alert("name and roll required");
                return false
            }
            return true;
            
        }
    </script>

</head>
<body>
    <form >
        <label for ="name">Name</label>
        <input type="txt" id="name">
        <label for ="roll" >roll</label>
        <input type="number" id ="roll">
        <input type="submit"onclick=validateform());
    </form>
    
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      background-color: #b0ca9e;
      font-size: 16px;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["name"].value;
      var username = document.forms["registrationForm"]["username"].value;
      var password = document.forms["registrationForm"]["password"].value;
      var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

      if (name === "" || username === "" || password === "" || confirmPassword === "") {
        alert("All fields must be filled out");
        return false;
      }

      if (username.length < 6) {
        alert("Username should be at least 6 characters");
        return false;
      }

      if (password !== confirmPassword) {
        alert("Passwords do not match");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>

    <input type="submit" value="Register">
  </form>
</body>
</html>
docker run -d --network none my_container_image
docker run -d --network my_macvlan_network --name my_container my_image
docker network create -d macvlan --subnet=192.168.1.0/24 -o parent=eth0 my_macvlan_network
docker run -d --network my_ipvlan_network --name my_container my_image
docker network create -d ipvlan --subnet=192.168.1.0/24 -o parent=eth0 my_ipvlan_network
docker service create --name my_service --network my_overlay_network my_image
docker network create --driver overlay my_overlay_network
docker run -d --network host my_container_image
docker network rm my_custom_network
docker run -d --network my_custom_network --name container1 nginx
docker network create my_custom_network
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB TITLE</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <!-- AOS LINK -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>


    <!-- WEB CONTENTS GOES HERE -->
    
    

    <!-- JAVASCRIPT -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Snippet</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- MATERIAL ICON -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <!-- AOS LINK -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
    

    <!-- JAVASCRIPT -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>
echo "Code Cloned..."

docker-compose down

docker-compose up -d --no-dep --build web

echo "Code build and Deployed..."
Console Output
Started by user Ishwar Shinde
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/django-todo-app-delivery
The recommended git tool is: NONE
No credentials specified
> git rev-parse --resolve-git-dir /var/lib/jenkins/workspace/django-todo-app-delivery/.git # timeout=10
Fetching changes from the remote Git repository
> git config remote.origin.url https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git # timeout=10
Fetching upstream changes from https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git
> git --version # timeout=10
> git --version # 'git version 2.34.1'
> git fetch --tags --force --progress -- https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git +refs/heads/*:refs/remotes/origin/* # timeout=10
> git rev-parse refs/remotes/origin/main^{commit} # timeout=10
Checking out Revision c2dca3f30890792a3f6eb6078f05f4d886b40129 (refs/remotes/origin/main)
> git config core.sparsecheckout # timeout=10
> git checkout -f c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
Commit message: "Update index.html"
> git rev-list --no-walk c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
[django-todo-app-delivery] $ /bin/sh -xe /tmp/jenkins4033466684745059068.sh
+ echo Code cloned...
Code cloned...
+ docker build . -t django-app
Sending build context to Docker daemon   2.67MB

Step 1/6 : FROM python:3.9
3.9: Pulling from library/python
de4cac68b616: Pulling fs layer
d31b0195ec5f: Pulling fs layer
9b1fd34c30b7: Pulling fs layer
c485c4ba3831: Pulling fs layer
9c94b131279a: Pulling fs layer
863530a48f51: Pulling fs layer
6738828c119e: Pulling fs layer
d271c014c3a0: Pulling fs layer
c485c4ba3831: Waiting
9c94b131279a: Waiting
863530a48f51: Waiting
6738828c119e: Waiting
d271c014c3a0: Waiting
d31b0195ec5f: Verifying Checksum
d31b0195ec5f: Download complete
de4cac68b616: Verifying Checksum
de4cac68b616: Download complete
9b1fd34c30b7: Verifying Checksum
9b1fd34c30b7: Download complete
9c94b131279a: Verifying Checksum
9c94b131279a: Download complete
863530a48f51: Verifying Checksum
863530a48f51: Download complete
6738828c119e: Verifying Checksum
6738828c119e: Download complete
d271c014c3a0: Verifying Checksum
d271c014c3a0: Download complete
c485c4ba3831: Verifying Checksum
c485c4ba3831: Download complete
de4cac68b616: Pull complete
d31b0195ec5f: Pull complete
9b1fd34c30b7: Pull complete
c485c4ba3831: Pull complete
9c94b131279a: Pull complete
863530a48f51: Pull complete
6738828c119e: Pull complete
d271c014c3a0: Pull complete
Digest: sha256:9bae2a5ce72f326c8136d517ade0e9b18080625fb3ba7ec10002e0dc99bc4a70
Status: Downloaded newer image for python:3.9
---> 8bdfd6cc4bbf
Step 2/6 : WORKDIR app
---> Running in 61650cd643fd
Removing intermediate container 61650cd643fd
---> 976056a2d895
Step 3/6 : COPY . /app
---> 5b94f1ad0061
Step 4/6 : RUN pip install -r requirements.txt
---> Running in c3dacf8bf4ed
Collecting asgiref==3.2.3
Downloading asgiref-3.2.3-py2.py3-none-any.whl (18 kB)
Collecting Django==3.0.3
Downloading Django-3.0.3-py3-none-any.whl (7.5 MB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7.5/7.5 MB 5.6 MB/s eta 0:00:00
Collecting django-cors-headers==3.2.1
Downloading django_cors_headers-3.2.1-py3-none-any.whl (14 kB)
Collecting djangorestframework==3.11.0
Downloading djangorestframework-3.11.0-py3-none-any.whl (911 kB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 911.2/911.2 kB 42.1 MB/s eta 0:00:00
Collecting pytz==2019.3
Downloading pytz-2019.3-py2.py3-none-any.whl (509 kB)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 509.2/509.2 kB 45.7 MB/s eta 0:00:00
Collecting sqlparse==0.3.0
Downloading sqlparse-0.3.0-py2.py3-none-any.whl (39 kB)
Installing collected packages: pytz, asgiref, sqlparse, Django, djangorestframework, django-cors-headers
Successfully installed Django-3.0.3 asgiref-3.2.3 django-cors-headers-3.2.1 djangorestframework-3.11.0 pytz-2019.3 sqlparse-0.3.0
[91mWARNING: Running pip as the 'root' user can result in broken permissions and conflicting behaviour with the system package manager. It is recommended to use a virtual environment instead: https://pip.pypa.io/warnings/venv
[0m[91m
[notice] A new release of pip is available: 23.0.1 -> 23.2.1
[notice] To update, run: pip install --upgrade pip
[0mRemoving intermediate container c3dacf8bf4ed
---> 3d6b4bb36bd2
Step 5/6 : EXPOSE 8001
---> Running in 56dd98811220
Removing intermediate container 56dd98811220
---> 96ed2bc70110
Step 6/6 : CMD ["python","manage.py","runserver","0.0.0.0:8001"]
---> Running in 4fd53066b777
Removing intermediate container 4fd53066b777
---> 6b72719ff06c
Successfully built 6b72719ff06c
Successfully tagged django-app:latest
+ echo Code Build...
Code Build...
+ docker run -d -p 8001:8001 django-app:latest
5c625dac7bccf872144dabbd4deff8d6102957cc18652f90950c7fce8694c1e8
+ echo Code Deployed...
Code Deployed...
Finished: SUCCESS
echo "Code Cloned...."

docker build . -t django-app

echo "Code Build...."

docker run -d -p 8001:8001 django-app;latest

echo "Code Deployed...."
Console Output
Started by user Ishwar Shinde
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/django-todo-app-delivery
The recommended git tool is: NONE
No credentials specified
 > git rev-parse --resolve-git-dir /var/lib/jenkins/workspace/django-todo-app-delivery/.git # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git # timeout=10
Fetching upstream changes from https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git
 > git --version # timeout=10
 > git --version # 'git version 2.34.1'
 > git fetch --tags --force --progress -- https://github.com/ishwarshinde041/Jenkins-CI-CD-project.git +refs/heads/*:refs/remotes/origin/* # timeout=10
 > git rev-parse refs/remotes/origin/main^{commit} # timeout=10
Checking out Revision c2dca3f30890792a3f6eb6078f05f4d886b40129 (refs/remotes/origin/main)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
Commit message: "Update index.html"
 > git rev-list --no-walk c2dca3f30890792a3f6eb6078f05f4d886b40129 # timeout=10
[django-todo-app-delivery] $ /bin/sh -xe /tmp/jenkins4033466684745059068.sh
+ echo Code cloned...
Code cloned...
+ docker build . -t django-app
Sending build context to Docker daemon   2.67MB

Step 1/6 : FROM python:3.9
3.9: Pulling from library/python
de4cac68b616: Pulling fs layer
d31b0195ec5f: Pulling fs layer
9b1fd34c30b7: Pulling fs layer
c485c4ba3831: Pulling fs layer
9c94b131279a: Pulling fs layer
863530a48f51: Pulling fs layer
6738828c119e: Pulling fs layer
d271c014c3a0: Pulling fs layer
c485c4ba3831: Waiting
9c94b131279a: Waiting
863530a48f51: Waiting
6738828c119e: Waiting
d271c014c3a0: Waiting
d31b0195ec5f: Verifying Checksum
d31b0195ec5f: Download complete
de4cac68b616: Verifying Checksum
de4cac68b616: Download complete
9b1fd34c30b7: Verifying Checksum
9b1fd34c30b7: Download complete
9c94b131279a: Verifying Checksum
9c94b131279a: Download complete
863530a48f51: Verifying Checksum
863530a48f51: Download complete
6738828c119e: Verifying Checksum
6738828c119e: Download complete
d271c014c3a0: Verifying Checksum
d271c014c3a0: Download complete
c485c4ba3831: Verifying Checksum
c485c4ba3831: Download complete
de4cac68b616: Pull complete
d31b0195ec5f: Pull complete
9b1fd34c30b7: Pull complete
c485c4ba3831: Pull complete
9c94b131279a: Pull complete
863530a48f51: Pull complete
6738828c119e: Pull complete
d271c014c3a0: Pull complete
Digest: sha256:9bae2a5ce72f326c8136d517ade0e9b18080625fb3ba7ec10002e0dc99bc4a70
Status: Downloaded newer image for python:3.9
 ---> 8bdfd6cc4bbf
Step 2/6 : WORKDIR app
 ---> Running in 61650cd643fd
Removing intermediate container 61650cd643fd
 ---> 976056a2d895
Step 3/6 : COPY . /app
 ---> 5b94f1ad0061
Step 4/6 : RUN pip install -r requirements.txt
 ---> Running in c3dacf8bf4ed
Collecting asgiref==3.2.3
  Downloading asgiref-3.2.3-py2.py3-none-any.whl (18 kB)
Collecting Django==3.0.3
  Downloading Django-3.0.3-py3-none-any.whl (7.5 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7.5/7.5 MB 5.6 MB/s eta 0:00:00
Collecting django-cors-headers==3.2.1
  Downloading django_cors_headers-3.2.1-py3-none-any.whl (14 kB)
Collecting djangorestframework==3.11.0
  Downloading djangorestframework-3.11.0-py3-none-any.whl (911 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 911.2/911.2 kB 42.1 MB/s eta 0:00:00
Collecting pytz==2019.3
  Downloading pytz-2019.3-py2.py3-none-any.whl (509 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 509.2/509.2 kB 45.7 MB/s eta 0:00:00
Collecting sqlparse==0.3.0
  Downloading sqlparse-0.3.0-py2.py3-none-any.whl (39 kB)
Installing collected packages: pytz, asgiref, sqlparse, Django, djangorestframework, django-cors-headers
Successfully installed Django-3.0.3 asgiref-3.2.3 django-cors-headers-3.2.1 djangorestframework-3.11.0 pytz-2019.3 sqlparse-0.3.0
[91mWARNING: Running pip as the 'root' user can result in broken permissions and conflicting behaviour with the system package manager. It is recommended to use a virtual environment instead: https://pip.pypa.io/warnings/venv
[0m[91m
[notice] A new release of pip is available: 23.0.1 -> 23.2.1
[notice] To update, run: pip install --upgrade pip
[0mRemoving intermediate container c3dacf8bf4ed
 ---> 3d6b4bb36bd2
Step 5/6 : EXPOSE 8001
 ---> Running in 56dd98811220
Removing intermediate container 56dd98811220
 ---> 96ed2bc70110
Step 6/6 : CMD ["python","manage.py","runserver","0.0.0.0:8001"]
 ---> Running in 4fd53066b777
Removing intermediate container 4fd53066b777
 ---> 6b72719ff06c
Successfully built 6b72719ff06c
Successfully tagged django-app:latest
+ echo Code Build...
Code Build...
+ docker run -d -p 8001:8001 django-app:latest
5c625dac7bccf872144dabbd4deff8d6102957cc18652f90950c7fce8694c1e8
+ echo Code Deployed...
Code Deployed...
Finished: SUCCESS
sudo usermod -aG docker Jenkins
sudo reboot
curl -fsSL https://pkg.jenkins.io/debian/jenkins.io-2023.key | sudo tee \
/usr/share/keyrings/jenkins-keyring.asc > /dev/null

echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
https://pkg.jenkins.io/debian binary/ | sudo tee \
/etc/apt/sources.list.d/jenkins.list > /dev/null

sudo apt-get update
sudo apt-get install jenkins
sudo apt update
sudo apt install openjdk-17-jre
java -version
.text{
    color: var(--black);
}
:root{
    --black: #000;
    --white: #fff;
}

@media (prefers-color-scheme: dark){
    :root{
        --black: #fff;
        --white: #000;
    }
}
<form id="form1" runat="server">
<div id="wrapper">
    <div id="header">
        <h1>Welcome to our Website</h1>

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> <!-- end nav-->
    </div> <!-- end header-->
    <div id="content">
        <h2>Page Heading</h2>
        <p>welcome</p>
        <p>welcome</p>
        <p>welcome</p>
    </div> <!-- end content-->
    <div id="footer">
        <p>Copyright 2010</p>
    </div> <!-- end footer-->
</div><!-- end wrapper-->
</form>
/*!
 *  replaceme.js - text rotating component in vanilla JavaScript
 *  @version 1.1.0
 *  @author Adrian Klimek
 *  @link https://adrianklimek.github.io/replaceme/
 *  @copyright Addrian Klimek 2016
 *  @license MIT
 */
!function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='<span class="'+this.options.animation+'" style="display:inline-block;">'+a+"</span>"},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);
FROM ubuntu

RUN apt-get update \
 && apt-get install -y apache2

COPY html/* /var/www/html/

WORKDIR /var/www/html

CMD ["apachectl", "-D", "FOREGROUND"]

EXPOSE 80
apiVersion: v1
kind: Service
metadata:
name: taskmaster-svc
spec:
selector:
  app: taskmaster
ports:
  - protocol: TCP
    port: 80
    targetPort: 5000
    nodePort: 30007
type: NodePort
apiVersion: apps/v1
kind: Deployment
metadata:
name: taskmaster
labels:
  app: taskmaster
spec:
replicas: 1
selector:
  matchLabels:
    app: taskmaster
template:
  metadata:
    labels:
      app: taskmaster
  spec:
    containers:
      - name: taskmaster
        image: ishwarshinde041/microservicespythonapp:latest
        ports:
          - containerPort: 5000
        imagePullPolicy: Always
apiVersion: v1
kind: Service
metadata:
labels:
  app: mongo
name: mongo
spec:
ports:
  - port: 27017
    targetPort: 27017
selector:
  app: mongo
apiVersion: apps/v1
kind: Deployment
metadata:
name: mongo
labels:
    app: mongo
spec:
selector:
  matchLabels:
    app: mongo
template:
  metadata:
    labels:
      app: mongo
  spec:
    containers:
      - name: mongo
        image: mongo
        ports:
          - containerPort: 27017
        volumeMounts:
          - name: storage
            mountPath: /data/db
    volumes:
      - name: storage
        persistentVolumeClaim:
          claimName: mongo-pvc
kubectl apply -f mongo-pvc.yml
kubectl apply -f mongo-pvc.yml
kubectl apply -f mongo-pv.yml
apiVersion: v1
kind: PersistentVolume
metadata:
name: mongo-pv
spec:
capacity:
  storage: 512Mi
volumeMode: Filesystem
accessModes:
  - ReadWriteOnce
persistentVolumeReclaimPolicy: Retain
hostPath:
  path: /home/node/mongodata
apiVersion: v1
kind: PersistentVolume
metadata:
name: mongo-pv
spec:
capacity:
  storage: 512Mi
volumeMode: Filesystem
accessModes:
  - ReadWriteOnce
persistentVolumeReclaimPolicy: Retain
hostPath:
  path: /home/node/mongodata
FROM python:alpine3.7

COPY . /app

WORKDIR /app

RUN pip install -r requirements.txt

ENV PORT 5000

EXPOSE 5000

ENTRYPOINT [ "python" ]

CMD [ "app.py" ]
docker build . -t <username>/microserviceflaskpythonapp:latest
FROM python:alpine3.7
COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt
ENV PORT 5000
EXPOSE 5000
ENTRYPOINT [ "python" ]
CMD [ "app.py" ]
docker exec -it "<container ID>" bash
docker run -d --mount source=”<your docker volume>”,target=/”<path of WORKDIR from Dockerfile>”-p 8001:80 “<image>”
git clone https://github.com/ishwarshinde041/docker-projects.git
docker stop “<container-id>”

docker start “<container-id>”
docker pull ishwarshinde041/apache-web
docker-compose up –d

docker-compose down –d
function incrementStats() {
    const counters = document.querySelectorAll('.counter');

    counters.forEach((counter) => {
        counter.innerText = 0;

        const updateCounter = () => {
            const target = +counter.getAttribute('data-target'); // the "+" here casts the returned text to a number
            const c = +counter.innerText;
            const increment = target / 200;

            if (c < target) {
                counter.innerText = Math.ceil(c + increment);
                setTimeout(updateCounter, 1);
                // here the function is calling itself until "c"
                // reaches the "data-target", making it recursive
            } else {
                counter.innerText = target;
            }
        };

        updateCounter();
    });
}

document.addEventListener('DOMContentLoaded', incrementStats);
pnpm add swr
# or
npm i swr
# or
yarn add swr
<body>
   <h2>About</h2>
   <p>
     <!-- Just add text decoration style:None -->
      Our <a href="" style="text-decoration: none;">Team</a>
   </p>
</body>
<div class="myb-SettledBetParticipantRenderer "><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">AC Milan +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName " style="">Borussia Dortmund v AC Milan</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Celtic +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Celtic v Lazio</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Swansea +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Swansea v Norwich</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Eldense +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Eldense v Valladolid</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Huesca +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Oviedo v Huesca</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Leganes +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Burgos v Leganes</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Elche +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Sporting Gijon v Elche</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Bangkok United +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Bangkok United v Jeonbuk Motors</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Hartlepool +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Boreham Wood v Hartlepool</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-lost "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Rot-Weiss Essen +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-2 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-2 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-2 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-2 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Unterhaching v Rot-Weiss Essen</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Lumezzane +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Lumezzane v Atalanta U23</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">AlbinoLeffe +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">AlbinoLeffe v Renate</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Carrarese +2.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Carrarese v Pontedera</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.055</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">ASD Turris +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">ASD Turris v Audace Cerignola</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Juventus U23 +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Pro Vercelli v Juventus U23</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">ASD Pineto Calcio +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">U.S. Ancona v ASD Pineto Calcio</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.05</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Brindisi +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Virtus Francavilla v Brindisi</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.045</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Chippa United +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Moroka Swallows v Chippa United</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-won "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">Polokwane City +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-1 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-1 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-1 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-1 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Richards Bay FC v Polokwane City</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.035</div></div></div><div class="myb-BetParticipant myb-SettledBetParticipant "><div class="myb-BetParticipant_TopContainer "><div class="myb-BetParticipant_LeftContainer "><div class="myb-BetParticipant_HeaderTitle "><div class="myb-WinLossIndicator myb-WinLossIndicator-lost "></div><div class="myb-BetParticipant_HeaderText "><span class="myb-BetParticipant_ParticipantSpan ">TS Galaxy +3.0<div class="myb-HalfAndHalfPill myb-HalfAndHalfPill_Status-2 "><div class="myb-HalfAndHalfPill_TextStatus myb-HalfAndHalfPill_TextStatus-2 "><div class="myb-HalfAndHalfPill_TextStatusLHS myb-HalfAndHalfPill_TextStatusLHS-2 "></div><div class="myb-HalfAndHalfPill_Slash"></div><div class="myb-HalfAndHalfPill_TextStatusRHS myb-HalfAndHalfPill_TextStatusRHS-2 "></div></div></div></span></div></div><div><div class="myb-BetParticipant_MarketDescription ">Alternative Handicap Result</div></div><div class="myb-BetParticipant_FixtureContainer "><div class="myb-BetParticipant_FixtureDescription myb-SettledBetParticipant_FixtureDescription "><div class="myb-BetParticipant_FixtureName ">Stellenbosch FC v TS Galaxy</div></div></div><div><div></div></div></div><div class="myb-BetParticipant_HeaderOdds ">1.04</div></div></div></div>
.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 100px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid black;
}
// Shortcode [king_events]

function king_events ( $atts, $content = null) {
    $today = date('Ymd');
	$atts = shortcode_atts(
        array(
            'type' => '',
            'number' => '-1',
        ),
        $atts,
        'king_events'
    );
    $args = array(
        'post_type' => 'tkc-event',
		'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby' => 'event_date',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => 'event_date',
                'compare' => '>',
                'value' => $today,
                'type' => 'DATE'
            )
        ),
    );

	if( !empty( $atts['type'] ) ) {
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'event_type',
				'field' => 'slug',
				'terms' => $atts['type'],
            )
		);
	}

    $events_query = new WP_Query($args);

    ob_start();
    if($events_query->have_posts()) { ?>

    <div class="events-wrap">

    <?php

    while ($events_query->have_posts()) {
    $events_query->the_post(); ?>

    <div class="belove-event-inner">
        <div class="belove-event-img">
            <a href="<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail('big-square'); } ?>
            </a>
        </div>
        <div class="belove-event-content">
            <h3><?php echo the_title(); ?></h3>
            <div class="event-details">
                <?php echo the_content(); ?>
            </div>
			<?php if (get_field('event_link')) { ?>
            <div class="belove-event-link">
                <?php if(get_field('button_label')) { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank"><?php echo get_field('button_label'); ?></a>
                <?php }else { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank">Registration</a>
                <?php }?>
            </div>
			<?php } ?>
        </div>
    </div>

    <?php }
    wp_reset_postdata();
    ?>
    </div>

    <?php
    } else { ?>
        <div>No Events found</div>
    <?php }
    return ob_get_clean();
}

add_shortcode('king_events', 'king_events');
.container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
 }
.item {
  flex: 0 0 auto; 
}
Keystore password = Jubna@123
// Bx Slider 
 
function custom_scripts()
{
    wp_register_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js', array(), false, true);
    wp_enqueue_script('bxslider');
}
 
add_action('wp_enqueue_scripts', 'custom_scripts');
 
function bxslider_init() { ?>
    <script>
    (function($){
        $(document).ready(function() {
                $(".image-ticker").show();
                $('.image-ticker').bxSlider({
                    minSlides: 1,
                    maxSlides: 8,
                    slideWidth: 189,
                    slideMargin: 0,
                    ticker: true,
                    speed: 50000
                });
            });
        })(jQuery)   
    </script>
<?php }
 
add_action ('wp_footer', 'bxslider_init');

<!-- MARKUP - Put Codeblock Class as 'slider-logos' -->

<div class="image-ticker" style="display:none">
    <span class="logo-item"><img src="#"></span>

</div>

<!-- STYLE -->

<style>
.bx-wrapper {
    max-width: 100% !important;
}

.logo-item {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 25px;
    height: 80px;
    width: auto !important;
}

.logo-item img {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 80px;
}

.bx-viewport {
    height: auto !important;
}
</style>
<a href='' target='_blank'><img src='https://res.cloudinary.com/dnqgtf0hc/image/upload/v1693147103/apk-download-android_jmucejpng'/></a>
<!DOCTYPE html>
<html>
​
<body>
The content of the body element is displayed in your browser.
</body>
​
</html>
​
/*__Responsive Media Queries __*/

/* Mobile & Small devices */
@media only screen and (max-width: 480px) {...}

/* Portrait Tablets and Ipads devices) */
@media only screen and (max-width: 768px) {...}

/* Laptops and Small screens  */
@media only screen and (max-width: 1024px) {...}

/* Laptops, Desktops Large devices */
@media only screen and (max-width: 1280px) {...}

/* Extra large devices (large laptops and desktops) */
@media only screen and (min-width: 1281px) {...}
Orientações sobre WhatsApp Mensagem Ativa:
-Configurar Canal do WhatsApp, espelhando Prod. C6 Bank - Assessoria Alta Renda(C6BankAssessoriaAltaRenda)
-Relacionar Canal do WhatsApp no Einstenios BOT (Einstenios bots -> MyBots -> Advisory -> (Canto superior esquerdo) -> Overviews -> dentro da página aba Connections - (ADD).
-Configurar Template de WPP. Messaging Templates -> assessoria_reinvestimento_automatico -> definir Texto cadastrado no QUIP.
-Cadastrar valores da Picklist: MessagingChannel__c e Template_Name__c.
- Mudar decision de entrada do flow. Utilizar o Type da oportunidade. Criar novo valor na picklist de Reinvestimento Automático.

- Criar novo campo no objeto MessagingNotification (Nome do contato = ContactName)__c
- Criando novo valor na picklist de TYPE da oportunidade (Reinvestimento automático)
- Criando novo campo no Objeto Messaging Notification (Vencimento dia da semana = WeekDayExpiration)

-----------------------------
  
  Em UAT após alterações estarem no ambiente, cadastrar Template (Messaging Templates) e Canal (Messaging Settings). Verificar também se o AinstenBot Advisor (Assessoria) , está configurado o Canal do whatsApp.
  
  REPRODUZIR ESSES AJUSTES EM PROD TAMBÉM.
<div class="create-account">
  <h2>Create Account</h2>
  <div class="row">
    <div class="col-md-6">
      <form [formGroup]="createAccountForm">
        <div class="form-group">
          <select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
            <option value="">Select country...</option>
            <option *ngFor="let country of countries" [value]="country.id">{{country.country_name}}</option>
          </select>
        </div>
        <div class="form-group">
          <select formControlName="state" class="form-control" (change)="onChangeState($event.target.value)">
            <option value="">Select state...</option>
            <option *ngFor="let state of states" [value]="state.id">{{state.state_name}}</option>
          </select>
        </div>
        <div class="form-group">
          <select formControlName="city" class="form-control">
            <option value="">Select city...</option>
            <option *ngFor="let city of cities" [value]="city.id">{{city.city_name}}</option>
          </select>
        </div>
      </form>
    </div>
  </div>
</div>
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Froms</title>
</head>
<body>

    <h1>HTML Forms</h1>

    <form>
        <label for="username">Enter username:</label>
        <input type="text" id="username" name="username" placeholder="your name" required>
        <br><br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" placeholder="your email" required>
        <br><br>
        <label for="password">password:</label>
        <input type="password" name="password" placeholder="choose a password" required>

        <p>Select your age:</p>

        <input type="radio" name="age" value="0-25" id="option-1">
        <label for="option-1">0-25</label>
        <input type="radio" name="age" value="26-50" id="option-2">
        <label for="option-2">26-50</label>
        <input type="radio" name="age" value="51+" id="option-3">
        <label for="option-3">51+</label>

        <br><br>

        <label for="question">Security questions:</label>
        <select name="question" id="question">
            <option value="q1">What colour are your favourit pair of socks?</option>
            <option value="q2">If you could be a vegetable, what it could be?</option>
            <option value="q3">what is your best ever security question?</option>
        </select>

        <br><br>

        <label for="answer">Scurity question answer</label>
        <input type="text" name="answer" id="answer">

        <br><br>

        <label for="bio">Your bio:</label><br>
        <textarea name="bio" id="bio" cols="30" rows="10" placeholder="about you..."></textarea>

        <br><br>
        <input type="submit" value="Submit the form">

    </form>

</body>
</html>
<a href="example.com" target="_blank">New Tab</a>
<div style="padding: 15px; background-color: white; margin-bottom: 25px;">
    <details>
        <summary style="border: 4px solid #f3f7d7; background-color: #f3f7d7; color: #126369; font-size: 18pt; cursor: pointer;"><strong>TITEL 1</strong></summary>
        <div style="border: 4px solid #f3f7d7; padding: 5px 15px;">
        INHOUD 1
		</div>
    </details>
    <details>
        <summary style="border: 4px solid #f3f7d7; background-color: #f3f7d7; color: #126369; font-size: 18pt; cursor: pointer;"><strong>TITEL 2</strong></summary>
        <div style="border: 4px solid #f3f7d7; padding: 5px 15px;">
        INHOUD 2
		</div>
    </details>
    <details>
        <summary style="border: 4px solid #f3f7d7; background-color: #f3f7d7; color: #126369; font-size: 18pt; cursor: pointer;"><strong>TITEL 3</strong></summary>
        <div style="border: 4px solid #f3f7d7; padding: 5px 15px;">
        INHOUD 3
		</div>
    </details>
</div>
  <script src="https://unpkg.com/htmx.org@1.9.4"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>
<?php
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
error_reporting(0);
date_default_timezone_set('Asia/Kolkata');
function get($url)
{
  // Initialize a CURL session.
  $ch = curl_init();

  // Return Page contents.
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  //grab URL and pass it to the variable.
  curl_setopt($ch, CURLOPT_URL, $url);

  $result = curl_exec($ch);

  return $result;
}

$user = $_POST['user'];
$offer = $_POST['offer'];
$cname = $_POST['cname'];
$event = $_POST['event'];

$rp = get('https://nextpower.cashinmedia.in/api/v1/checkRefer/0a51d09c-f329-4436-89d5-bdbb52bea07c/' . $offer . '?number=' . $user . '');

// JSON response from the URL
$response = $rp;

// Decode the JSON response
$response_data = json_decode($response, true);

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

// Extract the 'data' section from the response
$data = $response_data['data'];

// Check if there's any data to display
if (count($data) > 0) {
  // Echo the table header
//     echo '<table border="1">
//         <tr>
//             <th>Click</th>
//             <th>User Amount</th>
//             <th>Refer Amount</th>
//             <th>User</th>
//             <th>Refer</th>
//             <th>Event</th>
//             <th>Status</th>
//             <th>Payment Status</th>
//             <th>Payment Message</th>
//             <th>Created At</th>
//         </tr>';

  //     // Loop through each data entry and display in table rows
//     foreach ($data as $entry) {
//     $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);

  //     echo '<tr>';
//     echo '<td>' . $entry['click'] . '</td>';
//     echo '<td>' . $entry['userAmount'] . '</td>';
//     echo '<td>' . $entry['referAmount'] . '</td>';
//     echo '<td>' . $userEncoded . '</td>'; // Display encoded user
//     echo '<td>' . $entry['refer'] . '</td>';
//     echo '<td>' . $entry['event'] . '</td>';
//     echo '<td>' . $entry['status'] . '</td>';
//     echo '<td>' . $entry['referPaymentStatus'] . '</td>';
//     echo '<td>' . $entry['payMessage'] . '</td>';
//     echo '<td>' . $entry['createdAt'] . '</td>';
//     echo '</tr>';
// }

  //     // Close the table
//     echo '</table>';
// } else {
//     // If there's no data, show a JavaScript alert
//     echo '<script>alert("No data found.");</script>';
// }
  ?>
  <html lang="en" dir="ltr">


  <head>
    <meta charset="utf-8">
    <title>FokatCash</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="report.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width">
  </head>
  <style>
    .data-table td,
    .data-table th {
      font-size: 17px;
      /* Adjust the value as needed */
    }

    .credited {
      color: #FFA500;
      /* Orange color */
    }
  </style>

  <body>
    <center>
      <div class="login-form">
        <h1>
          <font color='#0f0f0f'>REPORT
        </h1>
        <center>

  </body>

  </html>

  <div class="statics">
    <center><br>
      <fieldset>Refferer:
        <?php echo $user; ?>
        <hr>Camp:
        <?php echo $cname; ?>
        <hr>Total Clicks:
        <?php echo $totalClicks; ?>
        <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
        <hr>
        <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
        <!-- Placeholder for total refer amount -->
        <hr>
        <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
        <hr>
      </fieldset><br><br>
      <table class="data-table">
        <tr>

          <th>Camp Name</th>
          <th>Refer Amount</th>
          <!--<th>Refer Status</th>-->
          <th>Cashback Status</th>
          <th>Time</th>
        </tr>
        <?php
        foreach ($data as $entry) {
          $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);
          $dateTime = new DateTime($entry['createdAt']);

          // Convert to IST timezone
          $dateTime->setTimezone(new DateTimeZone('Asia/Kolkata'));

          // Format the time in desired format
          $istTimeFormatted = $dateTime->format('Y-m-d H:i:s');

          if ($entry['referPaymentStatus'] === 'REJECTED' || $entry['referPaymentStatus'] === 'BLOCKED') {
            continue;
          }

          if ($entry['referPaymentStatus'] == 'ACCEPTED' || $entry['referPaymentStatus'] == 'UNKNOWN' || $entry['referPaymentStatus'] == 'FAILURE') {
            $cashbackStatus = '<b><span style="color: #198754;">Credited</span></b>';
          } elseif ($entry['referPaymentStatus'] == 'PENDING') {
            $cashbackStatus = '<b><span style="color: #FFA500;">Processing</span></b>';
          } else {
            // Handle other cases or set a default value for $cashbackStatus
            // For example: $cashbackStatus = 'Unknown Status';
            $cashbackStatus = $entry['referPaymentStatus'];
          }


          if ($entry['referAmount'] > 0) {
            echo '<tr>';
            // echo '<td>' . $entry['click'] . '</td>';
            // echo '<td>' . $entry['userAmount'] . '</td>';
            echo '<td>' . $cname . '</td>';
            echo '<td>' . $entry['referAmount'] . '</td>';
            // echo '<td>' . $userEncoded . '</td>'; // Display encoded user
            // echo '<td>' . $entry['refer'] . '</td>';
            // echo '<td>' . $entry['event'] . '</td>';
            // echo '<td>' . $entry['status'] . '</td>';
            echo '<td>' . $cashbackStatus . '</td>';
            // echo '<td>' . $entry['payMessage'] . '</td>';
            echo '<td>' . $istTimeFormatted . '</td>';
            echo '</tr>';
          }
        }
        // Close the table
        echo '</table>';
} else {
  // If there's no data, show a JavaScript alert
  ?>
        <html lang="en" dir="ltr">


        <head>
          <meta charset="utf-8">
          <title>FokatCash</title>
          <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
          <link rel="stylesheet" href="report.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
          <meta name="viewport" content="width=device-width">
        </head>
        <style>
          .data-table td,
          .data-table th {
            font-size: 17px;
            /* Adjust the value as needed */
          }

          .credited {
            color: #FFA500;
            /* Orange color */
          }
        </style>

        <body>
          <center>
            <div class="login-form">
              <h1>
                <font color='#0f0f0f'>REPORT
              </h1>
              <center>

        </body>

        </html>

        <div class="statics">
          <center><br>
            <fieldset>Refferer:
              <?php echo $user; ?>
              <hr>Camp:
              <?php echo $cname; ?>
              <hr>Total Clicks:
              <?php echo $totalClicks; ?>
              <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
              <hr>
              <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
              <!-- Placeholder for total refer amount -->
              <hr>
              <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
              <hr>
            </fieldset><br><br>

            <h5>No data Found</h5>
            <?php


}
?>
    </table>
    <!-- ... Your existing code ... -->
    <script>
  // JavaScript to calculate and display the total leads count and total refer amounts
  document.addEventListener("DOMContentLoaded", function () {
    // Calculate the total leads count and total refer amounts based on the payment statuses and refer amount conditions
    var totalLeads = 0;
    var totalAcceptedReferAmount = 0;
    var totalPendingReferAmount = 0;
    var totalFailedReferAmount = 0;
    var totalUnknownReferAmount = 0;
    var event = "<?php echo $event; ?>";

    <?php foreach ($data as $entry): ?>
      <?php if ($entry['referPaymentStatus'] !== 'REJECTED' && $entry['referPaymentStatus'] !== 'BLOCKED' && $entry['referAmount'] > 0): ?>
        totalLeads++;
        <?php if ($entry['referPaymentStatus'] === 'ACCEPTED'): ?>
          totalAcceptedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'PENDING'): ?>
          totalPendingReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'FAILURE'): ?>
          totalFailedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'UNKNOWN'): ?>
          totalUnknownReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php endif; ?>
      <?php endif; ?>
    <?php endforeach; ?>

    // Update the HTML content to display the calculated totals
    var totalLeadsElement = document.getElementById("totalLeads");
    totalLeadsElement.textContent = totalLeads;

    var totalAcceptedReferAmountElement = document.getElementById("totalAcceptedReferAmount");
    totalAcceptedReferAmountElement.textContent = totalAcceptedReferAmount.toFixed(2);

    var totalPendingReferAmountElement = document.getElementById("totalPendingReferAmount");
    totalPendingReferAmountElement.textContent = totalPendingReferAmount.toFixed(2);

    var totalFailedReferAmountElement = document.getElementById("totalFailedReferAmount");
    totalFailedReferAmountElement.textContent = totalFailedReferAmount.toFixed(2);

    var totalUnknownReferAmountElement = document.getElementById("totalUnknownReferAmount");
    totalUnknownReferAmountElement.textContent = totalUnknownReferAmount.toFixed(2);
  });
</script>



    <br><br><br>
    <footer id="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>FokatCash</span></strong>
      </div>
    </footer><!-- End Footer -->
</div><!-- End statics div -->
</center><!-- End center div -->
</body><!-- End body tag -->

</html><!-- End HTML document -->
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
npm install sass-loader sass webpack --save-dev
watch: {
    "user.name": function (newVal, oldVal) {
      this.newDisplay = newVal;
      this.oldDisplay = oldVal;
    },
<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
There are several issues with your code that could be causing the failed checks. Here are some potential problems:

Buffer Size: The function takes size_r as an argument, representing the size of the buffer r to store the result. However, it seems that you are not properly handling the case when the result cannot fit within the provided buffer size. You need to check if the length of the result exceeds the buffer size and return 0 in such cases.

Buffer Manipulation: There are multiple instances in your code where you increment and decrement the r pointer without considering the buffer boundaries. This can lead to incorrect memory access and unexpected behavior. Make sure to handle the buffer correctly throughout the function.

String Length Calculation: The current implementation of calculating the lengths of n1 and n2 by incrementing the pointers is incorrect. You are modifying the original pointers, which makes it difficult to traverse the strings later. Consider using separate variables to calculate the lengths without modifying the original pointers.

Handling Carry: When performing addition, if the sum of digits exceeds 9, you need to carry over the value to the next position. It seems that you are correctly calculating the remainder (rem) and the carry (div), but you need to handle the carry properly to ensure accurate addition.

Returning the Result: After performing the addition, you need to return the pointer to the result. However, the current implementation does not correctly determine the final result pointer. Ensure that you properly adjust the pointer to the correct position before returning it.

Here's a modified version of your code that addresses these issues:

c
Copy code
#include <stdlib.h>

char *infinite_add(char *n1, char *n2, char *r, int size_r)
{
    int len1 = 0, len2 = 0, i = 0, div = 0, rem;
    char val = '0';

    // Calculate lengths of n1 and n2
    while (n1[len1] != '\0')
        len1++;
    while (n2[len2] != '\0')
        len2++;

    // Check if result can fit in buffer
    if (len1 > size_r || len2 > size_r)
        return 0;

    // Move pointers to the end of the strings
    n1 += len1 - 1;
    n2 += len2 - 1;

    while (i < size_r - 1)
    {
        if (len1 >= 0 || len2 >= 0)
        {
            // Get the digits from n1 and n2
            int digit1 = (len1 >= 0) ? *n1 - '0' : 0;
            int digit2 = (len2 >= 0) ? *n2 - '0' : 0;

            // Calculate sum and carry
            rem = (digit1 + digit2 + div) % 10;
            div = (digit1 + digit2 + div) / 10;

            // Store the sum digit in the result buffer
            r[i] = rem + '0';

            // Move the pointers and decrement lengths
            n1 = (len1 > 0) ? n1 - 1 : &val;
            n2 = (len2 > 0) ? n2 - 1 : &val;
            len1--;
            len2--;
        }
        else if (div > 0)
        {
            // Handle remaining carry
            r[i] = div + '0';
            div = 0;
        }
        else
        {
            // Reached the end of both strings and carry is 0
<h1>Best movie according to me</h1>
<h2>My top 3 movies of all-time.</h2> 
<hr />
<h2>3 Idiots</h2>
<p>Old is gold.</p>
<h2>RRR</h2>
<p>Really cool historical fantacy.</p>
<h2>Kantara</h2>
<p>All about last scene.</p>
<p><script>
    var video1 = document.getElementById("thebpresident");
    video1.style.opacity = 1;
    video1.addEventListener("loadedmetadata", function() {
setTimeout(function() {        video1.play();<br />
      }, 1000);
    });
   slidein.className = "slidein";
});
setTimeout(function() {
video1.style.display = "block";
  }, 4000);
});
var video2 = document.getElementById("majorcities");
setTimeout(function() {
video2.style.display = "block";
video2.className = "wp-block-video MajorCities video2";
        video2.addEventListener("animationend", function() {
          video2.style.opacity = 1;
          video2.addEventListener("loadedmetadata", function() {
            setTimeout(function() {
              video2.play();
            }, 4000);
          });
        });
      }, 156000);
    });
  });  document.addEventListener("DOMContentLoaded", function() {
    var videos = document.getElementsByClassName("onPause");
    for (var i = 0; i < videos.length; i++) {
      var video = videos[i];
      video.addEventListener("click", function() {
        if (this.paused) {
          this.play();
        } else {
          this.pause();
        }
      });
    }
  });
</script></p>
<a href= "https://github.com/philipyoo/holbertonschool-low_level_programming/blob/master/0x04-pointers_arrays_strings/100-atoi.c"> </a>
<a href ="https://github.com/monoprosito/holbertonschool-low_level_programming/blob/master/0x05-pointers_arrays_strings/100-atoi.c"> </a>
#include <stdio.h>
/**
 * _atoi - converts string to integer
 *@s: pointer to char
 * Return: int
 */

int _atoi(char *s)
{
int res = 0;
int nb  = 0;
int cpt = 0;
int i =0;
for (i = 0; s[i] != '\0' ; ++i)
{
if (s[i] == '-')
nb++;
if (s[i] >= '0' && s[i] <= '9')
{
cpt++;
res = res * 10 + s[i] - '0';
}
if (cpt >= 1 && !(s[i] >= '0' && s[i] <= '9'))
break;
}
if (nb % 2 != 0)
{
res = res * -1;
}
return (res);
} /*end method*/
#include <stdio.h>
/**
 * _atoi - converts string to integer
 *@s: pointer to char
 * Return: int
 */


int _atoi(char *s)
{
int nb_sign_minus = 0;
char *s2 ;
int res  = 0;
int  *ptres = &res; 
while (*s)
{
/*test first character */

if (*s == '-')
nb_sign_minus++;
if(*s >= '0' && *s <= '9') /*ifx1*/
{ s2 = s;
if (nb_sign_minus % 2 != 0 )
{
*ptres = '-'; /*printf("%c", '-');*/
ptres++;
}
while (*s2 != '\0' && (*s2 >= '0' && *s2 <= '9'))
{
*ptres = *s2 ; /*printf("%c", *s2);*/
s2++;
ptres++;
} /* end while loop*/
s  = s2  ;
s2 = '\0';
nb_sign_minus = 0;
} /*end ifx1 */   
} /*principal while */
return res;
} /*end method*/
<a href= "https://intranet.alxswe.com/auth/sign_in"> </a>
https://gitlab.com/Hraesvel/holbertonschool-low_level_programming/-/blob/master/0x13-bit_manipulation/5-flip_bits.c
<a href="https://www.purebasic.com/french/documentation/reference/ascii.html"></a>
<a href="https://cse.engineering.nyu.edu/~mleung/CS1114/f05/ch10/MDmemory.htm">
  multi array at memory</a>
<!doctype html>

  <head>
    <!-- CSS CODE -->
   <style>
    #pdf_renderer {
      display: block;
      margin: 0 auto;
    }
    </style>
  
  </head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <center>
            <div id="navigation_controls">
                <button id="go_previous">Previous</button>
                <input id="current_page" value="1" type="number"/>
                <button id="go_next">Next</button>
            </div>

            <a href="Resume_14.docx.pdf" download="Resume_14.docx.pdf">
            Download PDF</a>
        </center>
    </div>
    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
     
        pdfjsLib.getDocument('./Resume_14.docx.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
         
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
     
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        document.getElementById('go_previous').addEventListener('click', (e) =>
        {
          if(myState.pdf == null || myState.currentPage == 1) 
            return;
          myState.currentPage -= 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('go_next').addEventListener('click', (e) => {
          if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
             return;
          myState.currentPage += 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('current_page').addEventListener('keypress', (e) => {
          if(myState.pdf == null) return;
         
          // Get key code 
          var code = (e.keyCode ? e.keyCode : e.which);
         
          // If key code matches that of the Enter key 
          if(code == 13) {
            var desiredPage = document.getElementById('current_page').valueAsNumber;
                                 
            if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                myState.currentPage = desiredPage;
                document.getElementById("current_page").value = desiredPage;
                render();
            }
           }
        });

    </script>
  </body>
</html>
HTML, XML
<!-- Add a file input to your template -->
<input type="file" (change)="onFileChange($event)" />

<!-- Add a button to trigger the file input -->
<button (click)="fileInput.click()">Upload File</button>
<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">
                
function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();
<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>
  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>
<div class="form-group">
    <label>Ngày Lập: </label>
    <input type="date" class="form-control" th:field="*{ngayLap}" />
    <!-- get field in object -->
    <div th:if="${#fields.hasErrors('ngayLap')}" class="errors text-danger form-text" th:errors="*{ngayLap}"></div>
    <!-- validate form  -->
    <!-- table  -->

    <tr th:each="hoadon : ${list}">
        <td th:text="${hoadon.id}"></td>
        <td th:text="${hoadon.trangThai}"></td>
        <td>
            <a th:href="@{/hoadon/detail(id=${hoadon.id})}" class="btn btn-success ">detail</a>
            <a th:href="@{/hoadon/delete(id=${hoadon.id})}" class="btn btn-danger">Delete</a>
            <a th:href="@{/hoadon/update(id=${hoadon.id})}" class="btn btn-warning">Update</a>
        </td>
    </tr>
    <!-- table  -->
    <!-- combooboxx -->
    <div class="form-group">
        <label for="sanPham">Sản Phẩm:</label>
        <select class="form-control" th:field="*{sanPham}">
            <option value="">Chọn SanPham</option>
            <option th:each="sp : ${sanPhams}" th:value="${{sp}}" th:text="${sp.ten}">
            </option>
        </select>
        <div th:if="${#fields.hasErrors('sanPham')}" class="errors text-danger form-text" th:errors="*{sanPham}"></div>
    </div>
    <!-- combooboxx -->
    <!-- form  -->
    <form enctype="multipart/form-data" th:action="@{/manager/chitietsanpham/store}" th:object="${chitietsanpham}"
        method="post" class="form">
    </form>
    <!-- form -->
</div>




<!-- paniagation -->
              <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" th:href="@{/khachhang/pre}">Previous</a>
            </li>
            <li th:each="index : ${panigation}" class="page-item"><a class="page-link"
                    th:href="@{/khachhang/pageno(pageno=${index})}" th:text="${index+1}"></a></li>
            <li class="page-item">
                <a class="page-link" th:href="@{/khachhang/next}">Next</a>
            </li>
        </ul>
    </nav>
<div class="form-group">
    <label>Ngày Lập: </label>
    <input type="date" class="form-control" th:field="*{ngayLap}" />
    <!-- get field in object -->
    <div th:if="${#fields.hasErrors('ngayLap')}" class="errors text-danger form-text" th:errors="*{ngayLap}"></div>
    <!-- validate form  -->
    <!-- table  -->

    <tr th:each="hoadon : ${list}">
        <td th:text="${hoadon.id}"></td>
        <td th:text="${hoadon.trangThai}"></td>
        <td>
            <a th:href="@{/hoadon/detail(id=${hoadon.id})}" class="btn btn-success ">detail</a>
            <a th:href="@{/hoadon/delete(id=${hoadon.id})}" class="btn btn-danger">Delete</a>
            <a th:href="@{/hoadon/update(id=${hoadon.id})}" class="btn btn-warning">Update</a>
        </td>
    </tr>
    <!-- table  -->
    <!-- combooboxx -->
    <div class="form-group">
        <label for="sanPham">Sản Phẩm:</label>
        <select class="form-control" th:field="*{sanPham}">
            <option value="">Chọn SanPham</option>
            <option th:each="sp : ${sanPhams}" th:value="${{sp}}" th:text="${sp.ten}">
            </option>
        </select>
        <div th:if="${#fields.hasErrors('sanPham')}" class="errors text-danger form-text" th:errors="*{sanPham}"></div>
    </div>
    <!-- combooboxx -->
    <!-- form  -->
    <form enctype="multipart/form-data" th:action="@{/manager/chitietsanpham/store}" th:object="${chitietsanpham}"
        method="post" class="form">
    </form>
    <!-- form -->
</div>
<div class="p-8">
  <div class="shadow-xl rounded-lg">
    <div style="background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260')" class="h-64 bg-gray-200 bg-cover bg-center rounded-t-lg flex items-center justify-center">
      <p class="text-white font-bold text-4xl">Profile</p>
    </div>
    <div class="bg-white rounded-b-lg px-8">
      <div class="relative">
            <img class="right-0 w-16 h-16 rounded-full mr-4 shadow-lg absolute -mt-8 bg-gray-100" src="" alt="Avatar">
      </div>
      <div class="pt-8 pb-8">
        <h1 class="text-2xl font-bold text-gray-700">Link</h1>
        <p class="text-sm text-gray-600">From hyrule</p>

        <p class="mt-6 text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a sem varius, fringilla sapien at, sollicitudin risus.</p>

        <div class="flex justify-around mt-8">
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
          </button>
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
          </button>
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="w-80 bg-white shadow rounded">
  <div
    class="h-48 w-full bg-gray-200 flex flex-col justify-between p-4 bg-cover bg-center"
    style="background-image: url('https://images.pexels.com/photos/7989741/pexels-photo-7989741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"
  >
    <div class="flex justify-between">
      <input type="checkbox" />
      <button class="text-white hover:text-blue-500">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>
    </div>
    <div>
      <span
        class="uppercase text-xs bg-green-50 p-0.5 border-green-500 border rounded text-green-700 font-medium select-none"
      >
        available
      </span>
    </div>
  </div>
  <div class="p-4 flex flex-col items-center">
    <p class="text-gray-400 font-light text-xs text-center">Hammond robotics</p>
    <h1 class="text-gray-800 text-center mt-1">Item name</h1>
    <p class="text-center text-gray-800 mt-1">€1299</p>
    <div class="inline-flex items-center mt-2">
      <button
        class="bg-white rounded-l border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M20 12H4"
          />
        </svg>
      </button>
      <div
        class="bg-gray-100 border-t border-b border-gray-100 text-gray-600 hover:bg-gray-100 inline-flex items-center px-4 py-1 select-none"
      >
        2
      </div>
      <button
        class="bg-white rounded-r border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>
    </div>

    <button
      class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 mt-4 w-full flex items-center justify-center"
    >
      Add to order
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 ml-2"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
        />
      </svg>
    </button>
  </div>
</div>
<body>
    <!-- Contenido de la página -->
    <button id="myButton">Haz clic</button>
</body>
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('¡Haz hecho clic en el botón!');
    });
});
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

h1 {
    color: #333333;
}

p {
    color: #666666;
}

ul {
    color: #777777;
}
<body>
    <h1>Bienvenido a mi página web</h1>
    <p>¡Hola a todos! Esta es mi primera página web.</p>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
    </ul>
</body>
<!DOCTYPE html>
<html>
<head>
      <title>Mi Página Web</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
      <script src="script.js"></script>
</head>
<body>
      <!-- Contenido de la página -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>keuze deel portfolio</title>
  <meta charset="UTF-8">
</head>
<body>
  <header>
    <h1>Hey im your new web-developer</h1>
     <a> href="#"> class="call-to-action>Contact me for a little chat</a>
  </header>
  <nav>
    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </nav>
  <main>
    <h2>about me</h2>
    <p> Hello, I am a web developer passionate about creating awesome websites.</p>
     <h2>Wat gaat het kosten</h2>
     <p>Duis arcu massa, scelerisque vitae,
         consequat in,
          pretium a, enim. Pellentesque congue.
           Ut in risus volutpat libero pharetra tempor.
            Cras vestibulum bibendum augue. Praesent egestas leo in pede.
             Praesent blandit odio eu enim.
     </p>
<ul>
    <li>kostem 1</li>  
    <li>kosten 2</li>
    <li>kosten 3</li>
    <li>kosten 3</li>
    <li>kosten 3</li>
    <li>kosten 3</li>
</ul>
<form action="/submit-contact-form" method="POST">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="text" id="email" name="email" required>

      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="5" required></textarea>

      <input type="submit" value="Submit">
<!-- Include the library. -->
<script
  src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"
></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
   rel="stylesheet"
   href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    GitHubCalendar(".calendar", "your-username");
    // or enable responsive functionality
    GitHubCalendar(".calendar", "your-username", { responsive: true });
</script>
            
const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

// JavaScript const variables must be assigned a value when 
//   they are declared : 

// Correct
const PI = 3.14159265359;

// Incorrect
const PI;
PI = 3.14159265359;

// Always declare a variable with const when you know that 
// the value should not be changed.
// Use const when you declare:
// * A new Array
// * A new Object
// * A new Function
// * A new RegExp

//You can change the elements of a constant array :
// You can create a constant array :
const cars = ["Saab", "Volvo", "BMW"];
// You can change an element :
cars[0] = "Toyota";
// You can add an element :
cars.push("Audi");

// But you can NOT reassign the array :
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; 
// This creates an ERROR

// You can create a const object :
const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:
car.color = "red";
// You can add a property:
car.owner = "Johnson";

// But you can NOT reassign the object :
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};   
// ERROR

// Declaring a variable with const is similar to let when it
// comes to Block Scope. The x declared in the block, in this
// example, is not the same as the x declared outside the
// block:
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10

// Declaring a variable with const is similar to let when it 
// comes to Block Scope. The x declared in the block, in this
// example, is not the same as the x declared outside the
// block:
var x = 2;     // Allowed
var x = 3;     // Allowed
x = 4;         // Allowed

// New Example
var x = 2;     // Allowed
const x = 2;   // Not allowed

{
let x = 2;     // Allowed
const x = 2;   // Not allowed
}

{
const x = 2;   // Allowed
const x = 2;   // Not allowed

  //New Example
const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

{
  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed

//New Example
const x = 2;       // Allowed
{
  const x = 3;   // Allowed
}
{
  const x = 4;   // Allowed
}
//Example Variables
var x = 5;
var y = 6;
var z = x + y; // or 11

// Same result, but "let"
let x = 5;
let y = 6;
let z = x + y;

// Again, but "const"
const x = 5;
const y = 6;
const z = x + y;

//Mixed Concept
const price1 = 5;
const price2 = 6;
let total = price1 + price2;

// You can declare many variables in one statement.
// Start the statement with let and separate the variables by comma:
let person = "John Doe", carName = "Volvo", price = 200;

// A declaration can span multiple lines:
let person = "John Doe",
carName = "Volvo",
price = 200;

// JavaScript Dollar Sign $
// Since JavaScript treats a dollar sign as a letter, identifiers containing 
// $ are valid variable names:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

//In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.
//This is different from algebra. The following does not make sense in algebra:
x = x + 
  
// JavaScript variables can hold numbers like 100 and text values like "John Doe".
// In programming, text values are called text strings.
// JavaScript can handle many types of data, but for now, just think of numbers and strings.
// Strings are written inside double or single quotes. Numbers are written without quotes.
// If you put a number in quotes, it will be treated as a text string. Example :
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

// As with algebra, you can do arithmetic with JavaScript variables, using operators like = and + :
let x = 5 + 2 + 3;
// You can also add strings, but strings will be concatenated:
let x = "Venus" + " " + "Martinez";
// Also try this : 
let x = "5" + 2 + 3; // Hint #523 
<!DOCTYPE html>
<html>
<body>

<h2>Practicing HTML</h2>
<h3>My JavaScript Lesson</h3>

<p>You can use document.write to calculate numbers and add words in to fill in the information outside of it.</p>

<script>
document.write(176 + 323 + " have officially rsvp'd, " + 325 * 3 + " people have indicated possibly rsvping. Another " + 34 + " haven't responded.");
</script>

</body>
</html> 
//This is a bunch of JavaScript Code to be used in HTML

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

//This section follows the html tags up until <head> this goes in head & body both
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
//Add more body text here if you'd like finish up with footer possibly,
//   and close it all up


//This one is similar the the last except this one, JavaScript goes in the
// <body> instead of the <head> 
<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>


//This one is the External Version Of The Above Two
//  Make a file labeled "anything.js" {literally anything}
//    Insert This Inside
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
//Now you'll need to put something like this inside your .html document
<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>
//This ^^^ is the most essential of these lines in this example

// "Placing scripts in external files has some advantages:
//   * It separates HTML and code
//   * It makes HTML and JavaScript easier to read and maintain
//   * Cached JavaScript files can speed up page loads"
//The above notes quoted directly from :
<a href="https://www.w3schools.com/Js/js_whereto.asp">This Site</a>
<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!">"Click Me!"</button>
*,
body {
    box-sizing: border-box;
}

body {
    width: 96%;
    margin: auto;
    margin-top: 5%;
    text-align: center;
}

fieldset {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 5vw;
    height: 6vw;
    display: flex;
    flex-direction: column;
    justify-content:center;
    
}


#formContent {
    width: 25%;
    background-color: lightslategray;
}

::placeholder {
    text-align: center;
}

function formularioIMC() {
    // Caja formulario o etiqueta padre. Hija de un div dentro de aside.
    let formulario = document.createElement("form");

    ///////////////////////////////////////////////////////////
    // Conjunto de cajitas fieldset contenedoras de
    // un input + label cada una.    
    let cajitaPeso = document.createElement("fieldset");
    let cajitaAltura = document.createElement("fieldset");

    let tituloPeso = document.createElement("legend");
    let tituloAltura = document.createElement("legend");
    ///////////////////////////////////////////////////////////



    // variables para los saltos de línea, una para salto,
    // otra para salto + raya horizontal.
    let salto = document.createElement("br");
    let salton = document.createElement("hr");
    ////////////////////////////////////////////////////////////    

    // variables para los label principales.
    // Peso y Altura.
    let etiquetaPeso = document.createElement("label");
    let etiquetaAltura = document.createElement("label");
    /////////////////////////////////////////////////////////////    

    // variables para los input principales.
    // Peso y Altura.
    let paraPeso = document.createElement("input");

    let paraAltura = document.createElement("input");

    ///////////////////////////////////////////////////////////// 



    // variables para los input boton.
    // Calcular y borrar.
    let calculo = document.createElement("input");
    let borro = document.createElement("input");
    
    ////////////////////////////////////////////////////////////

    // Asignación de valor o texto a las etiquetas legend.
    tituloPeso.innerHTML = `<i>Indíque su Peso: </i>`;
    tituloAltura.innerHTML = `<i>Indíque su Altura: </i>`;
    ////////////////////////////////////////////////////////////

    // Asignación de valor o texto, a las etiquetas label.
    etiquetaPeso.innerHTML = `<b>Calcular masa con peso y altura</b>`;
    etiquetaAltura.innerHTML = `<b>Calcular masa con peso y altura</b>`;
    ////////////////////////////////////////////////////////////////////////  

    // Asignación de atributos a los input.
    paraPeso.setAttribute('type', "text");
    paraPeso.setAttribute('placeholder', "Indíque su Peso por favor.");
    paraPeso.setAttribute('id', "pesos");
    ////////////////////////////////////////////////////////////////////////
    paraAltura.setAttribute('type', "text");
    paraAltura.setAttribute('placeholder', "Indíque su Altura por favor.");
    paraAltura.setAttribute('id', "alturas");
    ////////////////////////////////////////////////////////////////////////    

    //Asignación de atributos tipo y valor al botón de calcular.
    calculo.setAttribute('type', "button");
    calculo.onclick = function () {
        // Generación de la calculadora de índice de masa corporal.
        var valorPeso = parseInt(document.getElementById("pesos").value);
        var valorAltura = parseInt(document.getElementById("alturas").value);

        var altura = valorAltura / 100;
        var calculo = valorPeso / (altura * altura);
        //////////////////////////////////////////////////////////////////////////

        var mensaje;
        var respuesta;
        if (calculo < 18.5) {
            mensaje = 'Delgadez. Deberías ganar peso.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        } else if (calculo < 25) {
            mensaje = 'Peso justo. Ni engordes ni adelgaces.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        } else {
            mensaje = 'Sobrepeso. Deberías adelgazar.';
            respuesta = `Un saludo, tu índice de Masa Corporal ${calculo} equivale a ${mensaje}`;
            alert(respuesta);
        }
    }
    calculo.setAttribute('value', "Calcular IMC");
    ////////////////////////////////////////////////////////////////    

    //Asignación de atributos tipo y valor al botón de borrar
    borro.setAttribute('type', "reset");
    borro.setAttribute('value', "Borrar cálculo");


    // Impresión del formulario.

    // Primer fieldset.
    formulario.appendChild(salto);
    cajitaPeso.appendChild(tituloPeso);
    cajitaPeso.appendChild(etiquetaPeso);
    cajitaPeso.appendChild(salto);
    cajitaPeso.appendChild(paraPeso);
    formulario.appendChild(cajitaPeso);

    // Segundo fieldset.
    formulario.appendChild(salton);
    cajitaAltura.appendChild(tituloAltura);
    cajitaAltura.appendChild(etiquetaAltura);
    cajitaAltura.appendChild(salto);
    cajitaAltura.appendChild(paraAltura);
    formulario.appendChild(cajitaAltura);

    formulario.appendChild(salton);


    formulario.appendChild(calculo);
    formulario.appendChild(borro);
    document.getElementById("formContent").appendChild(formulario);
}
<!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>Para clase ordenador</title>
    <link rel="stylesheet" href="assets/calculadoraIMC.css">
</head>
<body>   
    <aside id="formularioIMC">
        <button type="button" onclick="formularioIMC()">Generar calulo</button>
        <div id="formContent">            
       </div>
       </aside>
    <script src="assets/calculadoraIMC.js"></script>    
</body>
 
</html>
<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta content="summary_large_image" name="twitter:card" />
	<meta content="website" property="og:type" />
	<meta content="" property="og:description" />
	<meta content="https://64za6iez1y.preview-postedstuff.com/V2-pdD1-AXRH-512I-pSfu/" property="og:url" />
	<meta content="https://pro-bee-beepro-thumbnail.getbee.io/messages/779850/763585/1648734/9309834_large.jpg" property="og:image" />
	<meta content="" property="og:title" />
	<meta content="" name="description" />
	<meta charset="utf-8" />
	<meta content="width=device-width" name="viewport" />
	<link href="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/favicon_images/DateBook_Icon-ab410a-16-icon.png" rel="icon" sizes="16x16" />
	<link href="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/favicon_images/DateBook_Icon-ab410a-32-icon.png" rel="icon" sizes="32x32" />
	<link href="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/favicon_images/DateBook_Icon-ab410a-apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />
	<style>
		.bee-row,
		.bee-row-content {
			position: relative
		}

		.bee-row-1 .bee-col-1 .bee-block-1,
		.bee-row-2 .bee-col-1 .bee-block-1 {
			font-family: Montserrat, 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
			font-weight: 700
		}

		body {
			background-color: transparent;
			color: #000;
			font-family: Montserrat, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
		}

		a {
			color: #10a2f7
		}

		* {
			box-sizing: border-box
		}

		body,
		h2 {
			margin: 0
		}

		.bee-row-content {
			max-width: 1305px;
			margin: 0 auto;
			display: flex
		}

		.bee-row-content.reverse,
		.bee-row-content.reverse .bee-col {
			-moz-transform: scale(1, -1);
			-webkit-transform: scale(1, -1);
			-o-transform: scale(1, -1);
			-ms-transform: scale(1, -1);
			transform: scale(1, -1)
		}

		.bee-row-content .bee-col-w1 {
			flex-basis: 8%
		}

		.bee-row-content .bee-col-w2 {
			flex-basis: 17%
		}

		.bee-row-content .bee-col-w4 {
			flex-basis: 33%
		}

		.bee-row-content .bee-col-w7 {
			flex-basis: 58%
		}

		.bee-row-content .bee-col-w8 {
			flex-basis: 67%
		}

		.bee-row-content .bee-col-w12 {
			flex-basis: 100%
		}

		.bee-icon .bee-icon-label-right a,
		.bee-menu ul li a {
			text-decoration: none
		}

		.bee-image {
			overflow: auto
		}

		.bee-image .bee-center {
			margin: 0 auto
		}

		.bee-row-3 .bee-col-1 .bee-block-3,
		.bee-row-5 .bee-col-1 .bee-block-1,
		.bee-row-5 .bee-col-1 .bee-block-2,
		.bee-row-5 .bee-col-1 .bee-block-3 {
			width: 100%
		}

		.bee-menu ul {
			margin: 0;
			padding: 0
		}

		.bee-icon {
			display: inline-block;
			vertical-align: middle
		}

		.bee-icon .bee-content {
			display: flex;
			align-items: center
		}

		.bee-image img {
			display: block;
			width: 100%
		}

		.bee-menu ul {
			list-style-type: none
		}

		.bee-menu ul.bee-horizontal li {
			display: inline-block
		}

		.bee-row-1 {
			background-color: #b41cd9;
			background-repeat: no-repeat;
			background-size: auto
		}

		.bee-row-1 .bee-row-content,
		.bee-row-2 .bee-row-content,
		.bee-row-3 .bee-row-content {
			background-repeat: no-repeat;
			background-size: auto;
			color: #000
		}

		.bee-row-1 .bee-col-1,
		.bee-row-1 .bee-col-2,
		.bee-row-1 .bee-col-3 {
			padding-bottom: 5px;
			padding-top: 5px;
			display: flex;
			flex-direction: column;
			justify-content: center
		}

		.bee-row-1 .bee-col-1 .bee-block-1 {
			color: #ffbdd8;
			font-size: 32px;
			letter-spacing: 1px;
			text-align: center
		}

		.bee-row-2 {
			background-color: #13a7de;
			background-repeat: no-repeat;
			background-size: auto
		}

		.bee-row-3,
		.bee-row-4,
		.bee-row-5 {
			background-color: #efddff;
			background-repeat: no-repeat
		}

		.bee-row-2 .bee-col-1 {
			padding-bottom: 15px;
			padding-top: 15px
		}

		.bee-row-2 .bee-col-1 .bee-block-1 {
			color: #fff;
			font-size: 16px;
			text-align: right
		}

		.bee-row-3 {
			background-image: url('https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6826/MainHeader_Fondo_04.png');
			background-size: cover
		}

		.bee-row-3 .bee-col-1 {
			padding: 5px 10px
		}

		.bee-row-3 .bee-col-1 .bee-block-2 {
			padding-bottom: 5px;
			text-align: center;
			width: 100%
		}

		.bee-row-3 .bee-col-2 {
			padding: 5px 15px
		}

		.bee-row-3 .bee-col-3,
		.bee-row-6 .bee-col-1,
		.bee-row-7 .bee-col-1,
		.bee-row-7 .bee-col-1 .bee-block-1 {
			padding-bottom: 5px;
			padding-top: 5px
		}

		.bee-row-4 .bee-row-content,
		.bee-row-5 .bee-row-content,
		.bee-row-6 .bee-row-content,
		.bee-row-7 .bee-row-content {
			background-repeat: no-repeat;
			color: #000
		}

		.bee-row-6,
		.bee-row-7 {
			background-repeat: no-repeat
		}

		.bee-row-6 .bee-col-1 .bee-block-1 {
			color: #000;
			font-family: inherit;
			font-size: 14px;
			font-weight: 400;
			text-align: center
		}

		.bee-row-7 .bee-col-1 .bee-block-1 {
			color: #9d9d9d;
			font-family: inherit;
			font-size: 15px;
			text-align: center
		}

		.bee-row-2 .bee-col-1 .bee-block-1 li {
			padding-left: 10px;
			padding-right: 10px
		}

		.bee-row-2 .bee-col-1 .bee-block-1 li a {
			color: #fff
		}

		@media (max-width:768px) {
			.bee-row-content:not(.no_stack) {
				display: block
			}
		}

		.bee-row-1 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 10px
		}

		.bee-row-1 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content,
		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content,
		.bee-row-7 .bee-col-1 .bee-block-1 .bee-icon:not(.bee-icon-first) .bee-content {
			margin-left: 0
		}

		.bee-row-1 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 5px
		}

		.bee-row-6 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}

		.bee-row-7 .bee-col-1 .bee-block-1 .bee-icon-image {
			padding: 5px 6px 5px 5px
		}

		.bee-row-7 .bee-col-1 .bee-block-1 .bee-icon::not(.bee-icon-last) .bee-content {
			margin-right: 0
		}
	</style>
</head>

<body>
	<div class="bee-page-container">
		<div class="bee-row bee-row-1">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w2">
					<div class="bee-block bee-block-1 bee-icons">
						<div class="bee-icon bee-icon-last">
							<div class="bee-content">
								<div class="bee-icon-image"><a href="https://creatorapp.zoho.com/sapphireelitetech/environment/development/datebook/#New_Section1" target="_self" title="DateBook"><img height="64px" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/DateBook%20Icon.png" width="auto" /></a></div>
								<div class="bee-icon-label bee-icon-label-right"><a href="https://creatorapp.zoho.com/sapphireelitetech/environment/development/datebook/#New_Section1" target="_self" title="DateBook">DateBook</a></div>
							</div>
						</div>
					</div>
				</div>
				<div class="bee-col bee-col-2 bee-col-w8">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
				<div class="bee-col bee-col-3 bee-col-w2">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-2">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-menu">
						<nav class="bee-menu">
							<ul class="bee-horizontal">
								<li><a href="https://www.example.com" target="_self" title="">INTRODUCTION</a></li>
								<li><a href="https://www.example.com" target="_self" title="">HIGHLIGHTS</a></li>
								<li><a href="https://www.example.com" target="_self" title="">NEWS</a></li>
								<li><a href="https://www.example.com" target="_self" title="">EVENTS</a></li>
								<li><a href="https://www.example.com" target="_self" title="">YOUR DASHBOARD</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-3">
			<div class="bee-row-content reverse">
				<div class="bee-col bee-col-1 bee-col-w4">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:15px;"></div>
					</div>
					<div class="bee-block bee-block-2 bee-heading">
						<h2 style="color:#5d85a9;direction:ltr;font-family:'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;font-size:32px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0;"><span class="tinyMce-placeholder">Fermentum Ipsum</span> </h2>
					</div>
					<div class="bee-block bee-block-3 bee-image"><img alt="" class="bee-center bee-autowidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6826/Sombra_inferior.png" style="max-width:415px;" /></div>
				</div>
				<div class="bee-col bee-col-2 bee-col-w1">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:15px;"></div>
					</div>
					<div class="bee-block bee-block-2 bee-spacer">
						<div class="spacer" style="height:25px;"></div>
					</div>
				</div>
				<div class="bee-col bee-col-3 bee-col-w7">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:10px;"></div>
					</div>
					<div class="bee-block bee-block-2 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-4">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-spacer">
						<div class="spacer" style="height:60px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-5">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-image"><img alt="Your Logo" class="bee-center bee-fixedwidth" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/DateBook%20Icon.png" style="max-width:326px;" /></div>
					<div class="bee-block bee-block-2 bee-image"><img alt="" class="bee-center bee-fixedwidth" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/C5496230-8A5C-4503-870B-F0C4D3C7BC07.PNG" style="max-width:391px;" /></div>
					<div class="bee-block bee-block-3 bee-image"><img alt="" class="bee-center bee-autowidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6826/Sombra_inferior.png" style="max-width:650px;" /></div>
					<div class="bee-block bee-block-4 bee-spacer">
						<div class="spacer" style="height:25px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-6">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-icons">
						<div class="bee-icon bee-icon-last">
							<div class="bee-content">
								<div class="bee-icon-image"><img height="128px" src="https://19a34b3e64.imgdist.com/public/users/Integrators/BeeProAgency/779850_763585/DateBook%20Icon.png" width="auto" /></div>
							</div>
						</div>
					</div>
					<div class="bee-block bee-block-2 bee-spacer">
						<div class="spacer" style="height:25px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="bee-row bee-row-7">
			<div class="bee-row-content">
				<div class="bee-col bee-col-1 bee-col-w12">
					<div class="bee-block bee-block-1 bee-icons" id="beepro-locked-footer">
						<div class="bee-icon bee-icon-last">
							<div class="bee-content">
								<div class="bee-icon-image"><a href="https://www.designedwithbee.com/?utm_source=editor&amp;utm_medium=bee_pro&amp;utm_campaign=free_footer_link" target="_blank" title="Designed with BEE"><img alt="Designed with BEE" height="32px" src="https://d1oco4z2z1fhwp.cloudfront.net/assets/bee.png" width="auto" /></a></div>
								<div class="bee-icon-label bee-icon-label-right"><a href="https://www.designedwithbee.com/?utm_source=editor&amp;utm_medium=bee_pro&amp;utm_campaign=free_footer_link" target="_blank" title="Designed with BEE">Designed with BEE</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
use('myworlddb')
 
//{} empty fetches all documents
db.person.find({})
use('myworlddb')

db.person.insertMany([
  {
  name:"hemanth",
  age: 32
  },
  {
  name:"kumar",
  age: 40
  }
])
<!DOCTYPE html>

<html>

​

<head>

    <style>

        <title>404 - Page Not Found</title><link rel="stylesheet"type="text/css"href="styles.css"/>CSS: body,

        html {

            height: 0%;

            margin: 0;
10
            padding: 0;

        }

​

        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.25);

        }

​

        img {

            max-width: 100%;
<!DOCTYPE html>
<html lang="pt-BR" data-bs-theme="light">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container">
                <a class="navbar-brand" href="#">SeuSite</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                    </ul>
                </div>
                <div class="d-flex">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle current-theme" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                Tema
                            </a>
                            <ul class="dropdown-menu themes-list">
                                <li>
                                    <a class="dropdown-item" href="#" data-theme="light">
                                        <i class="bi bi-brightness-high"></i> Claro
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#" data-theme="dark">
                                        <i class="bi bi-moon-stars-fill"></i> Escuro
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#" data-theme="auto">
                                        <i class="bi bi-circle-half"></i> Auto
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="container">
            <h1>Hello World!</h1>
            <!-- Seu conteúdo aqui -->
        </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {

            function removerActiveClassTheme() {
                $('.themes-list li a').removeClass('active');
            }

            $('.themes-list li').on('click', function() {
                let linkElement = $(this).find('a');
                let theme = linkElement.data('theme');
                $('html').attr('data-bs-theme', theme);
                removerActiveClassTheme();
                linkElement.addClass('active');
            })
        });
    </script>
</body>

</html>
<ul class="brochure-list">
      <li><a href="/brochure/japanese/"><img alt="Japanese" src="/wp-content/uploads/2018/08/japan-flag.jpg"></a></li>
      <li><a href="/brochure/chinese/"><img alt="Chinese" src="/wp-content/uploads/2019/05/Brochure-Chinese.jpg"></a></li>
			<li><a href="/brochure/thai"><img alt="Thai" src="/wp-content/uploads/2019/06/Thai-flag.jpg"></a></li>
</ul>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="bde1_style.css"/>
    <title>BDE-BUCHUNG</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="top_left">
                <p>Angemeldet: Ermet, Wolfgang</p>
                <a href="qr_scan.html" class="qr_scan">Stückliste | AMS-Etikett
                    scannen
                    <img src="scan_code.svg" class="scan_icon">
                </a>
            </div>

            <div class="exit">
                <a href="menu_auswahl.html" id="exit-button">
                    <img src="exit_icon.svg" alt="exit icon">
                    <span class="link-text">Zurück</span>
                </a>
            </div>
        </div>

        <div class="container-table">
            <div class="table-left">
                <table class="objekt">
                    <tr>
                        <th>Objekt-Nr.</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Objekt-Name</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Stückliste Nr.</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Ersteller</th>
                        <td></td>
                    </tr>
                </table>

                <table class="meldung">
                    <tr>

                        <th>Meldung</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Kostenstelle</th>
                        <td></td>
                    </tr>
                </table>


                <table class="fertigmeldungen">
                    <caption>Fertigmeldungen</caption>

                    <tr>
                        <td>4410-Programmiert</td>
                        <td>4450-Gekantet</td>
                        <td>4470-Geschliffen</td>

                    </tr>
                    <tr>
                        <td>4420-Geschnitten</td>
                        <td>4455-Gewalzt</td>
                        <td>4480-Pulverbesch.</td>
                    </tr>
                    <tr>
                        <td>4430-Genibbelt</td>
                        <td>4457-Bolzen gesch.</td>
                        <td>4482-Glasperlgestr.</td>

                    </tr>
                    <tr>
                        <td>4440-Gelasert</td>
                        <td>4460-Zusammengeb.</td>
                        <td>4510-Verpacht</td>
                    </tr>
                </table>
            </div>
            <div class="table-right">
                <table class="fertigungsgange">
                    <caption>Fertigungsgänge</caption>
                    <tr>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>
</html> 
<button
   className="modal-close-button"
   onClick={handleCloseModal}
 >
   <span aria-hidden="true">&times;</span>
 </button>
 
 You are a CSS expert
 
 I want you to do following changes in styling.
 
 1. Rounded shape. Apply border radius to 50pc.
 2. Background to "#f1f1f1".
 3. No outer border color.
 3. border of child element span should be 2px solid #494A53.
.initials-avatar {
    background-color: #023979;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 38px;
    height: 38px;
}
#block
{
   width: 200px;
   border: 1px solid red;
   margin: 0 auto;
}
<div class="container ab-hp-redesign" style="margin-top: 1%;">
    <div class="g">
        <div class="gc n-6-of-12">
            <a href="https://www.revolve.com/content/products/editorial?prettyPath=/r/Editorials.jsp&listname=RM%20052223%20Memorial%20Day%20Weekend&d=Mens&cplid=45846&navsrc=hspos1_1"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row1-left_1x.jpg"
                    srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row1-left_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row1-left_2x.jpg 2x"
                    width="659" height="690"></a>
        </div>
        <div class="gc n-6-of-12">
            <a href="https://www.revolve.com/mens/tshirts-basic/br/d6e1b2/?featuredCodes=WAOR-MS4,WAOR-MS1,WAOR-MS3,WAOR-MS2,PLAU-MS111,PLAU-MS104,CUTR-MS43,THEO-MS166,Y3-MS92,JOHF-MS100,THEO-MS167,CITI-MS13,CUTR-MS10,ROLS-MS100,NSZ-MS43,Y3-MS93&navsrc=hspos1_2"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row1-right_1x.jpg"
                    srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row1-right_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row1-right_2x.jpg 2x"
                    width="659" height="690">
            </a>
        </div>
    </div>
    
    <div class="g u-margin-txxl">
        <div class="gc n-12-of-12 u-margin-txl u-padding-bnone">
            <div class="u-textxxl ab-hp-redesign-heading u-font-secondarybold" style="font-size: 1.43rem;">
                #t("Sneaker Season")
            </div>
            <div class="u-flex">
                <p>
                    #t("Elevate your footwear game with these standout sneakers")
                </p>
                <a href="https://www.revolve.com/mens/shoes-sneakers/br/4f37b5/?featuredCodes=NIKR-MZ12,AFSC-MZ61,ONF-MZ223,NBAL-MZ59,NIKR-MZ378,NIKR-MZ319,NIKR-MZ4,NIKR-MZ286,ONF-MZ113,ONF-MZ200,ONF-MZ209,ONF-MZ235,SUCY-MZ43,SUCY-MZ41,SUCY-MZ42,SUCY-MZ37&navsrc=hspos2_1"
                    class="u-textxl ab-hp-redesign-link u-font-secondarybold" style="letter-spacing: 1px;">
                    <span class="u-screen-reader">
                        #t("Sneaker Season")
                    </span>
                    #t("Shop Sneakers")
                </a>
            </div>
        </div>
        <div class="gc n-12-of-12">
            <a href="https://www.revolve.com/mens/shoes-sneakers/br/4f37b5/?featuredCodes=NIKR-MZ12,AFSC-MZ61,ONF-MZ223,NBAL-MZ59,NIKR-MZ378,NIKR-MZ319,NIKR-MZ4,NIKR-MZ286,ONF-MZ113,ONF-MZ200,ONF-MZ209,ONF-MZ235,SUCY-MZ43,SUCY-MZ41,SUCY-MZ42,SUCY-MZ37&navsrc=hspos2_1"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row2_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row2_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row2_2x.jpg 2x"
                    width="1334" height="880" class="js-hp-lazy">
            </a>
        </div>
    </div>

    <div class="g u-margin-txxl">
        <div class="gc n-12-of-12 u-margin-txl u-padding-bnone">
            <div class="u-textxxl ab-hp-redesign-heading u-font-secondarybold" style="font-size: 1.43rem;">
                #t("Fresh Faces")
            </div>
            <div class="u-flex">
                <p>
                    #t("Highlighting the latest brands and designers added to the REVOLVE Man roster")
                </p>
                <a href="https://www.revolve.com/content/products/editorial?prettyPath=/r/Editorials.jsp&listname=RM%20New%20to%20RevolveMan%20Ongoing%20020923&d=Mens&cplid=45066&navsrc=hspos3_1"
                    class="u-textxl ab-hp-redesign-link u-font-secondarybold" style="letter-spacing: 1px;">
                    <span class="u-screen-reader">
                        #t("Fresh Faces")
                    </span>
                    #t("Shop the Edit")
                </a>
            </div>
        </div>
        <div class="gc n-12-of-12">
            <a href="https://www.revolve.com/content/products/editorial?prettyPath=/r/Editorials.jsp&listname=RM%20New%20to%20RevolveMan%20Ongoing%20020923&d=Mens&cplid=45066&navsrc=hspos3_1"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row3_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row3_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row3_2x.jpg 2x"
                    width="1334" height="880" class="js-hp-lazy">
            </a>
        </div>
    </div>


    <div class="g u-padding-txxl">
        <div class="gc n-4-of-12">
            <div class="u-textxxl ab-hp-redesign-heading u-margin-bnone u-font-secondarybold" style="font-size: 1.43rem;">
                #t("Hats")
            </div>
                         <a href="https://www.revolve.com/mens/accessories-hats/br/1df4c5/?&sortBy=newest&navsrc=hspos4_1"
                class="ab-hp-redesign-link u-margin-blg u-block u-font-secondarybold" style="letter-spacing: 1px;">
                <span class="u-screen-reader">
                    #t("Hats")
                </span>
                #t("Shop Now")
            </a>
            <a href="https://www.revolve.com/mens/accessories-hats/br/1df4c5/?&sortBy=newest&navsrc=hspos4_1"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-left_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-left_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-left_2x.jpg 2x"
                    width="434" height="580" class="js-hp-lazy"></a>
        </div>
        <div class="gc n-4-of-12">
                         <div class="u-textxxl ab-hp-redesign-heading u-margin-bnone u-font-secondarybold" style="font-size: 1.43rem;">
                #t("Swim")
            </div>
            <a href="https://www.revolve.com/mens/clothing-shorts-swimwear/br/a959a9/?&sortBy=newest&navsrc=hspos4_2"
                class="ab-hp-redesign-link u-margin-blg u-block u-font-secondarybold" style="letter-spacing: 1px;">
                <span class="u-screen-reader">
                    #t("Swim")
                </span>
                #t("Shop Now")
            </a>
            <a href="https://www.revolve.com/mens/clothing-shorts-swimwear/br/a959a9/?&sortBy=newest&navsrc=hspos4_2"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-center_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-center_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-center_2x.jpg 2x"
                    width="434" height="580" class="js-hp-lazy"></a>
        </div>
        <div class="gc n-4-of-12">
            <div class="u-textxxl ab-hp-redesign-heading u-font-secondarybold u-margin-bnone" style="font-size: 1.43rem;">
                #t("Sunglasses")
            </div>
                        <a href="https://www.revolve.com/mens/accessories-sunglasses-eyewear/br/fd3288/?&sortBy=newest&navsrc=hspos4_3"
                class="ab-hp-redesign-link u-margin-blg u-block u-font-secondarybold" style="letter-spacing: 1px;">
                <span class="u-screen-reader">
                    #t("Sunglasses")
                </span>
                #t("Shop Now")
            </a>
            <a href="https://www.revolve.com/mens/accessories-sunglasses-eyewear/br/fd3288/?&sortBy=newest&navsrc=hspos4_3"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-right_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-right_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row4-right_2x.jpg 2x"
                    width="434" height="580" class="js-hp-lazy"></a>
        </div>
    </div>

    <div class="g u-margin-txxl">
        <div class="gc n-12-of-12 u-margin-txl u-padding-bnone">
            <div class="u-textxxl ab-hp-redesign-heading u-font-secondarybold" style="font-size: 1.43rem;">
                #t("Exclusive: Wao")
            </div>
            <div class="u-flex">
                <p>
                    #t("Simple yet elevated, We Are One&#39;s debut collection offers timeless styles with modern silhouettes")
                </p>
                <a href="https://www.revolve.com/mens/wao/br/4047a1/?featuredCodes=WAOR-MS8,WAOR-MS11,WAOR-MS5,WAOR-MS7,WAOR-MX4,WAOR-MF3,WAOR-MX5,WAOR-MX3,WAOR-MP2,WAOR-MP3,WAOR-MP1,WAOR-MP4,WAOR-MF4,WAOR-MX1,WAOR-MS4,WAOR-MS1&navsrc=hspos5_1"
                    class="u-textxl ab-hp-redesign-link u-font-secondarybold" style="letter-spacing: 1px;">
                    <span class="u-screen-reader">
                        #t("Exclusive: Wao")
                    </span>
                    #t("Shop The Collection")
                </a>
            </div>
        </div>
        <div class="gc n-12-of-12">
            <a href="https://www.revolve.com/mens/wao/br/4047a1/?featuredCodes=WAOR-MS8,WAOR-MS11,WAOR-MS5,WAOR-MS7,WAOR-MX4,WAOR-MF3,WAOR-MX5,WAOR-MX3,WAOR-MP2,WAOR-MP3,WAOR-MP1,WAOR-MP4,WAOR-MF4,WAOR-MX1,WAOR-MS4,WAOR-MS1&navsrc=hspos5_1"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row5_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row5_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row5_2x.jpg 2x"
                    width="1334" height="880" class="js-hp-lazy">
            </a>
        </div>
    </div>

    <div class="g u-margin-txxl">
        <div class="gc n-4-of-12 u-margin-txxl">
            <div class="ab-hp-redesign-heading u-textxxl u-margin-bnone u-font-secondarybold" style="font-size: 1.43rem">
                #t("Statement Graphics")
            </div>

            <a href="https://www.revolve.com/content/products/editorial?prettyPath=/r/Editorials.jsp&listname=RM%20Graphics%20050323&d=Mens&cplid=45723&navsrc=hspos6_1"
                class="u-textxl ab-hp-redesign-link u-margin-blg u-block u-font-secondarybold" style="letter-spacing: 1px;">
                <span class="u-screen-reader">
                    #t("Statement Graphics")
                </span>
                #t("Shop Now")
            </a>
            <a href="https://www.revolve.com/content/products/editorial?prettyPath=/r/Editorials.jsp&listname=RM%20Graphics%20050323&d=Mens&cplid=45723&navsrc=hspos6_1" tabindex="-1"
                aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-left_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-left_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-left_2x.jpg 2x"
                    width="434" height="580" class="js-hp-lazy"></a>
        </div>
        <div class="gc n-4-of-12 u-margin-txxl">
            <div class="ab-hp-redesign-heading u-textxxl u-margin-bnone u-font-secondarybold" style="font-size: 1.43rem;">
                #t("The Spring Shop")
            </div>

            <a href="http://www.revolve.com/r/Editorials.jsp?listname=RM%20Resort%20020923&d=Mens&cplid=45063&navsrc=hspos6_2"
                class="u-textxl ab-hp-redesign-link u-margin-blg u-block u-font-secondarybold" style="letter-spacing: 1px;">
                <span class="u-screen-reader">
                    #t("The Spring Shop")
                </span>
                #t("Shop Now")
            </a>
            <a href="http://www.revolve.com/r/Editorials.jsp?listname=RM%20Resort%20020923&d=Mens&cplid=45063&navsrc=hspos6_2"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-center_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-center_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-center_2x.jpg 2x"
                    width="434" height="580" class="js-hp-lazy"></a>
        </div>
        <div class="gc n-4-of-12 u-margin-txxl">
            <div class="ab-hp-redesign-heading u-textxxl u-margin-bnone u-font-secondarybold" style="font-size: 1.43rem;">
                Free & Easy
            </div>

            <a href="https://www.revolve.com/mens/free-easy/br/7d9ec0/?&sortBy=newest&navsrc=hspos6_3"
                class="u-textxl ab-hp-redesign-link u-margin-blg u-block u-font-secondarybold" style="letter-spacing: 1px;">
                <span class="u-screen-reader">
                    Free & Easy
                </span>
                #t("Shop Now")
            </a>
            <a href="https://www.revolve.com/mens/free-easy/br/7d9ec0/?&sortBy=newest&navsrc=hspos6_3"
                tabindex="-1" aria-hidden="true">
                <img alt=""
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                    data-src="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-right_1x.jpg"
                    data-srcset="https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-right_1x.jpg 1x, https://is4.revolveassets.com/images/up/2023/May/052223_m_hp_b_row6-right_2x.jpg 2x"
                    width="434" height="580" class="js-hp-lazy"></a>
        </div>
    </div>
</div>              
                      
<p>Tijdens deze les maak je kennis met een aantal elektrostatische verschijnselen. Je onderzoekt de oorsprong van lading en past de aangeleerde concepten toe op enkele voorbeelden uit het dagelijkse leven. Daarnaast leer je ook de verschillen tussen geleiders en isolatoren. Je studeert dit deel op de volgende manier:</p>
<ul>
    <li>Je vindt het lesmateriaal (Powerpoints, cursus, interessante apps en filmpjes) terug op <a title="📚 Lesmateriaal les 1: elektrostatische verschijnselen" href="https://arteveldehogeschool.instructure.com/courses/25368/pages/lesmateriaal-les-1-elektrostatische-verschijnselen" data-api-endpoint="https://arteveldehogeschool.instructure.com/api/v1/courses/25368/pages/lesmateriaal-les-1-elektrostatische-verschijnselen" data-api-returntype="Page">deze pagina</a>. De cursus is het hoofddocument. Je vindt daarin alle leerinhouden die je nodig hebt voor dit deel. De powerpointpresentaite gebruik je best samen met de cursus.</li>
    <li>Tijdens de lessen worden heel wat proeven getoond. Deze proeven zijn ook beschikbaar als filmpje op YouTube. Klik <a class="inline_disabled" title="Link" href="https://youtube.com/playlist?list=PLCpuDBQR74IbMRl9Wv-Mdnalq73ceMk8_" target="_blank" rel="noopener">hier</a>voor de playlist.</li>
    <li>Het volledige hoofdstuk wordt in stukjes behandeld in het leerpad, dat je vindt bij <a title="Les 1: elektrostatische verschijnselen" href="https://arteveldehogeschool.instructure.com/courses/25368/modules/158730" data-api-endpoint="https://arteveldehogeschool.instructure.com/api/v1/courses/25368/modules/158730" data-api-returntype="Module">deze module</a>.</li>
    <li>Deze les bevat een opdracht met permanente evaluatie. De instructies en alle informatie over de opdracht vind je <a title="Practicum: Flying Tinsel" href="https://arteveldehogeschool.instructure.com/courses/25368/assignments/174527" data-api-endpoint="https://arteveldehogeschool.instructure.com/api/v1/courses/25368/assignments/174527" data-api-returntype="Assignment">hier</a>.</li>
</ul>
<ul class="pill">
<li>Estimated Reading Time</li>
<li>30 mins</li>
</ul>
<ul class="pill"></ul>
<a title="Dit is een voorbeeld van een titelattribuut" href="https://arteveldehogeschool.instructure.com/courses/27588/pages/titel-attributen" data-tooltip="{&quot;tooltipClass&quot;:&quot;popover popover-padded&quot;, &quot;position&quot;:&quot;right&quot;}" data-api-returntype="Page" data-api-endpoint="https://arteveldehogeschool.instructure.com/api/v1/courses/27588/pages/titel-attributen">Voorbeeld titelattributen</a>
<a title="Dit is een voorbeeld van een titelattribuut" href="https://arteveldehogeschool.instructure.com/courses/27588/pages/titel-attributen">tekst waar je op kan klikken</a>
<a title="Dit is een voorbeeld van een titelattribuut" href="https://arteveldehogeschool.instructure.com/courses/27588/pages/titel-attributen">
<p><a class="Button Button--primary" href="#voorbeeld">Voorbeeld</a></p>
<div id="voorbeeld" class="enhanceable_content dialog" title="Voorbeeld">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in risus a nisl fermentum placerat. Proin consequat lorem eget leo congue, non vestibulum sem tincidunt.</p>
</div>
<div class="enhanceable_content tabs" title="ingesloten inhoud">
  <ul>
    <li><a href="#fragment-1">Tabblad 1</a></li>
    <li><a href="#fragment-2">Tabblad 2</a></li>
    <li><a href="#fragment-3">Tabblad 3</a></li>
    <li><a href="#fragment-4">Tabblad 4</a></li>
    <li><a href="#fragment-5">Tabblad 5</a></li>
  </ul>
  <div id="fragment-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in risus a nisl fermentum placerat. Proin consequat lorem eget leo congue, non vestibulum sem tincidunt.</p>
  </div>
  <div id="fragment-2">
    <p>Nullam placerat augue sed tellus sagittis elementum. Curabitur eu nulla sit amet purus gravida finibus sed nec neque.</p>
  </div>
  <div id="fragment-3">
    <p>Vivamus id ipsum accumsan, commodo sapien id, vehicula ex. Aenean rutrum elit in metus tempor feugiat.</p>
  </div>
  <div id="fragment-4">
    <p>Praesent auctor ipsum in nunc dignissim, at sagittis ex commodo. Fusce vitae lectus eget justo ullamcorper tincidunt.</p>
  </div>
  <div id="fragment-5">
    <p>Etiam efficitur mi sit amet erat faucibus, ut fringilla mi consequat. Nam ullamcorper purus vitae nunc semper pharetra.</p>
  </div>
</div>
Start of code snippet
<head>
 <style>
   h1 {
     color: red;
   }
 </style>
</head>
End of code snippet
Start of code snippet
<h1 style="color:red;">Prework Study Guide</h1>
End of code snippet
<span class="leuchtstift">
function doFirst(){
    var button = document.getElementById('button');
    button.addEventListener("click",save,false);
}

function save(){
    var FirstName = document.getElementById('FName').value;
    var LastName = document.getElementById('LName').value;
    localStorage.setItem(FirstName, LastName);
}


if(sessionStorage && window.onload === true){
    sessionStorage.clear('Fname', 'LName');
}

window.addEventListener("load",doFirst,false);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>
//html code
<p class="custom-text-selection">Select some of this text.</p>

//css code
::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
<pricing-model>
    <qualifier>
        <and>
            <at-least number="1">
                <collection-name>items</collection-name>
                <element-name>item</element-name>
                <aggregator name="quantity" operation="total" />
                <or>
                    <equals>
                        <value>item.auxiliaryData.catalogRef.id</value>
                        <constant>
                            <data-type>java.lang.String</data-type>
                            <string-value>33600</string-value>
                        </constant>
                    </equals>
                    <equals>
                        <value>item.auxiliaryData.catalogRef.id</value>
                        <constant>
                            <data-type>java.lang.String</data-type>
                            <string-value>33610</string-value>
                        </constant>
                    </equals>
                </or>
            </at-least>
            <at-least number="1">
                <collection-name>items</collection-name>
                <element-name>item</element-name>
                <aggregator name="quantity" operation="total" />
                <equals>
                    <value>item.auxiliaryData.catalogRef.id</value>
                    <constant>
                        <data-type>java.lang.String</data-type>
                        <string-value>1101</string-value>
                    </constant>
                </equals>
            </at-least>
        </and>
    </qualifier>
    <offer>
        <discount-structure adjuster="35.90" calculator-type="group" discount-type="fixedPrice">
            <target>
                <group-iterator name="every-group">
                    <anded-union>
                        <iterator name="next" number="1" sort-by="priceInfo.listPrice" sort-order="ascending">
                            <collection-name>items</collection-name>
                            <element-name>item</element-name>
                            <aggregator name="quantity" operation="total" />
                            <or>
                                <equals>
                                    <value>item.auxiliaryData.catalogRef.id</value>
                                    <constant>
                                        <data-type>java.lang.String</data-type>
                                        <string-value>33600</string-value>
                                    </constant>
                                </equals>
                                <equals>
                                    <value>item.auxiliaryData.catalogRef.id</value>
                                    <constant>
                                        <data-type>java.lang.String</data-type>
                                        <string-value>33610</string-value>
                                    </constant>
                                </equals>
                            </or>
                        </iterator>
                        <iterator name="next" number="1" sort-by="priceInfo.listPrice" sort-order="ascending">
                            <collection-name>items</collection-name>
                            <element-name>item</element-name>
                            <aggregator name="quantity" operation="total" />
                            <equals>
                                <value>item.auxiliaryData.catalogRef.id</value>
                                <constant>
                                    <data-type>java.lang.String</data-type>
                                    <string-value>1101</string-value>
                                </constant>
                            </equals>
                        </iterator>
                    </anded-union>
                </group-iterator>
            </target>
        </discount-structure>
    </offer>
</pricing-model>
<!--This is html code. Plz. use it as html file. -->
 
<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;900&display=swap" rel="stylesheet"> -->
    <title>Upgrader Boy</title>
    <link rel="stylesheet" href="web.css">
</head>
 
<body>
    <header>
        <section class="navsection">
            <div class="logo">
                <h1>Upgrader Boy</h1>
            </div>
            <nav>
                <a href="https://upgraderboy.blogspot.com/" target="_blank">Home</a>
                <a href="https://www.youtube.com/channel/UCEJnv8TaSl0i1nUMm-fGBnA?sub_confirmation=1" target="_blank">Youtube</a>
                <a href="#" target="_blank">Social Media</a>
                <a href="#" target="_blank">Services</a>
                <a href="https://upgraderboy.blogspot.com/p/about-us.html" target="_blank">About us</a>
                <a href="https://upgraderboy.blogspot.com/p/contact-us.html" target="_blank">Contact us</a>
            </nav>
        </section>
        <main>
            <div class="leftside">
                <h3>Hello</h3>
                <h1>I am Upgrader</h1>
                <h2>Web developer, Youtuber and CEO of Upgrader Boy</h2>
                <a href="#" class="button1">Website</a>
                <a href="#" class="button2">Youtube</a>
            </div>
            <div class="rightside">
                <img src="/Image/ezgif.com-gif-maker.gif" alt="Svg image by Upgrader Boy">
            </div>
        </main>
 
    </header>
</body>
 
</html>
 
<!-- This is css code. Plz. use it as css file. -->
  
*{
    margin: 0px;
    padding: 0px;
    /* @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap'); */
    /* font-family: 'Roboto Slab', serif; */
}
 
header{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left,#ffff 85%, #c3f5ff 20%);
}
 
.navsection{
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(to top, #fff 80%, #c3f5ff 20%);
    align-items: center;
}
 
.logo{
    width: 40%;
    color: #fff;
    background-image: linear-gradient(#8d98e3 40%, #854fee 60%);
    padding-left: 100px;
    box-sizing: border-box;
}
 
.logo h1{
    text-transform: uppercase;
    font-size: 1.6rem;
    animation: aagepiche 1s linear infinite;
    animation-direction: alternate;
}
 
@keyframes aagepiche{
    from{padding-left: 40px;}
    to {padding-right: 40px;}
}
 
nav{
    width: 60%;
    display: flex;
    justify-content: space-around;
}
 
nav a{
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 900;
    font-size: 17px;
    position: relative;
}
 
nav a:first-child{
    color: #4458dc;
}
 
nav a:before{
    content: "";
    position: absolute;
    top: 110%;
    left: 0;
    height: 2px;
    width: 0;
    border-bottom: 5px solid #4458dc;
    transition: 0.5s;
}
 
nav a:hover:before{
    width: 100%;
}
 
main{
    height: 80vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.rightside{
    border-radius: 30% 70% 53% 47% / 30% 30% 70% 70%;
    background-color: #c8fbff;
}
 
.rightside img{
    max-width: 500px;
    height: 80%;
}
 
.leftside{
    color: #000;
    text-transform: uppercase;
}
 
.leftside h3{
    font-size: 40px;
    margin-bottom: 20px;
    position: relative;
}
 
.leftside h3:after{
    content: "";
    width: 450px;
    height: 3px;
    position: absolute;
    top: 43%;
    left: 23.4%;
    background-color: #000;
}
 
.leftside h1{
    margin-top: 20px;
    font-size: 70px;
    margin-bottom: 25px;
}
 
.leftside h2{
    margin-bottom: 35px;
    font-weight: 500;
    word-spacing: 4px;
}
 
.leftside .button1{
    color: #fff;
    letter-spacing: 0;
    background-image: linear-gradient(to right, #4458dc 0%, #854fee 100%);
    border: double 2px transparent;
    box-shadow: 0 10px 30px rgba(118, 85, 225, 3);
    /* radial-gradient(circle at top left,#4458dc,#854fee); */
}
 
.leftside .button2{
    border: 2px solid #4458dc;
    color: #222;
    background-color: #fff;
    box-shadow: none;
}
 
.leftside .button1 , .button2{
    display: inline-block;
    margin-right: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    text-align: center;
    padding: 12px 25px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
}
 
.leftside .button1:hover{
    border: 2px solid #4458dc;
    color: #222;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
}
.scale {
    transition: all 0.3s ease-in-out;
}

.scale:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .scale:hover {
        transform: none;
    }
}


/ rotate /

.rotate {
    transition: all 0.3s ease-in-out;
}

.rotate:hover {
    transform: rotate(-5deg);
}

@media only screen and (max-width: 767px) {
    .rotate:hover {
        transform: none;
    }
}


/ position /

.position {
    transition: all 0.3s ease-in-out;
}

.position:hover {
    transform: translate(0, -100px);
}

@media only screen and (max-width: 767px) {
    .position:hover {
        transform: none;
    }
}


/ opacity /

.opacity {
    transition: all 0.3s ease-in-out;
    opacity: 0.5;
}

.opacity:hover {
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .opacity:hover {
        transform: none;
    }
}


/ jiggle /

.jiggle {
    transition: all 0.3s cubic-bezier(0.475, 0.985, 0.12, 1.975);
}

.jiggle:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .jiggle:hover {
        transform: none;
    }
}
<!DOCTYPE html>
<html>
​
<body>
The content of the body element is displayed in your browser.
</body>
​
</html>
​
<div id="header"></div>
<style>
    #header {
    	height: 200px;
        background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg');
    }
</style>

<script>
    document.addEventListener('mousemove', function (event) {
      if (window.event) { // IE fix
          event = window.event;
      }
    
      // Grab the mouse's X-position.
      var mousex = event.clientX;
      var mousey = event.clientY;
      var header = document.getElementById('header');
      header.style.backgroundPosition = '-' + mousex/3 + 'px -' + mousey/2 + 'px';
    }, false);
    
</script>
 <div class="pageNav">
    <ul class="pageNav__list">
      <li class="pageNav-item active "><a class="pageNav-link">1</a></li>
      <li class="pageNav-item "><a href="" data-page="1" class="pageNav-link">2</a></li>
    </ul>
  </div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>
<swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide ...</swiper-slide>
</swiper-container>
/* center image button on mobile */
@media screen and (max-width:767px) {
.image-button-inner {
    text-align: center;
}
}
<div class="eddy-new-three-banners">
    <div class="new-three-banners">
        <div class="eddy-big-banner">
            <div class="three-banner-content">
                <h3>20-30% Discount</h3>
                <p> Get the latest products of this category</p>
            </div>
                <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-LAP-DESK-EN.jpg}}"></a>
        </div>
        <div class="eddy-new-three-two-banners">
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-MON-DESK-EN.jpg}}"></a>
            </div>
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-TV-DESK-EN.jpg}}"></a> 
            </div>
        </div>
    </div>
</div>
<!-- End Of Three Banners -->

<div class="eddy-weekend-deals">
    <div class="weekend-deals-titles">
        <div class="Weekend-Deals">
            <h2>Weekend Deals</h2>
        </div>
<!--        <div class="weekend-deals-countdown-timer">-->
<!--            <p>End After - <span id="weekend-countdown"></span></p>-->
<!--        </div>-->
        <div class="weekend-deals-view-all">
            <a href="#">View All</a>
        </div>
    </div>
<div class="container">
    {{widget type="Magiccart\Magicproduct\Block\Widget\Product" identifier="cms-static-fearured-products" template="product.phtml"}}
</div>
</div>

<!-- End of WeekEnd Deals -->

<div class="deals-you-dont-want-to-miss-en">
    <div class="deals-you-dont-want-to-miss-titles">
        <div class="deals-you-dont-want-to-miss-heading">
            <h2>Deals You Don't Want To Miss</h2>
        </div>
        <div class="deals-you-dont-want-to-miss-view-all">
            <a href="#">View All</a>
        </div>
    </div>
    <div class="deals-miss-first-row">
        <div class="deals-miss-first-item">
            <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-CM-DESK-EN.jpg}}"></a>
        </div>
        <div class="deals-miss-first-item">
            <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-COOK-DESK-EN.jpg}}"></a>
        </div>
        <div class="deals-miss-first-item">
            <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-CS-DESK-EN.jpg}}"></a>
        </div>
    </div>
    <div class="deals-miss-last-items first-banner">
        <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-BED-DESK-EN.jpg}}"></a>
    </div>
    <div class="deals-miss-last-items last-banner">
        <a href="#"><img src="{{media url=wysiwyg/blocks/deals-dont-miss/ADS-DIN-DESK-EN.jpg}}"></a>
    </div>
</div>

<!-- End of Deals you don't want to miss -->

<div class="eddy-catalog-widget-banners">
    <div class="eddy-widget-category">
        <div class="eddy-cat-ban selected" data-widget=".first-widget">Air Conditioner</div>
        <div class="eddy-cat-ban" data-widget=".second-widget">Vacuums</div>
        <div class="eddy-cat-ban" data-widget=".third-widget">Pressure Washers</div>
        <div class="eddy-cat-ban" data-widget=".forth-widget">Drills</div>
        <div class="eddy-cat-ban" data-widget=".fifth-widget">Indoor Camera's</div>
    </div>

    <div class="eddy-widget-blocks">
        <div class="first-widget catalog-banners active">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-46.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-48.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>

        </div>
        <div class="second-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-54.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-55.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-56.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>

        </div>
        <div class="third-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-1.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-2.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-3.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
        </div>
        <div class="forth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-50.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-51.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-52.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
        </div>
        <div class="fifth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-58.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-59.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-60.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
        </div>
    </div>
</div>

<!-- End of First Catalog widget banner block -->

<div class="container">
    {{widget type="Magiccart\Magicproduct\Block\Widget\Product" identifier="cms-static-fearured-products" template="product.phtml"}}
</div>

<!-- End of product slider -->

<div class="eddy-your-own-comfort-zone">
    <div class="eddy-zones eddy-comfort-zone-first-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-second-items">
        <div class="eddy-comfort-zone-image-increase">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-big1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-third-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
</div>


<!-- End of comfort zone block -->


<div class="eddy-catalog-widget-banners">
    <div class="eddy-widget-category">
        <div class="eddy-cat-ban selected" data-widget=".first-widget">Air Conditioner</div>
        <div class="eddy-cat-ban" data-widget=".second-widget">Vacuums</div>
        <div class="eddy-cat-ban" data-widget=".third-widget">Pressure Washers</div>
        <div class="eddy-cat-ban" data-widget=".forth-widget">Drills</div>
        <div class="eddy-cat-ban" data-widget=".fifth-widget">Indoor Camera's</div>
    </div>

    <div class="eddy-widget-blocks">
        <div class="first-widget catalog-banners active">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-46.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-48.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>

        </div>
        <div class="second-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-54.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-55.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-56.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>

        </div>
        <div class="third-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-1.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-2.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-3.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
        </div>
        <div class="forth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-50.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-51.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-52.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
        </div>
        <div class="fifth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-58.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-59.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-60.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
        </div>
    </div>
</div>

<!-- End of Second Catalog widget banner block -->


<div class="eddy-shop-laptops">
    <div class="shop-laptop">
        <div class="lap-content">
            <h3>IT Technologies for start</h3>
            <h3>Check limited in Opportunities</h3>
            <button class="btn btn-primary">Shop Laptop</button>
        </div>
    </div>
    <div class="shop-all-laptops">
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small1.jpg}}"></a>
        </div>
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="shop-all-laptop-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-laptops/COMP-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
</div>

<!-- End of Eddy Shop Laptops -->

<div class="eddy-catalog-widget-banners">
    <div class="eddy-widget-category">
        <div class="eddy-cat-ban selected" data-widget=".first-widget">Air Conditioner</div>
        <div class="eddy-cat-ban" data-widget=".second-widget">Vacuums</div>
        <div class="eddy-cat-ban" data-widget=".third-widget">Pressure Washers</div>
        <div class="eddy-cat-ban" data-widget=".forth-widget">Drills</div>
        <div class="eddy-cat-ban" data-widget=".fifth-widget">Indoor Camera's</div>
    </div>

    <div class="eddy-widget-blocks">
        <div class="first-widget catalog-banners active">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-46.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-48.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-49.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/CE-320x320-47.jpg}}"/></a>

        </div>
        <div class="second-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-54.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-55.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-56.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Compu-320x320-57.jpg}}"/></a>

        </div>
        <div class="third-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-1.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-2.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-3.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/Fur-320x320-4.jpg}}"/></a>
        </div>
        <div class="forth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-50.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-51.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-52.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/HA-320x320-53.jpg}}"/></a>
        </div>
        <div class="fifth-widget catalog-banners">
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-58.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-59.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-60.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
            <a href="#"><img src="{{media url=wysiwyg/blocks/eddy-catalog-widget-banners/first/SDA-320x320-61.jpg}}"/></a>
        </div>
    </div>
</div>

<!-- End of Third catalog banner widget -->

<div class="eddy-shop-microwaves">
    <div class="shop-all-microwaves">
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small1.jpg}}"></a>
        </div>
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="shop-all-microwaves-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
    <div class="shop-microwaves">
              <div class="microwaves-content">
        <a href="#"><img src="{{media url=wysiwyg/blocks/shop-microwaves/SDA-BANNERS-EN-big.jpg}}"></a>
                </div>
    </div>
</div>


<!-- End of Shop microwaves -->


<div class="eddy-bottom-banner">
    <div class="eddy-first-bottom-banner">
        <a href="#">
            <img src="{{media url=wysiwyg/alothemes/static/banner-menu-bottom_1.jpg}}" alt="" />
        </a>
    </div>
    <div class="eddy-second-bottom-banner">
        <a href="#">
            <img src="{{media url=wysiwyg/alothemes/static/banner-menu-bottom.jpg}}" alt="" />
        </a>
    </div>
</div>  
        

<!-- End of bottom banner -->

<div class="eddy-new-three-banners">
    <div class="new-three-banners">
        <div class="eddy-big-banner">
            <div class="three-banner-content">
                <h3>20-30% Discount</h3>
                <p> Get the latest products of this category</p>
            </div>
                <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-LAP-DESK-EN.jpg}}"></a>
        </div>
        <div class="eddy-new-three-two-banners">
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-MON-DESK-EN.jpg}}"></a>
            </div>
            <div class="two-banners-container">
                <div class="three-banner-content">
                    <h3>20-30% Discount</h3>
                    <p> Get the latest products of this category</p>
                </div>
                        <a href=""><img src="{{media url=wysiwyg/blocks/Three-banners/en/ADS-TV-DESK-EN.jpg}}"></a> 
            </div>
        </div>
    </div>
</div>

<!-- End of Eddy Three banners -->

<div class="eddy-your-own-comfort-zone">
    <div class="eddy-zones eddy-comfort-zone-first-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small2.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-second-items">
        <div class="eddy-comfort-zone-image-increase">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-big1.jpg}}"></a>
        </div>
    </div>
    <div class="eddy-zones eddy-comfort-zone-third-items">
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small3.jpg}}"></a>
        </div>
        <div class="eddy-comfort-zone-image">
            <a href="#"><img src="{{media url=wysiwyg/blocks/comfort-zone/FUR-BANNERS-EN-small4.jpg}}"></a>
        </div>
    </div>
</div>


<!-- End of eddyـyourـownـcomfortـzoneـen -->

<div class="eddy-get-ready">
    <div class="dining-furniture">
        <div class="dining-furniture-content">
            <h3>Get Ready To</h3>
            <h3>Host in Style</h3>
            <p>Dining set furniture</p>
            <button class="btn btn-primary">Shop Now</button>
        </div>
    </div>
    <div class="dining-tables">
        <div class="dining-table-banner">
            <a href="#"><img src="{{media url=wysiwyg/blocks/get-ready/ADS-DIN-DESK-EN.jpg}}"></a>
        </div>
    </div>
</div>

<!-- End of eddy-get-ready-en -->
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: auto;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: scroll;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: hidden;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
   }
</style>
package net.javaguides.hibernate.dao;

import org.hibernate.Session;
import org.hibernate.Transaction;

import net.javaguides.hibernate.entity.Instructor;
import net.javaguides.hibernate.util.HibernateUtil;

public class InstructorDao {
    public void saveInstructor(Instructor instructor) {
        Transaction transaction = null;
        try (Session session = HibernateUtil.getSessionFactory().openSession()) {
            // start a transaction
            transaction = session.beginTransaction();
            // save the student object
            session.save(instructor);
            // commit transaction
            transaction.commit();
        } catch (Exception e) {
            if (transaction != null) {
                transaction.rollback();
            }
            e.printStackTrace();
        }
    }

    public void updateInstructor(Instructor instructor) {
        Transaction transaction = null;
        try (Session session = HibernateUtil.getSessionFactory().openSession()) {
            // start a transaction
            transaction = session.beginTransaction();
            // save the student object
            session.update(instructor);
            // commit transaction
            transaction.commit();
        } catch (Exception e) {
            if (transaction != null) {
                transaction.rollback();
            }
            e.printStackTrace();
        }
    }

    public void deleteInstructor(int id) {

        Transaction transaction = null;
        try (Session session = HibernateUtil.getSessionFactory().openSession()) {
            // start a transaction
            transaction = session.beginTransaction();

            // Delete a instructor object
            Instructor instructor = session.get(Instructor.class, id);
            if (instructor != null) {
                session.delete(instructor);
                System.out.println("instructor is deleted");
            }

            // commit transaction
            transaction.commit();
        } catch (Exception e) {
            if (transaction != null) {
                transaction.rollback();
            }
            e.printStackTrace();
        }
    }

    public Instructor getInstructor(int id) {

        Transaction transaction = null;
        Instructor instructor = null;
        try (Session session = HibernateUtil.getSessionFactory().openSession()) {
            // start a transaction
            transaction = session.beginTransaction();
            // get an instructor object
            instructor = session.get(Instructor.class, id);
            // commit transaction
            transaction.commit();
        } catch (Exception e) {
            if (transaction != null) {
                transaction.rollback();
            }
            e.printStackTrace();
        }
        return instructor;
    }
}
// 
@Id
 @GenericGenerator(name = "generator", strategy = "guid", parameters = {})
 @GeneratedValue(generator = "generator")
 @Column(name = "APPLICATION_ID" , columnDefinition="uniqueidentifier")
 private String id;
//hibernate import 
<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-core-jakarta</artifactId>
    <version>5.6.10.Final</version>
</dependency>
<dependency>
    <groupId>jakarta.persistence</groupId>
    <artifactId>jakarta.persistence-api</artifactId>
    <version>3.1.0</version>
</dependency>\

//
<dependency>
            <groupId>org.hibernate.orm</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>6.0.0.Final</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish.jaxb</groupId>
            <artifactId>jaxb-runtime</artifactId>
            <version>3.0.2</version>
        </dependency>
//JSTL
<dependency>
    <groupId>jakarta.servlet.jsp.jstl</groupId>
    <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
    <version>2.0.0</version>
</dependency>
<dependency>
    <groupId>org.glassfish.web</groupId>
    <artifactId>jakarta.servlet.jsp.jstl</artifactId>
    <version>2.0.0</version>
</dependency>
//Lombox


<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.24</version>
    <scope>provided</scope>
</dependency>

//MSSQL JDBC
<dependency>
    <groupId>com.microsoft.sqlserver</groupId>
    <artifactId>mssql-jdbc</artifactId>
    <version>9.4.1.jre16</version>
</dependency>

//MySQL
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.31</version>
</dependency>
///JPA
<dependency>
    <groupId>org.springframework.data</groupId>
    <artifactId>spring-data-jpa</artifactId>
    <version>2.7.0</version>
</dependency>


//Spring Validator
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>
//Loop - JSTL
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
  
  //Form - JSTL
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<div id="hs_cos_wrapper_widget_1606345913489" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><div class="b-columns b-columns--columns-left b-columns--no-spacing">
    <div class="b-columns__container scheme--darkv2">
        
        <div class="b-columns__columns" data-cols="3">
            
                <div class="b-columns__column">
                    <div class="h-wysiwyg-html">
                        <h6>It's out now</h6>
<h1 style="margin-top: 0;">All new Qt 6</h1>
<a href="/download?hsLang=en" class="c-btn" rel="noopener" target="_blank"><span>Download now</span></a> &nbsp; &nbsp; <a href="https://www.youtube.com/watch?v=TodEc77i4t4" class="c-btn--small" rel="noopener" target="_blank">Watch video</a>
                    </div>
                </div>
            
        </div>
    </div>
</div></div>
<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
/*
 * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
 * Click nbfs://nbhost/SystemFileSystem/Templates/Classes/Class.java to edit this template
 */
package com.mycompany.mavenproject1;

/**
 *
 * @author thatv
 */
import java.util.ArrayList;
import java.util.List;

public class Product {
    private int id;
    private String title;
    private double price;
    private int quantity;
    private double total;
    private double discountPercentage;
    private double discountedPrice;

    public Product(int id, String title, double price, int quantity, double total, double discountPercentage, double discountedPrice) {
        this.id = id;
        this.title = title;
        this.price = price;
        this.quantity = quantity;
        this.total = total;
        this.discountPercentage = discountPercentage;
        this.discountedPrice = discountedPrice;
    }

    // getters and setters omitted for brevity
}

public class Main {
    public static void main(String[] args) {
        String text = "id:59,title:Spring and summershoes,price:20,quantity:3,total:60,discountPercentage:8.71,discountedPrice:55\n"
                + "id:88,title:TC Reusable Silicone Magic Washing Gloves,price:29,quantity:2,total:58,discountPercentage:3.19,discountedPrice:56";

        List<Product> products = new ArrayList<>();
        String[] lines = text.split("\\n");

        for (String line : lines) {
            String[] attributes = line.split(",");
            int id = Integer.parseInt(attributes[0].split(":")[1]);
            String title = attributes[1].split(":")[1];
            double price = Double.parseDouble(attributes[2].split(":")[1]);
            int quantity = Integer.parseInt(attributes[3].split(":")[1]);
            double total = Double.parseDouble(attributes[4].split(":")[1]);
            double discountPercentage = Double.parseDouble(attributes[5].split(":")[1]);
            double discountedPrice = Double.parseDouble(attributes[6].split(":")[1]);

            Product product = new Product(id, title, price, quantity, total, discountPercentage, discountedPrice);
            products.add(product);
        }
        // Do something with the list of products...
    }
}
    public getAll throws Exception {
        String input = "id:59,title:Spring and summershoes,price:20,quantity:3,total:60,discountPercentage:8.71,discountedPrice:55\n" +
                       "id:88,title:TC Reusable Silicone Magic Washing Gloves,price:29,quantity:2,total:58,discountPercentage:3.19,discountedPrice:56";
        
        // Convert the input string to a byte array
        byte[] bytes = input.getBytes();
        
        // Create a ByteArrayInputStream from the byte array
        ByteArrayInputStream bis = new ByteArrayInputStream(bytes);
        
        // Create an ObjectInputStream from the ByteArrayInputStream
        ObjectInputStream ois = new ObjectInputStream(bis);
        
        // Read the objects one by one and add them to a list
        List<Product> products = new ArrayList<>();
        while (true) {
            try {
                Product product = (Product) ois.readObject();
                products.add(product);
            } catch (EOFException e) {
                break;  // End of file reached
            }
        }
        
        // Close the streams
        ois.close();
        bis.close();
        
        // Print the list of products
        for (Product product : products) {
            System.out.println(product);
        }
    }
}
class Product implements Serializable {
    private String id;
    private String title;
    private double price;
    private int quantity;
    private double total;
    private double discountPercentage;
    private double discountedPrice;

    // constructor, getters and setters
    
    @Override
    public String toString() {
        return "Product{" +
                "id='" + id + '\'' +
                ", title='" + title + '\'' +
                ", price=" + price +
                ", quantity=" + quantity +
                ", total=" + total +
                ", discountPercentage=" + discountPercentage +
                ", discountedPrice=" + discountedPrice +
                '}';
    }
   public static void writeProductToFile(Product product, String filePath) throws IOException {
    // Open the file for appending
    FileWriter fw = new FileWriter(filePath, true);
    
    // Convert the product to a string
    String productString = String.format("id:%s,title:%s,price:%.2f,quantity:%d,total:%.2f,discountPercentage:%.2f,discountedPrice:%.2f\n",
                                          product.getId(), product.getTitle(), product.getPrice(),
                                          product.getQuantity(), product.getTotal(), product.getDiscountPercentage(),
                                          product.getDiscountedPrice());
    
    // Write the string to the file
    fw.write(productString);
    
    // Close the file
    fw.close();
}
//This method takes a Product object and a file path as input parameters. 
//    It first opens the file for appending using a FileWriter.
//    It then converts the Product object to a string using the String.format() method.
//            This method uses placeholders to format the string with the values of the
//            Product object's properties. Finally, the method writes the string to the
//            file using the FileWriter.write() method and closes the file using the 
//            FileWriter.close() method.
//
//Note that in this example, we are assuming that the file already exists
//    and we are appending to it. If the file does not exist, you will need
//            to modify the code to create the file first.
}
@import url("https://candid-clafoutis-3fe56d.netlify.app");
<link rel="stylesheet" href="https://candid-clafoutis-3fe56d.netlify.app">
jdbc:sqlserver://;servername=server_name;encrypt=true;integratedSecurity=true;authenticationScheme=JavaKerberos
Driver	Driver Class
DB2	com.ibm.db2.jcc.DB2Driver
Microsoft SQL Server	com.microsoft.sqlserver.jdbc.SQLServerDriver
Oracle	oracle.jdbc.driver.OracleDriver
PostgreSQL	org.postgresql.Driver
https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
<!doctype html>
<html lang="en">
<head>
    <title>Using the scripts in web pages</title>
    <meta charset="utf-8">
    <script type="module">
        import LatLon from 'https://cdn.jsdelivr.net/npm/geodesy@2/latlon-spherical.min.js';
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('#calc-dist').onclick = function() {
                calculateDistance();
            }
        });
        function calculateDistance() {
            const p1 = LatLon.parse(document.querySelector('#point1').value);
            const p2 = LatLon.parse(document.querySelector('#point2').value);
            const dist = parseFloat(p1.distanceTo(p2).toPrecision(4));
            document.querySelector('#result-distance').textContent = dist + ' metres';
        }
    </script>
</head>
<body>
<form>
    Point 1: <input type="text" name="point1" id="point1" placeholder="lat1,lon1">
    Point 2: <input type="text" name="point2" id="point2" placeholder="lat2,lon2">
    <button type="button" id="calc-dist">Calculate distance</button>
    <output id="result-distance"></output>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            background-color: aqua;
            justify-content: center;
            /* text-align: center; */
            height: 100vh;
            background: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80);
            background-position: center;
            background-size: cover;
        
        }
        
        h1 {
            text-align: center;
        }
        
        #form {
            background-color: #c7ab9d;
            border: 2px solid rgb(4, 0, 255);
            border-radius: 10px;
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        
        }
        
        
        
        h2 {
            font-size: 30px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 5px;
        }
        
        input {
            height: 30px;
            width: 250px;
            border-radius: 5px;
            padding: 10px;
            margin: 5px;
            /* padding: 10px; */
        }
        
        input[type='submit'] {
            background-color: purple;
            text-align: center;
            align-content: center;
            color: white;
            height: 50px;
            font-size: 30px;
            width: 200px;
            padding-bottom: 20px;
            border: 0px;
        }
        
        .error {
            margin: 10px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Form Validation</h1>
    <div id="form">
        <h2>Login Form</h2>
        <form action="" onsubmit="return validateform()">
            <input type="text" class="form" name="" id="username" placeholder="Enter Username">
            <br>
            <span id="usererror" class="error"></span>
            <br>
            <input type="password" class="form" id="password" placeholder="Enter Password">
            <br>
            <span class="error" id="passerror"></span>
            <br>
            <!-- <input type="submit" value="Pls Submit"> -->
            <button type="submit">Pls Submit</button>
        </form>
    </div>
    <script>
        let user = document.getElementById('username');
        let pass = document.getElementById('password');
        let condition1 = 0;
        let condition2 = 0;
        
        flag
        function validateform() {
        
            if (user.value == '') {
                document.getElementById('usererror').innerHTML = "User Name Blank";
                condition1 = 0;
            } else if (user.value.length < 5) {
                document.getElementById('usererror').innerHTML = "Pls Enter more than 4 Charactre"
                condition1 = 0;
        
            } else {
                document.getElementById('usererror').innerHTML = ""
                document.getElementById('usererror').style.color = "Green";
                condition1 = 1;
        
            }
            if (pass.value == '') {
                document.getElementById('passerror').innerHTML = "Password Cannot Blank";
                condition2 = 0;
        
            }
            else if (pass.value.length < 5) {
                document.getElementById('passerror').innerHTML = "Pls Enter more than 4 Charactre";
                condition2 = 0;
        
            } else {
                document.getElementById('passerror').innerHTML = "";
                document.getElementById('passerror').style.color = "Green";
                condition2 = 1;
        
            }
            if (condition1 == 1 & condition2 == 1) {
                return true;
            } else {
                return false;
            }
        }
        
    </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
	<title>Video Picker</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Video Picker</h1>
	<form>
	  <input type="text" id="videoUrl" placeholder="Enter video URL...">
	  <button type="button" id="addVideoBtn">Add Video</button>
	</form>
	<hr>
	
	<h3 id="videoCount"></h3>

	
	<div id="videoList"></div>
	
	<script src="script.js">
	alert("If you want you can modify the UI of this project, to adapt on your needs\n" + "\nhave a great and blessed day 🤝🏼😊");

alert("Enter as many YouTube video links as you want to, and see the magic")


window.onload = function() {
const videoList = document.getElementById('videoList');
const addVideoBtn = document.getElementById('addVideoBtn');

// Load videos from LocalStorage on page load
loadVideos();

addVideoBtn.addEventListener('click', addVideo);

function addVideo() {
  const videoUrl = document.getElementById('videoUrl').value;
  const videoId = getVideoId(videoUrl);

  if (videoId) {
	const videoItem = createVideoItem(videoId);
	videoList.appendChild(videoItem);
	
	// Save video to LocalStorage
	saveVideo(videoId);
  }

  document.getElementById('videoUrl').value = '';
}

function getVideoId(url) {
  const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/;
  const match = url.match(regex);

  if (match && match[1]) {
	return match[1];
  } else {
	alert('Invalid video URL');
	return null;
  }
}

function createVideoItem(videoId) {
  const videoItem = document.createElement('div');
  videoItem.className = 'video-item';
  const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
  videoItem.innerHTML = `
	<a href="${videoUrl}" target="_blank">
	  <img src="${thumbnailUrl}" alt="Video thumbnail">
	  <h2>${videoId}</h2>
	</a>
	<button class="remove-video-btn">Remove</button>
  `;

  // Add event listener to the 'Remove' button
  const removeBtn = videoItem.querySelector('.remove-video-btn');

  removeBtn.addEventListener('click', () => {
	removeVideo(videoId);
	videoItem.remove();
  });

  return videoItem;
}

function removeVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  const index = videos.indexOf(videoId);
  if (index !== -1) {
	// Display confirmation dialog box
	const confirmed = confirm("Are you sure you want to remove this video? 😥");
	if (confirmed) {
	  // Remove video from list
	  videos.splice(index, 1);
	  localStorage.setItem('videos', JSON.stringify(videos));
	  const videoItem = document.getElementById(videoId);
	  videoList.removeChild(videoItem);
	}
  }
}


function saveVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  if (!videos.includes(videoId)) {
	videos.push(videoId);
	localStorage.setItem('videos', JSON.stringify(videos));
  }
}

function loadVideos() {
  if (localStorage.getItem('videos')) {
	const videos = JSON.parse(localStorage.getItem('videos'));
	const videoCount = document.getElementById('videoCount');
	videoCount.textContent = `You have ${videos.length} videos in the list.`;
	videos.forEach(videoId => {
	  const videoItem = createVideoItem(videoId);
	  videoList.appendChild(videoItem);
	});
  }
}

}
/*
The saveVideo() function takes the video ID and saves it to an array in LocalStorage. The loadVideos() function is called on page load and loads the videos from LocalStorage, creating a videoItem for each one and appending it to the videoList. This way, the user's added videos will persist even if they close and reopen the page.*/
	
	</script>
  </body>
</html>
#HTML#
<lightning-layout-item size="6" >
                <lightning-input type="text" onchange={handleInput} maxlength="9" placeholder="Digite o CEP"> </lightning-input>
</lightning-layout-item>

<lightning-layout-item size="12" padding="horizontal-small">
                <lightning-input disabled="true" value={obj.logradouro} type="text" placeholder="Rua" data-id="form"> </lightning-input>
</lightning-layout-item>

<lightning-button class="btn" onclick={clearFields} label="Limpar" variant="brand"></lightning-button>

#JS#
clearFields() {
        this.template.querySelectorAll('lightning-input').forEach(element => {
            element.value = null;
        });

        // you can also reset one by one by id
        // this.template.querySelector('lightning-input[data-id="form"]').value = null;
}
<nav class="px-2 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
  <div class="container flex flex-wrap items-center justify-between mx-auto">
    <a href="#" class="flex items-center">
        <img src="https://flowbite.com/docs/images/logo.svg" class="h-6 mr-3 sm:h-10" alt="Flowbite Logo" />
        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
    </a>
    <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
      <ul class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
        </li>
        <li>
            <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
            <!-- Dropdown menu -->
            <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
                <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                  <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
                  </li>
                  <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
                  </li>
                  <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
                  </li>
                </ul>
                <div class="py-1">
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Sign out</a>
                </div>
            </div>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>select an Element By ID</h1>
    <ul>
        <li>List 1</li>
        <li id="second">List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>
    <script>
        let elm = document.getElementById("second");
        console.log(elm);   // this stores an element as a object, it returns <li id="second">List 2</li>
        console.log(elm.innerHTML);        // this return the value store by an object  "List 2" // this method is used to get value
        elm.innerHTML = "<p>List Modified</p>";       // this method is used to set the value of an object
        // console.log("This value is After Modifying : " + elm.innerHTML);
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Select an Element By Class Name</h1>
    <ol>
        <li class="class para">List 1</li>
        <li class="class1">List 2</li>
        <li class="class">List 3</li>
        <li class="class1">List 4</li>
        <li class="class">List 5</li>
    </ol>
    <script>
        let elm1=document.getElementsByClassName("class");
        // Here in case of class there is a collection created of objects
        console.log(elm1);   // This return a collection
        console.log(elm1.length)     // return no. of elements in object
        // to access each elent we use loop
        for(let i=0; i<elm1.length;i++){
            // console.log(elm[i]);    // return object details 
            console.log(elm1[i].innerHTML);      // returns value of an object
            elm1[i].innerHTML="Upadted element with 1 class contains"
        }
        let elm=document.getElementsByClassName("class para");
        // Here in case of class there is a collection created of objects
        console.log(elm);   // This return a collection
        console.log(elm.length)     // return no. of elements in object
        // to access each elent we use loop
        for(let i=0; i<elm.length;i++){
            // console.log(elm[i]);    // return object details 
            console.log(elm[i].innerHTML);      // returns value of an object
            elm[i].innerHTML="Upadted elements with 2 class contains"
            console.log(elm[i].innerHTML);
        
            // Note : if same properties is used in different scripts then last one is executed
        }
    </script>
</body>

</html>
<header>
  <nav id="navbar">
      <h1 class="logo">
          <span class="text-primary">
              <i class="fas fa-book-open"></i>Edge
          </span>Ledger
      </h1>
      <ul>
          <li><a href="#home">Home</li>
          <li><a href="#about">About</li>
      </ul>
  <nav>
<header>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Example File 3</h1>
    <form action="<?= url ?>"  method="GET" >
    <input type="text"  name="username" />
    <input type="submit" name="Submit" /><br>
    <span><?= username ?></span>
    </form>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Example File 2</h1>
    <span><?= message ?></span>
  </body>
</html>
<!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">
    <style>
        body{
            background-color: rgb(99, 105, 99);
            font-family: 'Noto Serif', serif;
        }
        header{
            text-align: center;
        }
        .all{
            border: solid black 5px;
            width: 700px;
            margin: auto;
        }
        .first{
            text-align: center;
            color: black;
            font-size: 45px;
        }
        footer{
            color: black;
            background-color: rgb(131, 122, 122);
        }
    </style>
    <title>Document</title>
</head>
<body>
    <header>
        <h1>
            A.P.J Abdul Kalam
        </h1>
        <br>
        <img src="APJ-Abdul-Kalam.jpg" alt="APJ-Abdul-Kalam's picture" height="200px">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ratione quae quod veniam eos culpa iusto, doloremque aliquid assumenda totam.
        </p>
    </header>
    <main>
        <div class="all">
            <div class="first">
                <p><b>About the legend</b></p>
            </div>
            <ul>
                <div class="second">
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor eveniet qui modi vitae! Quidem beatae aut ipsam quia ab et quae dolores maxime atque ducimus. Laborum deleniti amet necessitatibus dolor.</li>
                    <br>
                </div>
                <div class="third">
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sequi iste dolor suscipit quia iusto recusandae odio ducimus enim doloribus!</li>
                    <br>
                </div>
                <div class="fourth">
                    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id impedit a eum voluptatibus dolore, non expedita ipsum accusantium?</li>
                    <br>
                </div>
                <div class="fifth">
                    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae vero eaque consectetur possimus mollitia, dolor alias suscipit animi quis recusandae.</li>
                    <br>
                </div>
                <br>
                <div class="sixt">
                    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima temporibus vero eos dolorum, ullam assumenda aliquid at hic. Nesciunt, fugiat. Ipsam iure odio a eum totam, modi et? Voluptatum rerum molestias quae laborum provident perspiciatis facere voluptate. Laboriosam, aperiam odio?</li>
                </div>
                <br>
                <div class="seventh">
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus facere rem unde praesentium repudiandae nisi, saepe rerum et laboriosam, ducimus nam quasi delectus vitae, nostrum neque architecto libero!</li>
                </div>
                <br>
                <div class="eight">
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum similique adipisci sunt modi quos iusto itaque, velit doloribus laborum commodi veritatis ab blanditiis quod reprehenderit. Qui, voluptas?</li>
                </div>
            </ul>
        </div>
    </main>
    <br>
    <hr>

    <footer>
        <p><small>For more please visit wikipedia website <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam">just click here </a></small></p><p><small>Created by <a href="mailto:rjvkha@gmail.com">Aman Kumar</a></small></p>
    </footer>
</body>
</html>
<!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>Survey</title>
</head>
<body>
    <div align="center">
        <header><h2>Enter your Interest</h2></header>
        <main>
            <div>
                <form action="ama.php">
                    Enter your name:
                    <input type="text" name="name" id="name">
                    <br>
                    <br>
                    Enter your department:
                    <input type="text" name="department" id="department">
                    <br>
                    <br>
                </form>
                Tell us about yourself:
                <textarea name="Tell us about yourself" id="1" cols="30" rows="3" height="30px" placeholder="Tell us about yourself"></textarea>
                <br>
                <br>
                <form action="ama.php">
                    Do you Exercise at home?
                    <label for="yes">
                    <input type="radio" name="yes" id="yes" value="yes">yes
                    <input type="radio" name="yes" id="yes" value="no">no
                </label>
                <br>
                <p>How do you like to read about your favourite topic</p>
                <input type="checkbox" name="Books" id="Books">Books
                <input type="checkbox" name="Online resources" id="Online resources">Online resources
                <input type="checkbox" name="Softwares" id="Softwares">Softwares
                <input type="checkbox" name="Magizenes" id="Magizenes">Magizenes
                <br>
                <br>
                <label for="Select"></label>
                What genre of movies do you like:
                <select name="movies" id="movies">
                    <option value="select">Select</option>
                    <option value="Comedy">Comedy</option>
                    <option value="action">action</option>
                    <option value="Thriller">Thriller</option>
                    <option value="Horror">Horror</option>
                </select>
                <br>
                <br>
                <input type="button" value="Submit Form">
                </form>
            </div>
        </main>
    </div>
</body>
</html>
<h3>Email</h3>
<div class="py-1">
    <input class="p-1 br-1 email-input" type="email" placeholder="@email">
</div>
<h3>Password</h3>
<div class="py-1">
    <input class="p-1 br-1 password-input" type="password" placeholder="password">
</div>
<h3>Ranges</h3>
<div class="py-1">
    <input class="p-1 range-input" type="range">
</div>
<h3>Radio buttons</h3>
<div class="py-1">
    <input class="p-2 radio-btn" type="radio"><span class="px-1">Option one is this and that—be sure to include why it's great</span>
</div>
<h3>Checkboxes</h3>
<div class="py-1">
    <input class="p-2 radio-btn" type="checkbox"><span class="px-1">Default checkbox</span>
</div>
<div class="py-1">
    <input class="p-1 btn-primary" type="submit">
</div>
<div class="simple-navbar">
    <div class="nav-loco">Navbar</div>
</div>
<div class="simple-navbar">
    <div class="nav-loco">Navbar</div>
    <div class="navright">
        <div class="nav-item">
            <div class="nav-links">Home</div>
            <div class="nav-links">About</div>
            <div class="nav-links">Page</div>
        </div>
    </div>
    <i class="fa-solid fa-bars navbar-section-hambargar menu"></i>
</div>
javascript:(function()%7Bconst selectedText %3D getSelection().toString()%3Bconst newUrl %3D new URL(location)%3BnewUrl.hash %3D %60%3A~%3Atext%3D%24%7BencodeURIComponent(selectedText)%7D%60%3Bwindow.open(newUrl)%7D)()
<!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">
    <meta name="Description"content="Read Documentary on two most powerfull Sharingan's User">
    <meta property="og:image"content="https://imgs.search.brave.com/KtopsgLfu_ZE0jkzI0tiJBmMpT1IPNJdt8kYYto3BO0/rs:fit:800:1016:1/g:ce/aHR0cHM6Ly9jZG4u/d2FsbHBhcGVyc2Fm/YXJpLmNvbS8yMS85/MS81WEp3RWIuanBn">
    <meta property="og:image"content="https://imgs.search.brave.com/KtopsgLfu_ZE0jkzI0tiJBmMpT1IPNJdt8kYYto3BO0/rs:fit:800:1016:1/g:ce/aHR0cHM6Ly9jZG4u/d2FsbHBhcGVyc2Fm/YXJpLmNvbS8yMS85/MS81WEp3RWIuanBn">
    <title>Uchiha's House</title>
</head>
<body>
    <header><h1>Wake up to reality</h1>
    <h2>Two Powerful Uchiha---------</h2>
        <br>
        <hr>
    </header>
    
    <h3>Following are the member of Powerful Uchiha Clan:-----</h3>
    <main>
        <div>
        <table>
            <td><img width="200px"src="https://imgs.search.brave.com/YsQfyD5Z3rYFuVQY11KTk7A_0qIySBAkt8aoC0tkKp0/rs:fit:900:900:1/g:ce/aHR0cHM6Ly95dDMu/Z2dwaHQuY29tL2Ev/QUFUWEFKdzV0MkVJ/UVg4bUdJUjlkM1lH/QUk4VHVJZWhtT3Y1/LTFaSW1RPXM5MDAt/Yy1rLWMweGZmZmZm/ZmZmLW5vLXJqLW1v" alt="Itachi's image"></td>
            <td><b><i>Itachi Uchiha:--</i></b>
                    <p>Fugaku Uchiha(Father)</p>
                    <p>Mikoto Uchiha(Mother)</p>
                    <p>Sasuke Uchiha(Brother)</p>
            </td>
        </table>
        <p>Itachi Uchiha is the Powerful Uchiha member who slashed his complete clan in a single night . From a young age, Itachi was calm and insightful, showing noticeable maturity for his age and knowledge on how to deal with every situation. For all his accomplishment,talent,and fame,Itachi was a rather humble man.Never arrogant about his own abilities nor understanding ohters, most things he said would be unibased and accurate</p>
        <b>
            <p>
                Follwoing are the most powerful jutsu of Itachi Uchiha:--</b>
                <ul>
                <li>Amaterasul</li>
                <li>Tsukuyomi</li>
                <li>Susano</li>
                <li>Izanami</li>
                <li>Mirage Crow</li>
                </ul>
            </p>
            <hr>
        </div>
        <div>
    <table>
        <td><img width="200" src="https://imgs.search.brave.com/i0xt90uLZIV-6tfd9u-WnSJ0ONkbHAeEnqkkGXucwK0/rs:fit:1200:1200:1/g:ce/aHR0cHM6Ly9pbWFn/ZXM4LmFscGhhY29k/ZXJzLmNvbS8xMDAv/dGh1bWItMTkyMC0x/MDAyOTc1LnBuZw" alt="Madara Uchiha image"></td>
        <td><b><i>Madara Uchiha:--</i></b>
                <p>Tajima Uchiha(Father)</p>
                <p>Izuna Uchiha(Brother)</p>
        </td>
    </table>
    <p>
        Madara Uchiha is a fictional manga and anime character in the naruto series created by Masashi Kishimoto. He is the legendary leader of the Uchiha clan. He founded Konohagajure alongside his childhood freind and rival Hashirama Senju. With the intention of beginning an era of peace.
    </p>
    <b>
        <p>
            Following are the famous jutsu of Madara Uchiha:--</b>
            <ul>
                <li>Body Modifications</li>
                <li>Ninjutsu</li>
                <li>Bukijutsu</li>
                <li>Susano</li>
                <li>Rinnegan</li>
            </ul>
        </p>
        <hr>
        <br>
        </div>
        <p>Edit video of My Favourite Character from Naruto 💥💢💥💢</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/NBu6Ijnwvrw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        <hr>

        <b><i><u>Tell us about your Favourite Uchiha 😁😉</u></i></b>
        <br>
        <br>
        <form action="form.php">
            <select name="character" id="Character">
                <option value="No Character">Select your Favourite Character</option>
                <option value="Itachi Uchiha">Itachi Uchiha</option>
                <option value="Madara Uchiha">Madara Uchiha</option>
                <option value="Sasuke Uchiha">Sasuke Uchiha</option>
                <option value="Obito Uchiha">Obito Uchiha</option>
                <option value="Shisui Uchiha">Shisui Uchiha</option>
            </select>
            <br>
            <br>
            <textarea name="explain" id="explain" cols="30" rows="10" placeholder="Write something about your favourite character"></textarea>
            <br>
            <br>
        </form>
        <hr>
<footer>
<p><small>no copyright issue</small></p>
<p><small>For work contact me: <u>rjvkha@gmail.com</u></small></p>
</footer>
    </main>
</body>
</html>
<!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>Resume</title>
</head>

<body>
    <table>
        <td><img src="./aman.jfif.jpg" width="300px" alt="Aman's Picture"></td>

        <td>
            <h1>Aman Kumar</h1>
            <p><i>Bachelor of computer's student</i></p>
            <p><b>I ❤ Web development and here to guide the Coding Enthusiasts 🚀🚀</b></p>
        </td>
    </table>

    <hr>
    <h3>Education</h3>
    <table border="">
        <tr>
            <th>Course</th>
            <th>Institute</th>
            <th>Year</th>
            <th>Result</th>
        </tr>

        <tr>
            <td>BCA</td>
            <td>JB Knowledge Park</td>
            <td>2024</td>
            <td>84.8%</td>
        </tr>

        <tr>
            <td>12 <sup>th</sup> Grade</td>
            <td>SOE,Delhi</td>
            <td>2021</td>
            <td>86.8%</td>
        </tr>
    </table>
    <h3>Internships</h3>
    <p><b>Sorry!!!</b> I didn't get any opportunity yet</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum voluptatem, eius sapiente deserunt non
            consectetur vero ut explicabo perferendis accusamus.
        </li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci perferendis sunt est laudantium, magnam
            exercitationem sequi consequuntur. Pariatur, rem ipsam!</li>
    </ul>
    <h3>Projects</h3>
    <ul>
        <b>
            <li>Gaming:</li>
        </b>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, tenetur dicta? Praesentium adipisci aliquam
            illo sint corporis nemo perspiciatis minus voluptatibus!</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, ipsum. Voluptatem molestias iure error
            accusamus quas? Deleniti amet repellendus corrupti.</li>
    </ul>
    <hr>
    <h3>Contact Me</h3>
    <p><b>Email:</b> rjvkha@gmail.com</p>
    <p><b>Phone no: </b>xxxxxxxx35</p>
</body>

</html>
<div class="card">
    <img src="/assets/images/card-three.avif" class="card-img-top">
    <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>
        <a href="#" class="card-button">Go somewhere</a><i class="fa-solid fa-arrow-right ml-1 text-primary"></i>
    </div>
</div>
<div class="block-buttons">
    <button class="btn text-light p-1 br-5 mt-1 my-2 btn-primary" type="button">Button</button>
    <button class="btn text-light p-1 br-5 mt-1  btn-success" type="button">Button</button>
</div>
<div class="block-buttons">
    <button class="btn text-light p-1 br-5 mt-1 my-2 btn-primary" type="button">Button</button>
    <button class="btn text-light p-1 br-5 mt-1  btn-success" type="button">Button</button>
</div>
<div class="block-buttons">
    <button class="btn text-light p-1 br-5 mt-1 my-2 btn-primary" type="button">Button</button>
    <button class="btn text-light p-1 br-5 mt-1  btn-success" type="button">Button</button>
</div>
<button type="button" class="btn p-1 br-5 text-light mt-1 mr-1 btn-primary">Large button</button>
<button type="button" class="btn p-1 br-5 text-light mt-1 mr-1 btn-secondary">Small button</button>
<button type="button" class="btn p-1 br-5  btn-outline-primary">Primary</button>
<button type="button" class="btn p-1 br-5  btn-outline-secondary">Secondary</button>
<button type="button" class="btn p-1 br-5  btn-outline-success">Success</button>
<button type="button" class="btn p-1 br-5  btn-outline-danger">Danger</button>
<button type="button" class="btn p-1 br-5  btn-outline-warning">Warning</button>
<button type="button" class="btn p-1 br-5  btn-outline-info">Info</button>
<button type="button" class="btn p-1 br-5  btn-outline-light">Light</button>
<button type="button" class="btn p-1 br-5  btn-outline-dark">Dark</button>
<button type="button" class="btn p-1 br-5 text-light btn-primary">Primary</button>
<button type="button" class="btn p-1 br-5 text-light btn-secondary">Secondary</button>
<button type="button" class="btn p-1 br-5 text-light btn-success">Success</button>
<button type="button" class="btn p-1 br-5 text-light btn-danger">Danger</button>
<button type="button" class="btn p-1 br-5 text-light btn-warning">Warning</button>
<button type="button" class="btn p-1 br-5 text-light btn-info">Info</button>
<button type="button" class="btn p-1 br-5 text-dark btn-light">Light</button>
<button type="button" class="btn p-1 br-5 text-light btn-dark">Dark</button>
<div class="positioned-badges">
    <button class="btn-primary">
        Inbox
        <span>99+</span>
    </button>
</div>
<div class="positioned-badges">
    <button class="btn-primary">
        Inbox
        <span>99+</span>
    </button>
</div>
<div class="button-badge">
    <button class="btn-primary">
        Notifications
        <span class="badge">4</span>
    </button>
</div>
<div class="badge-section">
    <h1 class="badge-heading">Example heading <span class="badge btn-secondary">New</span></h1>
    <h2 class="badge-heading">Example heading <span class="badge btn-secondary">New</span></h2>
    <h3 class="badge-heading">Example heading <span class="badge btn-secondary">New</span></h3>
    <h4 class="badge-heading">Example heading <span class="badge btn-secondary">New</span></h4>
    <h5 class="badge-heading">Example heading <span class="badge btn-secondary">New</span></h5>
    <h6 class="badge-heading">Example heading <span class="badge btn-secondary">New</span></h6>
</div>
const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
console.log(params.{{ name of query }});
<div class="text-area">
    <span class="input-group-text">@</span>
    <input type="text" placeholder="Username">
</div>
<div class="text-area">
    <input type="text" placeholder="Gmail">
    <span class="input-group-text-two">Gmail</span>
</div>
<div class="text-area">
    <span class="input-group-text-priviews">$</span>
    <input type="text" placeholder="Username">
    <span class="input-group-text-two">.00</span>
</div>
<div class="grid-row">
    <div class="grid-col">
        Column
    </div>
    <div class="grid-col">
        Column
    </div>
    <div class="grid-col">
        Column
    </div>
</div>
<div class="modal-container">
    <div class="modal">
        <div class="modal-heading">Modal title</div>
        <div class="modal-text">
            Are you sure that you want to save changes?
        </div>
        <div class="modal-button">
            <button class="bg-secondary text-light">close</button>
            <button class="bg-primary text-light">Save changes</button>
        </div>
        <div class="modal-close-btn">
            <i class="fas fa-times"></i>
        </div>
    </div>
</div>
<p class="para-sm">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
<p class="para-md">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
<p class="para-lg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
<div class="input-group small-input-button">
    <button class="btn btn-outline-secondary" type="button">Small</button>
    <input type="text">
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">default</button>
    <input type="text">
</div>
<div class="input-group large-input-button">
    <button class="btn btn-outline-secondary" type="button">Large</button>
    <input type="text">
</div>
<link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
 
   /* head */ 
   <head>
    <link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
  </head>

/* left snack bar */
<div class="flex justify-around items-center pd-3 position-fixed bottom-5 left-5  rounded-s bg-green-8 text-color-grey-0 gap-1">
      <span>Can't send photo.Retry in 5 second.</span>
     <button class="bg-none text-color-grey-0 text-s" id="toast_left">
             <i class="fas fa-times-circle"></i>
     </button>
</div>

/* center sanckbar*/  
<div class="flex justify-around items-center pd-3 gap-1 position-fixed bottom-5 left-40  rounded-s bg-green-8 text-color-grey-0 ">
      <span>Can't send photo.Retry in 5 second</span>
      <button class="bg-none text-color-grey-0 text-s" id="toast_center">
              <i class="fas fa-times-circle"></i>
      </button>
</div>
/* right snackbar*/
<div class="flex justify-around items-center pd-3 position-fixed rounded-s  bottom-5 right-5 bg-green-8 text-color-grey-0 gap-1">
       <span>Can't send photo.Retry in 5 second</span>
       <button class="bg-none text-color-grey-0 text-s" id="right_center">
             <i class="fas fa-times-circle"></i>
       </button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="text-area">
    <span class="input-group-text">@</span>
    <input type="text" placeholder="Username">
</div>
<div class="text-area">
    <input type="text" placeholder="Username">
    <span class="input-group-text-two" id="basic-addon2">@example.com</span>
</div>
<div class="text-area">
    <span class="input-group-text-priviews" id="basic-addon2">$</span>
    <input type="text" placeholder="Username">
    <span class="input-group-text-two" id="basic-addon2">.00</span>
</div>
<div class="textarea-container">
    <textarea class="textarea" placeholder="Enter Your Message Here"></textarea>
    <button class="textarea-button">
        <i class="fas fa-paper-plane"></i>
        Send
    </button>
</div>
<ul class="gu-list">
    <li class="gu-list-item-stacked">
        Message from friend 1</i>
    </li>
    <li class="gu-list-item-stacked">
        Message from friend 2</i>
    </li>
    <li class="gu-list-item-stacked">
        Message from friend 3</i>
    </li>
</ul>
<ul class="gu-list">
    <li class="gun-list-item">list item</li>
    <li class="gun-list-item">list item</li>
    <li class="gun-list-item">list item</li>
</ul>
<ul class="gu-list">
    <li class="gu-list-item">list item</li>
    <li class="gu-list-item">list item</li>
    <li class="gu-list-item">list item</li>
</ul>
<div class="simple-navbar">
    <div class="nav-loco">Logo</div>
    <input type="text" placeholder="Search...">
</div>
<div class="simple-navbar">
    <div class="nav-loco">Logo</div>
    <input type="text" placeholder="Search...">
    <div class="nav-item">
        <div class="nav-links">Home</div>
        <div class="nav-links">About</div>
        <div class="nav-links">Page</div>
    </div>
</div>
<div class="simple-navbar">
    <div class="nav-loco">Logo</div>
    <div class="nav-item">
        <div class="nav-links">Home</div>
        <div class="nav-links">About</div>
        <div class="nav-links">Page</div>
    </div>
</div>
<div class="card-list">
    <div class="list-group">Featured</div>
    <div class="list-group">An item</div>
    <div class="list-group">A second item</div>
    <div class="list-group">A third item</div>
</div>
 <div class="card">
     <img src="/assets/images/card-image-two.avif" 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 conten</p>
     </div>
 </div>
<div class="card">
    <img src="/assets/images/card-three.avif" 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>
        <a href="#" class="btn text-light bg-primary">Go somewhere</a>
    </div>
</div>
<div class="card">
    <img src="/assets/images/card-three.avif" 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>
        <a href="#" class="btn text-light bg-primary">Go somewhere</a>
    </div>
</div>
<div class="card">
    <img src="/assets/images/card-three.avif" 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>
        <a href="#" class="btn text-light bg-primary">Go somewhere</a>
    </div>
</div>
<div class="block-buttons">
    <button class="btn text-light bg-primary" type="button">Button</button>
    <button class="btn text-light bg-success" type="button">Button</button>
</div>
<button type="button" class="btn text-light bg-primary btn-lg">Large button</button>
<button type="button" class="btn text-light bg-secondary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<div class="button-badge">
    <button>
        Notifications
        <span class="badge">4</span>
    </button>
</div>
<div class="button-badge">
    <button>
        Notifications
        <span class="badge">4</span>
    </button>
</div>
<div class="positioned-badges">
    <button>
        Inbox
        <span>99+</span>
    </button>
</div>
<div class="badge-section">
    <h1 class="badge-heading">Example heading <span class="badge">New</span></h1>
    <h2 class="badge-heading">Example heading <span class="badge">New</span></h2>
    <h3 class="badge-heading">Example heading <span class="badge">New</span></h3>
    <h4 class="badge-heading">Example heading <span class="badge">New</span></h4>
    <h5 class="badge-heading">Example heading <span class="badge">New</span></h5>
    <h6 class="badge-heading">Example heading <span class="badge">New</span></h6>
</div>
<button type="button" class="btn text-light bg-primary">Primary</button>
<button type="button" class="btn text-light bg-secondary">Secondary</button>
<button type="button" class="btn text-light bg-success">Success</button>
<button type="button" class="btn text-light bg-danger">Danger</button>
<button type="button" class="btn text-light bg-warning">Warning</button>
<button type="button" class="btn text-light bg-info">Info</button>
<button type="button" class="btn text-dark bg-light">Light</button>
<button type="button" class="btn text-light bg-dark">Dark</button>
<button>
    Notifications
    <span class="badge">4</span>
</button>
<div class="alerts">
    <div class="alerts alerts-outline-primary">
        This is a Simple alert
    </div>
    <div class="alerts alerts-outline-Danger">
        This is a Danger alert
    </div>
    <div class="alerts alerts-outline-Success">
        This is a Success alert
    </div>
    <div class="alerts alerts-outline-Warning">
        This is a Warning alert
    </div>
</div>
<div class="alerts">
    <div class="alerts alerts-primary">
        This is a Simple alert
    </div>
    <div class="alerts alerts-Danger">
        This is a Danger alert
    </div>
    <div class="alerts alerts-Success">
        This is a Success alert
    </div>
    <div class="alerts alerts-Warning">
        This is a Warning alert
    </div>
</div>
<style>
div {
  font-size: 55px; 
  line-height: 55px; 
  text-decoration-skip-ink: none;
}
.ulsingle {
  text-decoration: underline;
}
.uldouble {
  text-decoration: double underline;
}
.ulwavy {
  text-decoration: wavy underline;
}  
</style>

<div>
  це - <span class="ulsingle">підмет</span>, 
  це - <span class="uldouble">присудок</span>,
  це - <span class="ulwavy">означення</span>
</div>
  <div class="wt-max-100">
       <input type="range" min="0" max="100" class="input-green-800 width-scaled4-8"> 
  </div>   
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m  text-color-grey-9"> (3/5 review)</span>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
<p class="text-lg">1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, mollitia!. </p>
<p class=" text-m">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, quis?</p>
<p class="text-xm ">3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, ipsam.</p>
<p class="text-s">4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!</p>
<p class="text-xs ">5. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, reprehenderit.</p>
     <div class="text-s text-start pd-x-4 ">Text Start</div>
     <div class="text-s text-center pd-x-4 ">Text-Center</div>
     <div class="text-s text-end pd-x-4 ">Text-Left</div>
  <h1 class="text-xl">H1.Heading</h1>
  <h2 class="text-lg">H2.Heading</h2>
  <h3 class="text-m">H3.Heading</h3>
  <h4 class="text-xm">H4.Heading</h4>
  <h5 class="text-s">H5.Heading</h5>
  <h6 class="text-xs">H6.Heading</h6>
<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2"> 
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
</ul>
<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2">
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
</ul>
 <a href="#" class="text-dec text-color-grey-9  cursor border-bottom-solid border-1 border-black-700">Link</a>
     <button class="bg-green-8 rounded-s cursor  text-color-grey-0 pd-x-5 pd-y-4 text-xm">Primary
                    </button>
    
      <button class="bg-black-5 rounded-s  cursor text-color-grey-0 pd-x-5 pd-y-4 text-xm">Secondary</button>
    
       <button class=" bg-black-0 rounded-s cursor border-green-700 border-solid border-1  text-color-green-7 pd-x-5 pd-y-4 text-xm"> Outline</button>
<div class=" m-y-8 flex flex-column">
      <label class="m-y-4 ">Email:</label>
      <input type="email" class="width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9 " placeholder="Email Id">
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-red-5 m-y-3">*Invalid Input </span>
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-green-6 m-y-3">*Valid Input </span>
</div>
<div class="  width-scaled4-6  wt-max-100 m-auto">
      <div class=" flex flex-column justify-center rounded-s pd-y-3 pd-x-3 bg-black-0 box-shadow-2">
            <div class="flex flex-column m-y-6">
                  <span class="text-xm">Dialog header</span>
                  <small>Lorem ipsum dolor sit amet.</small>
            </div>
            <div class="flex justify-end items-center gap-1 m-t-2">
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-red-8 cursor">close</button>
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-green-7">continue</button>
            </div>
     </div>     
</div>
<div class="static-slider9 po-relative">
    <!-- Row  -->
    <div class="container">
        <div class="row">
            <div class="container">
                <!-- Column -->
                <div class="col-lg-5 col-md-7 info-detail align-self-center">
                    <h1 class="title">Don't see neighborhood?</h1>
                    <h6 class="subtitle">To accomplish great things, we must not only act, but also
                        dream;
                        not only plan, but also believe.</h6>
                    <p class="text-dark font-medium">Enter email address to get the app</p>
                    <form class="form-inline">
                        <div class="form-group m-r-10">
                            <label for="inputPassword2" class="sr-only">Email</label>
                            <input type="email" class="form-control mb-3 form-control-lg" id="inputPassword2" placeholder="email address">
                        </div>
                        <button type="submit" class="btn btn-md text-white btn-success-gradiant">GET</button>
                    </form>
                    <!-- Column -->
                </div>
            </div>
            <!-- Column -->
            <div class="col-md-5 bg-img" style="background-image:url(assets/images/sliders/static-slider/slider9/img1.jpg)">
                <img src="assets/images/sliders/static-slider/slider9/img2.png" alt="wrapkit" class="img-fluid d-md-none d-lg-block" data-aos="fade-up" data-aos-duration="2200">
            </div>
            <!-- Column -->
        </div>
    </div>
</div>
<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
</head>
...
<p style="color: red">text</p>
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...
<img src="/utilities-css/image/alex.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto rounded-L">
<img src="/utilities-css/image/hamed-darzi-Psz62UPYx1E-unsplash.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto">
 <div class="grid grid-cols-auto gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 4</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 5</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 6</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 7</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 8</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 9</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 10</div>
 </div>
<div class="grid grid-cols-3 gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
</div>
<div class="grid grid-cols-2 gap-1">
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
</div>
<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
     <div class="position-ab flex justify-center items-center top-0 ht-100 bg-overlay z-index-2 wt-100 text-color-grey-0 text-bold text-m">
          <p>Out of Stock</p>
     </div>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
<div class=" position-rel flex items-center justify-btw width-scaled4-8 box-shadow-1 ">
           <figure class="flex-1">
                   <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
           </figure>
     <div class="pd-x-4 flex-1">
          <div class="flex flex-column m-y-4">
               <h3> Levis black</h3>
               <small class="text-color-grey-2">T-Shirt</small>
          </div>
          <div class="m-y-4">
               <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
          </div>
          <div class="m-y-4">
               <span class="text-bold">₹399.00</span>
          </div>
          <div class="flex flex-column gap-1 m-y-4">
               <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
          </div>
     </div>
     <div class="position-ab top-0 right-0 ">
          <button>
                <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
          </button> 
     </div>
</div>
<div class=" position-rel flex items-center width-scaled4-8 box-shadow-1 ">
  <figure class="flex-1">
     <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
  </figure>
  <div class="pd-x-4 flex-1  wt-60 justify-even  ">
      <div class="flex flex-column m-y-4">
           <h3> Levis black</h3>
           <small class="text-color-grey-4">T-Shirt</small>
      </div>
      <div class="m-y-4">
           <span class="text-bold text-m">₹399.00</span>
      </div>
      <div class="flex flex-column gap-1 m-y-4">
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
      </div>
   </div>
  <div class="position-ab top-0 right-0 ">
       <button>
            <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
       </button> 
  </div>
</div>
<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
</div>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
<div class="box-shadow-1 m-auto pd-5 flex width-scaled-8 flex-column m-y-8 rounded-s position-rel">
 <div class="flex flex-column">
    <h4>Cards Title</h4>
    <small>Text Secondary</small>
 </div>
 <div class="m-y-5"> 
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel, minus recusandae aut est reiciendis voluptates odit veritatis doloribus delectus beatae culpa fugiat eaque eveniet? Cum, voluptas beatae earum quia similique consequuntur minima optio minus animi aliquam impedit placeat dignissimos quod, dolorem facere iusto! Excepturi natus obcaecati doloribus consectetur eveniet ipsum.</p>
 </div>
  <div class="position-ab top-5 right-5">
     <i class="fas fa-heart text-color-red-5 cursor"></i>
  </div>
</div>
.live-demo-containter {
    background: #004188;
    padding-top: 2.5rem;
    position: relative;
    margin: 0 0 30px 0;
}
.live-demo-containter::after {
    content: "";
    background: #004188;
    position: absolute;
    left: 50%;
    top: 0px;
    width: 100vw;
    transform: translate(-50%,0);
    height: 100%;
    z-index: -1;
}
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-brown-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-green-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/norway.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-red-5 width-1 height-1rem rounded-full top-0 right-10"></span>
</div>
<div class="  position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-color-grey-0 pd-4 width-1 height-1rem  position-ab bg-brown-7 rounded-full  text-s top--50 right--50 text-s  ">4</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x"> </i>
        <span class=" flex justify-center items-center text-color-grey-0  position-ab  width-2 height-2rem bg-brown-7 rounded-full top--50 right--50 text-s">24</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-s bg-brown-7 position-ab rounded-full  width-2 height-2rem top--50 right--50 text-color-grey-0" >124</span>
</div>
 <span class="flex justify-center items-center text-lg width-8 height-8rem bg-green-7 object-fit-cover rounded-full" >M</span>
<span class="flex justify-center items-center text-m width-6 height-6rem bg-green-7 object-fit-cover rounded-full" >G</span>
<span class="flex justify-center items-center text-xm width-4 height-4rem bg-green-7 object-fit-cover rounded-full" >D</span>
<img class="width-8 height-8rem object-fit-cover rounded-full" src="/utilities css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-6 height-6rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-4 height-4rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
function explode(url, part) {
  let urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
  return urlParts[part];
}

let url = 'http://scratch99.com/web-development/javascript/',
    domain = explode(url, 0),
    dir = explode(url, 1),
    subdir = explode(url, 2)

console.log(domain);
console.log(dir);
console.log(subdir);
<button class="save">Save 1</button>
<button class="save">Save 2</button>
<button class="save">Save 3</button>

<script>
  let saveBtn = document.getElementsByClassName('save');
  Array.from(save).forEach(function (el) { 
    el.addEventListener('click', handler) 
  });
  function handler() {
    console.log('Clicked');
  }
</script>
<article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<div class="bg-green-2 text-color-green-9 flex justify-btw items-center rounded-s  pd-x-8 pd-y-5 ">
       <span class=""><i class="fa-solid fa-circle-check pd-r-5"></i>A simple success alert—check it out!</span> 
        <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-red-2 flex items-center text-color-red-9 justify-btw   rounded-s  pd-x-8 pd-y-5 ">
         <span ><i class="fa-solid fa-triangle-exclamation pd-r-5"></i> A simple danger alert—check it out!</span>   
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-brown-2 flex items-center text-color-brown-9 justify-btw rounded-s pd-x-8 pd-y-5 ">
         <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation pd-r-5"></i>A simple warning alert—check it out!</span> 
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
@import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');

.dark .dark\:bg-gray-800,
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(0,0,0, var(--tw-bg-opacity));
}

html {
  font-family: 'Oxygen Mono', monospace;
  background: #000;
  color: green;
}

.text-gray-800 {
  color: green;
}

.w-\[30px\].flex.flex-col.relative.items-end,
.lg\:pl-2,
.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100,
.hidden.md\:fixed.md\:inset-y-0.md\:flex.md\:w-52.md\:flex-col.bg-gray-900,
.text-xs.text-black\/50.dark\:text-white\/50.pt-2.pb-3.px-3.md\:pt-3.md\:pb-6.md\:px-4.text-center ,.dark.hidden.bg-gray-900{
  display: none !important;
}

.flex.flex-1.flex-col.md\:pl-52.h-full {
  padding-left: 0;
  padding-top: 20px;
}

.md\:pl-\[260px\]{
padding:0
}

form {
  margin-bottom: 12px;
}

.dark .dark\:text-gray-100,
.bg-vert-light-gradient,
.dark .dark\:bg-vert-dark-gradient,
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  background: transparent;
}

form .dark .dark\:bg-vert-dark-gradient,
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  background: #ffffff0d;
  color: green;
}

.dark .dark\:bg-gray-800, .bg-gray-50{
background:#000
}

form .bg-white {
  background: #ffffff1a;
}

form .text-gray-500 {
  color: green !important;
  display: none;
}

.dark .dark\:border-gray-900\/50 {
  border-color: transparent;
}

.btn-neutral {
  background: transparent !important;
  border: 0;
  color: green !important;
}

.prose,
.dark .dark\:text-gray-100 {
  color: green;
}

.md\:py-6 {
  padding: 5px 0;
}
    <div class="container">
        <div class="inner">test</div>
        <div class="inner">test</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
    </div>
.container{
    display: flex;
    justify-content: center;
    gap: 2px;
    border: 2px solid black;
    width: 100%;
    flex-wrap: wrap;
}

.inner{
    background-color: aqua;
    width: 24%;
    border: 2px solid black;
}
<div class="bg-green-2 text-color-green-9 flex items-center rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-check"></i></span>
    A simple success alert—check it out!
</div>

<div class="bg-red-2 flex items-center text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-triangle-exclamation"></i></span>
    A simple danger alert—check it out!
</div>

<div class="bg-brown-2 flex items-center text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation"></i></span>
    A simple warning alert—check it out!
</div>
     <div class="bg-green-2 text-color-green-9 rounded-s  pd-x-8 pd-y-5 ">
                    A simple success alert—check it out!
     </div>
      <div class="bg-red-2 text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
                    A simple danger alert—check it out!
      </div>
      <div class="bg-brown-2 text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
                    A simple warning alert—check it out!
      </div>
<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);
    const hasTitle = searchParams.has("title");
    const title = hasTitle
      ? searchParams.get("title")?.slice(0, 100)
      : "Hello World!";

    return new ImageResponse(
      (
        <div
          style={{
            fontSize: 40,
            color: "#373737",
            background: "#ffffff",
            width: "100%",
            height: "100%",
            padding: "50px 200px",
            display: "flex",

            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div
            tw="border-2 border-solid border-[#373737] p-2"
            style={{
              boxShadow: "11px 4px 3px 4px rgba(55,55,55,0.8)",
              display: "flex",
              gap: "10px",
            }}
          >
            <span tw="text-[100px]">{title}</span>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}
import { groq } from "next-sanity";
import Link from "next/link";
import Card from "../../components/Card";
import DailyDevArticlesCard from "../../components/DailyDevArticlesCard";
import { sanityClient } from "../../config/Sanity";
import medium from "medium-sdk";

async function getDailyDevArticles() {
  const res = await fetch(`https://dev.to/api/articles?username=ashishpandey`);
  return res.json();
}

async function getData({ search, page = 1 }) {
  let searchQuery = search || "ashish";
  let postsPerPage = parseInt(page * 4);
  const query = groq`
   *[_type == "post" &&  (searchQueries match "${searchQuery}" || title match "${searchQuery}"  || excerpt match "${searchQuery}" )  ][0..${postsPerPage}] | order(_createdAt desc) {
    categories,excerpt,mainImage,slug,title,_createdAt,_id,imageSubtitle,imageTitle,
    author->{
      name,image
    }
   
  }
  `;
  const posts = await sanityClient.fetch(query);

  let postslength = posts.length;
  let disabled =
    Number.isInteger(Number(postslength / 5)) && postslength != 0
      ? false
      : true;
  return {
    posts,
    disabled,
  };
}

export default async function BlogPage({ searchParams }) {
  const { posts, disabled } = await getData(searchParams);
  const dailyDevArticlesRes = await getDailyDevArticles();

  const dailyArticles = await Promise.all(dailyDevArticlesRes);
  const page = parseInt(searchParams.page) || 1;
  const query = searchParams.search;
  return (
    <main className="overflow-hidden">
      <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
        {posts?.map((item, i) => {
          return <Card data={item} />;
        })}
      </div>
      <div className="flex justify-center items-center">
        <Link
          href={`/blogs?page=${page + 1}&search=${query ? query : ""}`}
          disabled={disabled}
          className="relative inline-flex items-center justify-center px-10 py-4 overflow-hidden font-mono font-medium tracking-tighter text-white bg-gray-800 rounded-lg group"
        >
          <span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-green-500 rounded-full group-hover:w-56 group-hover:h-56"></span>
          <span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-700"></span>
          <span className="relative">
            {disabled ? "No more Posts" : "Load more"}
          </span>
        </Link>
      </div>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
        {dailyArticles?.map((item, i) => {
          return <DailyDevArticlesCard data={item} />;
        })}
      </div>
    </main>
  );
}
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<select>
    <option value="">Please select</option>
    <option value="China">China</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option value="Argentina">Argentina</option>
    <option value="Armenia">Armenia</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Azerbaijan">Azerbaijan</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Barbados">Barbados</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Belize">Belize</option>
    <option value="Benin">Benin</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
    <option value="Botswana">Botswana</option>
    <option value="Brazil">Brazil</option>
    <option value="Brunei">Brunei</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Burkina Faso">Burkina Faso</option>
    <option value="Burundi">Burundi</option>
    <option value="Cambodia">Cambodia</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Canada">Canada</option>
    <option value="Cape Verde">Cape Verde</option>
    <option value="Central African Republic">Central African Republic</option>
    <option value="Chad">Chad</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Comoros">Comoros</option>
    <option value="Congo">Congo</option>
    <option value="Congo (Kinshasa)">Congo (Kinshasa)</option>
    <option value="Cook Islands">Cook Islands</option>
    <option value="Costa Rica">Costa Rica</option>
    <option value="Cote d'Ivoire">Cote d'Ivoire</option>
    <option value="Croatia">Croatia</option>
    <option value="Cuba">Cuba</option>
    <option value="Cyprus">Cyprus</option>
    <option value="Czech">Czech</option>
    <option value="Denmark">Denmark</option>
    <option value="Djibouti">Djibouti</option>
    <option value="Dominica, Commonwealth of">Dominica, Commonwealth of</option>
    <option value="Dominican Republic">Dominican Republic</option>
    <option value="DPRK (Democratic People's Republic of Korea)">DPRK (Democratic People's Republic of Korea)</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Egypt">Egypt</option>
    <option value="El Salvador">El Salvador</option>
    <option value="Equatorial Guinea">Equatorial Guinea</option>
    <option value="Eritrea">Eritrea</option>
    <option value="Estonia">Estonia</option>
    <option value="Eswatini">Eswatini</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Fiji">Fiji</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Gabon">Gabon</option>
    <option value="Gambia">Gambia</option>
    <option value="Georgia">Georgia</option>
    <option value="Germany">Germany</option>
    <option value="Ghana">Ghana</option>
    <option value="Greece">Greece</option>
    <option value="Grenada">Grenada</option>
    <option value="Guatemala">Guatemala</option>
    <option value="Guinea">Guinea</option>
    <option value="Guinea Bissau">Guinea Bissau</option>
    <option value="Guyana">Guyana</option>
    <option value="Haiti">Haiti</option>
    <option value="Honduras">Honduras</option>
    <option value="Hungary">Hungary</option>
    <option value="Iceland">Iceland</option>
    <option value="India">India</option>
    <option value="Indonesia">Indonesia</option>
    <option value="Iran">Iran</option>
    <option value="Iraq">Iraq</option>
    <option value="Ireland">Ireland</option>
    <option value="Israel">Israel</option>
    <option value="Italy">Italy</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Japan">Japan</option>
    <option value="Jordan">Jordan</option>
    <option value="Kazakstan">Kazakstan</option>
    <option value="Kenya">Kenya</option>
    <option value="Kiribati">Kiribati</option>
    <option value="Korea (Republic of Korea)">Korea (Republic of Korea)</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Kyrgyzstan">Kyrgyzstan</option>
    <option value="Laos">Laos</option>
    <option value="Latvia">Latvia</option>
    <option value="Lebanon">Lebanon</option>
    <option value="Lesotho">Lesotho</option>
    <option value="Liberia">Liberia</option>
    <option value="Libya">Libya</option>
    <option value="Liechtenstein">Liechtenstein</option>
    <option value="Lithuania">Lithuania</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Madagascar">Madagascar</option>
    <option value="Malawi">Malawi</option>
    <option value="Malaysia">Malaysia</option>
    <option value="Maldives">Maldives</option>
    <option value="Mali">Mali</option>
    <option value="Malta">Malta</option>
    <option value="Marshall Islands">Marshall Islands</option>
    <option value="Mauritania">Mauritania</option>
    <option value="Mauritius">Mauritius</option>
    <option value="Mexico">Mexico</option>
    <option value="Micronesia">Micronesia</option>
    <option value="Moldova">Moldova</option>
    <option value="Monaco">Monaco</option>
    <option value="Mongolia">Mongolia</option>
    <option value="Montenegro">Montenegro</option>
    <option value="Morocco">Morocco</option>
    <option value="Mozambique">Mozambique</option>
    <option value="Myanmar">Myanmar</option>
    <option value="Namibia">Namibia</option>
    <option value="Nauru">Nauru</option>
    <option value="Nepal">Nepal</option>
    <option value="Netherlands">Netherlands</option>
    <option value="New Zealand">New Zealand</option>
    <option value="Nicaragua">Nicaragua</option>
    <option value="Niger">Niger</option>
    <option value="Nigeria">Nigeria</option>
    <option value="Niue">Niue</option>
    <option value="North Macedonia">North Macedonia</option>
    <option value="Norway">Norway</option>
    <option value="Oman">Oman</option>
    <option value="Pakistan">Pakistan</option>
    <option value="Palau">Palau</option>
    <option value="Palestine">Palestine</option>
    <option value="Panama">Panama</option>
    <option value="Papua New Guinea">Papua New Guinea</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Philippines">Philippines</option>
    <option value="Poland">Poland</option>
    <option value="Portugal">Portugal</option>
    <option value="Qatar">Qatar</option>
    <option value="Romania">Romania</option>
    <option value="Russia">Russia</option>
    <option value="Rwanda">Rwanda</option>
    <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
    <option value="Saint Lucia">Saint Lucia</option>
    <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
    <option value="Samoa">Samoa</option>
    <option value="San Marino">San Marino</option>
    <option value="Sao Tome and Principe">Sao Tome and Principe</option>
    <option value="Saudi Arabia">Saudi Arabia</option>
    <option value="Senegal">Senegal</option>
    <option value="Serbia">Serbia</option>
    <option value="Seychelles">Seychelles</option>
    <option value="Sierra Leone">Sierra Leone</option>
    <option value="Singapore">Singapore</option>
    <option value="Slovakia">Slovakia</option>
    <option value="Slovenia">Slovenia</option>
    <option value="Solomon Islands">Solomon Islands</option>
    <option value="Somalia">Somalia</option>
    <option value="South Africa">South Africa</option>
    <option value="South Sudan">South Sudan</option>
    <option value="Sri Lanka">Sri Lanka</option>
    <option value="Spain">Spain</option>
    <option value="Sudan">Sudan</option>
    <option value="Suriname">Suriname</option>
    <option value="Sweden">Sweden</option>
    <option value="Switzerland">Switzerland</option>
    <option value="Syria">Syria</option>
    <option value="Tajikistan">Tajikistan</option>
    <option value="Tanzania">Tanzania</option>
    <option value="Thailand">Thailand</option>
    <option value="Timor-Leste">Timor-Leste</option>
    <option value="Togo">Togo</option>
    <option value="Tonga">Tonga</option>
    <option value="Trinidad and Tobago">Trinidad and Tobago</option>
    <option value="Tunisia">Tunisia</option>
    <option value="Türkiye">Türkiye</option>
    <option value="Turkmenistan">Turkmenistan</option>
    <option value="Tuvalu">Tuvalu</option>
    <option value="UAE (United Arab Emirates)">UAE (United Arab Emirates)</option>
    <option value="Uganda">Uganda</option>
    <option value="Ukraine">Ukraine</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States of America">United States of America</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Uzebekistan">Uzebekistan</option>
    <option value="Vanuatu">Vanuatu</option>
    <option value="Vatican City">Vatican City</option>
    <option value="Venezuela">Venezuela</option>
    <option value="Vietnam">Vietnam</option>
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
</select>
/* "The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers." */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* For a, button, and input elements use the following to select on focus */

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

/* If you need to toggle something with display:none, you can do so with the help of aria-hidden=true */

.my-component[aria-hidden="true"] {
  display: none;
}
Es posible crear un sistema experto utilizando solo JavaScript, aunque esto depende de la complejidad del sistema y de las tareas que desee realizar. A continuación, le presento un ejemplo de cómo podría crearse un sistema experto simple utilizando JavaScript:

se ha creado una clase llamada ExpertSystem que representa un sistema experto. Esta clase tiene un constructor que recibe un conjunto de reglas y las almacena en una propiedad de la instancia. Además, la clase tiene un método llamado evaluate que recibe un conjunto de hechos y evalúa cada una de las reglas del sistema experto para determinar si alguna de ellas se aplica.

Cuando se crea una instancia de la clase ExpertSystem, se le proporciona un conjunto de reglas predefinidas que se utilizarán para evaluar los hechos que se le pasen al método evaluate. Cada regla tiene una serie de condiciones que deben cumplirse y una conclusión que se aplica si se cumplen todas las condiciones.

Luego, se crea un objeto hechos que representa un conjunto de hechos que se quieren evaluar. Finalmente, se llama al método evaluate pasándole el objeto hechos como argumento y se imprime en pantalla la conclusión obtenida. En este caso, al cumplirse la regla que tiene como condición tienePerro: true y tieneGato: false, la conclusión que se imprime en pantalla es "esAmanteDeLosPerros".

Espero que esto te haya ayudado a entender el funcionamiento del código que has proporcionado. Si tienes alguna pregunta adicional, no dudes en preguntar.







// Crear una clase para representar el sistema experto
class ExpertSystem {
  // Constructor para inicializar el sistema experto con un conjunto de reglas
  constructor(rules) {
    this.rules = rules;
  }

  // Método para evaluar una serie de hechos y determinar si una regla se aplica
  evaluate(facts) {
    for (let i = 0; i < this.rules.length; i++) {
      let rule = this.rules[i];
      let conditionMet = true;

      for (let j = 0; j < rule.conditions.length; j++) {
        let condition = rule.conditions[j];
        if (!facts[condition.fact]) {
          conditionMet = false;
          break;
        }
      }

      if (conditionMet) {
        return rule.conclusion;
      }
    }

    return null;
  }
}

// Crear una instancia del sistema experto con algunas reglas predefinidas
let expertSystem = new ExpertSystem([
  {
    conditions: [
      { fact: "tienePerro", value: true },
      { fact: "tieneGato", value: false }
    ],
    conclusion: "esAmanteDeLosPerros"
  },
  {
    conditions: [
      { fact: "tienePerro", value: false },
      { fact: "tieneGato", value: true }
    ],
    conclusion: "esAmanteDeLosGatos"
  },
  {
    conditions: [
      { fact: "tienePerro", value: true },
      { fact: "tieneGato", value: true }
    ],
    conclusion: "esAmanteDeLosAnimales"
  }
]);

// Evaluar algunos hechos y ver cuál regla se aplica
let hechos = {
  tienePerro: true,
  tieneGato: false
};

let conclusión = expertSystem.evaluate(hechos);
console.log(conclusión); // imprime "esAmanteDeLosPerros"



Si desea incluir múltiples variables en la condición de una regla del sistema experto, puede hacerlo de varias maneras. Una forma de hacerlo es utilizar un objeto con múltiples propiedades para representar la condición, en lugar de una sola propiedad. Por ejemplo:

{
  conditions: [
    { fact: "tieneMascota", value: { tipo: "perro", edad: 2 } },
    { fact: "tieneGato", value: false }
  ],
  conclusion: "esAmanteDeLosPerros"
}


Otra forma de incluir múltiples variables en una condición es utilizar una cadena de texto para representar la condición y luego parsearla para obtener las variables individuales. Por ejemplo:

{
  conditions: [
    { fact: "tieneMascota", value: "perro,2" },
    { fact: "tieneGato", value: false }
  ],
  conclusion: "esAmanteDeLosPerros"
}


En el código que has proporcionado, esta parte del código representa una regla del sistema experto. La regla tiene dos condiciones:

fact: "tienePerro", value: true: esta condición se cumple si el hecho tienePerroestrue`.
fact: "tieneGato", value: false: esta condición se cumple si el hecho tieneGatoesfalse`.
Si ambas condiciones se cumplen, entonces se aplica la conclusión de la regla, que en este caso es "esAmanteDeLosPerros".



Para crear un sistema experto sobre asma grave utilizando JavaScript, podrías utilizar un enfoque basado en reglas. Esto implicaría definir un conjunto de reglas que el sistema experto pueda utilizar para tomar decisiones en base a los inputs que recibe.

Por ejemplo, podrías tener reglas como:

Si el paciente tiene dificultad para respirar y una puntuación de síntomas de asma mayor o igual a 3 en la escala de 0 a 6, entonces se recomienda una visita urgente al médico.
Si el paciente tiene dificultad para respirar y una puntuación de síntomas de asma menor a 3 en la escala de 0 a 6, entonces se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas.
Para implementar estas reglas en JavaScript, podrías utilizar una estructura de datos como un array de objetos, donde cada objeto representa una regla con una serie de condiciones y una acción a realizar. Luego, podrías recorrer este array de reglas y evaluar cada una de ellas en función de los inputs que recibe el sistema experto. Si una regla se cumple, entonces se puede ejecutar la acción correspondiente.

A continuación te muestro un ejemplo de cómo podrías implementar este enfoque en JavaScript:

Copy code
// Definimos un array de objetos que representan las reglas del sistema experto
const reglas = [
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: ">=" }
    ],
    accion: () => {
      console.log("Se recomienda una visita urgente al médico");
    }
  },
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas");
    }
  }
];

// Definimos una función que recibe los inputs y evalúa las reglas del sistema experto
function tomarDecision(inputs) {
  // Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;



gabrieli@neumomed.com
termina el código anterior por favor
Aquí termina el código que te había proporcionado anteriormente:

Copy code
// Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;

    // Recorremos las condiciones de la regla
    for (const condicion of regla.condiciones) {
      // Obtenemos el valor del input que se está evaluando
      const valorInput



      // Definimos un array de objetos que representan las reglas del sistema experto
const reglas = [
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: ">=" }
    ],
    accion: () => {
      console.log("Se recomienda una visita urgente al médico");
    }
  },
  {
    condiciones: [
      { nombre: "dificultadParaRespirar", valor: true },
      { nombre: "puntuacionSintomasAsma", valor: 3, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas");
    }
  }
];

// Definimos una función que recibe los inputs y evalúa las reglas del sistema experto
function tomarDecision(inputs) {
  // Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;

    
    // Recorremos el array de reglas
  for (const regla of reglas) {
    // Asumimos que la regla se cumple
    let seCumple = true;

    // Recorremos las condiciones de la regla
    for (const condicion of regla.condiciones) {
      // Obtenemos el valor del input que se está evaluando
      const valorInput = inputs[condicion.nombre];

      // Si no se ha especificado un comparador, asumimos que se está haciendo una comparación de igualdad
      if (!condicion.comparador) {
        condicion.comparador = "===";
      }

      // Evaluamos la condición
      if (!eval(`${valorInput} ${condicion.comparador} ${condicion.valor}`)) {
        // Si la condición no se cumple, marcamos la regla como no cumplida y salimos del bucle
        seCumple = false;
        break;
      }
    }

    // Si la regla se cumple, ejecutamos la acción correspondiente
    if (seCumple) {
      regla.accion();
      break;
    }
  }
}

// Podemos utilizar la función de la siguiente manera:
tomarDecision({ dificultadParaRespirar: true, puntuacionSintomasAsma: 3 });
// Se recomienda una visita urgente al médico

tomarDecision({ dificultadParaRespirar: true, puntuacionSintomasAsma: 2 });
// Se recomienda tomar el medicamento de rescate y esperar una hora antes de volver a evaluar los síntomas
  
  
  
  Para incluir varios factores en un sistema experto y concluir si un paciente tiene asma grave no controlada, podrías utilizar un enfoque basado en reglas. Para ello, podrías definir un conjunto de reglas que el sistema experto pueda utilizar para tomar decisiones en base a los inputs que recibe.

Por ejemplo, podrías tener reglas como:

Si el paciente tiene asma y el VEF1 es menor al 50%, entonces se recomienda un tratamiento intensivo.
Si el paciente tiene asma y el ACT es menor a 19, entonces se recomienda un tratamiento de control de síntomas.
Si el paciente tiene asma y los eosinófilos son mayores a 500 x mm, entonces se recomienda un tratamiento con corticoides inhalados.
Si el paciente tiene asma y el prick test es positivo, entonces se recomienda un tratamiento de desensibilización.


Para implementar estas reglas en JavaScript, podrías utilizar una estructura de datos como un array de objetos, donde cada objeto representa una regla con una serie de condiciones y una acción a realizar. Luego, podrías recorrer este array de reglas y evaluar cada una de ellas en función de los inputs que recibe el sistema experto. Si una regla se cumple, entonces se puede ejecutar la acción correspondiente.




// Definimos un array de objetos que representan las reglas del sistema experto
const reglas = [
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "VEF1", valor: 50, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento intensivo");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "ACT", valor: 19, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento de control de síntomas");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "eosinofilos", valor: 500, comparador: "

       
       
       
   CONJUNTO DE REGLAS
       
       
       const reglas = [
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "VEF1", valor: 50, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento intensivo");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "ACT", valor: 19, comparador: "<" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento de control de síntomas");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "eosinofilos", valor: 500, comparador: ">" }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento con corticoides inhalados");
    }
  },
  {
    condiciones: [
      { nombre: "asma", valor: true },
      { nombre: "prickTest", valor: true }
    ],
    accion: () => {
      console.log("Se recomienda un tratamiento de desensibilización");
    }
  }
];



Para crear un sistema que tenga conocimientos sobre el asma grave y pueda apoyar a los médicos en las decisiones clínicas, le recomendaría seguir los siguientes pasos:

Reunir la información necesaria: Para poder proporcionar información útil y precisa sobre el asma grave, es necesario tener acceso a la literatura científica y a otras fuentes de información relevantes. Esto puede incluir artículos científicos, guías clínicas, registros de casos y otros recursos.

Procesar y analizar la información: Una vez que se tiene acceso a la información necesaria, es importante procesarla y analizarla para poder extraer conclusiones y recomendaciones útiles. Esto puede incluir la utilización de técnicas de aprendizaje automático y de procesamiento de lenguaje para analizar grandes cantidades de datos y extraer patrones y tendencias.

Diseñar una interfaz de usuario adecuada: Para que los médicos puedan utilizar el sistema de manera efectiva, es importante diseñar una interfaz de usuario clara y fácil de usar. Debe considerar cómo los médicos van a acceder al sistema y cómo se van a proporcionar las recomendaciones y la información necesarias.

Validar y probar el sistema: Antes de poner el sistema en uso


 hay varios software y herramientas disponibles para crear sistemas expertos como una aplicación web. Algunas opciones populares incluyen:

CLIPS: CLIPS es un software de sistema experto gratuito y de código abierto desarrollado por el gobierno de los Estados Unidos. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

JESS: JESS es un software de sistema experto basado en reglas desarrollado por Sandia National Laboratories. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

PROLOG: PROLOG es un lenguaje de programación de sistemas expertos desarrollado por la Universidad de Aix-Marseille. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

Microsoft Azure Expert System: Microsoft Azure Expert System es una plataforma en la nube que ofrece herramientas y recursos para crear y desplegar sistemas expertos como aplicaciones web. Se puede utilizar para crear aplicaciones de sistemas expertos en una variedad de ámbitos, incluyendo la atención médica.

Para crear una cuenta de Microsoft Azure y suscribirse a los servicios de Microsoft Azure Expert System, puede seguir los siguientes pasos:

Vaya al sitio web de Microsoft Azure: https://azure.microsoft.com/
Haga clic en el botón "Iniciar sesión" en la esquina superior derecha de la página.
Ingrese sus credenciales de Microsoft o cree una cuenta gratuita siguiendo las instrucciones en pantalla.
Una vez que haya iniciado sesión, haga clic en el botón "Crear un recurso" en la esquina superior izquierda de la pantalla.
Busque "Microsoft Azure Expert System" en el buscador y selecciónelo.
Siga las instrucciones en pantalla para suscribirse a los servicios de Microsoft Azure Expert System y comenzar a utilizar la plataforma.



como funciona el archivo .htaccess para proteger carpetas ?
  
El archivo .htaccess es un archivo de configuración utilizado por el servidor web Apache para controlar el acceso a archivos y carpetas en un sitio web. Se puede utilizar para especificar quién tiene acceso a las carpetas y quién no.

Para proteger una carpeta utilizando un archivo .htaccess, primero debe crear un archivo .htaccess en la carpeta que desee proteger. Luego, debe agregar las siguientes líneas de código al archivo .htaccess:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile /ruta/al/archivo/de/usuarios/.htpasswd
Require valid-user


Estas líneas de código indican al servidor web que la carpeta está protegida por autenticación básica y que solo los usuarios que se encuentren en el archivo .htpasswd tendrán acceso a la carpeta. El archivo .htpasswd es un archivo que contiene los nombres de usuario y contraseñas de los usuarios autorizados para acceder a la carpeta.

Para crear un archivo .htpasswd, puede utilizar la herramienta htpasswd incluida con el servidor web Apache. Para utilizar esta herramienta, debe proporcionar un nombre de usuario y contraseña para cada usuario autorizado y luego ejecutar el siguiente comando:

htpasswd -c .htpasswd nombre_de_usuario

Esto creará un archivo .htpasswd con el nombre de usuario y contraseña que especificó. Puede agregar más usuarios al archivo .htpasswd utilizando el mismo comando, pero sin la opción "-c".

Es importante tener en cuenta que el archivo .htaccess y el archivo .htpasswd deben tener permisos de lectura y escritura adecuados para que funcionen correctamente. También es posible que deba modificar la ruta del archivo .htpasswd en las líneas de código del archivo .htaccess para que apunte a la ubicación correcta del archivo .htpasswd en su servidor.

dónde debe colocarse el archivos.htaccess ? dentro de la carpeta que se va a proteger o en el root del sitio web ?
  
  
  El archivo .htaccess se debe colocar dentro de la carpeta que desee proteger. El archivo .htaccess actúa a nivel de carpeta y tiene efecto en todos los archivos y subcarpetas contenidos en la carpeta en la que se encuentra. Si coloca el archivo .htaccess en la raíz del sitio web o en una carpeta superior, no tendrá efecto en las carpetas y archivos contenidos en esas carpetas.

Por ejemplo, si desea proteger la carpeta "mi_carpeta" en su sitio web, debe colocar el archivo .htaccess dentro de la carpeta "mi_carpeta". Luego, cuando un usuario intente acceder a cualquier archivo o subcarpeta dentro de "mi_carpeta", se le pedirá que proporcione un nombre de usuario y una contraseña para poder acceder a ellos. Si el usuario no proporciona un nombre de usuario y contraseña válidos, se le denegará el acceso a la carpeta y a sus contenidos.

Es importante tener en cuenta que el archivo .htaccess y el archivo .htpasswd deben tener permisos de lectura y escritura adecuados para que funcionen correctamente. También es posible que deba modificar la ruta del archivo .htpasswd en las líneas de código del archivo .htaccess para que apunte a la ubicación correcta del archivo .htpasswd en su servidor. En caso de duda, es recomendable consultar la documentación de Apache o consultar con un experto en sistemas para obtener ayuda adicional.

como se crean permisos de lectura y escritura en un archivo .htaccess ?
  
  Para crear permisos de lectura y escritura en un archivo .htaccess, debe utilizar una herramienta de línea de comandos o una aplicación de gestión de archivos en su servidor. La forma más común de hacerlo es utilizar el comando "chmod" en una consola de línea de comandos.

Por ejemplo, para otorgar permisos de lectura y escritura al archivo .htaccess para el propietario del archivo y la grupo del propietario, puede ejecutar el siguiente comando:

chmod 664 .htaccess


Este comando otorgará permisos de lectura y escritura al propietario del archivo y permisos de lectura al grupo del propietario. Si desea otorgar permisos de lectura y escritura a todos los usuarios, puede ejecutar el siguiente comando:

chmod 666 .htaccess

Es importante tener en cuenta que los permisos de archivo en Linux se establecen mediante un sistema de octal. Los permisos de lectura, escritura y ejecución se representan mediante los dígitos "4", "2" y "1", respectivamente. Los permisos se combinan sumando los dígitos correspondientes. Por ejemplo, el permiso de lectura y escritura se representa mediante el dígito "6" (4 + 2) y el permiso de lectura, escritura y ejecución se representa mediante el dígito "7" (4 + 2 + 1).


No existe un software específico para crear archivos .htaccess, ya que este archivo se puede crear con cualquier editor de texto. Puede utilizar un editor de texto como el Bloc de notas en Windows o el TextEdit en Mac para crear y editar archivos .htaccess. También puede utilizar un editor de texto más avanzado, como Sublime Text o Atom, que ofrecen características adicionales como la resaltado de sintaxis y la autocompleción.

Para crear un archivo .htaccess, simplemente abra el editor de texto de su elección y escriba las líneas de código necesarias para proteger la carpeta. Una vez que haya terminado, guarde el archivo con el nombre ".htaccess" (incluyendo el punto). Asegúrese de guardar el archivo como archivo de texto sin formato para evitar problemas de codificación.

una vez que haya creado el archivo .htaccess, debe colocarlo dentro de la carpeta que desee proteger. Asegúrese de que el archivo .htaccess y el archivo .htpasswd (si está utilizando uno) tengan los permisos de lectura y escritura adecuados para que funcionen correctamente. También es posible que deba modificar la ruta del archivo .htpasswd en las líneas de código del archivo .htaccess para que apunte a la ubicación correcta del archivo .htpasswd en su servidor.

Si tiene dificultades para crear o utilizar un archivo .htaccess, es recomendable consultar la documentación de Apache o consultar con un experto en sistemas para obtener ayuda adicional.

Aquí hay un ejemplo de código completo que puede utilizar para crear un archivo .htaccess con permisos de lectura y escritura:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile /ruta/al/archivo/de/usuarios/.htpasswd
Require valid-user


Para utilizar este código, primero debe crear un archivo .htpasswd con los nombres de usuario y contraseñas de los usuarios autorizados para acceder a la carpeta protegida. Luego, debe reemplazar la ruta del archivo .htpasswd con la ruta correcta del archivo .htpasswd en su servidor.

Una vez que haya creado el archivo .htaccess y lo haya configurado con la información de autenticación y la ruta del archivo .htpasswd, debe guardar el archivo con el nombre ".htaccess" (incluyendo el punto). Asegúrese de guardar el archivo como archivo de texto sin formato para evitar problemas de codificación.

Luego, debe colocar el archivo .htaccess dentro de la carpeta que desee proteger. Asegúrese de que el archivo .htaccess y el archivo .htpasswd tengan los permisos de lectura y escritura adecuados para que funcionen correctamente. Puede utilizar el comando "chmod" en una consola de línea de comandos para establecer los permisos adecuados. Por ejemplo, para otorgar permisos de lectura y escritura al archivo .htaccess para el propietario del archivo y la grupo del propietario, puede ejecutar el siguiente comando:

chmod 664 .htaccess

import "./styles.css";

const date = new Date();
const root = document.getElementById("app");
root.setAttribute("data-posts", "[]");

const items = [
  {
    title: "book 1",
    author: "David",
  },
  {
    title: "book 2",
    author: "Kevin",
  }
];

const posts = () => {
  setTimeout(() => {
    let outPut = `<ul>`;
    for (let item of items) {
      outPut += `<li>${item.title}</li>`;
    }
    outPut += `</ul>`;
    root.innerHTML = outPut;
  }, 500);
};



const createPost = (post, callback) => {
  const item = {
    title: post.title,
    author: post.author,
  };

  items.push(item); // push the item to the items array
  callback(); //evoke the callback function

// set the posts data attribute to take in all the items
  root.dataset.posts = JSON.stringify(items);
};

console.log(
  createPost({ title: "book 3", author: "Derek"}, posts)
);
Las funciones flecha (también conocidas como "arrow functions") son una forma de escribir funciones en JavaScript. Se caracterizan por tener una sintaxis más corta y concisa que las funciones tradicionales, y tienen algunas características únicas que las diferencian de otras formas de escribir funciones.

Aquí hay un ejemplo de cómo se vería una función flecha:

const sum = (a, b) => a + b;


Esta función toma dos argumentos (a y b) y devuelve la suma de ambos. Como puede ver, la sintaxis es mucho más corta y concisa que la sintaxis de una función tradicional:

function sum(a, b) {
  return a + b;
}


Además de la sintaxis más corta, las funciones flecha tienen algunas otras características únicas:

No tienen una palabra clave "function". En su lugar, se definen utilizando la flecha "=>".

No tienen su propio this. En su lugar, heredan el this del contexto en el que se crean. Esto puede ser útil cuando se trabaja con objetos y métodos, ya que evita la necesidad de utilizar la palabra clave "bind" para vincular el this correcto.

No tienen una palabra clave "arguments". En su lugar, deben especificar explícitamente qué argumentos debe tomar la función.

En general, las funciones flecha son una forma concisa y útil de escribir funciones en JavaScript, y se pueden utilizar en lugar de funciones tradicionales en la mayoría de los casos.


MODULOS


Los módulos son una forma de organizar y dividir el código en JavaScript. Permiten dividir el código en diferentes archivos y compartir variables, funciones y otros tipos de datos entre ellos. Los módulos también proporcionan un mecanismo para proteger las variables y funciones privadas y evitar que sean accedidas o modificadas por código externo.

Hay varias formas de trabajar con módulos en JavaScript, dependiendo del entorno en el que se esté ejecutando el código. Algunas de las formas más comunes son:

Módulos CommonJS: Esta es una forma de trabajar con módulos que se utiliza a menudo en entornos de servidor, como Node.js. Los módulos CommonJS se importan y exportan utilizando las palabras clave "require" y "module.exports", respectivamente.

Módulos ECMAScript (ES): Esta es una forma de trabajar con módulos que se ha añadido recientemente a JavaScript y que es compatible con la mayoría de los navegadores modernos. Los módulos ES se importan y exportan utilizando las palabras clave "import" y "export", respectivamente.

Módulos AMD: Esta es otra forma de trabajar con módulos que se utiliza a menudo en entornos de navegador y se basa en la librería Asynchronous Module Definition (AMD). Los módulos AMD se importan y exportan utilizando la función "define" y el objeto "exports", respectivamente.

En general, los módulos son una forma útil de organizar y dividir el código en JavaScript y permiten compartir variables y funciones entre diferentes archivos de código de manera segura y controlada.


Regenerate response

Aquí hay un ejemplo de código que utiliza módulos CommonJS para exportar y importar variables y funciones entre archivos:

// archivo "math.js"

const PI = 3.14;

function add(a, b) {
return a + b;
}

function subtract(a, b) {
return a - b;
}

module.exports = {
PI,
add,
subtract,
};

// archivo "app.js"

const math = require('./math');

console.log(math.PI); // 3.14
console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Aquí hay un ejemplo de código que utiliza módulos ECMAScript para exportar y importar variables y funciones entre archivos:

// archivo "math.js"

export const PI = 3.14;

export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}

// archivo "app.js"

import * as math from './math';

console.log(math.PI); // 3.14
console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Espero que estos ejemplos te ayuden a entender cómo funcionan los módulos en JavaScript. 



FUNCION ISPROTOTYPEOF
La función "isPrototypeOf" es un método de la clase Object en JavaScript que se utiliza para determinar si un objeto es prototipo de otro objeto. Se utiliza de la siguiente manera:

obj1.isPrototypeOf(obj2);


Esto devolverá "true" si obj1 es prototipo de obj2, y "false" en caso contrario.

Un objeto es prototipo de otro objeto si es utilizado como la "plantilla" para crear el segundo objeto. En JavaScript, todos los objetos tienen una propiedad "prototype" que apunta a otro objeto, conocido como su prototipo. Cuando se crea un objeto a partir de otro objeto, el objeto creado hereda todas las propiedades y métodos del objeto prototipo.

Por ejemplo, supongamos que tenemos un objeto "person" con las propiedades "name" y "age":

const person = {
  name: 'John',
  age: 30,
};


Podemos utilizar este objeto como prototipo para crear un objeto "employee" que herede sus propiedades:

console.log(person.isPrototypeOf(employee)); // true



MAPS

Las Maps son una estructura de datos en JavaScript que se utilizan para almacenar pares clave-valor. Son similares a los objetos, pero tienen algunas diferencias clave:

Las Maps permiten utilizar cualquier objeto como clave, mientras que los objetos solo permiten utilizar strings o símbolos como claves.

Las Maps mantienen el orden en el que se insertan los elementos, mientras que los objetos no lo hacen.

Las Maps tienen métodos especializados para iterar sobre sus elementos, mientras que los objetos no los tienen.

Aquí hay un ejemplo de cómo se crea y se utiliza una Map en JavaScript:

const map = new Map();

map.set('name', 'John');
map.set('age', 30);

console.log(map.get('name')); // 'John'
console.log(map.get('age')); // 30

console.log(map.size); // 2

map.delete('age');
console.log(map.size); // 1

console.log(map.has('age')); // false
console.log(map.has('name')); // true

map.clear();
console.log(map.size); // 0

En este ejemplo, creamos una Map y luego utilizamos los métodos "set" y "get" para añadir y recuperar elementos de la Map. También utilizamos los métodos "size", "delete", "has" y "clear" para obtener información sobre la Map y modificarla.

Espero que este ejemplo te ayude a entender cómo funcionan las Maps en JavaScript. Si tienes alguna pregunta adicional, no dudes en preguntar.



OPERADOR ASYNC AWAIT

El operador "async/await" es una forma de simplificar el trabajo con promesas en JavaScript. Permite escribir código asíncrono de manera más sencilla y legible, sin tener que utilizar la sintaxis de encadenar promesas con "then".

Aquí hay un ejemplo de cómo se utiliza "async/await" para llamar a una función asíncrona que devuelve una promesa:


async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

getData().then(data => {
  console.log(data);
});


En este ejemplo, la función "getData" es marcada como "async" y utiliza la palabra clave "await" para esperar a que la promesa devuelta por "fetch" se complete. Luego, utiliza "await" nuevamente para esperar a que la promesa devuelta por "response.json" se complete.

FUNCIONES ASINCRONAS

Las funciones asíncronas son una forma de escribir código asíncrono en JavaScript de manera más sencilla y legible. Se utilizan cuando necesitamos realizar operaciones que pueden tardar un tiempo en completarse, como hacer solicitudes a un servidor o acceder a archivos del sistema.

Una función asíncrona siempre devuelve una promesa, lo que significa que podemos utilizar la sintaxis de "then" para esperar a que la promesa se complete y obtener el resultado de la función. También podemos utilizar el operador "await" dentro de una función marcada como "async" para esperar a que una promesa se complete.

Por ejemplo, aquí hay una función asíncrona que hace una solicitud HTTP a un servidor y devuelve el cuerpo de la respuesta:

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}


En este ejemplo, la función "getData" es marcada como "async" y utiliza la palabra clave "await" para esperar a que la promesa devuelta por "fetch" se complete y para esperar a que la promesa devuelta por "response.json" se complete. Luego, devuelve el valor de "data".

Las funciones asíncronas son útiles cuando necesitamos realizar operaciones asíncronas de manera sencilla y legible, y son una forma conveniente de trabajar con promesas en JavaScript.

Sí, las funciones asíncronas se pueden utilizar tanto en el lado del cliente como en el lado del servidor en JavaScript. En el lado del cliente, las funciones asíncronas se pueden utilizar para realizar solicitudes HTTP a un servidor o para acceder a archivos del sistema, entre otras cosas.

Por ejemplo, aquí hay una función asíncrona que hace una solicitud HTTP a un servidor y devuelve el cuerpo de la respuesta:

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

En este ejemplo, la función "getData" es marcada como "async" y utiliza la palabra clave "await" para esperar a que la promesa devuelta por "fetch" se complete y para esperar a que la promesa devuelta por "response.json" se complete. Luego, devuelve el valor de "data".

También podemos utilizar "async/await" para simplificar el trabajo con otras operaciones asíncronas en el lado del cliente, como leer y escribir archivos del sistema o acceder a la cámara del dispositivo.

En general, las funciones asíncronas son una forma útil y conveniente de escribir código asíncrono en JavaScript, tanto en el lado del cliente como en el lado del servidor.



JAVASCRIPT ITERADORES


Los iteradores son una característica de JavaScript que se utilizan para recorrer y acceder a los elementos de una colección, como una matriz o una cadena de texto. Un iterador es un objeto que proporciona un método "next" que devuelve el siguiente elemento de la colección cada vez que se llama.

Los iteradores se utilizan a menudo con las estructuras de datos que implementan la interfaz "Iterable", que proporciona un método "Symbol.iterator" que devuelve un iterador para la colección. Las matrices y las cadenas de texto son dos ejemplos de estructuras de datos que implementan la interfaz "Iterable" en JavaScript.

Aquí hay un ejemplo de cómo se utiliza un iterador para recorrer los elementos de una matriz:

const array = [1, 2, 3];

const iterator = array[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

En este ejemplo, utilizamos el método "Symbol.iterator" para obtener un iterador para la matriz "array". Luego, utilizamos el método "next" del iterador para recorrer cada uno de los elementos de la matriz. Cada vez que llamamos a "next", el iterador devuelve un objeto con dos propiedades: "value", que es el valor del elemento actual, y "done", que es "true" si el iterador ha llegado al final de la colección o "false" en caso contrario.

Los iteradores son una forma útil de acceder a los elementos de una colección en JavaScript y se utilizan a menudo con las estructuras de datos que implementan la interfaz "Iterable".

PROGRAMACION FUNCIONAL

La programación funcional es un enfoque de programación en el que se tratan las funciones como elementos fundamentales del código y se evita el cambio de estado y la mutación de datos. En la programación funcional, se busca crear funciones "puras" que siempre devuelven el mismo resultado dado el mismo conjunto de entradas y no tienen efectos secundarios.

JavaScript es un lenguaje que admite la programación funcional y proporciona una serie de características y herramientas para trabajar de manera funcional. Algunas de estas características incluyen:

Funciones de primera clase: Las funciones en JavaScript son valores de primera clase, lo que significa que se pueden pasar como argumentos a otras funciones y devolver como resultado de otras funciones. Esto permite crear funciones "genericas" que pueden aplicarse a diferentes casos.

Closures: Las closures son funciones que tienen acceso a las variables del ámbito en el que fueron creadas, incluso si ese ámbito ya no existe. Esto permite crear funciones que "recuerden" el contexto en el que se crearon y pueden ser utilizadas en diferentes contextos.

Funciones de orden superior: Las funciones de orden superior son funciones que aceptan otras funciones como argumentos o devuelven funciones como resultado. Esto permite crear funciones que pueden aplicar otras funciones a conjuntos de datos.

En la programación funcional, se busca evitar el cambio de estado y la mutación de datos y en su lugar utilizar funciones "puras" que siempre devuelven el mismo resultado dado el mismo conjunto de entradas y no tienen efectos secundarios. Esto puede hacer que el código sea más fácil de depurar y probar y puede mejorar la legibilidad y la mantenibilidad del código a largo plazo.











<html>
    <head>
        <title>Trivia Know-It-All: Chatbots in the Browser with TensorFlow.js</title>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
    </head>
    <body>
        <h1 id="status">Trivia Know-It-All Bot</h1>
        <label>Ask a trivia question:</label>
        <input id="question" type="text" />
        <button id="submit">Submit</button>
        <p id="bot-question"></p>
        <p id="bot-answer"></p>
        <script>
        function setText( text ) {
            document.getElementById( "status" ).innerText = text;
        }

        (async () => {
            // Load TriviaQA data
            let triviaData = await fetch( "web/verified-wikipedia-dev.json" ).then( r => r.json() );
            let data = triviaData.Data;

            // Process all QA to map to answers
            let questions = data.map( qa => qa.Question );

            let bagOfWords = {};
            let allWords = [];
            let wordReference = {};
            questions.forEach( q => {
                let words = q.replace(/[^a-z ]/gi, "").toLowerCase().split( " " ).filter( x => !!x );
                words.forEach( w => {
                    if( !bagOfWords[ w ] ) {
                        bagOfWords[ w ] = 0;
                    }
                    bagOfWords[ w ]++; // Counting occurrence just for word frequency fun
                });
            });

            allWords = Object.keys( bagOfWords );
            allWords.forEach( ( w, i ) => {
                wordReference[ w ] = i + 1;
            });

            // Create a tokenized vector for each question
            const maxSentenceLength = 30;
            let vectors = [];
            questions.forEach( q => {
                let qVec = [];
                // Use a regex to only get spaces and letters and remove any blank elements
                let words = q.replace(/[^a-z ]/gi, "").toLowerCase().split( " " ).filter( x => !!x );
                for( let i = 0; i < maxSentenceLength; i++ ) {
                    if( words[ i ] ) {
                        qVec.push( wordReference[ words[ i ] ] );
                    }
                    else {
                        // Add padding to keep the vectors the same length
                        qVec.push( 0 );
                    }
                }
                vectors.push( qVec );
            });

            let outputs = questions.map( ( q, index ) => {
                let output = [];
                for( let i = 0; i < questions.length; i++ ) {
                    output.push( i === index ? 1 : 0 );
                }
                return output;
            });

            // Define our RNN model with several hidden layers
            const model = tf.sequential();
            // Add 1 to inputDim for the "padding" character
            model.add(tf.layers.embedding( { inputDim: allWords.length + 1, outputDim: 128, inputLength: maxSentenceLength, maskZero: true } ) );
            model.add(tf.layers.simpleRNN( { units: 32 } ) );
            // model.add(tf.layers.bidirectional( { layer: tf.layers.simpleRNN( { units: 32 } ), mergeMode: "concat" } ) );
            model.add(tf.layers.dense( { units: 50 } ) );
            model.add(tf.layers.dense( { units: 25 } ) );
            model.add(tf.layers.dense( {
                units: questions.length,
                activation: "softmax"
            } ) );

            model.compile({
                optimizer: tf.train.adam(),
                loss: "categoricalCrossentropy",
                metrics: [ "accuracy" ]
            });

            const xs = tf.stack( vectors.map( x => tf.tensor1d( x ) ) );
            const ys = tf.stack( outputs.map( x => tf.tensor1d( x ) ) );
            await model.fit( xs, ys, {
                epochs: 20,
                shuffle: true,
                callbacks: {
                    onEpochEnd: ( epoch, logs ) => {
                        setText( `Training... Epoch #${epoch} (${logs.acc})` );
                        console.log( "Epoch #", epoch, logs );
                    }
                }
            } );

            setText( "Trivia Know-It-All Bot is Ready!" );

            document.getElementById( "question" ).addEventListener( "keyup", function( event ) {
                // Number 13 is the "Enter" key on the keyboard
                if( event.keyCode === 13 ) {
                    // Cancel the default action, if needed
                    event.preventDefault();
                    // Trigger the button element with a click
                    document.getElementById( "submit" ).click();
                }
            });

            document.getElementById( "submit" ).addEventListener( "click", async function( event ) {
                let text = document.getElementById( "question" ).value;
                document.getElementById( "question" ).value = "";

                // Run the calculation things
                let qVec = [];
                let words = text.replace(/[^a-z ]/gi, "").toLowerCase().split( " " ).filter( x => !!x );
                for( let i = 0; i < maxSentenceLength; i++ ) {
                    if( words[ i ] ) {
                        qVec.push( wordReference[ words[ i ] ] );
                    }
                    else {
                        // Add padding to keep the vectors the same length
                        qVec.push( 0 );
                    }
                }

                let prediction = await model.predict( tf.stack( [ tf.tensor1d( qVec ) ] ) ).data();
                // Get the index of the highest value in the prediction
                let id = prediction.indexOf( Math.max( ...prediction ) );

                document.getElementById( "bot-question" ).innerText = questions[ id ];
                document.getElementById( "bot-answer" ).innerText = data[ id ].Answer.Value;
            });
        })();
        </script>
    </body>
</html>
Google Analytics es una herramienta gratuita de análisis de datos de web ofrecida por Google. Sirve para medir el tráfico y el rendimiento de un sitio web. Con Google Analytics, puedes ver informes sobre cuántas personas visitan tu sitio, desde qué lugares vienen, qué páginas ven y cuánto tiempo pasan en el sitio. También puedes ver informes sobre las conversiones, es decir, las acciones que realizan las personas en tu sitio, como hacer clic en un enlace o comprar un producto.

Google Analytics es muy útil para los propietarios de sitios web y los anunciantes en línea, ya que les permite comprender mejor a sus audiencias y optimizar su sitio y sus campañas publicitarias para lograr mejores resultados. Por ejemplo, si ves que una página en particular tiene una tasa de rebote (es decir, la gente deja rápidamente el sitio después de visitar esa página) muy alta, puedes intentar mejorar el contenido de esa página para que sea más atractivo y mantenga a las personas en el sitio por más tiempo.

Para incluir Google Analytics en un sitio web, primero debes tener una cuenta de Google Analytics y haber creado un seguimiento para tu sitio. Luego, puedes obtener el código de seguimiento de tu cuenta de Google Analytics y agregarlo a tu sitio.

Aquí hay un ejemplo de código que puedes usar para agregar Google Analytics a tu sitio web:

<!-- Inicio de Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345678-1', 'auto');  // Reemplaza 'UA-12345678-1' con tu ID de seguimiento
  ga('send', 'pageview');
</script>
<!-- Fin de Google Analytics -->

  
  Este código debe ir justo antes de la etiqueta de cierre </head> de tu archivo HTML. Recuerda reemplazar 'UA-12345678-1' con tu ID de seguimiento real, que puedes encontrar en tu cuenta de Google Analytics.

Una vez que hayas agregado este código a tu sitio, Google Analytics comenzará a recopilar datos sobre las visitas a tu sitio y podrás ver los informes en tu cuenta de Google Analytics.

En Google Analytics, una propiedad es un sitio web, aplicación móvil o plataforma de medios sociales que se está midiendo. Cada propiedad tiene su propio ID de seguimiento único y se puede configurar de manera independiente para rastrear diferentes aspectos de su rendimiento.

Por ejemplo, si tienes un sitio web y una aplicación móvil, cada uno podría ser una propiedad en Google Analytics. Puedes configurar diferentes informes y metas para cada propiedad y ver cómo se desempeñan de manera independiente.

Es importante tener en cuenta que una propiedad en Google Analytics no es lo mismo que una propiedad de Google Search Console. La propiedad de Google Search Console es un sitio web que ha sido verificado y que se puede utilizar para ver informes de rendimiento en los resultados de búsqueda de Google.

ID de flujo: 4362679479

ID de medición: G-CW1CE2SYGX

URL del flujo: https://medicalresolve.com

Nombre del flujo: Medical Resolve
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light navbar-light">
  <!-- Container wrapper -->
  <div class="container-fluid">
    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Brand</a>

    <!-- Toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <!-- Link -->
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdown"
            role="button"
            data-mdb-toggle="dropdown"
            aria-expanded="false"
          >
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>

      <!-- Icons -->
      <ul class="navbar-nav d-flex flex-row me-1">
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
        </li>
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
        </li>
      </ul>
      <!-- Search -->
      <form class="w-auto">
        <input
          type="search"
          class="form-control"
          placeholder="Type query"
          aria-label="Search"
        />
      </form>
    </div>
  </div>
  <!-- Container wrapper -->
</nav>
<!-- Navbar -->
¿Por qué los médicos necesitan un sistema de soporte a las decisiones médicas?

En el campo médico, tomar decisiones informadas y precisas es esencial para garantizar la mejor atención posible a los pacientes. Sin embargo, esto puede ser un desafío, ya que los médicos deben tener en cuenta una gran cantidad de factores, incluyendo los síntomas del paciente, su historial médico, las posibles interacciones entre medicamentos y mucho más.

Es aquí donde entran en juego los sistemas de soporte a las decisiones médicas. Estos sistemas utilizan tecnología de vanguardia para proporcionar a los médicos información precisa y actualizada sobre las opciones de tratamiento disponibles y las recomendaciones de expertos. Esto les permite tomar decisiones más informadas y precisas, lo que puede tener un impacto positivo en la atención y el bienestar de los pacientes.

Pero, ¿qué beneficios ofrecen los sistemas de soporte a las decisiones médicas a los médicos? Aquí te presentamos algunos de ellos:

Ayudan a los médicos a estar al tanto de las últimas investigaciones y desarrollos en el campo médico. Los sistemas de soporte a las decisiones médicas suelen estar basados en evidencia científica y se actualizan regularmente con las últimas investigaciones y recomendaciones de expertos. Esto permite a los médicos estar al tanto de los tratamientos más efectivos y las prácticas más recomendadas.

Aumentan la eficiencia y la productividad. Los sistemas de soporte a las decisiones médicas pueden ayudar a los médicos a tomar decisiones de manera más rápida y precisa, lo que les permite atender a más pacientes y aumentar su productividad.

Mejoran la calidad de la atención. Al proporcionar a los médicos información precisa y actualizada, los sistemas de soporte a las decisiones médicas pueden ayudar a mejorar la calidad de la atención que se brinda a los pacientes.

Ayudan a los médicos a tomar decisiones más informadas y precisas. Como se mencionó anteriormente,

link a linkedin

https://www.linkedin.com/in/gabriel-ibarra-jimenez-b9264718/






OTRA SECCION DE CDSS

¿Por qué los sistemas de soporte a las decisiones médicas son importantes para los médicos?

Los sistemas de soporte a las decisiones médicas son herramientas informáticas que proporcionan a los médicos información relevante y actualizada para apoyar la toma de decisiones clínicas. Estos sistemas pueden incluir guías de tratamiento, recomendaciones de expertos y recursos educativos para pacientes y profesionales.

Pero, ¿por qué son importantes para los médicos? Aquí te dejamos algunos de los beneficios que ofrecen:

Ayudan a mejorar la calidad de atención médica: Los sistemas de soporte a las decisiones médicas proporcionan a los médicos acceso a información actualizada y de alta calidad, lo que les permite tomar decisiones más informadas y ofrecer a sus pacientes una atención médica de mayor calidad.

Ahorran tiempo y esfuerzo: Los sistemas de soporte a las decisiones médicas pueden ayudar a los médicos a recopilar y procesar información de manera más eficiente, lo que les permite ahorrar tiempo y esfuerzo y dedicar más tiempo a otras tareas importantes.

Ayudan a reducir errores médicos: Los sistemas de soporte a las decisiones médicas pueden ayudar a los médicos a evitar errores médicos al proporcionar información precisa y relevante para la toma de decisiones.

Promueven la colaboración y la comunicación entre los médicos: Los sistemas de soporte a las decisiones médicas pueden fomentar la colaboración y la comunicación entre los médicos al proporcionar una plataforma común para compartir información y discutir casos.

En resumen, los sistemas de soporte a las decisiones médicas son herramientas valiosas para los médicos ya que les permiten mejorar la calidad de atención médica, ahorrar tiempo y esfuerzo, reducir errores médicos y promover la colaboración y la comunicación entre los profesionales de la salud.



EJEMPLO DE SISTEMA DE SOPORTE A DECISIONES MEDICAS EN JAVASCRIPT

// Definimos una función para recomendar un tratamiento para un paciente con asma
function recomendarTratamientoAsma(edad, sintomas, esfuerzo) {
  // Definimos una variable para almacenar la recomendación de tratamiento
  let recomendacion = "";

  // Si el paciente tiene menos de 12 años y presenta síntomas leves durante el esfuerzo físico, recomendamos el uso de un inhalador de corticosteroides
  if (edad < 12 && sintomas === "leves" && esfuerzo === "si") {
    recomendacion = "inhalador de corticosteroides";
  }
  // Si el paciente tiene 12 años o más y presenta síntomas moderados o graves durante el esfuerzo físico, recomendamos el uso de un inhalador de corticosteroides y un broncodilatador
  else if (edad >= 12 && (sintomas === "moderados" || sintomas === "graves") && esfuerzo === "si") {
    recomendacion = "inhalador de corticosteroides y broncodilatador";
  }
  // Si el paciente tiene 12 años o más y presenta síntomas leves sin esfuerzo físico, recomendamos el uso de un inhalador de corticosteroides
  else if (edad >= 12 && sintomas === "leves" && esfuerzo === "no") {
    recomendacion = "inhalador de corticosteroides";
  }
  // En cualquier otro caso, recomendamos consultar con un médico
  else {
    recomendacion = "consultar con un médico";
  }

  // Devolvemos la recomendación de tratamiento
  return recomendacion;
}

// Llamamos a la función y almacenamos la recomendación de tratamiento en una variable
let tratamientoRecomendado = recomendarTratamientoAsma(30, "leves", "si");

// Mostramos la recomendación de tratamiento en la consola
console.log(tratamientoRecomendado); // "inhalador de corticosteroides y broncodilatador"


Este ejemplo de código define una función que recomienda un tratamiento para un paciente con asma en función de su edad, síntomas y esfuerzo físico. La función utiliza una serie de condicionales para determinar la recomendación de tratamiento y devuelve el resultado


OTRO EJEMPLO E JAVASCRIPT CREANDO CLASES

// Crear una clase para representar una condición médica
class MedicalCondition {
  constructor(name, symptoms, treatments) {
    this.name = name;
    this.symptoms = symptoms;
    this.treatments = treatments;
  }
}

// Crear una clase para representar un paciente
class Patient {
  constructor(name, age, medicalConditions) {
    this.name = name;
    this.age = age;
    this.medicalConditions = medicalConditions;
  }
}

// Crear una clase para representar un sistema de soporte a las decisiones clínicas
class ClinicalDecisionSupportSystem {
  constructor(medicalConditions, patients) {
    this.medicalConditions = medicalConditions;
    this.patients = patients;
  }

  // Método para buscar una condición médica por nombre
  searchMedicalCondition(name) {
    for (let i = 0; i < this.medicalConditions.length; i++) {
      if (this.medicalConditions[i].name === name) {
        return this.medicalConditions[i];
      }
    }
    return null;
  }

  // Método para buscar un paciente por nombre
  searchPatient(name) {
    for (let i = 0; i < this.patients.length; i++) {
      if (this.patients[i].name === name) {
        return this.patients[i];
      }
    }
    return null;
  }

  // Método para recomendar un tratamiento para un paciente con una condición médica específica
  recommendTreatment(patientName, medicalConditionName) {
    // Buscar la condición médica y el paciente
    const medicalCondition = this.searchMedicalCondition(medicalConditionName);
    const patient = this.searchPatient(patientName);

    if (medicalCondition === null || patient === null) {
      return null;
    }

    // Verificar si el paciente tiene la condición médica
    let hasCondition = false;
    for (let i = 0; i < patient.medicalConditions.length; i++) {
      if (patient.medicalConditions[i].name === medicalConditionName) {
        hasCondition = true;
        break;
      }
    }

    if (!hasCondition) {
      return null;
    }

    // Recomendar un tratamiento de la lista de tratamientos disponibles para la condición médica
    return medicalCondition.treatments[0];
  }
}

// Crear algunas condiciones médicas y pacientes para usar en el sistema
const asthma = new MedicalCondition(
  "Asma",
  ["Disnea", "Tos", "Sibilancias"],
  ["In



 SECCION DE PAGINA INDEX

<div class="row row-copirayt">

            </div align="center">
            <a href="https://wa.me/+573114186086">
                <img src="what2.png" alt="WhatsApp" style="width:60px; height:60px;">
             </a><br>


                <p class="mbr-text mb-0 mbr-fonts-style mbr-white align-center display-7">
                    © Copyright 2023 Medical Resolve. All Rights Reserved.
                </p><br><br>
                
              </div>
               


            </div>
        </div>
    </div>
</section><section class="display-7" style="padding: 0;align-items: center;justify-content: center;flex-wrap: wrap;    align-content: center;display: flex;position: relative;height: 4rem;"><a href="https://mobiri.se/809683" style="flex: 1 1;height: 4rem;position: absolute;width: 100%;z-index: 1;"><img alt="" style="height: 4rem;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></a><p style="margin: 0;text-align: center;" class="display-7"></p><a style="z-index:1" href="https://mobirise.com/builder/html-code-generator.html"></a></section><script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-core.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-script.js"></script>  <script src="assets/smoothscroll/smooth-scroll.js"></script>  <script src="assets/ytplayer/index.js"></script>  <script src="assets/mbr-switch-arrow/mbr-switch-arrow.js"></script>  <script src="assets/theme/js/script.js"></script>  <script src="assets/formoid/formoid.min.js"></script>  
  
  
<input name="cookieData" type="hidden" data-cookie-customDialogSelector='null' data-cookie-colorText='#424a4d' data-cookie-colorBg='rgba(234, 239, 241, 0.99)' data-cookie-textButton='De acuerdo' data-cookie-colorButton='' data-cookie-colorLink='#424a4d' data-cookie-underlineLink='false' data-cookie-text="Usamos cookies para darte la mejor experiencia. Lea nuestra política de cookies <a href='Cookies'>Política de cookies</a>.">
  </body>
</html>










SECCION FINAL DE PAGINAS

</section><section class="display-7" style="padding: 0;align-items: center;justify-content: center;flex-wrap: wrap;    align-content: center;display: flex;position: relative;height: 4rem;"><a href="https://mobiri.se/809683" style="flex: 1 1;height: 4rem;position: absolute;width: 100%;z-index: 1;"><img alt="" style="height: 4rem;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></a><p style="margin: 0;text-align: center;" class="display-7"></p><a style="z-index:1" href="https://mobirise.com/builder/web-design-program.html"></a></section><script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-core.js"></script>  <script src="assets/web/assets/cookies-alert-plugin/cookies-alert-script.js"></script>  <script src="assets/smoothscroll/smooth-scroll.js"></script>  <script src="assets/ytplayer/index.js"></script>  <script src="assets/dropdown/js/navbar-dropdown.js"></script>  <script src="assets/theme/js/script.js"></script>  
  
  
<input name="cookieData" type="hidden" data-cookie-customDialogSelector='null' data-cookie-colorText='#424a4d' data-cookie-colorBg='rgba(234, 239, 241, 0.99)' data-cookie-textButton='De acuerdo' data-cookie-colorButton='' data-cookie-colorLink='#424a4d' data-cookie-underlineLink='false' data-cookie-text="Usamos cookies para darte la mejor experiencia. Lea nuestra política de cookies <a href='Cookies'>Política de cookies</a>.">
  </body>
</html>
<form id="question-form">
  <label for="question">Pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <button type="submit">Enviar pregunta</button>
</form> 


<div id="answer"></div>

<script>
  
const form = document.querySelector('#question-form');
const answerDiv = document.querySelector('#answer');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Obtiene la pregunta ingresada por el usuario
  const question = event.target.elements.question.value;

  // Llama a la función que genera la respuesta a la pregunta
  const answer = getAnswer(question);

  // Muestra la respuesta en el elemento div
  answerDiv.textContent = answer;
});


function getAnswer(question) {
  // Convertir la pregunta a minúsculas
  question = question.toLowerCase();

  // Si la pregunta es "¿cuál es tu nombre?"
  if (question === "¿cuál es tu nombre?") {
    return "Mi nombre es Assistant";
  }

  // Si la pregunta es "¿de qué color es el cielo?"
  if (question === "¿de qué color es el cielo?") {
    return "El cielo es azul";
  }

  // Si la pregunta es "¿cuántos dedos tienes en una mano?"
  if (question === "¿cuántos dedos tienes en una mano?") {
    return "Tengo cinco dedos en una mano";
  }

  // Si no se reconoce la pregunta, devolver una respuesta genérica
  return "No tengo una respuesta para esa pregunta";
}

</script>

<!-- Formulario para hacer preguntas al chatbot -->
<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form> 

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>



<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.5.0/dist/tf.min.js"></script>

  // Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
  const processTrainingData = text => {
    const lines = text.split('\n')
    return lines.map(line => {
      const [question, answer] = line.split(':')
      return {
        input: question,
        output: answer
      }
    })
  }

  // Lee el archivo de entrenamiento y procesa los datos de entrenamiento
  const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

  // Crea un modelo de secuencia a secuencia con TensorFlow.js
  const model = tf.sequential()

  // Añade una capa de embedding para procesar el texto de entrada
  model.add(tf.layers.embedding({
    inputDim: 10000,
    outputDim: 64
  }))

  // Añade una capa LSTM para procesar el texto de entrada
  model.add(tf.layers.lstm({
    units: 64,
    returnSequences: true,
    recurrentInitializer: 'glorotNormal'
  }))

  // Añade una capa de atención para mejorar la precisión del modelo
  model.add(tf.layers.attention())

  // Añade una capa densa para procesar la salida
  model.add(tf.layers.dense({
    units: 64,
    activation: 'relu'
  }))

  // Añade una capa de salida para generar la respuesta
  model.add(tf.layers.dense({
    units: 1,
    activation: 'sigmoid'
  }))

  // Compila el modelo
  model.compile({
    loss: 'binaryCrossentropy',
    optimizer: 'adam'
  })

  // Entrena el modelo
  model.fit(trainingData, {
    epochs: 10
  })

  // Crea una función para hacer preguntas al chatbot
 const ask = question => {
  // Valida que la pregunta no esté vacía
  if (!question) {
    console.error("Por favor ingrese una pregunta válida");
    return;
  }
  
  // Muestra la pregunta del usuario
  console.log(`Usuario: ${question}`);
  
  // Pide una respuesta a la red neuronal
  try {
    const answer = model.predict(question);
    // Muestra la respuesta del chatbot
    console.log(`Chatbot: ${answer}`);
  } catch (error) {
    console.error("Error al obtener respuesta del chatbot:", error);
  }
};

______________________________________________________________________________________________


<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form>

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>

<script>
  // Crea una función para hacer preguntas al chatbot
  function ask(question) {
    // Valida que la pregunta no esté vacía
    if (!question) {
      console.error("Por favor ingrese una pregunta válida");
      return;
    }
  
    // Muestra la pregunta del usuario
    console.log(`Usuario: ${question}`);
  
    // Pide una respuesta a la red neuronal
    try {
      const answer = model.predict(question);
      // Muestra la respuesta del chatbot
      console.log(`Chatbot: ${answer}`);
      
      // Muestra la respuesta del chatbot en la etiqueta p
      document.getElementById("answer").textContent = answer;
    } catch (error) {
      console.error("Error al obtener respuesta del chatbot:", error);
    }
  }
  
  // Agrega un manejador de eventos submit al formulario
  document.getElementById("chatbot-form").addEventListener("submit", event => {
    // Evita que la página se recargue
    event.preventDefault();
    
    // Obtiene la pregunta del usuario
    const question = document.getElementById("question").value;
    
    // Hace la pregunta al chatbot
    ask(question);
  });
</script>







OTRO CÓDIGO

const model = tf.sequential();

// Añade una capa de embedding para procesar el texto de entrada
model.add(tf.layers.embedding({
  inputDim: 10000,
  outputDim: 64
}));

// Añade una capa LSTM para procesar el texto de entrada
model.add(tf.layers.lstm({
  units: 64,
  returnSequences: true,
  recurrentInitializer: 'glorotNormal'
}));

// Añade una capa de atención para mejorar la precisión del modelo
model.add(tf.layers.attention());

// Añade una capa densa para procesar la salida
model.add(tf.layers.dense({
  units: 64,
  activation: 'relu'
}));

// Añade una capa de salida para generar la respuesta
model.add(tf.layers.dense({
  units: 1,
  activation: 'sigmoid'
}));

// Compila el modelo
model.compile({
  loss: 'binaryCrossentropy',
  optimizer: 'adam'
});

// Entrena el modelo
model.fit(trainingData, {
  epochs: 10
});

// Crea una función para hacer preguntas al chatbot
const ask = question => {
  // Valida que la pregunta no esté vacía
  if (!question) {
    console.error("Por favor ingrese una pregunta


                  
                  
                  
                  
                  
                  
 <!-- Formulario HTML para hacer preguntas al chatbot -->
<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form> 

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>

<!-- Incluye la biblioteca TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.5.0/dist/tf.min.js"></script>

<script>
  // Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
  const processTrainingData = text => {
    const lines = text.split('\n')
    return lines.map(line => {
      const [question, answer] = line.split(':')
      return {
        input: question,
        output: answer
      }
    })
  }

  // Lee el archivo de entrenamiento y procesa los datos de entrenamiento
  const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

  // Crea un modelo de secuencia a secuencia con TensorFlow.js
  const model = tf.sequential()

  // Añade una capa de embedding para procesar el texto de entrada
  model.add

  
  
  
  
  
  CODIGO COMPLETO
  
  
  <!-- Formulario HTML para hacer preguntas al chatbot -->
<form id="chatbot-form">
  <label for="question">Hacer una pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <input type="submit" value="Enviar">
</form> 

<!-- Etiqueta para mostrar la respuesta del chatbot -->
<p id="answer"></p>

   
  
  
<!-- Incluye la biblioteca TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.5.0/dist/tf.min.js"></script>

<script>
  // Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
  const processTrainingData = text => {
    const lines = text.split('\n')
    return lines.map(line => {
      const [question, answer] = line.split(':')
      return {
        input: question,
        output: answer
      }
    })
  }

  // Lee el archivo de entrenamiento y procesa los datos de entrenamiento
  const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

  // Crea un modelo de secuencia a secuencia con TensorFlow.js
  const model = tf.sequential()

  // Añade una capa de embedding para procesar el texto de entrada
  model.add(tf.layers.embedding({
    inputDim: 10000,
    outputDim: 64
  }))

  
  
    
    // Añade una capa LSTM para procesar el texto de entrada
  model.add(tf.layers.lstm({
    units: 64,
    returnSequences: true,
    recurrentInitializer: 'glorotNormal'
  }))

  // Añade una capa de atención para mejorar la precisión del modelo
  model.add(tf.layers.attention())

  // Añade una capa densa para procesar la salida
  model.add(tf.layers.dense({
    units: 64,
    activation: 'relu'
  }))

  // Añade una capa de salida para generar la respuesta
  model.add(tf.layers.dense({
    units: 1,
    activation: 'sigmoid'
  }))

  // Compila el modelo
  model.compile({
    loss: 'binaryCrossentropy',
    optimizer: 'adam'
  })

  // Entrena el modelo
  model.fit(trainingData, {
    epochs: 10
  })

  // Crea una función para hacer preguntas al chatbot
  const ask = question => {
    // Valida que la pregunta no esté vacía
    if (!question) {
      console.error("Por favor ingrese una pregunta válida");
      return;
    }

    // Muestra la pregunta del usuario
    console.log(`Usuario: ${question}`);

    // Pide una respuesta a la red neuronal
    try {
      const answer = model.predict(question);
      // Muestra la respuesta del chatbot
      console.log(`Chatbot: ${answer}`);
    } catch (error) {
      console.error("Error al obtener respuesta del chatbot:", error);
    }
  };

  // Asigna un manejador de eventos al botón Enviar del formulario
  document.getElementById('chatbot-form').addEventListener('submit', event => {
    // Previene la acción por defecto del formulario
    event.preventDefault();

    // Obtiene la pregunta del usuario
    const question = document.getElementById('question').value;

  
    // Obtiene la pregunta del usuario
    const question = document.getElementById('question').value;

    // Hace una pregunta al chatbot
    ask(question);

    // Muestra la respuesta del chatbot en la página
    document.getElementById('answer').textContent = answer;
  });
</script>
const brain = require('brain.js')
const fs = require('fs')

// Crea una función para procesar el archivo de entrenamiento y devolver un conjunto de datos de entrenamiento
const processTrainingData = text => {
  const lines = text.split('\n')
  return lines.map(line => {
    const [question, answer] = line.split(':')
    return {
      input: question,
      output: answer
    }
  })
}

// Lee el archivo de entrenamiento y procesa los datos de entrenamiento
const trainingData = processTrainingData(fs.readFileSync('training-data.txt', 'utf8'))

// Crea una red neuronal LSTM y entrena con el conjunto de datos de entrenamiento
const net = new brain.recurrent.LSTM()
net.train(trainingData, {
  errorThresh: 0.005
})

// Crea una función para hacer preguntas al chatbot
const ask = question => {
  // Pide una respuesta a la red neuronal
  const answer = net.run(question)
  console.log(answer)
}

// Prueba el chatbot con una pregunta de ejemplo
ask('¿Cuál es el tiempo en París?')
@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}
/* hmtl */
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>

    <article class="card">
      <div class="card-body">
       @Antonio Robles
      </div>
    </article>
	</body>
</html>


***
/* CSS */
:root {
  --border-color: linear-gradient(to right, tomato 0%, gold 100%);
  --card-color: #222;
}
.card {
  background: var(--border-color);
  aspect-ratio: 10/16;
  width: 200px;
  padding: 5px;
  border-radius: 16px;
  position: relative;
}

.card-body {
  color: wheat;
  background: var(--card-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
<style>.pcdriverssitemap .sitemap-box{font-size:14px;line-height:1.58em}
.pcdriverssitemap .sitemap-box:not(:last-child){margin-bottom:35px;padding-bottom:25px;border-bottom:2px solid #ebeced}
.pcdriverssitemap .judul{margin-top:0;font-size:14px;color:#505050}
.pcdriverssitemap .judul:before{content:'Label: ';margin-right:5px}
.pcdriverssitemap ol{list-style:none;margin:0;padding:0;counter-reset:panduan-count}
.pcdriverssitemap li:not(:last-child){margin-bottom:10px}
.pcdriverssitemap li{display:flex}
.pcdriverssitemap li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:40px;font-size:22px;font-family:'PT Sans', sans-serif;line-height:normal;color:rgba(0,0,0,.15);}
.pcdriverssitemap li a{color:#09204C;font-size:90%;font-weight:700;font-family:'PT Sans', sans-serif}
.pcdriverssitemap li a:after{content:'Read more';display:block;margin-top:2px;color:#505050;font-size:11px;font-family:'PT Sans', sans-serif;font-weight:400;line-height:1.58em}
.pcdriverssitemap li a:hover:after{text-decoration:underline}</style>

<div id='pcdriverssitemap' class='pcdriverssitemap'>
    <div class='loading'>Loading....</div>
</div>

<script>
    /*<![CDATA[*/
    var toc_config = {containerId:'pcdriverssitemap', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'pcdriverssitemap',delayLoading: 0};
    window.onload = function(){
    !function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://pcdriversupdate.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);}
    /*]]>*/
</script>
Para agregar el icono de WhatsApp a la página de inicio de un sitio web, primero debes obtener el código HTML del icono desde una fuente confiable. Luego, puedes agregar este código a la página de inicio de tu sitio web donde desees que se muestre el icono. A continuación te presento un ejemplo de código que puedes utilizar:

<a href="https://wa.me/12223334444">
  <img src="https://icon-library.com/images/whatsapp-icon-png/whatsapp-icon-png-29.jpg" alt="WhatsApp" style="width:30px; height:30px;">
</a>


<a href="https://wa.me/tu_número_de_whatsapp">
  <img src="https://icon-library.com/images/whatsapp-icon-png/whatsapp-icon-png-17.jpg" alt="WhatsApp" />
</a>



En este código, se utiliza un enlace HTML para redirigir al usuario a la aplicación de WhatsApp cuando haga clic en el icono. La ruta de la imagen del icono debe ser cambiada por la ruta donde se almacena la imagen en tu servidor. También puedes cambiar el tamaño del icono cambiando el valor de la propiedad width y height en el estilo CSS.
Para convertir una aplicación de Node.js en una aplicación del lado del cliente que se puede ejecutar en un navegador, puedes utilizar una herramienta como Webpack. A continuación te presento un ejemplo de cómo podrías hacerlo:

Instala Webpack y otras dependencias necesarias utilizando npm (gestor de paquetes de Node.js):
npm install --save-dev webpack webpack-cli
Crea un archivo de configuración de Webpack (webpack.config.js) que indique a Webpack cómo procesar tu aplicación de Node.js. En este archivo, debes especificar qué archivos de entrada (es decir, tu código de Node.js) y qué archivos de salida (el código del lado del cliente que se ejecutará en el navegador) deseas utilizar:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  }
};
Crea un script de npm en tu archivo package.json que utilice Webpack para procesar tu aplicación de Node.js y generar el código del lado del cliente:
 
"scripts": {
"build": "webpack"
}


No es necesario colocar una etiqueta src en el head del navegador cuando se ha utilizado Webpack para convertir una aplicación Node.js para su uso en el navegador. Sin embargo, es posible que necesite incluir otras etiquetas en el head de la página para especificar el tipo de contenido o cargar archivos CSS o JavaScript adicionales que sean necesarios para la aplicación.

Ambos Browserify y Webpack son herramientas populares para empaquetar módulos JavaScript y hacer que su código sea más fácil de usar en diferentes entornos. Sin embargo, cada uno tiene sus propios enfoques y ventajas.

Browserify se enfoca en la compatibilidad con el estándar de módulos CommonJS, lo que significa que puede usar módulos que se hayan escrito para funcionar con Node.js en su código de navegador. Esto lo hace una buena opción si desea reutilizar código que ya ha escrito para Node.js en su aplicación web.
BROWSERIFY

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node

Browserify es una herramienta que se utiliza para la programación en JavaScript. Su objetivo es permitir a los programadores utilizar módulos de Node.js en aplicaciones de navegador web. Esto significa que con Browserify, puedes escribir código JavaScript que utiliza la sintaxis de los módulos de Node.js y luego empaquetar ese código para su uso en un navegador web. De esta manera, puedes utilizar las mismas técnicas de programación que utilizas para desarrollar aplicaciones de servidor en tus aplicaciones de navegador web.

Para browserify una aplicación hecha con Node.js, primero deberás instalar la herramienta de línea de comandos de Browserify en tu sistema con el comando 

npm install -g browserify

Una vez que tengas Browserify instalado, puedes usar el siguiente comando para browserify tu aplicación:

browserify main.js -o bundle.js


Donde main.js es el archivo de entrada de tu aplicación y bundle.js es el nombre del archivo de salida que se generará.

Este comando tomará todos los módulos y dependencias que hayas importado en main.js y los combinará en un único archivo, que luego podrás incluir en tu página web como un script normal.

es posible utilizar una aplicación de Node.js en el navegador utilizando Browserify. Browserify es una herramienta que permite empaquetar módulos de Node.js para su uso en el navegador. De esta manera, puedes utilizar las mismas dependencias y módulos que utilizas en tus aplicaciones de Node.js en el navegador.

para usar Browserify en una aplicación de Node.js, es necesario que ya tengas todos los archivos creados y que la aplicación esté funcionando correctamente en Node.js. Una vez que hayas comprobado que la aplicación funciona como se espera en Node.js, puedes utilizar Browserify para empaquetarla y permitir que se ejecute en un navegador.


es posible ejecutar aplicaciones de Node.js en el navegador del lado del cliente usando una herramienta llamada Browserify. Browserify permite empaquetar módulos de Node.js en un archivo JavaScript que puede ser incluido en una página web y utilizado en el navegador. De esta manera, puedes utilizar código de Node.js en el front-end de tu aplicación web, lo que te permite aprovechar las ventajas de desarrollar en Node.js tanto en el lado del servidor como en el del cliente.

Aquí hay un ejemplo de código de una aplicación de Node.js que se puede utilizar con Browserify para usarla en el navegador:

/ app.js
const fs = require('fs');

// una función que lee un archivo y devuelve su contenido
function readFile(file) {
  return fs.readFileSync(file, 'utf8');
}

// exportamos la función para que se pueda utilizar en el navegador
module.exports = readFile;

Para utilizar esta aplicación en el navegador, primero deberías instalar Browserify y luego usarlo para "empacar" la aplicación en un único archivo que se pueda utilizar en el navegador. Puedes hacerlo de la siguiente manera:

// instalamos Browserify
npm install -g browserify

// empacamos nuestra aplicación en un archivo llamado "bundle.js"
browserify app.js -o bundle.js

Ahora puedes incluir el archivo "bundle.js" en tu página HTML y utilizar la función readFile en el navegador, como si fuera una función nativa de JavaScript.

<!-- incluimos el archivo bundle.js en nuestra página -->
<script src="bundle.js"></script>

<html>
<head>
<title></title>
<script charset="utf-8" src="bundle.js"></script>
</head>
<body>
</body>
</html>

En general, se recomienda ejecutar el comando browserify desde la carpeta raíz de tu aplicación. Esto te permitirá utilizar la estructura de carpetas existente en tu proyecto y te facilitará la gestión de archivos y dependencias. Sin embargo, no es necesario que lo ejecutes desde la carpeta raíz, siempre y cuando sepas la ruta exacta de los archivos que deseas incluir en el bundle.

Sí, es posible convertir una aplicación de Node.js a una aplicación para el navegador utilizando el comando browserify desde la carpeta raíz de la aplicación. Browserify es una herramienta que permite utilizar módulos de Node.js en el navegador, lo que te permite empaquetar tu aplicación de Node.js en un archivo que puede ser ejecutado en el navegador.

Para convertir una aplicación de Node.js a una aplicación en el navegador, puedes usar una herramienta como Browserify o Webpack para empaquetar tu código de Node.js en un formato que pueda ser ejecutado en el navegador. Esto implica convertir tu código de Node.js a un formato de JavaScript que el navegador pueda entender y luego empaquetar todos los archivos necesarios, como los módulos externos y las dependencias, en un solo archivo que pueda ser incluido en una página web

_______________________________________________________________________________________________

WEBPACK

Webpack es un module bundler, o dicho de otra forma, una librería que nos permite gestionar todos los recursos necesarios para correr nuestra aplicación mediante el uso de sintaxis ES6 dentro de nuestro código fuente en Javascript

Webpack es un empaquetador de módulos para JavaScript. Se utiliza para compilar y empaquetar los archivos de una aplicación en un solo paquete que puede ser utilizado por un navegador web.

Para utilizar Webpack, primero debes instalarlo en tu proyecto utilizando el administrador de paquetes npm. Una vez que está instalado, puedes configurar Webpack mediante la creación de un archivo de configuración que especifica qué archivos deben ser empaquetados y cómo deben ser procesados. Luego, puedes ejecutar Webpack desde la línea de comandos para compilar y empaquetar tus archivos.

Webpack es una herramienta muy útil para desarrolladores de JavaScript ya que permite organizar y optimizar los archivos de una aplicación de manera eficiente, lo que facilita el desarrollo y mejora el rendimiento de la aplicación.


A continuación te mostraré un ejemplo básico de cómo se utiliza Webpack para compilar y empaquetar una aplicación JavaScript.

Primero, necesitas instalar Webpack y agregarlo como una dependencia de tu proyecto ejecutando el siguiente comando en tu terminal:

npm install --save-dev webpack

Luego, en tu archivo package.json, agrega una tarea build que utiliza Webpack para compilar tu código:

{
  "scripts": {
    "build": "webpack"
  }
}

Ahora, puedes crear un archivo de configuración de Webpack llamado webpack.config.js en la raíz de tu proyecto. En este archivo, puedes especificar la entrada y la salida de tu aplicación, así como cualquier otra configuración que necesites.

// webpack.config.js

module.exports = {
  // Archivo de entrada de la aplicación
  entry: './src/index.js',

  // Archivo de salida generado por Webpack
  output: {
    filename: 'main.js',
    path: __dir
    
    
    Para referenciar el archivo de salida de webpack en el navegador, primero debes asegurarte de que la configuración de tu archivo webpack.config.js incluye una entrada para el archivo de salida. Esto se hace especificando la propiedad output en la configuración de webpack. La propiedad output debe tener un objeto con las siguientes propiedades:

filename: Este es el nombre del archivo de salida generado por webpack.
path: Esta es la ruta en la que se generará el archivo de salida.
Una vez que hayas configurado la propiedad output en tu archivo webpack.config.js, puedes referenciar el archivo de salida en el HTML de tu aplicación usando la etiqueta script:
    
    <script src="ruta/al/archivo/de/salida.js"></script>
    
    Donde ruta/al/archivo/de/salida.js es la ruta al archivo de salida generado por webpack.
    
    
    
    
    Browserify y Webpack son herramientas de empaquetamiento de módulos de JavaScript. En otras palabras, ambos se utilizan para combinar múltiples archivos de JavaScript en uno o más archivos más grandes que son más fáciles de cargar en una página web. Sin embargo, hay algunas diferencias en cómo lo hacen y en el enfoque que tienen.

Browserify se enfoca en la compatibilidad con el estándar de módulos de JavaScript, lo que significa que puede utilizar la sintaxis de require y module.exports para importar y exportar módulos de JavaScript. Esto hace que sea más fácil para los desarrolladores que ya están familiarizados con esa sintaxis trabajar con Browserify.

Por otro lado, Webpack se enfoca en la flexibilidad y la capacidad de personalización. Webpack puede utilizar una variedad de enfoques diferentes para empaquetar módulos, incluyendo la sintaxis de require y module.exports, pero también permite a los desarrolladores utilizar otras sintaxis de módulos, como import y export, así como otras herramientas de procesamiento, como Babel. Además, Webpack tiene una gran cantidad de plugins y opciones de configuración que permiten a los desarrolladores personalizar su proceso de empaquetado de módulos de acuerdo a sus necesidades específicas.
border-radius: 50px 0px 50px 0px;
Brain.js es una biblioteca de JavaScript para el aprendizaje automático en el navegador o en Node.js. Al igual que TensorFlow.js, Brain.js permite entrenar y utilizar modelos de aprendizaje automático en JavaScript, lo que significa que se pueden crear aplicaciones de aprendizaje automático que se ejecutan directamente en el navegador del usuario o en un servidor Node.js. Esto puede ser útil para crear un sistema de preguntas y respuestas que se ejecute en el lado del cliente o en el servidor.

Aquí te dejo un ejemplo hipotético de cómo podría ser el código para entrenar una red neuronal con Brain.js y crear un sistema de preguntas y respuestas:

// Importar la biblioteca Brain.js
const brain = require('brain.js');

// Crear un modelo de red neuronal y especificar la configuración
const model = new brain.recurrent.LSTM();
const config = {
  inputSize: 64,
  hiddenLayers: [128, 128],
  outputSize: 64
};
model.fromJSON(config);

// Cargar el conjunto de datos de entrenamiento y entrenar el modelo
const qaData = require('./qa-data.json');
model.train(qaData, {
  iterations: 2000,
  errorThresh: 0.005,
  log: true,
  logPeriod: 100,
  learningRate: 0.3
});

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.run(question);
console.log(answer);

Este código crea un modelo de red neuronal utilizando una capa de LSTM, que es un tipo de red neuronal recurrente que se utiliza a menudo en tareas de preguntas y respuestas. Luego, se carga el conjunto de datos de entrenamiento y se entrena el modelo utilizando una serie de parámetros que se especifican en la llamada a model.train(). Finalmente, se utiliza el modelo entrenado para responder una pregunta dada utilizando el método model.run().

Como en el caso de TensorFlow.js, este código es solo un ejemplo hipotético y no necesariamente se ajusta a una implementación real de un sistema de preguntas y respuestas con Brain.js. La elección del conjunto de datos de entrenamiento y la lógica de predicción de respuestas dependerán de cómo se haya diseñado y entrenado el modelo, y pueden variar en función de las necesid

ENTRENAMIENTO CON TEXTO PLANO DE LA RED NEURONAL

Si quieres entrenar una red neuronal con Brain.js utilizando texto plano en lugar de un conjunto de datos preprocesado, podrías hacerlo de la siguiente manera:

// Importar la biblioteca Brain.js
const brain = require('brain.js');

// Crear un modelo de red neuronal y especificar la configuración
const model = new brain.recurrent.LSTM();
const config = {
  inputSize: 64,
  hiddenLayers: [128, 128],
  outputSize: 64
};
model.fromJSON(config);

// Cargar el texto de entrenamiento y procesarlo para convertirlo en un formato adecuado para el modelo
const textData = require('./text-data.txt');
const qaData = processTextData(textData);

// Entrenar el modelo utilizando el conjunto de datos procesado
model.train(qaData, {
  iterations: 2000,
  errorThresh: 0.005,
  log: true,
  logPeriod: 100,
  learningRate: 0.3
});

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.run(question);
console.log(answer);

_________________________________________________________________________________________________

Si quieres utilizar Brain.js en un entorno que no sea Node.js, puedes utilizar la versión de Brain.js que se ejecuta en el navegador. En lugar de utilizar require() para importar la biblioteca, deberías utilizar una etiqueta <script> para cargar la biblioteca desde un CDN (Content Delivery Network, o red de entrega de contenidos):


<script src="https://unpkg.com/brain.js"></script>

<script>
  
  // Crear un modelo de red neuronal y especificar la configuración
  const model = new brain.recurrent.LSTM();
  const config = {
    inputSize: 64,
    hiddenLayers: [128, 128],
    outputSize: 64
  };
  model.fromJSON(config);

  // Cargar el texto de entrenamiento y procesarlo para convertirlo en un formato adecuado para el modelo
  const textData = require('./text-data.txt');
  const qaData = processTextData(textData);

  // Entrenar el modelo utilizando el conjunto de datos procesado
  model.train(qaData, {
    iterations: 2000,
    errorThresh: 0.005,
    log: true,
    logPeriod: 100,
    learningRate: 0.3
});

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.run(question);
console.log(answer);

</script>


SINO SE UTILIZA NODE, PUEDE HACERLO MEJOR CON JAVASCRIPT DE EST MANERA

fetch('./text-data.txt')
  .then(response => response.text()) // Procesar la respuesta como texto
  .then(textData => {
    // Procesar los datos de texto y entrenar el modelo de red neuronal
    const qaData = processTextData(textData);
    model.train(qaData, {
      iterations: 2000,
      errorThresh: 0.005,
      log: true,
      logPeriod: 100,
      learningRate: 0.3
    });
  });


FUNCION PARA PROCESAR LOS DATOS

function processTextData(textData) {
  // Tokenizar el texto en palabras
  const words = textData.split(' ');

  // Crear un mapa que asigne valores numéricos a cada palabra
  const wordMap = new Map();
  for (let i = 0; i < words.length; i++) {
    if (!wordMap.has(words[i])) {
      wordMap.set(words[i], i);
    }
  }

  // Organizar los datos en pares de preguntas y respuestas
  const qaData = [];
  for (let i = 0; i < words.length - 1; i++) {
    const input = [wordMap.get(words[i])];
    const output = [wordMap.get(words[i + 1])];
    qaData.push({
      input: input,
      output: output
    });
  }

  return qaData;
}


___________________________________________________________________________________________________-











// Cargar el texto de entrenamiento
const textData = 'pregunta1¿cuál es la capital de España?respuesta1Madrid\npregunta2¿cuál es el animal más rápido del mundo?respuesta2El guepardo';

// Dividir el texto en líneas y procesarlas para convertirlas en un formato adecuado para el modelo
const lines = textData.split('\n');
const qaData = lines.map(line => {
  const [input, output] = line.split('¿');
  return {
    input: input,
    output: output
  };
});
Una vez que tiene el conjunto de datos en un formato adecuado, puede entrenar el modelo utilizando el método train:

Copy code
model.train(qaData, {
  iterations: 2000,
  errorThresh: 0.025
});
Finalmente, puede guardar el modelo entrenado para su uso posterior y utilizarlo para hacer prediccion





Luego, puede usar esta función para procesar los datos de texto y entrenar su modelo de red neuronal de la siguiente manera:

Copy code
// Cargar el texto de entrenamiento y procesarlo para convertirlo en un






<html> 
  <head>
    <script src="//unpkg.com/brain.js"></script>
    <script src = " index.js"> </script>
  </head>
</html>

OTRA OPCION DE TOKENIZAR

function processTextData(textData) {
  // Usar la biblioteca natural para tokenizar el texto en palabras o frases
  const tokenizer = new natural.WordTokenizer();
  const tokens = tokenizer.tokenize(textData);

  // Asignar valores numéricos a cada palabra o frase
  const wordToNumber = new Map();
  let number = 0;
  for (const token of tokens) {
    if (!wordToNumber.has(token)) {
      wordToNumber.set(token, number);
      number++;
    }
  }

  // Organizar los datos en pares de preguntas y respuestas
  const qaData = [];
  for (let i = 0; i < tokens.length - 1; i++) {
    const question = wordToNumber.get(tokens[i]);
    const answer = wordToNumber.get(tokens[i + 1]);
    qaData.push([question, answer]);
  }

  return qaData;
}

Para crear un sistema de preguntas y respuestas con una red neuronal utilizando TensorFlow.js, primero se necesitaría tener un conjunto de datos de entrenamiento que contenga preguntas y sus correspondientes respuestas. Luego, se crearía un modelo de red neuronal y se entrenaría utilizando el conjunto de datos de entrenamiento. Una vez que el modelo esté entrenado, se podría utilizar para responder preguntas que se le planteen.

Aquí te dejo un ejemplo hipotético de cómo podría ser el código para crear un sistema de preguntas y respuestas con TensorFlow.js:

// Importar la biblioteca TensorFlow.js
const tf = require('@tensorflow/tfjs');

// Crear un modelo secuencial con una capa de LSTM (unidad de memoria a largo plazo)
const model = tf.sequential();
const lstmLayer = tf.layers.lstm({units: 64});
model.add(lstmLayer);

// Compilar el modelo con un optimizador y una función de pérdida
model.compile({optimizer: 'rmsprop', loss: 'categoricalCrossentropy'});

// Cargar el conjunto de datos de entrenamiento y entrenar el modelo
const qaData = require('./qa-data.json');
const xs = tf.tensor2d(qaData.questions);
const ys = tf.tensor2d(qaData.answers);
model.fit(xs, ys);

// Respondre una pregunta dada
const question = "¿Cuál es la capital de España?";
const answer = model.predict(question);
console.log(answer);
// Importar la biblioteca TensorFlow.js
const tf = require('@tensorflow/tfjs');

// Crear un modelo secuencial con una capa de LSTM (unidad de memoria a largo plazo)
const model = tf.sequential();
const lstmLayer = tf.layers.lstm({units: 64});
model.add(lstmLayer);

// Compilar el modelo con un optimizador y una función de pérdida
model.compile({optimizer: 'rmsprop', loss: 'categoricalCrossentropy'});

// Cargar el conjunto de datos de entrenamiento y entrenar el modelo
const textData = require('./text-data.json');
const xs = tf.tensor2d(textData.xs);
const ys = tf.tensor2d(textData.ys);
model.fit(xs, ys);

// Generar texto a partir de una semilla dada
const seed = "The quick brown fox";
const generatedText = model.predict(seed);
console.log(generatedText);

Este código crea un modelo secuencial utilizando una capa de LSTM, que es un tipo de red neuronal recurrente que se utiliza a menudo en tareas de generación de texto. Luego, se compila el modelo con un optimizador y una función de pérdida, se carga el conjunto de datos de entrenamiento y se entrena el modelo. Finalmente, se utiliza el modelo entrenado para generar texto a partir de una semilla dada.

LOS DATOS NO TIENEN QUE SE NECESARIAMENTE JSON
No necesariamente. En el ejemplo que te he dado, el conjunto de datos de entrenamiento se carga desde un archivo JSON, pero esto es solo una posibilidad y no un requisito. Puedes cargar el conjunto de datos de entrenamiento de cualquier formato que te resulte cómodo, siempre y cuando puedas convertirlo en un tensor de TensorFlow.js para que pueda ser utilizado por el modelo.

Por ejemplo, en lugar de cargar el conjunto de datos de entrenamiento desde un archivo JSON, podrías cargarlo desde un archivo CSV o desde una base de datos. También podrías generar el conjunto de datos de entrenamiento de manera programática en lugar de cargarlo desde un archivo externo. En cualquier caso, lo importante es que el conjunto de datos de entrenamiento se convierta en un tensor que pueda ser utilizado por el modelo de TensorFlow.js.


const seed = "The quick brown fox"; es una declaración de variable en JavaScript que asigna a la variable seed el valor de una cadena de texto que contiene la frase "The quick brown fox". Esta variable se utiliza en el ejemplo que te di anteriormente para generar texto a partir de una semilla dada. La semilla es una cadena de texto que se utiliza como punto de partida para la generación de texto. El modelo de TensorFlow.js utiliza la semilla para generar una secuencia de palabras que, en teoría, deberían ser coherentes y relacionadas con la semilla original.

En el ejemplo que te di, la variable seed se utiliza como entrada para el método model.predict(), que es el método que se utiliza para generar texto a partir del modelo entrenado. El resultado de la predicción se almacena en la variable generatedText, que luego se imprime en la consola utilizando console.log().

Es importante tener en cuenta que el código que te di es solo un ejemplo hipotético y no necesariamente se ajusta a una implementación real de un sistema generador de texto con TensorFlow.js. La elección de la semilla y la lógica de generación de texto dependen de cómo se haya diseñado y entrenado el modelo, y pueden variar en función de las necesidades y objetivos del sistema.



Try again
/* function show(){

// Obtener los valores de entrada del formulario
const reticulacion = parseInt($("#level1" ).val());
const lobinfe = parseInt($("#level2").val());
const esmerilado = parseInt($("#level3" ).val());
const bronquiecta = parseInt($("#level4" ).val());
const axial = parseInt($("#level5").val());
const panamiel = parseInt($("#level6").val());
const atrapaereo = parseInt($("#level7").val());
const lobsuperior = parseInt($("#level8").val());
const noduloesme = parseInt($("#level9").val());
const noperilinfa= parseInt($("#level10").val());
const franja = parseInt($("#level11").val());
const consolida= parseInt($("#level12").val());
const engrosabronqui= parseInt($("#level13").val());
const esmeriquiste= parseInt($("#level14").val());
const quistes= parseInt($("#level15").val());

// Crear un tensor de entrada a partir de los valores del formulario
const input = tf.tensor2d([[reticulacion, lobinfe, esmerilado, bronquiecta, axial, panamiel, atrapaereo, lobsuperior, noduloesme, noperilinfa, franja, consolida, engrosabronqui, esmeriquiste, quistes]]); */


/* // create a simple feed forward neural network with backpropagation
const model = tf.sequential();
model.add(tf.layers.dense({units: 7, activation: 'sigmoid', inputShape: [15]}));
model.add(tf.layers.dense({units: 10, activation: 'softmax'}));
model.compile({optimizer: 'sgd', loss: 'categoricalCrossentropy', learningRate: 0.3});

// train the model with the input-output pairs
const xs = tf.tensor2d([
    [0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
    [1,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,1,1,0,0,0,0,0,0,0,0,0,0,0,1],
    [0,0,1,0,0,0,0,1,1,0,0,0,0,0,0],
    [1,1,1,1,0,0,0,0,0,0,0,0,0,1,0],
    [0,1,1,0,1,0,0,1,0,0,0,1,1,0,0],
    [0,0,0,0,1,0,0,1,0,1,0,0,1,0,0],
    [1,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
    [1,1,0,1,0,1,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,0,0,0,0,0,1,0,0,0,0],
    [1,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
    ...
]);
const ys = tf.tensor2d([
    [0,1,0,0,0,0,0,0,0,0],
    [0,0,1,0,0,0,0,0,0,0],
    [0,0,0,1,0,0,0,


    model.fit(xs, ys, {
  epochs: 10,
  batchSize: 32,
  shuffle: true
});



RED NUERONAL CON TENSORFLOW.JS

/* creame una red neuronal con tensorflow.js */

const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);
model.fit(xs, ys, {epochs: 10}).then(() => {
  model.predict(tf.tensor2d([5], [1, 1])).print();
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
      }

      * {
        box-sizing: border-box;
      }

      .container {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        width: 90%;
      }

      .nav {
        background-color: #ec4899;
        color: white;
        padding: 1.7rem;
        display: flex;
        justify-content: space-between;
      }

      .buttons {
        display: flex;
        gap: 1.5rem;
      }

      .button {
        display: flex;
        gap: 0.5rem;
        cursor: pointer;
        background-color: transparent;
      }

      .button:hover {
        color: rgba(255, 255, 255, 0.7);
      }

      .header-text {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
      }

      .nav-box {
        visibility: hidden;
        background-color: #7d3b65;
        /* border: 1px solid #7d3b65; */
        position: absolute;
        top: 65%;
        width: 100%;
        color: #fff;
        padding-left: 2.3rem;
        padding-bottom: 1.7rem;
        padding-top: 1.6rem;
      }

      .hidden-nav {
        display: grid;
        gap: 1.5rem;
      }

      .share,
      .tweet,
      .pin {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
      }

      .input-button {
        position: absolute;
        top: 58%;
        left: 10%;
      }

      @media screen and (max-width: 300px) {
        .nav-box {
          top: 68%;
        }
      }

      @media screen and (min-width: 600px) and (max-width: 699px) {
        .input-button {
          top: 65%;
        }
      }

      @media screen and (max-width: 769px) {
        .buttons {
          display: none;
        }
        .menu {
          cursor: pointer;
        }
      }

      @media screen and (min-width: 769px) {
        .menu {
          display: none;
        }
      }

      @media screen and (min-width: 730px) and (max-width: 899px) {
        .input-button {
          top: 62%;
        }
      }

      @media screen and (min-width: 900px) {
        .container {
          max-width: 55%;
          width: 60%;
        }

        .input-button {
          top: 55%;
          left: 22.5%;
        }
      }

      @media screen and (min-width: 915px) {
        .container {
          max-width: 55%;
          width: 60%;
        }

        .input-button {
          top: 62%;
          left: 22.5%;
        }
      }

      @media screen and (min-width: 1024px) {
        .container {
          max-width: 55%;
          width: 60%;
        }

        .input-button {
          top: 58%;
          left: 22.5%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav" id="nav">
        <div class="header-text">pure css starter kit</div>
        <div class="menu" id="menu-button">
          <i class="fa-solid fa-bars"></i>
        </div>
        <div class="buttons">
          <div class="button">
            <i class="fa-brands fa-square-facebook"></i
            ><span class="share">share</span>
          </div>
          <div class="button">
            <i class="fa-brands fa-twitter"></i><span class="tweet">tweet</span>
          </div>
          <div class="button">
            <i class="fab fa-pinterest"></i><span class="pin">pin</span>
          </div>
        </div>
      </div>
      <div class="nav-box" id="nav-box">
        <div class="hidden-nav">
          <div class="button">
            <i class="fa-brands fa-square-facebook"></i
            ><span class="share">share</span>
          </div>
          <div class="button">
            <i class="fa-brands fa-twitter"></i><span class="tweet">tweet</span>
          </div>
          <div class="button">
            <i class="fab fa-pinterest"></i><span class="pin">pin</span>
          </div>
        </div>
      </div>
    </div>
    <input type="color" id="input-button" class="input-button" />

    <script async>
      const inputButton = document.getElementById('input-button');
      const nav = document.getElementById('nav');

      const menuButton = document.getElementById('menu-button');
      const navBox = document.getElementById('nav-box');

      let currentState = false;
      function displayNav() {
        let color = localStorage.getItem('color');
        navBox.style.backgroundColor - color;
        navBox.style.backgroundColor = color;
        if (!currentState && window.innerWidth <= 375) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 80%;');
        } else if (
          !currentState &&
          window.innerWidth > 375 &&
          window.innerWidth < 399
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 70%;');
        } else if (
          !currentState &&
          window.innerWidth > 399 &&
          window.innerWidth < 450
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 70%;');
        } else if (
          !currentState &&
          window.innerWidth > 450 &&
          window.innerWidth < 550
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 75%;');
        } else if (
          !currentState &&
          window.innerWidth > 550 &&
          window.innerWidth < 650
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 110%;');
        } else if (
          !currentState &&
          window.innerWidth > 650 &&
          window.innerWidth < 668
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 95%;');
        } else if (
          !currentState &&
          window.innerWidth > 680 &&
          window.innerWidth < 730
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 70%;');
        } else if (
          !currentState &&
          window.innerWidth > 735 &&
          window.innerWidth < 741
        ) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 100%;');
        } else if (!currentState && window.innerWidth > 799) {
          currentState = true;
          navBox.style.visibility = 'visible';
          inputButton.setAttribute('style', 'position: absolute; top: 82%;');
        } else {
          currentState = false;
          navBox.style.visibility = 'hidden';
          inputButton.removeAttribute('style');
        }
      }

      function getColor() {
        let color = localStorage.getItem('color');
        nav.style.backgroundColor = color;
        inputButton.value = color;
      }

      getColor();

      function saveColor(color) {
        localStorage.setItem('color', color);
      }
      function changeColor(e) {
        saveColor(e.target.value);
        nav.style.backgroundColor = e.target.value;
        navBox.style.backgroundColor = e.target.value;
      }

      inputButton.addEventListener('input', changeColor);
      menuButton.addEventListener('click', displayNav);
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alert</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      }

      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        width: 90%;
      }

      .alert {
        background-color: #ec4899;
        color: white;
        padding: 1.2rem;
        display: flex;
        justify-content: space-between;
        border-radius: 0.3rem;
      }

      .header-text {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
      }

      .cancel-button {
        display: flex;
        font-size: x-large;
        font-weight: 500;
        cursor: pointer;
      }

      .hidden-revert {
        display: none;
        text-transform: uppercase;
        font-weight: bold;
        background-color: #ec4899;
        color: #fff;
        border: none;
        outline: none;
        padding: 10px 15px;
        border-radius: 3px;
        cursor: pointer;
      }
      .revert {
        display: none;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .input-button {
        margin-top: 1.3rem;
        border: none;
        width: 2rem;
        background: none;
      }

      input[type='color' i] {
        height: 29px;
        cursor: pointer;
      }

      @media screen and (min-width: 900px) {
        .container {
          max-width: 60%;
          width: 50%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="alert" id="alert">
        <div class="header-text">
          <i class="fas fa-bell"></i>
          <span class="bell"
            ><strong>Pink!</strong
            ><em> This is a pink alert - check it out </em></span
          >
        </div>
        <div class="cancel-button" id="cancel-button">×</div>
      </div>
      <button type="button" class="hidden-revert" id="revert-button">
        undo changes
      </button>
      <input type="color" class="input-button" id="input-button" />
      <!-- <embed type="text/html" src="snippet.html" width="500" height="200" /> -->
    </div>

    <script async>
      const alertBox = document.getElementById('alert');
      const cancelButton = document.getElementById('cancel-button');
      const revertButton = document.getElementById('revert-button');
      const inputButton = document.getElementById('input-button');

      function cancelAlert() {
        alertBox.style.display = 'none';
        revertButton.style.display = 'block';
      }

      function displayAlert() {
        alertBox.style.display = 'flex';
        revertButton.style.display = 'none';
      }

      function getColor() {
        let color = localStorage.getItem('color');
        alertBox.style.backgroundColor = color;
        revertButton.style.backgroundColor = color;
        inputButton.value = color;
      }

      getColor();

      function saveColor(color) {
        localStorage.setItem('color', color);
      }

      function changeColor(e) {
        saveColor(e.target.value);
        alertBox.style.backgroundColor = e.target.value;
        revertButton.style.backgroundColor = e.target.value;
      }

      inputButton.addEventListener('input', changeColor);
      revertButton.addEventListener('click', displayAlert);
      cancelButton.addEventListener('click', cancelAlert);
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Modal - Example</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      * {
        box-sizing: border-box;
      }

      .container {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .button-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .button {
        background-color: #ec4899;
        color: #fff;
        border: none;
        padding: 10px 20px;
        text-transform: uppercase;
        font-weight: 700;
        cursor: pointer;
        border-radius: 3px;
      }

      .modal-container {
        border-radius: 5px;
        width: 23.5rem;
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
      }

      .modal-title {
        text-transform: capitalize;
        padding: 0 1.3rem;
      }

      .modal-body {
        border-top: 0.1px solid rgba(108, 105, 105, 0.212);
        border-bottom: 0.1px solid rgba(108, 105, 105, 0.212);
        padding: 2rem 1.3rem;
        line-height: 1.7;
        font-size: 1.1rem;
        color: rgb(97, 94, 94);
      }

      .modal-button-container {
        display: flex;
        justify-content: flex-end;
        padding: 0 1.3rem;
        padding-bottom: 2rem;
        gap: 0.2rem;
      }

      .close {
        color: red;
        border: none;
        border-radius: 3px;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.85rem;
        background-color: transparent;
        cursor: pointer;
      }

      .save-changes {
        background-color: #50c878;
        color: white;
        border: none;
        border-radius: 3px;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
      }

      @media screen and (max-width: 340px) {
        .modal-container {
          width: 17rem;
        }
      }
    </style>
  </head>

  <body>
    <div class="container" id="container">
      <div class="button-container">
        <button type="button" class="button" id="toggle-button">
          open space modal
        </button>
      </div>
      <div class="modal-container" id="modal-box">
        <h1 class="modal-title">modal title</h1>
        <p class="modal-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
          minima doloremque distinctio totam quos quasi, sequi soluta cupiditate
          vero ratione quo ipsa excepturi id commodi iusto, dolorum ducimus
          voluptatum aut cum sint quod repudiandae! Minima rem similique rerum
          ea nemo?
        </p>
        <div class="modal-button-container">
          <button type="button" class="close" id="close">close</button>
          <button type="button" class="save-changes" id="save-changes">
            save changes
          </button>
        </div>
      </div>
    </div>

    <script>
      const container = document.getElementById('container');
      const toggleButton = document.getElementById('toggle-button');
      const modal = document.getElementById('modal-box');
      const closeButton = document.getElementById('close');
      const saveButton = document.getElementById('save-changes');

      function toggleModal() {
        modal.style.display = 'block';
        document.body.style.backgroundColor = 'rgba(108, 105, 105, 0.212)';
      }

      function closeModal() {
        modal.style.display = 'none';
        document.body.style.backgroundColor = 'transparent';
      }

      window.addEventListener('click', (e) => {
        if (e.target.classList.contains('container')) {
          closeModal();
        }
      });
      modal.addEventListener('click', closeModal);
      saveButton.addEventListener('click', closeModal);
      closeButton.addEventListener('click', closeModal);
      toggleButton.addEventListener('click', toggleModal);
    </script>
  </body>
</html>
// Obtener todos los checkbox en una matriz
var checkboxes = document.querySelectorAll('input[type="checkbox"]');

// Inicializar la variable que almacenará la suma
var sum = 0;

// Recorrer la matriz de checkbox y sumar los valores seleccionados
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    sum += parseInt(checkboxes[i].value);
  }
}

// Mostrar la suma en la consola
console.log(sum);

En este código, se utiliza querySelectorAll para obtener todos los checkbox en una matriz. Luego se recorre la matriz y se suman los valores seleccionados utilizando un bucle for. Finalmente, se muestra el resultado de la suma en la consola.

Este es solo un ejemplo de una forma de hacerlo. Hay muchas otras maneras de capturar los valores de múltiples checkbox y sumarlos en JavaScript, y puedes utilizar diferentes enfoques según tus necesidades y preferencia
como centrar un input text y un boton en bootstrap 5

Puedes utilizar la clase mx-auto de Bootstrap 5 para centrar elementos como un <input> y un <button> en la página. La clase mx-auto se utiliza para centrar elementos en el eje horizontal y vertical, lo que lo hace ideal para centrar elementos en una página web.

Por ejemplo, si deseas centrar un <input> y un <button> en una página HTML utilizando Bootstrap 5, puedes utilizar el siguiente código:

<!-- Importar la hoja de estilos de Bootstrap 5 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<!-- Crear un contenedor para el <input> y el <button> -->
<div class="container">
  <!-- Centrar el <input> y el <button> en el contenedor utilizando la clase mx-auto de Bootstrap 5 -->
  <input class="mx-auto" type="text" placeholder="Escribe tu pregunta aquí">
  <button class="mx-auto" type="button">Enviar pregunta</button>
</div>


En este ejemplo, el <input> y el <button> se encuentran dentro de un contenedor <div> con la clase container de Bootstrap 5. Esta clase se utiliza para crear un contenedor que ocupe todo el ancho de la página y que tenga un margen adecuado. Dentro del contenedor, el <input> y el <button> se centran utilizando la clase mx-auto.

Es importante tener en cuenta que para utilizar la clase mx-auto en tu página web, debes importar la hoja de estilos de Bootstrap 5 en tu página HTML. Puedes hacerlo utilizando el siguiente código:
// Importar la biblioteca GPT-3 de OpenAI
const openai = require('openai');

// Configurar la clave de acceso a la API
openai.apiKey = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
async function askGPT3(question) {
  // Utilizar el método completions de la biblioteca GPT-3 para enviar la pregunta
  const response = await openai.completions.create({
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  });

  // Mostrar la respuesta del chatbot en la consola
  console.log(response.data.choices[0].text);
}

// Enviar una pregunta de prueba al chatbot
askGPT3('¿Qué es la inteligencia artificial?');

// Importar la librería de solicitudes HTTP
const request = require('request');

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    prompt: question,
    model: 'text-davinci-002',
    max_tokens: 2048,
    temperature: 0.5,
  };

  // Crear una opción para la solicitud HTTP con la clave de acceso y el cuerpo
  const requestOptions = {
    url: API_URL,
    headers: {
      Authorization: `Bearer ${API_KEY}`,
    },
    json: requestBody,
  };

  // Enviar la solicitud HTTP al chatbot
  request.post(requestOptions, (error, response, body) => {
    if (error) {
      // Mostrar un error en caso de que ocurra un problema al enviar la solicitud
      console.error(error);
    } else {
      
      
      
      
 La librería de solicitudes HTTP que se importa en el código anterior se utiliza para enviar una solicitud HTTP a la API de preguntas y respuestas de OpenAI. Esta librería no es parte de Node.js y puede utilizarse en cualquier entorno de programación que permita realizar solicitudes HTTP.

Si deseas utilizar otra librería o herramienta para enviar la solicitud HTTP en lugar de la librería de solicitudes HTTP, puedes modificar el código de la siguiente manera:
      
      // Importar la herramienta o librería que desees utilizar para enviar solicitudes HTTP
const http = require('TU_HERRAMIENTA_O_LIBRERIA');

// Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la pregunta y la configuración del chatbot
  const requestBody = {
    
    
    
    
    
    // Configurar la URL de la API y la clave de acceso
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = 'TU_CLAVE_DE_ACCESO';

// Crear una función que envía una pregunta al chatbot y muestra la respuesta
function askGPT3(question) {
  // Crear un cuerpo para la solicitud HTTP con la


<body>

    <section id="solar-system">

        <div id="sun"></div>

        <article id="mercury-trajectory">

            <div id="mercury"></div>

        </article>

        <article id="venus-trajectory">

            <div id="venus"></div>

        </article>

        <article id="earth-trajectory">

            <div id="earth"></div>

        </article>

        <article id="mars-trajectory">

            <div id="mars"></div>

        </article>

        <!-- too far for my starship 🪐🚀

        <article id="main-asteroid-belt-trajectory"></article>

        <article id="jupiter-trajectory"></article>

        <article id="saturn-trajectory"></article>

        <article id="uranus-trajectory"></article

        <article id="neptune-trajectory"></article>

    -->

    </section>

</body>
.player

  .head

    .back

    .front

      .avatar

        img(src="http://vignette4.wikia.nocookie.net/lyricwiki/images/1//Semisonic_portrait.jpg/revision/latest?cb=004094209")

      .infos

        .titulo_song
9
          | KFC - Killing Fabulous Chickens

        .duracao_song

           i.fa.fa-clock-o 

             | Total time 45:12
13
        .tags

          span Educativo
15
          span Galinhas

          span Podcast

  

  .timeline

    
20
    .soundline

    .controllers.active

      .back 
.player

  .player__list

    .player__icon.player__icon-list.icon-list

  .player__volume

    .player__icon.player__icon-volume.icon-volume

  .player__meta

    .player__song Queenie Eye

    .player__artist Paul McCartney — New

  .player__bg(style="background-image: url(https://images.unsplash.com/photo-345373927-aeb928d54385?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);")

  .player__controls
11
    .player__controls-bg(style="background-image: url(https://images.unsplash.com/photo-15345313927-aeb928d54385?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);")

    .player__repeat

      .player__icon.player__icon-repeat.icon-repeat

    .player__prev
15
      .player__icon.player__icon-prev.icon-prev

    .player__play
17
      .player__icon.player__icon-play.icon-play

    .player__next

      .player__icon.player__icon-next.icon-next
<meta name="viewport" content="width=device-width, initial-scale=1,👉 maximum-scale=1, user-scalable=no👈">
// Obtener todos los elementos <select> en la página
var selects = document.querySelectorAll("select");

// Crear una variable para almacenar la suma
var sum = 0;

// Iterar sobre los elementos <select>
for (var i = 0; i < selects.length; i++) {
  // Obtener el valor seleccionado actualmente
  var value = selects[i].value;

  // Convertir el valor a un número y sumarlo a la variable de suma
  sum += Number(value);
}

// Mostrar la suma final en la consola
console.log("Total: " + sum);
En este código, se obtienen todos los elementos <select> en la página mediante document.querySelectorAll(). Luego, se itera sobre los elementos <select> y se suman sus valores seleccionados en una variable. Finalmente, se muestra el valor de la suma en la consola.




 <div id="google_translate_element"></div><br><script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></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>Pop - Up</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-up {
        position: absolute;
        top: 10px;
        right: -110px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Up pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-up');
      };
    </script>
  </body>
</html>
<!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>Pop - Right?</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-right {
        position: absolute;
        right: -300px;
        top: 83px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Right pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-right');
      };
    </script>
  </body>
</html>
<!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>Pop - Left</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-left {
        position: absolute;
        left: -300px;
        top: 83px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Left pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-left');
      };
    </script>
  </body>
</html>
<!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>Popover - Down</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-down {
        position: absolute;
        bottom: -12px;
        left: -93px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Down pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-down');
      };
    </script>
  </body>
</html>

<!-- MODULO DE TRADUCCIÓN -->
<!-- GTranslate: https://gtranslate.io/ -->
<a href="#" onclick="doGTranslate('es|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="English" /></a><a href="#" onclick="doGTranslate('es|fr');return false;" title="French" class="gflag nturl" style="background-position:-200px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="French" /></a><a href="#" onclick="doGTranslate('es|de');return false;" title="German" class="gflag nturl" style="background-position:-300px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="German" /></a><a href="#" onclick="doGTranslate('es|it');return false;" title="Italian" class="gflag nturl" style="background-position:-600px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Italian" /></a><a href="#" onclick="doGTranslate('es|pt');return false;" title="Portuguese" class="gflag nturl" style="background-position:-300px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Portuguese" /></a><a href="#" onclick="doGTranslate('es|ru');return false;" title="Russian" class="gflag nturl" style="background-position:-500px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Russian" /></a><a href="#" onclick="doGTranslate('es|es');return false;" title="Spanish" class="gflag nturl" style="background-position:-600px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Spanish" /></a>

<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/16.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/16a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>

 <select onchange="doGTranslate(this);"><option value="">Select Language</option><option value="es|ar">Arabic</option><option value="es|zh-CN">Chinese (Simplified)</option><option value="es|zh-TW">Chinese (Traditional)</option><option value="es|hr">Croatian</option><option value="es|cs">Czech</option><option value="es|da">Danish</option><option value="es|nl">Dutch</option><option value="es|en">English</option><option value="es|et">Estonian</option><option value="es|fi">Finnish</option><option value="es|fr">French</option><option value="es|de">German</option><option value="es|el">Greek</option><option value="es|iw">Hebrew</option><option value="es|hi">Hindi</option><option value="es|hu">Hungarian</option><option value="es|id">Indonesian</option><option value="es|ga">Irish</option><option value="es|it">Italian</option><option value="es|ja">Japanese</option><option value="es|ko">Korean</option><option value="es|lv">Latvian</option><option value="es|lt">Lithuanian</option><option value="es|no">Norwegian</option><option value="es|fa">Persian</option><option value="es|pl">Polish</option><option value="es|pt">Portuguese</option><option value="es|ru">Russian</option><option value="es|sk">Slovak</option><option value="es|sl">Slovenian</option><option value="es|es">Spanish</option><option value="es|sv">Swedish</option><option value="es|th">Thai</option><option value="es|tr">Turkish</option><option value="es|uk">Ukrainian</option></select><div id="google_translate_element2"></div>
<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'es',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2">
</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>Tooltip - Up</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .tooltip {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .tooltip-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-tooltip {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .tooltip-up {
        position: absolute;
        top: 10px;
        right: -110px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">up pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
        tooltip.classList.add('tooltip-up');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>
<!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>Tooltip - Down</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .tooltip {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .tooltip-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-tooltip {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .tooltip-down {
        position: absolute;
        bottom: -12px;
        right: 70px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Down pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>
<!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>Tooltip - Left</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .tooltip {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .tooltip-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-tooltip {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .tooltip-left {
        position: absolute;
        left: -300px;
        top: 83px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">left pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
        tooltip.classList.add('tooltip-left');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>
<!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>Tooltip - Right</title>
  </head>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 20rem;
    }

    .action {
      position: relative;
      padding: 8.3rem 0;
    }

    .default-btn-container {
      display: grid;
      text-align: center;
      justify-content: center;
    }

    .default-btn {
      padding: 0.9rem 1.7rem;
      background-color: #ec4899;
      border: none;
      outline: none;
      border-radius: 4px;
      text-transform: uppercase;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
    }

    .tooltip {
      display: none;
      background-color: #db2777;
      padding: 15px 9px;
      gap: 15px;
      border-radius: 10px;
      width: 20rem;
      color: #fff;
    }

    .tooltip-title {
      text-transform: uppercase;
      font-weight: 600;
      color: rgb(202, 197, 197);
      border-bottom: 1px solid rgb(163, 161, 161);
      padding-bottom: 1rem;
    }

    .show-tooltip {
      display: grid;
      transition: display 0.1s ease-in-out;
    }

    .tooltip-right {
      position: absolute;
      right: -300px;
      top: 83px;
    }
  </style>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">right pink</button>
        </div>
        <div class="tooltip" id="tooltip">
          <div class="tooltip-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const tooltip = document.getElementById('tooltip');

      defaultButton.onmouseenter = () => {
        tooltip.classList.add('show-tooltip');
        tooltip.classList.add('tooltip-right');
      };

      defaultButton.onmouseout = () => {
        tooltip.classList.remove('show-tooltip');
      };
    </script>
  </body>
</html>
Provide instructions...
1
Clear all
Export to JSFiddle
/* calculate arterial hypertension severity */
var systolic = document.getElementById('systolic').value;
var diastolic = document.getElementById('diastolic').value;
var severity = document.getElementById('severity');
if (systolic < 120 && diastolic < 80) {
  severity.innerHTML = 'Normal';
} else if (systolic < 130 && diastolic < 80) {
  severity.innerHTML = 'Elevated';
} else if (systolic < 140 || diastolic < 90) {
  severity.innerHTML = 'Stage 1 Hypertension';
} else if (systolic < 180 || diastolic < 120) {
  severity.innerHTML = 'Stage 2 Hypertension';
} else {
  severity.innerHTML = 'Hypertensive Crisis';
}
video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>
      <embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif">
      
 </video>
<audio autoplay controls>
        <source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">

</audio>
const element = (
<div>
   <span>1</span>
   <span>2</span>
</div>
)

const childElem = React.Children.map(element.children,  child => {
   React.cloneElement(child, { className: "", ...child.props })
})

const parentElem = React.Children.only(element);

parentElem.children = childElem
<div class="tradingview-widget-container">
  <div id="tradingview_74048"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BITFINEX-IOTUSD/" rel="noopener" target="_blank"><span class="blue-text">IOTUSD Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "BINANCE:IOTAUSD",
  "interval": "D",
  "timezone": "Europe/Zurich",
  "theme": "Dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "studies": [
    "RSI@tv-basicstudies",
    "StochasticRSI@tv-basicstudies"
  ],
  "container_id": "tradingview_74048"
}
  );
  </script>
</div>
<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>
/* calcular la severidad del EPOC segun medición del VEF1 */
var VEF1 = prompt("Ingrese el VEF1");
var severidad = "";
if (VEF1 >= 80) {
  severidad = "Leve";
} else if (VEF1 >= 50 && VEF1 < 80) {
  severidad = "Moderado";
} else if (VEF1 >= 30 && VEF1 < 50) {
  severidad = "Severo";
} else if (VEF1 < 30) {
  severidad = "Muy Severo";
}
var resultado = document.createElement('div');
resultado.innerHTML = "La severidad del EPOC es: " + severidad;
document.body.appendChild(resultado);
/* calcular severidad de la obesidad segun OMS */
var peso = prompt("Ingrese su peso en kilogramos");
var altura = prompt("Ingrese su altura en metros");
var imc = peso / (altura * altura);
var resultado = document.createElement('div');
if (imc < 18.5) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es baja";
} else if (imc >= 18.5 && imc < 25) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es normal";
} else if (imc >= 25 && imc < 30) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es alta";
} else if (imc >= 30 && imc < 35) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es moderada";
} else if (imc >= 35 && imc < 40) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es severa";
} else if (imc >= 40) {
  resultado.innerHTML = "Su IMC es " + imc + " y su severidad es muy severa";
}
document.body.appendChild(resultado);
/* function to calculate the ideal weight from males and female */
function idealWeight(height, gender) {
  if (gender == 'male') {
    return (height - 100) * 0.9;
  } else {
    return (height - 100) * 0.85;
  }
}
/* if and else to shown image */
var image = document.createElement('img');
if (Math.random() > 0.5) {
  image.src = 'http://www.catgifpage.com/gifs/318.gif';
} else {
  image.src = 'http://www.catgifpage.com/gifs/320.gif';
}
document.body.appendChild(image);
function guardarDatos() {
  var nombre = document.getElementById('nombre').value;
  var apellido = document.getElementById('apellido').value;
  var edad = document.getElementById('edad').value;
  var datos = [nombre, apellido, edad];
  return datos;
}
/* mostrar valores de JSON files dentro de un html */
var json = {
  "name": "John",
  "age": 30,
  "cars": [
    { "name": "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
    { "name": "BMW", "models": ["320", "X3", "X5"] },
    { "name": "Fiat", "models": ["500", "Panda"] }
  ]
}
var text = "";
var i;
for (i = 0; i < json.cars.length; i++) {
  text += json.cars[i].name + "<br>";
}
document.getElementById("demo").innerHTML = text;
/* sumar values de 5 radiobutton */
var suma = 0;
var radios = document.getElementsByName('radio');
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    suma += parseInt(radios[i].value);
  }
}
/* sum the numeric values of 4 input text */
var sum = 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  sum += parseInt(inputs[i].value);
}
alert(sum)
/* create a bootstrap and javascript virtual AI assistant */
var bootstrap = document.createElement('link');
bootstrap.setAttribute('rel', 'stylesheet');
bootstrap.setAttribute('href', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
document.head.appendChild(bootstrap);
var jquery = document.createElement('script');
jquery.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jquery);
var bootstrapjs = document.createElement('script');
bootstrapjs.setAttribute('src', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
document.head.appendChild(bootstrapjs);
var assistant = document.createElement('div');
assistant.setAttribute('class', 'container');
assistant.setAttribute('id', 'assistant');
document.body.appendChild(assistant);
var assistant_header = document.createElement('div');
assistant_header.setAttribute('class', 'row');
assistant_header.setAttribute('id', 'assistant_header');
assistant.appendChild(assistant_header);
var assistant_header_text = document.createElement('div');
assistant_header_text.setAttribute('class', 'col-sm-8');
assistant_header_text.innerHTML = '<h1>Virtual Assistant</h1>';
assistant_header.appendChild(assistant_header_text);
var assistant_header_close = document.createElement('div');
assistant_header_close.setAttribute('class', 'col-sm-4');
assistant_header_close.innerHTML = '<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
assistant_header.appendChild(assistant_header_close);
var assistant_body = document.createElement('div');
assistant_body.setAttribute('class', 'row');
assistant_body.setAttribute('id', 'assistant_body');
assistant.appendChild(assistant_body);
var assistant_body_text = document.createElement('div');
assistant_body_text.setAttribute('class', 'col-sm-8');
assistant_body_text.innerHTML = '<p>Hello, I am your virtual assistant. How can I help you?</p>';
assistant_body.appendChild(assistant_body_text);
var assistant_body_input = document.createElement('div');
assistant_body_input.setAttribute('class', 'col-sm-4');
assistant_body_input.innerHTML = '<input type="text" class="form-control" id="assistant_input" placeholder="Enter text">';
assistant_body.appendChild(assistant_body_input);
var assistant_footer = document.createElement('div');
assistant_footer.setAttribute('class', 'row');
assistant_footer.setAttribute('id', 'assistant_footer');
assistant.appendChild(assistant_footer);
var assistant_footer_button = document.createElement('div');
assistant_footer_button.setAttribute('class', 'col-sm-12');
assistant_footer_button.innerHTML = '<button type="button" class="btn btn-default">Submit</button>';
assistant_footer.appendChild(assistant_footer_button);
/* create a function to search for medical information using google and display the information inside inner.html */
function search() {
  var search = document.getElementById('search').value;
  var url = "https://www.google.com/search?q=" + search;
  var win = window.open(url, '_blank');
  win.focus();
}
/* create text-to-speech and voice-text response to search the internet */
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';
speechSynthesis.speak(msg);
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  var interim_transcript = '';
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);
};
recognition.start();
/* create a function to calculate V02 based on maximum heart rate */
function calculateVO2(maxHR) {
  return (maxHR - 50) * 0.5;
}
/* create a function to calculate the bode index in copd */
function bodeIndex(FEV1, mMRC, 6MWT) {
  var bodeIndex = 0;
  if (FEV1 < 50) {
    bodeIndex += 4;
  } else if (FEV1 < 60) {
    bodeIndex += 3;
  } else if (FEV1 < 80) {
    bodeIndex += 2;
  } else if (FEV1 < 90) {
    bodeIndex += 1;
  }
  if (mMRC >= 2) {
    bodeIndex += 4;
  } else if (mMRC == 1) {
    bodeIndex += 3;
  }
  if (6MWT < 350) {
    bodeIndex += 4;
  } else if (6MWT < 450) {
    bodeIndex += 3;
  } else if (6MWT < 550) {
    bodeIndex += 2;
  } else if (6MWT < 650) {
    bodeIndex += 1;
  }
  return bodeIndex;
}
/* create a function to search pubmed and display it in an html div */
function searchPubmed(query) {
  var url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=pubmed&term=' + query + '&retmax=10&retmode=json';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      var response = JSON.parse(xhr.responseText);
      var ids = response.esearchresult.idlist;
      var div = document.createElement('div');
      div.innerHTML = '<h2>Pubmed search results for "' + query + '"</h2>';
      for (var i = 0; i < ids.length; i++) {
        div.innerHTML += '<a href="https://www.ncbi.nlm.nih.gov/pubmed/' + ids[i] + '">' + ids[i] + '</a><br>';
      }
      document.body.appendChild(div);
    }
  };
  xhr.send();
}
/* create a smart voice assistant in spanish that can accept questions and answers from wikipedia */
var assistant = new Annyang();
var commands = {
  'hola': function() {
    alert('Hola, ¿en qué puedo ayudarte?');
  },
  '*question': function(question) {
    var url = 'https://es.wikipedia.org/w/api.php?action=opensearch&search=' + question + '&format=json&callback=?';
    $.ajax({
      type: 'GET',
      url: url,
      async: false,
      dataType: 'json',
      success: function(data) {
        alert(data[2][0]);
      },
      error: function(errorMessage) {
        alert('Error');
      }
    });
  }
};
assistant.addCommands(commands);
assistant.start();
/* create a function that searches for medical images on the internet */
function searchForMedicalImages(searchTerm) {
  var searchUrl = 'https://www.google.com/search?tbm=isch&q=' + searchTerm;
  window.location.href = searchUrl;
}
/* create a function that searches internal files of a website */
function searchFiles(query) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.github.com/search/code?q=' + query, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      var results = JSON.parse(xhr.responseText);
      var resultsDiv = document.createElement('div');
      resultsDiv.innerHTML = '<h2>Results</h2>';
      for (var i = 0; i < results.items.length; i++) {
        var result = results.items[i];
        var resultDiv = document.createElement('div');
        resultDiv.innerHTML = '<a href="' + result.html_url + '">' + result.html_url + '</a>';
        resultsDiv.appendChild(resultDiv);
      }
      document.body.appendChild(resultsDiv);
    }
  };
  xhr.send();
}
/* create an alexa like voice assistant */
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  var interim_transcript = '';
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);
};
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {
  return s.replace(first_char, function(m) { return m.toUpperCase(); });
}
recognition.start();
/* create AI assistant with voice commands to search medical paper */
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
  var interim_transcript = '';
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);
};
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {
  return s.replace(first_char, function(m) { return m.toUpperCase(); });
}
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  start_button.style.display = 'inline-block';
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.onstart = function() {
    recognizing = true;
    showInfo('info_speak_now');
    start_img.src = 'mic-animate.gif';
  };
  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = 'mic.gif';
      showInfo('info_no_speech');
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      start_img.src = 'mic.gif';
      showInfo('info_no_microphone');
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        showInfo('info_blocked');
      } else {
        showInfo('info_denied');
      }
      ignore_onend = true;
    }
  };
  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
      return;
    }
    start_img.src = 'mic.gif';
    if (!final_transcript) {
      showInfo('info_start');
      return;
    }
    showInfo('');
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
      var range = document.createRange();
      range.selectNode(document.getElementById('final_span'));
      window.getSelection().addRange(range);
    }
  };
  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
  };
}
function upgrade() {
  start_button.style.visibility = 'hidden';
  showInfo('info_upgrade');
}
var two_line = /\n\n/g;
var one_line
/* write a AI assistant for search medical information in internet */
var search = document.createElement('div');
search.innerHTML = '<input type="text" id="search" placeholder="Search...">';
document.body.appendChild(search);
var search_button = document.createElement('div');
search_button.innerHTML = '<button id="search_button">Search</button>';
document.body.appendChild(search_button);
var search_result = document.createElement('div');
search_result.innerHTML = '<div id="search_result"></div>';
document.body.appendChild(search_result);
var search_button = document.getElementById('search_button');
search_button.onclick = function() {
  var search_text = document.getElementById('search').value;
  var search_result = document.getElementById('search_result');
  search_result.innerHTML = '<p>' + search_text + '</p>';
};
/* write a function to search data from different sources in internet */
function search(query) {
  var url = 'https://www.google.com/search?q=' + encodeURIComponent(query);
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(xhr.responseText, 'text/html');
      var results = doc.querySelectorAll('h3.r a');
      for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var url = result.getAttribute('href');
        var title = result.textContent;
        var p = document.createElement('p');
        var a = document.createElement('a');
        a.textContent = title;
        a.setAttribute('href', url);
        p.appendChild(a);
        document.body.appendChild(p);
      }
    }
  };
  xhr.send();
}
/* write a function tha sum the choice of checkbox controls */
function sumChecked() {
  var sum = 0;
  var checkboxes = document.getElementsByTagName('input');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox' && checkboxes[i].checked) {
      sum += parseInt(checkboxes[i].value);
    }
  }
  return sum;
}
/* write a fuction that sum the value of a select control */
function sumSelect() {
  var sum = 0;
  var select = document.getElementById('select');
  for (var i = 0; i < select.options.length; i++) {
    sum += parseInt(select.options[i].value);
  }
  return sum;
}
<!DOCTYPE html>
<html>
<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>
​
​
<meta name="description" content="Author: A.N. Author,
    Illustrator: P. Picture, Category: Books, Price: $17.99,
    Length: 784 pages">
<!DOCTYPE html>
<html>
<head>
<script>
 
  var version = 0;
  
function saveEdits() {
  
  var editElem = document.getElementById("edit");
  version = localStorage.getItem("v");
  var versionTxt = document.createTextNode("Version " + localStorage.getItem("v"))
  document.body.appendChild(versionTxt);   
  version++
  
  localStorage.setItem("v", version);
  localStorage.setItem("Elm", editElem.innerHTML);
  
  
  
  document.getElementById("update").innerHTML="Edits saved!";
}

 var editedElem = document.getElementById("edit");
 var edits = localStorage.getItem("Elm");
 editedElem.innerHTML = edits;
 

</script>

</head> 

<body>
  <div id="edit" contenteditable="true">
 Edit me
</div>

<button onclick="saveEdits()">save edits</button>
<div id="update"> - Edit the text and click to save for next time</div>

</body>

</html>
<!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>Selectors Demo</title>
    <link rel="stylesheet" href="selectors.css">
</head>

<body>

    <div class="container">
        <p class="para p1">Para 1</p>
        <p class="para p2">Para 2</p>
        <li class="items li-one">One</li>
        <li class="items li-two">Two</li>
        <li class="items li-three">Three</li>
        <li class="items li-four">Four</li>
        <p class="para p1">Para 1</p>
        <p class="para p2">Para 2</p>
        <p class="para p3">Para 3</p>
        <a href="">Link 1</a>
        <span class="span1">Span 1</span>
        <li class="items li-four">Four</li>
    </div>

</body>

</html>
<a class="btn btn-primary smooth-scroll-link" href="#contactScroll" >
  <span class="js-cta-text-element"> Contact an ROI Expert Today</span>
</a>
//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>

//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}


//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}
function degreesToRadians(degrees) {
  return (degrees * Math.PI) / 180
}

function distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
  const earthRadiusKm = 6371

  const dLat = degreesToRadians(lat2 - lat1)
  const dLon = degreesToRadians(lon2 - lon1)

  lat1 = degreesToRadians(lat1)
  lat2 = degreesToRadians(lat2)

  let a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2)
  let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  return earthRadiusKm * c
}

console.log(
  distanceInKmBetweenEarthCoordinates(
    6.5361348,
    3.3913253,
    6.5362509,
    3.3913711
  )
)
const findLocation = () => {
  const status = document.querySelectorAll('.status')

  const success = (position) => {
    console.log(position)
  }

  const error = () => {
    status.textContent = 'unable to get location'
  }

  navigator.geolocation.getCurrentPosition(success, error, {
    maximumAge: '10000',
    enableHighAccuracy: true,
  })
}

window.addEventListener('load', findLocation)
<?php  

    // PAGINATION CODE

    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

    $mainarray = array(

        'post_type' => array('post'),

        'post_status' => array('publish'),

        'orderby' => 'date',

        'order' => 'DESC',

        'posts_per_page' => 6,

        'paged'       => $paged,

    );

    $q = new WP_Query($mainarray); 

?>

​

    <div class="row custom-blog-main-wrapper">

        <?php while ($q->have_posts()) : $q->the_post(); ?>

        <div class="col-md-4 col-sm-6">

            <div class="blog-news-wrapper">

                <div class="blog-image">

                    <a href="<?php the_permalink(); ?>">

                        <?php if (has_post_thumbnail()):

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(),'large', true);

?>

                        <img src="<?php echo $thumbnail[0]; ?>" alt="Picture" class="featured-image">

                        <?php else: ?>

                        <img src="<?php echo site_url('PATH'); ?>" alt="Picture" class="featured-image">

                        <?php endif; ?>

                    </a>

                </div>

                <div class="blog-content">

                    <p class="blog-date">

                        <?php echo get_the_date('M d Y'); ?>

                    </p>

                    <h3 class="blog-title">

                        <a href="<?php the_permalink(); ?>">

                            <?php the_title(); ?>

                        </a>

                    </h3>

                    <div class="blog-inner">

                        <p class="blog-text">

                            <?php if(!empty(get_the_excerpt())){

                                echo strip_tags(substr(get_the_excerpt(), 0, 200));

                            }

                            else{
//HTML
<ul className='card'>
   <li>
    <img src={avatar_url} alt={login} />
      <div>
      <h4>{login}</h4>
 		<a href={html_url}>profile</a>
 	 </div>
  </li>
</ul>


.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
}

.card li {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--clr-white);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  text-align: left;
}
<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Sign Up
  </div>
  
  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Sign Up
   </div>
</div>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title></title>
</head>

<body>

</body>

</html>
<p><a href="https://flybubble.com/blog/final-product-checks">Final product checks </a> have been completed so it's ready to buy and fly.</p>
/**
 * Enable smooth scrolling on the whole document
 */
html {
	scroll-behavior: smooth;
}


/** Animations can cause issues for users who suffer from motion sickness and other conditions.
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
<div class="dropzone dropzone-multiple" data-toggle="dropzone" data-dropzone-multiple data-dropzone-url="http://">
    <div class="fallback">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="dropzoneMultipleUpload" multiple>
            <label class="custom-file-label" for="dropzoneMultipleUpload">Choose file</label>
        </div>
    </div>
    <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush">
        <li class="list-group-item px-0">
            <div class="row align-items-center">
                <div class="col-auto">
                    <div class="avatar">
                        <img class="avatar-img rounded" src="..." alt="..." data-dz-thumbnail>
                    </div>
                </div>
                <div class="col ml--3">
                    <h4 class="mb-1" data-dz-name>...</h4>
                    <p class="small text-muted mb-0" data-dz-size>...</p>
                </div>
                <div class="col-auto">
                    <div class="dropdown">
                        <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="#" class="dropdown-item" data-dz-remove>
                                Remove
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
- 👋 Hi, I’m @murufi

- 👀 I’m interested in ...

- 🌱 I’m currently learning ...

- 💞️ I’m looking to collaborate on ...

- 📫 How to reach me ...

​

<!---

murufi/murufi is a ✨ special ✨ repository because its `README.md` (this file) appears on your GitHub profile.

You can click the Preview link to take a look at your changes.

--->

​
<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="0"
      class="active"
      aria-current="true"
      aria-label="Slide 1"
    ></button>
    <button
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="1"
      aria-label="Slide 2"
    ></button>
    <button
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="2"
      aria-label="Slide 3"
    ></button>
  </div>

  <!-- Inner -->
  <div class="carousel-inner">
    <!-- Single item -->
    <div class="carousel-item active">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="Sunset Over the City"/>
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="Canyon at Nigh"/>
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="Cliff Above a Stormy Sea"/>
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <!-- Inner -->

  <!-- Controls -->
  <button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- Carousel wrapper -->
<body>
  <h1>Adding 'a' and 'b'</h1>

  a: <input type="number" name="a" id="a"><br> b: <input type="number" name="b" id="b"><br>
  <button onclick="add(document.getElementById('a').value,document.getElementById('b').value)">Add</button>

  <script>
    function add(a, b) {
      var sum = parseInt(a, 10) + parseInt(b, 10);
      alert(sum);
    }
  </script>
</body>



OTRO EJEMPLO


<script>
function eq(value) {
  console.log(value);
  ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
}
</script>

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'>
</form>



OTRO EJEMPLO

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var m = document.getElementById("a").value;
    var n = document.getElementById("b").value;
    var sum = m + n;
    alert(sum);
    
    Var sum = parseFloat(a)+parseFloat (b); 
  }
</script>
</body>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>
<select name="state_name" class="form-control" id="checkout-state" required="">
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>



</select>

Andaman and Nicobar Islands
Andhra Pradesh
Arunachal Pradesh
Assam
Bihar
Chandigarh
Chhattisgarh
Dadra and Nagar Haveli
Daman and Diu
Delhi
Goa
Gujarat
Haryana
Himachal Pradesh
Jammu and Kashmir
Jharkhand
Karnataka
Kerala
Lakshadweep
Madhya Pradesh
Maharashtra
Manipur
Meghalaya
Mizoram
Nagaland
Orissa
Pondicherry
Punjab
Rajasthan
Sikkim
Tamil Nadu
Telangana
Tripura
Uttarakhand
Uttar Pradesh
West Bengal
<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="Add to cart" class="btn add-to__cart" />
          </form>

.col-button .btn.add-to__cart {  padding: 8px 10px;
font-size: 14px;
text-transform: capitalize;
letter-spacing: 1px;
margin-left:10px;
/*     margin-right:10px; */
/*     margin-top: 15px; */
}
[data-type_product_capitalize="true"] .grid-product__title {
min-height:50px;
}

@media only screen and (max-width:480px){
[data-type_product_capitalize="true"] .grid-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="{% if product.variants.first.available%}Add to cart{% else %}Sold Out{% endif%}" class="btn add-to__cart"" {% unless product.variants.first.available %}disabled{% endunless %} />
          </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <a class="terms" href="javascript:void(0)" onclick="$('#modalTerms').modal('show');">This works</a>

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkTerms" name="checkTerms">
        <label class="custom-control-label" for="checkTerms">I agree with <a class="terms" href="javascript:void(0)" onclick="$('#modalTerms').modal('show');">terms and conditions</a></label>
    </div>
</div>


<div class="modal fade" id="modalTerms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Checkbox is checked
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
var header = $(".header");
var scrollChange = 1;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= scrollChange) {
        header.addClass('bg-red');
    } else {
        header.removeClass("bg-red");
    }
});
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3783.910308083909!2d-97.39088478571517!3d18.487721487428114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c5bcd5ee8ba413%3A0x7919bdf4dfd04b6!2sInstituto%20Educares!5e0!3m2!1ses-419!2smx!4v1667271208223!5m2!1ses-419!2smx" width="550" height="1000" style="position:relative; top: -1050px; left: 800px;border-radius: 50px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
/* Se personaliza margenes del mapa */



/* Boton de Enviar
<button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button>

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Cargando"></div> */

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" padding: 5px 5px alt="Cargando"></div>


.wpforms-form input[type=submit],  .wpforms-form button[type=submit] {    
  color: #fff !important;
  background-color: #FAF243 !important; 
  border-radius: 50px !important;
  max-width: 95% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 25px !important;
	border-radius: 50px !important;
    padding: 15px !important;
    border-style: none !important;
    color: #fff !important;    
    margin: 0px 150px !important;
/* Se personaliza el botón de enviar:  1.- El color se estable en  */ }


.wpf-color-fondo-formulario {
border-radius: 50px !important;
 background: #85a441 !IMPORTANT;
padding: 2.5% 2.5% !IMPORTANT;
margin: 20px 650px 20px 0px !important;
}
 

  /* Se personaliza:  1.- SE REDONDEA LAS ESQUINAS DEL FORMULARIO  A 50PX 
  					  2.- SE ESTABLECE EL COLOR DE FONDO A :#85a441
                      3.- EL ESPACIO ENTRE EL CONTENDER Y SU CONTENIDO
                      4.- El MARGEN IZQUIERDO DEL FORMULARIO SE ESTABLECE 650PX*/ 
  
}

  .wpforms-form .wpforms-field-label {

font-size: 35px !IMPORTANT;
line-height: 2 !important;
margin: 5px 0px 5px 0px !IMPORTANT;

  /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/ 
  /*float: none;
padding: 5%;
display: block;
font-weight: 700;*/
}


.wpforms-form .wpforms-field {
padding: 20px 40PX !IMPORTANT;
clear: both;
 /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/
}

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large {

  	max-width: 100% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 20px !important;
	border-radius: 50px !important;

/* Se personaliza:  	1.- ...
  					  	2.- ...
                      	3.- ...*/
}


.wpforms-form .choices__inner {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/


}

.wpforms-form .wpforms-valid {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/
}


/*.wpforms-form .wpforms-valid {
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #2D4E5E !important;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;
border-radius: 50px !important;
}



.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
border-radius: 100%!important;
padding: 10px 0;
clear: both;
}

*/
<form-basic class="search-no-decoration form-class">
                    <div class="input-group" id="search-input">
                        <span class="input-group-append">
                            <h2 class="border-right-0 border pl-3 border-radius-grey-13-left-top-bottom">
                                <x-icon classicon="fill-grey-3" type="search" />
                            </h2>
                        </span>
                        <input name="search" id="input-search" placeholder="Cari nama siswa..."
                            class="form-control py-2 border-left-0 border-right-0 border input-search border-radius-grey-13-right-top-bottom"
                            type="search">
                        <span class="input-group-append d-none" id="close-search">
                            <h2 class="border-left-0 border pr-3 border-radius-grey-13-right-top-bottom"
                                id="close-search">
                                <x-icon classicon="fill-grey-3" type="close" />
                            </h2>
                        </span>
                    </div>
                </form-basic>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="action-card">
    <div class="card-front">
      <div class="flip-icon"><img src="https://supportingdev.wpengine.com/wp-content/uploads/2022/01/ss-hex-primary.svg"></div>
        <h3 class="action-title">Essentials</h3>
        <p class="front-content">Peace of mind that your books are current and accurate</p>
        <span class="card-arrow"></span>
    </div>
    <div class="card-back">
        <div class="action-content">
            <ul>
                <li>Account management</li>
                <li>Transaction processing</li>
                <li>Month-end close</li>
            </ul>
        </div>
    </div>
</div>
[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='default' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_margin='0px' custom_margin_sync='true' custom_arrow_bg='' id='' color='main_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0' av_uid='av-jx1rbsa4' custom_class='']
[av_two_fifth first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' title_attr='' alt_attr='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-1nh0e']
[av_iconlist position='left' iconlist_styling='' custom_title_size='20' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' custom_title='#666666' custom_content='#333333' color='custom' custom_bg='#b43131' custom_font='' custom_border='' animation='' alb_description='' id='' custom_class='contact-iconlist no-uppercase' av_uid='av-jx1rm2da' admin_preview_bg='']
[av_iconlist_item title='Address' icon='ue842' font='entypo-fontello' heading_tag='' heading_class='' link='' linktarget='' linkelement=''][/av_iconlist_item]
[av_iconlist_item title='Mail' icon='ue805' font='entypo-fontello' heading_tag='' heading_class='' link='' linktarget='' linkelement=''][/av_iconlist_item]
[av_iconlist_item title='Phone' icon='ue8ac' font='entypo-fontello' heading_tag='' heading_class='' link='' linktarget='' linkelement=''][/av_iconlist_item]
[/av_iconlist]
[/av_two_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' title_attr='' alt_attr='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-p4we']
[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='contact-form primary-form' av_uid='av-jx1qz3sg' admin_preview_bg='']
[gravityform id="1" title="false" description="false" ajax="true" tabindex="6564"]
[/av_textblock]
[/av_three_fifth][/av_section][av_layout_row border='' min_height_percent='' min_height_pc='25' min_height='0' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-11ugm']
[av_cell_one_full vertical_align='top' padding='0' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-jx1rrlsf' custom_class='']
[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' av_uid='av-jx1rtppa']
<div style="margin-bottom: -7px">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3316.3136755729156!2d-84.36723968479215!3d33.778397080681245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f50417f3684593%3A0x829eabad1a831d2!2s665+Pylant+St+NE%2C+Atlanta%2C+GA+30306%2C+USA!5e0!3m2!1sen!2sbd!4v1560860123276!5m2!1sen!2sbd" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
[/av_codeblock]
[/av_cell_one_full][/av_layout_row]
<a class="twitter-timeline" data-height="600" href="https://twitter.com/JOYNAdvisors?ref_src=twsrc%5Etfw">Tweets by JOYN</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div class="location-schema">
	<div itemscope="" itemtype="http://schema.org/LocalBusiness">
		<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
			<span itemprop="streetAddress">1335 A Canton Road</span><br>
			<span itemprop="addressLocality">Marietta</span>, <span itemprop="addressRegion">Georgia</span> <span itemprop="postalCode">30066</span>
		</div>
		<strong>Phone</strong> <span itemprop="telephone"><a href="tel:#">#</a></span>
	</div>
</div>
<!-- function.php -->

// Magnific Popup - Inline Content Enabler
function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
        $('.inline_popup').magnificPopup({
          type:'inline',
          midClick: true 
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');

<!-- In the Page -->

<!-- Button Code -->
<div class="popup-button">
	<a href="#" data-mfp-src="#popup_content" class="inline_popup ">
		<span class="link-title">Read More</span>
	</a>
</div>

<!-- POPUP Content -->
<div id="popup_content" class="white-popup mfp-hide popup-content">
	<div class="popup-inner">
		#########
	</div>
</div>
<div class="hero-button open-popup-link">
    <a href="javascript.void(0)" data-mfp-src="#get_started">Get Started</a>
</div>
const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

// Only change code below this line
// const half = (stats) => (stats.max + stats.min) / 2.0;

const half = ({max,min}) => ((max + min) / 2.0);

console.log(half(stats));
const magic = () => new Date();
<details>
  <summary>Example</summary>
  Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>


//Build in transition smooothly
details {
  transition: height 1s ease;
  overflow: hidden;
}

details:not([open]) {
  height: 1.25em;
}

details[open] {
  height: 2.5em;
}
function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}
 <!-- A SIMPLE SNAKE GAME MADE BY HTML AND CSS -->

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  canvas {
    border: 1px solid white;
  }
  </style>
</head>
<body>
<canvas width="400" height="400" id="game"></canvas>
<script>
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

var grid = 16;
var count = 0;
  
var snake = {
  x: 160,
  y: 160,
  
  // snake velocity. moves one grid length every frame in either the x or y direction
  dx: grid,
  dy: 0,
  
  // keep track of all grids the snake body occupies
  cells: [],
  
  // length of the snake. grows when eating an apple
  maxCells: 4
};
var apple = {
  x: 320,
  y: 320
};

// get random whole numbers in a specific range
// @see https://stackoverflow.com/a/1527820/2124254
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

// game loop
function loop() {
  requestAnimationFrame(loop);

  // slow game loop to 15 fps instead of 60 (60/15 = 4)
  if (++count < 4) {
    return;
  }

  count = 0;
  context.clearRect(0,0,canvas.width,canvas.height);

  // move snake by it's velocity
  snake.x += snake.dx;
  snake.y += snake.dy;

  // wrap snake position horizontally on edge of screen
  if (snake.x < 0) {
    snake.x = canvas.width - grid;
  }
  else if (snake.x >= canvas.width) {
    snake.x = 0;
  }
  
  // wrap snake position vertically on edge of screen
  if (snake.y < 0) {
    snake.y = canvas.height - grid;
  }
  else if (snake.y >= canvas.height) {
    snake.y = 0;
  }

  // keep track of where snake has been. front of the array is always the head
  snake.cells.unshift({x: snake.x, y: snake.y});

  // remove cells as we move away from them
  if (snake.cells.length > snake.maxCells) {
    snake.cells.pop();
  }

  // draw apple
  context.fillStyle = 'red';
  context.fillRect(apple.x, apple.y, grid-1, grid-1);

  // draw snake one cell at a time
  context.fillStyle = 'green';
  snake.cells.forEach(function(cell, index) {
    
    // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
    context.fillRect(cell.x, cell.y, grid-1, grid-1);  

    // snake ate apple
    if (cell.x === apple.x && cell.y === apple.y) {
      snake.maxCells++;

      // canvas is 400x400 which is 25x25 grids 
      apple.x = getRandomInt(0, 25) * grid;
      apple.y = getRandomInt(0, 25) * grid;
    }

    // check collision with all cells after this one (modified bubble sort)
    for (var i = index + 1; i < snake.cells.length; i++) {
      
      // snake occupies same space as a body part. reset game
      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
        snake.x = 160;
        snake.y = 160;
        snake.cells = [];
        snake.maxCells = 4;
        snake.dx = grid;
        snake.dy = 0;

        apple.x = getRandomInt(0, 25) * grid;
        apple.y = getRandomInt(0, 25) * grid;
      }
    }
  });
}

// listen to keyboard events to move the snake
document.addEventListener('keydown', function(e) {
  // prevent snake from backtracking on itself by checking that it's 
  // not already moving on the same axis (pressing left while moving
  // left won't do anything, and pressing right while moving left
  // shouldn't let you collide with your own body)
  
  // left arrow key
  if (e.which === 37 && snake.dx === 0) {
    snake.dx = -grid;
    snake.dy = 0;
  }
  // up arrow key
  else if (e.which === 38 && snake.dy === 0) {
    snake.dy = -grid;
    snake.dx = 0;
  }
  // right arrow key
  else if (e.which === 39 && snake.dx === 0) {
    snake.dx = grid;
    snake.dy = 0;
  }
  // down arrow key
  else if (e.which === 40 && snake.dy === 0) {
    snake.dy = grid;
    snake.dx = 0;
  }
});

// start the game
requestAnimationFrame(loop);
</script>
</body>
</html>
{% extends "base.html"%}{%block title %}Signup{%endblock%}
{%block content%} 
<form method="POST"> 
  
    <h3 align="center">Signup</h3>
    <div class="form-group">
  
    <label for="email">Email address</label>
    <input type="text" class="form-control" id="email"  name="email" placeholder="Enter email">

<label for="firstname">First Name</label>
    <input type="text" class="form-control" id="firstname"  name="firstname" placeholder="Enter First Name">
<label for="password1">Password</label>
    <input type="text" class="form-control" id="password1"  name="password1" placeholder="Password">

<label for="password2">Password</label>
    <input type="text" class="form-control" id="password2"  name="password2" placeholder="Password">
</form>
<br>
<button type="button" class="btn btn-primary">Submit</button>

{%endblock%}	
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>To-do</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbar"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbar">
          <div class="navbar-nav">
            <a class="nav-item nav-link" id="home" href="/">Home</a>
          <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
            <a class="nav-item nav-link" id="login" href="/login">Login</a>
          <a class="nav-item nav-link" id="signup" href="/signup">Sign Up</a>
          </div></div></nav>
          <div class="contain">
            {%block content %}
            {%endblock%}
          
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"
        integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
        crossorigin="anonymous"></script>
</body>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio0" src="sound0.mp3"></audio>
<input type="button" value="Play" onclick="onplayssoun('sound0.mp3');">

<audio id="audio1" src="sound1.mp3"></audio>
<input type="button" value="Play" onclick="onplayssoun('sound1.mp3');">
// componente html
<!-- Imagen -->
  <el-form-item 
    label="Imagen" 
    prop="imagen"
  >
  <el-upload 
    class="avatar-uploader" 
    action="" 
    drag 
    :auto-upload="false" 
    :show-file-list="false"
    :multiple="false" 
    :on-change="onUploadChange" 
    accept=".jpeg, .png, .jpg, .gif, .svg"
   >
     <img 
        v-if="imageUrl" 
        :src="imageUrl" 
        class="avatar" 
    />
    <div 
    	v-else 
   	 	class="el-upload__text"
    >
      Suelta tus archivos aquí o
        <em>haz clic para cargar</em>
    	<p>Sólo archivos .jpeg, .png, .jpg, .gif, .svg</p>
    	</div>
    	<!-- <el-icon v-else class="avatar-uploader-icon"></el-icon> -->
   </el-upload>
</el-form-item>

// codigo js
onUploadChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.imagenNueva = file.raw;
    },

data(){
      imageUrl: null,
}
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="https://trad-365.bubbleapps.io/index" > </iframe>
<embed
    src="riding-with-the-king.jpg"
    href="songs/01-riding-with-the-king.mp3"
    artworkdata="riding-with-the-king.jpg"
    type="audio/x-mp3"
    target="myself"
    scale="1"
    controller="false"
    loop="false"
    autoplay="false"
    allowembedtagoverrides="true"
    height="500"
    width="500"
    qtnext1="<songs/02 Ten Long Years.mp3> T<myself> E<controller=true autoplay=true loop=false>" 
    qtnext2="<songs/03 Key to the Highway.mp3> T<myself>" 
    qtnext3="<songs/04 Marry You.mp3> T<myself>" 
    qtnext4="<songs/05 Three O'Clock Blues.mp3> T<myself>"
    qtnext5="<songs/06 Help the Poor.mp3> T<myself>"
    qtnext6="<songs/07 I Wanna Be.mp3> T<myself>"
    qtnext7="<songs/08 Worried Life Blues.mp3> T<myself>"
    qtnext8="<songs/09 Days of Old.mp3> T<myself>"
    qtnext9="<songs/10 When My Heart Beats Like a Hammer.mp3> T<myself>"
    qtnext10="<songs/11 Hold on I'm Coming.mp3> T<myself>"
    qtnext11="<songs/12 Come Rain or Come Shine.mp3> T<myself>"
>
<h2>Availability &amp; order info</h2>
<p><span style="font-size: 16px;">Update DD/MM/YYYY: Last update from _BRAND_ is "_ADD_TEXT_HERE_"</span></p>
<!-- font size is included here to match CSS size in Short description, remove font size code if using outside of short description as other areas of product page uses smaller font -->


<h2>Pre-orders</h2>
<p><span style="font-size: 16px;">We are accepting pre-orders for this model. Please <a href="mailto:crew@flybubble.com">email us</a> if you have any questions. Alternatively you can pay our <a href="https://flybubble.com/product-deposit">Product Deposit</a> to get your order in the production queue as soon as possible.</span></p>
<blockquote> <p><strong>Availability information.</strong> DD/MM/YYY: TEXT_OF_INFORMATION_CONFIRMED_BY_SUPPLIER</p>

<p>We will update this info when we receive updates.</p>

<p>To order yours, contact us or order through our site and we'll be in touch.</p> </blockquote> 




<!--Notes on above code:

DATE: date info given; format DD/MM/YYYY.

INFO: Based on the info given by supplier e.g. current status and expected availability timeframe e.g. time of month and year, time of year, season e.g. "First deliveries expected early January 2020" or "First deliveries of size M expected mid Spring 2020. Sizes S and L expected late Spring 2020. Other sizes to be confirmed." etc.

 

Example HTML:

 

 

<blockquote>

<p><strong>Availability.</strong> 01/10/2019: BGD info: "Size M has passed flight and load test and will shortly be fully certified. XS, S, ML, L sizes will soon follow." which means that no size of the CURE 2 has yet fully completed certification. Size M is expected to be fully certified "soon". All other sizes are 'pending' with no confirmed completion date or ETA. We will update this info when we receive updates.</p>

<p>To preorder yours, contact us or order through our site and we'll be in touch.</p>

</blockquote>

 

Example on website:

 

Availability. 01/10/2019: BGD info: "Size M has passed flight and load test and will shortly be fully certified. XS, S, ML, L sizes will soon follow." which means that no size of the CURE 2 has yet fully completed certification. Size M is expected to be fully certified "soon". All other sizes are 'pending' with no confirmed completion date or ETA. We will update this info when we receive updates.

 




To preorder yours, contact us or order through our site and we'll be in touch.

-->


<!-- TOO LONG AND BORING ;-) DON'T USE ANY MORE -->

<h3>About Ozone custom colours</h3>
<p>You can customize the colours for your wing for a fee. Please note that because the glider will be built specifically for you in the Ozone factory, payment must be received before production can begin. Once you've decided and are ready to order make a note of the Ozone colour code send it to Flybubble.</p>
<h3>Ozone fabric colour and colour resistance</h3>
<p>Please be aware that the colour you see on your screen may not accurately represent the actual fabric colour. Given the wide variance in monitor calibration and the fabric appearance in different light and colour combinations, it is impossible to perfectly represent fabric colour on the screen. If you have any doubts about the colours, look at photos of various wings on our website to see them in different light and colour combinations.</p>
<p>All of the fabric that Ozone use undergoes testing to ensure colourfastness, mechanical stability, porosity, and general longevity before they put it into production. Once the fabric is in production, it is inspected upon arrival in the factory. Fabric which does not pass the quality control standards is returned to the manufacturer. All of the colours that Ozone manufacture score between 4 and 5 on a scale of 1-5 for longevity, with 5 being the highest rating.</p>

<!-- TOO LONG AND BORING ;-) DON'T USE ANY MORE -->
<p>_MAKE_ _MODEL_ size _SIZE_ colour _COLOUR_ for sale in brand new condition. Includes a full manufacturer's warranty and service life. <a href="https://flybubble.com/blog/final-product-checks" title="What are final product checks?">Final product checks</a> have been completed so it's ready to buy and fly.</p>


<!-- INSTRUCTIONS
Delete Final product checks line if they have not been done on the wing
-->
<li>Service report: <a href="https://flybubble.com/pdfs/reports/PASTE_FULL_PDF_FILENAME_HERE" title="Service report">Download</a></li>
<li>Record of inspection: <a href="https://flybubble.com/pdfs/reports/PASTE_FULL_PDF_FILENAME_HERE" title="Record of inspection">Download</a></li>
<blockquote>
<h2><strong>Stock clearance sale</strong></h2>
<p>Hurry! We only have one left of this size and colour now on sale!<br />
Since this item is brand new it still has a full warranty and service life. We've completed pro dealer checks on this wing. It's ready to buy and fly.<br />
<br />
Subject to availability. To order contact us or order through our site and we'll be in touch.<br />
Images are for illustration purposes only, not of the specific item being sold.</p>
</blockquote>


<!--
INSTRUCTIONS
Delete the following from above if not true or unsure:
  -We've completed pro dealer checks on this wing. It's ready to buy and fly.
  -Subject to availability.
-->
<h2>UK CAA EC rebate scheme?</h2>
<p>This device is eligible for the <a href="https://flybubble.com/blog/uk-caa-ec-rebate-scheme" target="_blank" rel="noopener">UK CAA EC rebate scheme (save £250 if AOK)</a>.</p>
<body>
  <h1 title="the message">Hello World</h1>
  <h2 title="the sender">From Nathan</h2>
</body>
Left
<a href="/shipping-stock">Free UK Delivery Over £100</a>

Middle 
<a href="https://www.reviews.co.uk/company-reviews/store/flybubble" target="_blank" rel="noopener noreferrer">Excellent Customer Reviews</a>

Right
<a href="/about#best-value">Package Deals & Part Exchange</a>
<p style="text-align: left;"><span style="font-size: small;">
Browse the list below to find all the products from your favourite brand</p>
<p>{{widget type="Amasty\ShopbyBrand\Block\Widget\BrandSlider" template="widget/brand_list/slider.phtml"}}</p>
<p>{{widget type="Amasty\ShopbyBrand\Block\Widget\BrandList" columns="3" template="widget/brand_list/index.phtml"}}</p>
// Javascript
async function signupFormHandler(event) {
  event.preventDefault();
  const username = document.querySelector('#username-signup').value.trim();
  const email = document.querySelector('#email-signup').value.trim();
  const password = document.querySelector('#password-signup').value.trim();
  if (username && email && password) {
    const response = await fetch('/api/users', {
      method: 'post',
      body: JSON.stringify({
        username,
        email,
        password,
      }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (response.ok) {
      console.log(response);
    } else {
      alert(response.statusText);
    }
  }
}
async function loginFormHandler(event) {
  event.preventDefault();
  const email = document.querySelector('#email-signup').value.trim();
  const password = document.querySelector('#password-signup').value.trim();
  if (email && password) {
    const response = await fetch('/api/users/login', {
      method: 'post',
      body: JSON.stringify({
        email,
        password,
      }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (response.ok) {
      document.location.replace('/')
    } else {
      alert(response.statusText);
    }
  }
}
document.querySelector('.signup-form').addEventListener('submit', signupFormHandler);
document.querySelector('.login-form').addEventListener('submit', loginFormHandler);


<!-- HTML -->

<form class='login-form'>
  <div>
    <label for='email-login'>email:</label>
    <input type='text' id='email-login' />
  </div>
  <div>
    <label for='password-login'>password:</label>
    <input type='text' id='password-login' />
  </div>
  <div>
    <button type='submit'>login</button>
  </div>
</form>
<form class='signup-form'>
  <div>
    <label for='username-signup'>username:</label>
    <input type='text' id='username-signup' />
  </div>
  <div>
    <label for='email-signup'>email:</label>
    <input type='text' id='email-signup' />
  </div>
  <div>
    <label for='password-signup'>password:</label>
    <input type='text' id='password-signup' />
  </div>
  <div>
    <button type='submit'>login</button>
  </div>
</form>
<script src="/javascript/login.js"></script>
<p><em>||Paste all this HTML below the existing Quick-Add HTML in Description field||</em></p>
<p><em>||Check that below sections do not already exist in the existing HTML of the product||</em></p>
  
<p><em>|| OZONE PRODUCTION TIMES ||</em></p>

<h2>Ozone production times</h2>
<p>Ozone wings are made to order. Ozone gives their current approximate production time on their website in working days, for example: "The current production time is approximately 173 days from order to shipping". Add 1-3 weeks for shipping, and allow for unexpected delays. Some may claim shorter delivery times however we're unsure how they can supply faster than the manufacturer themselves can produce and ship! ;-)</p>

<h2>Optional extras</h2>
<ul>
<li>ONLY_ITEMS_NOT_INCLUDED_IN_PRICE_OR_NOT_MANDATORY_FOR_PURCHASING_HERE</li>
<li>DO_NOT_USE_HYPERLINKS</li>
</ul>


<p>_PASTE_EMBED_CODE_FROM_VIMEO/YOUTUBE_HERE FKB: https://bit.ly/3WjyBdU </p>
<p> IDEALLY_MARKETING_VIDEO </p>
<p> IF_NO_VIDEO_THEN_BEST_SUPPLIER_IMAGE </p>
<p> SEE_FKB_CONFIGURING_NEW_PRODUCT_IN_MAGENTO_ADDING_IMAGES </p>
<p> SEE_FKB_FOR_EMBEDDING_VIDEO </p>


<h2>_MODEL_: _STRAPLINE_</h2>
<p>_PASTE_SUPPLIER_BLURB_HERE</p>


<h2>Designer's notes</h2>

<blockquote>
<p>_PASTE_QUOTE_HERE</p>
</blockquote>
<p></p>


<h2>Features</h2>
<p>_PASTE_FROM_SUPPLIER_HERE</p>


<h2>Flybubble review</h2>
<blockquote>
<p>“_PARAGRAPH_1_.</p>
<p>“_PARAGRAPH_2_.</p>
<p>“_PARAGRAPH_3_.</p>
<p>— _FIRSTNAME_ _SURNAME_, Flybubble</p>
</blockquote>
<p>Watch the Flybubble review:</p>
<p>_EMBED_VIDEO_HERE_USING_FKB: https://bit.ly/3GQaywh </p>

<h2>Other reviews</h2>
<blockquote>
<p>“_ONLY_FROM_REPUTABLE_PILOTS_.</p>
<p>“_PARAGRAPH_1_.</p>
<p>“_PARAGRAPH_2_.</p>
<p>“_PARAGRAPH_3_.</p>
<p>— _FIRSTNAME_ _SURNAME_, _COMPANY_ (<a title="_LINK_TITLE_" href="_URL_" target="_blank" rel="noopener">full review</a>)</p>
</blockquote> 
<p></p>

<h3>Materials</h3>

<ul>
<li>_LIST_EACH_MATERIAL_DETAIL_HERE_FROM_SUPPLIER_WEBSITE_</li>
</ul>
                           
<p><em>|| SERVICE INFO & FAQ ||</em></p>


<p><em>|| NIVIUK ||</em></p>
<h2>Niviuk technologies</h2>
<p>Learn about <a href="/blog/niviuk-paraglider-technologies" target="_blank">Niviuk Paraglider Technologies</a></p>


<p><em>|| NOVA ||</em></p>
<h2>Nova service info &amp; FAQ</h2>
<p>Read <a href="http://flybubble.com/blog/nova-service-info-faqs/" title="Nova service info &amp; FAQ" target="_blank">Nova service info and answers to FAQ</a>.</p>


<p><em>|| SKYWALK ||</em></p>
<h2>Skywalk service info &amp; FAQ</h2>
<p>Read <a href="https://flybubble.com/blog/skywalk-service-info-faq" title="Skywalk service info &amp; FAQ" target="_blank">Skywalk service info and answers to FAQ</a>.</p>


<p><em>|| PRODUCT REGISTRATION ||</em></p>


<p><em>|| ADVANCE ||</em></p>
<h2>Advance product registration</h2>
<p>Register your Advance product <a href="https://app.advance.ch/app/en/auth/login_create?thm=_frontend" title="Register your Advance product" target="_blank">here</a>.</p>


<p><em>|| AIRDESIGN ||</em></p>
<h2>AirDesign product registration</h2>
<p>Register your AirDesign product <a href="https://ad-gliders.com/product-registration/?lang=en" title="Register your AirDesign product" target="_blank">here</a>.</p>


<p><em>|| NOVA ||</em></p>
<h2>Nova product registration</h2>
<p>Register your Nova product <a href="https://my.nova.eu/index.php?id=2" target="_blank">here</a>.</p>


<p><em>|| OZONE ||</em></p>
<h2>Ozone product registration</h2>
<p>Register your Ozone product <a href="https://www.flyozone.com/speed/products/product-registration" target="_blank">here</a>.</p>


<p><em>|| SUPAIR ||</em></p>
<h2>Supair product registration</h2>
<p>Register your Supair product <a href="http://www.supair.com/en/register-your-product/" target="_blank">here</a>.</p>


<p><em>|| TRIPLE SEVEN||</em></p>
<h2>Triple Seven product registration</h2>
<p>Register your Triple Seven product <a href="https://777gliders.com/warranty/" title="Register your Triple Seven product" target="_blank">here</a>.</p>

<p><em>|| WOODY VALLEY ||</em></p>
<h2>Woody Valley product registration</h2>

<p>Register your Woody Valley product <a href="https://www.woodyvalley.eu/en/registration-product.php" target="_blank">here</a>.</p>


<h2>Downloads</h2>

<p><em>|| Find 'downloads' in source code and copy & paste HTML code from &lt;ul&gt; to &lt;/ul&gt; ||</em></p>

<p><em>|| SEE_FKB_ADD_PDFS_TO_MAGENTO ||</em></p>

<h3>Manual</h3>

<ul>
<li>_LIST_MANUALS_HERE</li>
</ul>

<h3>Certification</h3>

<ul>
<li>_LIST_CERTIFICATIONS_HERE</li>
</ul>

<ul>
<li>_LIST_MANUALS_HERE</li>
<li>_LIST_CERTIFICATIONS_HERE</li>
<li>_LIST_LINE_PLANS_HERE</li>
<li>_LIST_PRODUCT_BROCHURE_HERE</li>
</ul>

<h2>Technical data</h2>
<p>_PASTE_TABLE_DATA_HERE</p>
<p><em>|| Use https://www.tablesgenerator.com/html_tables# ||</em></p>


<h3>Colours</h3>
<p>Standard colours: _COLOUR1_, _COLOUR2_.</p>
<p>_PASTE_IMAGE_OF_COLOURS_WITH_SAME_ORDER_AS_TEXT_ABOVE<p>

<p><em>||On brand website, locate the link to view custom colours of the product, copy that link and paste it in the code below||</em></p>
  
<p>Custom colours: <a href="URL_TO_CUSTOM_COLOUR_SECTION_OF_SPECIFIC_MODEL" title="Custom colours" target="_blank">Choose your colours</a> and email us the colour reference with your order. Include a screenshot if you can. Full payment required upfront to confirm your order after which it cannot be cancelled.</p>

<h3>Package</h3>
<ul>
<li>_PASTE_ITEMS_HERE_</li>
</ul>

<h3>Options</h3>
<ul>
<li>_ONLY_OPTIONS_INCLUDED_IN_PRICE_OR_MANDATORY_FOR_PURCHASING_HERE</li>
</ul>

<h3>Risers</h3>
<p>Standard: _RISER1.</p>
<p>Optional: _RISER2_, _RISER3_, _RISER4_,'Semlight C Handle' R07 (3+1)</p>
<!-- PHI TEXT -->
<p>You are free to customize and choose another riser free of charge but this will delay your order by 3-7 days. If saving every gram is your top priority, you may choose a lighter riser. This reduces the weight on the tech data list but compromises usability and increases speed system pressure.</p>
<p>See <a href="https://phi-air.com/project/risers/" target="_blank" rel="noopener">Phi risers</a></p>

<!-- GIN riser text -->
<p>TBC. Ask Boris to update the text in this template when known</p>

<!-- AirDesign riser text -->
<p>TBC. Ask Boris to update the text in this template when known</p>

<h2>Flybubble review</h2>
<blockquote>
<p>“_PARAGRAPH_1_.</p>
<p>“_PARAGRAPH_2_.</p>
<p>“_PARAGRAPH_3_.</p>
<p>— _FIRSTNAME_ _SURNAME_, Flybubble</p>
</blockquote>
<p>Watch the Flybubble review:</p>
<p>_EMBED_VIDEO_HERE_USING_FKB: https://bit.ly/3GQaywh </p>

<h2>Other reviews</h2>
<blockquote>
<p>“_ONLY_FROM_REPUTABLE_PILOTS_.</p>
<p>“_PARAGRAPH_1_.</p>
<p>“_PARAGRAPH_2_.</p>
<p>“_PARAGRAPH_3_.</p>
<p>— _FIRSTNAME_ _SURNAME_, _COMPANY_ (<a title="_LINK_TITLE_" href="_URL_" target="_blank" rel="noopener">full review</a>)</p>
</blockquote> 
$calendar = collect($calendar)->where('report_period_id', '!=', $dataCalendarDesc['report_period_id'])->toArray();
 const loading = `
    <div class="p-2 d-flex align-items-center bg-white-2 mt-2">
        <div class="col-1 mr-4">
            <div class="snippet" data-title=".dot-flashing">
                <div class="stage">
                    <div class="dot-flashing"></div>
                </div>
            </div>
        </div>
        <p class="grey-6">Memuat siswa butuh perhatian..</p>
    </div>`
<!DOCTYPE html>

<html>

<head>

    <title>Laravel Table Inline Editing Example - ItSolutionStuff.com</title>

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>

    <script>$.fn.poshytip={defaults:null}</script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>

</head>

<body>

      

<div class="container">

    <h1>Laravel Table Inline Editing Example - ItSolutionStuff.com</h1>

    <table class="table table-bordered data-table">

        <thead>

            <tr>

                <th>No</th>

                <th>Name</th>

                <th>Email</th>

            </tr>

        </thead>

        <tbody>

            @foreach($users as $user)

                <tr>

                    <td>{{ $user->id }}</td>

                    <td>

                        <a href="" class="update" data-name="name" data-type="text" data-pk="{{ $user->id }}" data-title="Enter name">{{ $user->name }}</a>

                    </td>

                    <td>

                        <a href="" class="update" data-name="email" data-type="text" data-pk="{{ $user->id }}" data-title="Enter email">{{ $user->email }}</a>

                    </td>

                </tr>

            @endforeach

        </tbody>

    </table>

</div>

     

</body>

     

<script type="text/javascript">

    $.fn.editable.defaults.mode = 'inline';

  

    $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': '{{csrf_token()}}'

        }

    }); 

  

    $('.update').editable({

           url: "{{ route('users.update') }}",

           type: 'text',

           pk: 1,

           name: 'name',

           title: 'Enter name'

    });

</script>

</html>
var invoiceStudentByGroup = _.mapValues(_.groupBy(invoiceStudent, 'invoice_type'), clist => clist.map(res => _.omit(res, 'invoice_type')));

[
  0: {
  	name: yusup
  	home: bogor
  }
  1: {
    name: samuel
    home: jakarta
  }
  2: {
    name: salsa
    home: bogor
  }
  
] 

Result

[
  bogor: [
  	0: {name: yusup, home: bogor}
    1: {name: salsa, home: bogor}
  ],
  Jakarta: [
    0: {name: samuel, home: jakarta}
  ]
]
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.rawgit.com/rfvallina/Misc/master/pdf.js"></script>
    <script src="script.js"></script>
    <script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
  </head>

  <body>
    <h2>Image Preview</h2>
    <label>Select a file (jpg, png, tiff)</label>
    <br />
    <div>
      <input type="file" />
    </div>
  </body>

</html>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<input onkeydown="return /[a-z]/i.test(event.key)" >
  
//allow WHITE space as well
<input onkeydown="return /[a-z\s]/i.test(event.key)" >
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
<header>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-toggle="collapse"
        data-mdb-target="#navbarExample01"
        aria-controls="navbarExample01"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarExample01">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item active">
            <a class="nav-link" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Navbar -->

  <!-- Background image -->
  <div
    class="p-5 text-center bg-image"
    style="
      background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
      height: 400px;
    "
  >
    <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
      <div class="d-flex justify-content-center align-items-center h-100">
        <div class="text-white">
          <h1 class="mb-3">Heading</h1>
          <h4 class="mb-3">Subheading</h4>
          <a class="btn btn-outline-light btn-lg" href="#!" role="button"
          >Call to action</a
          >
        </div>
      </div>
    </div>
  </div>
  <!-- Background image -->
</header>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    * {
      font-size: 1.5rem;
    }
  </style>
</head>

<body>
  <label for="environment">Capture environment:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">Capture user:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >
</body>

</html>
<!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>PyScript</title>

      <!-- styles and script dependencies -->
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   </head>
   <body>
      <!-- title -->
      <h3>Testing python code in HTML</h3>

      <!-- python code -->
      <py-script> print('Now you can!') </py-script>
     
   </body>
</html>
/ CSS /
.reveal{position:relative;transform:translateX(200px);opacity:0;transition:1s all ease;}
.reveal.active{transform:translateX(0);opacity:1;}

/ JavaScript /

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);
<div id="slide-out-widget-area" class="slide-out-from-right" style="padding-top: 71.4px; padding-bottom: 71.4px;">
            <div class="inner-wrap">
                <div class="inner">

                    <div class="off-canvas-menu">
                        <?php
                        wp_nav_menu( array (
                            'theme_location' => 'header',
                            'container'      => '',
                            'menu_class'     => 'menu',
                        ) );
                        ?>
                    </div>
                </div>
            </div>
            <div id="slide-out-widget-area-bg" class="slide-out-from-right solid material-open"></div>
            <!-- <div class="close-btn">
                <span class="close-wrap">
                    <span class="close-line close-line1"></span>
                    <span class="close-line close-line2"></span> 
                </span>
            </div> -->
        </div>
        <div class="occu-health-wrapper">
            <div id="top"><a class="menulinks"><i></i></a></div>
		</div>
                                    
       <style>
		@media (max-width:767px){
    header#header {padding: 20px 0 0;background: transparent;}
    .header-top {border-bottom: none;}
    .head-wrapper {height: 98px;}
    .head-wrapper.fixed-header a.menulinks {top: 30px;right: 20px;}
    .head-wrapper.fixed-header ul.mainmenu {top: 98px;left: 0;width: 100%;}
    .logo-col {flex: 0 0 110px;}
    .head-btn-col {flex: 0 0 calc(100% - 150px);justify-content: flex-end;padding-right: 0px;padding-left: 0;}
    .mobile-open div#slide-out-widget-area {min-width: 78vw;width: 78vw;margin: 0 0 0 auto;padding-left: 50px;padding-right: 50px;display: block;}
    .mobile-open .inner-wrap{position:absolute;top:50%;transform:translate(-50%,-50%);left: 70%;display:flex;align-items:center;justify-content:center;}
    .off-canvas-menu .menu{display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;margin-bottom:10px;}
    .inner-wrap .off-canvas-menu .nav-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .mobile-open div#slide-out-widget-area-bg{background:var(--primary-color);opacity:1;height:100vh;width:100vw;z-index:-1;position:absolute;top:0;left:0;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    div#top .menulinks{display:none;justify-content:end;height:50px;z-index:99;width:100%;}
    .mobile-open div#top .menulinks {display: flex;}
    div#slide-out-widget-area {display: none;}
    .occu-health-wrapper{transition:transform 0.5s;top:auto;height:100vh;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    .mobile-open .occu-health-wrapper {left: 25%;}
    .mobile-open div#top{padding:10px 0;background:white;display:flex;justify-content:end;height:inherit;}
    ul#menu-header-menu li > a{color:var(--white);}
    ul#menu-header-menu {list-style: none;padding: 0;}
    .off-canvas-menu{width:200px;}
    .off-canvas-menu .btn-wrapper{display:flex;align-items:center;justify-content:flex-start;margin-top:10px;}
    .off-canvas-menu a.btn{display:inline-flex;padding:10px;width:50px;height:50px;background:var(--white);margin-right:10px;}
    .off-canvas-menu a.btn svg{color:var(--primary-color);width:30px;height:30px;}
    .off-canvas-menu a.btn:last-child{margin:0;}
    .off-canvas-menu ul#menu-header-menu li{margin-bottom:10px;width: 100%;}

/*Nav*/
    .menulinks{display:block;top:30px;right:20px;z-index:999999;}
    .mobile-open a.menulinks {display: none;}
    ul.mainmenu{text-align:left;position:absolute;top:98px;padding:0;right:0;width:100%;background:#000;display:none !important;z-index:9999999;}
    ul.mainmenu>li>a:after{content:none;}
    ul.mainmenu>li>a:hover:after{content:none;}
    ul.mainmenu>li{float:left;width:100%;padding:0px;margin:0;border-top:1px solid rgba(255,255,255,0.2);position:relative;}
    ul.mainmenu>li:first-child{border:none;}
    ul.mainmenu>li>a:link,ul.mainmenu>li>a:visited{padding:10px 15px;font-size:16px;float:left;width:100%;border:none;text-align:left;color:#fff;}
    ul.mainmenu>li>a:hover{background:rgba(255,255,255,0.2);}
    a.menulinks i{display:inline;position:relative;top: 0;right: 0;margin-left:0;-webkit-transition-duration:0s;-webkit-transition-delay:.2s;-moz-transition-duration:0s;-moz-transition-delay:.2s;transition-duration:0s;transition-delay:.2s;}
    a.menulinks i:before,a.menulinks i:after{position:absolute;content:'';left:0;}
    a.menulinks i,a.menulinks i:before,a.menulinks i:after{width:35px;height:4px;background-color:#000;display:inline-block;}
    a.menulinks i:before{transform: translateY(-10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    a.menulinks i:after{transform: translateY(10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    .mobile-open a.menulinks i{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:before{margin-top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:after{margin-top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    ul.mainmenu>li>a.current:after{display:none;}
    ul.mainmenu ul{position:relative;top:auto;left:auto;float:left;width:100%;}
    ul.mainmenu ul li{position:relative;}
    ul.mainmenu ul li a{padding:8px 15px 8px 25px;color:#fff;}
    a.child-triggerm{display:block!important;cursor:pointer;position:absolute!important;top:0px;right:0px;width:50px!important;min-width:50px!important;height:38px!important;padding:0!important;border-left:1px dotted rgba(255,255,255,.20);}
    a.child-triggerm:hover{text-decoration:none;color:#f00;}
    a.child-triggerm span{position:relative;top:50%;margin:0 auto!important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm span:after{position:absolute;content:'';}
    a.child-triggerm span,a.child-triggerm span:after{width:10px;height:1px;background-color:#fff;display:block;}
    a.child-triggerm span:after{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span:after{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm:hover span,a.child-triggerm:hover span:after{background-color:#f00;}
    .logo-col a > img {max-width: 110px;height: 70px;object-fit: contain;}
    .head-btn-col a.btn:last-of-type {margin-right: 0;display: none;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 15px;}
    .footer-logo-col {width: 100%;}
}

@media (max-width: 567px) {
    .head-btn-col {flex: 0 0 calc(100% - 110px);justify-content: end;padding-right: 38px;padding-left: 5px;}
    .head-btn-col .btn {width: 40px;height: 40px;margin-right: 5px;}
    ul.mainmenu {top: 143px;display: none !important;}
    .head-wrapper.fixed-header ul.mainmenu {top: 144px;}
    .services-col {margin-bottom: 15px;margin-top: 15px;}
    .contact-col {margin-bottom: 15px;display: flex;flex-direction: column;align-items: center;width: 100%;}
    .footer .services-col .footer-links ul {text-align: center;margin: 0;}
    .contact-col ul, .keep-col ul {margin: 0 0 0px 0;text-align: center;}
    .keep-col {width: 100%;}
    .footer .services-col span, .footer .contact-col span, .footer .keep-col span {padding-left: 0;padding-bottom: 15px;font-size: 22px;justify-content: center;}
    .footer .row {justify-content: center;}
    .footer-logo-col {width: 100%;text-align: center;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 0;}
    .logo-col a > img {max-width: 90px;}
    .mobile-open .inner-wrap {left: 75%;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:10px;}
}

@media (max-width: 350px) {
    .logo-col{flex:0 0 90px;}
    .head-btn-col {flex: 0 0 calc(100% - 90px);padding-right: 28px;}
    .menulinks{top:30px;right:20px;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:5px;}
}
	</style>
                                                      
<script>
      jQuery(document).ready(function (jQuery) {
    jQuery('.mainmenu li:has(ul)').addClass('parent');
    jQuery('.mainmenu').before('<a class="menulinks"><i></i></a>');
    jQuery('a.menulinks').click(function () {
        jQuery(this).next('ul').slideToggle(250);
        jQuery('body').toggleClass('mobile-open');
        jQuery('.mainmenu li.parent ul').slideUp(250);
        jQuery('a.child-triggerm').removeClass('child-open');
        return false;
    });
    jQuery('.mainmenu li.parent > ul').before('<a class="child-triggerm"><span></span></a>');
    jQuery('.mainmenu a.child-triggerm').click(function () {
        jQuery(this).parent().siblings('li').find('a.child-triggerm').removeClass('child-open');
        jQuery(this).parent().siblings('li').find('ul').slideUp(250);
        jQuery(this).next('ul').slideToggle(250);
        jQuery(this).toggleClass('child-open');
        return false;
    });</script>
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
<!DOCTYPE php>
<?php 
error_reporting(null);
$city = $_POST['get'];
$Url = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=".$city."&units=metric&appid=73c340f4df1ee2a07dca01d0ce48bf48");
$data=json_decode($Url,true);
// echo "<pre>";
// print_r($data);


$dataurl=file_get_contents("https://pixabay.com/api/?key=29428143-1b7675892c7e12c1f8fdd4157&q=".$_POST['get']."&image_type=photo");
$test=json_decode($dataurl,true);
// echo "<pre>";
// print_r($test);
$flag='flag';
$back=$test['hits'][rand(1,19)]['largeImageURL'];



// echo "<pre>";
// print_r($test);
// $lon=$data['coord']['lon'];
// $lat=$data['coord']['lat'];
// $newtest=file_get_contents('https://api.openweathermap.org/data/2.5/weather?lat='.$lat.'&lon='.$lon.'&appid=73c340f4df1ee2a07dca01d0ce48bf48');
// $test1=json_decode($newtest,true);
$weatherAPI="a595f443b58d4c97962234220222208";
$Weatherlink=file_get_contents('http://api.weatherapi.com/v1/current.json?key='.$weatherAPI.'&q='.$city.'');
$getdata=json_decode($Weatherlink,true);

//   echo "<pre>";
// print_r($getdata);
$cnt=$getdata['location']['country'];
$ctname="a595f443b58d4c97962234220222208";
$getct=file_get_contents("http://api.weatherapi.com/v1/current.json?key=".$ctname."&q=".$_POST['get']);
$gvdata=json_decode($getct,true);
$loc=$gvdata["location"]["country"];
$imurl=$gvdata['current']['condition']['icon'];

// echo "<pre>";
// print_r($dta);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://kit.fontawesome.com/3ade12e83a.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <title>Weather</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');

       .material-symbols-outlined {
         font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD'0,
        'opsz' 48
}
       .button{
        padding: 10px;
        float: right;
        width: 100px;
        border: none;
        border-radius: 10px;
        background-color: #038cfc;
        color: white;
       }   
       .button:hover{
        background-color: #055ca3;
       }  

       .wmain{
        width:100%;
        display: flex;
        flex-direction: column;
            
            align-items: center;
            justify-content: center;
       }
        body{
           
            padding: 5%;
            font-family: 'DynaPuff', cursive;
            overflow:scroll;
          
        }
      .backg{
        margin: 0%;
        padding: 0%;
        position: absolute;
        width: 100%;
        height: 200%;
        z-index: -1;
        left:0%;
        top: 0%;
      }
      .show{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
      }
      #box{
        display: flex;
        width: 100px;
        height: 100px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;

      }
      .ico{
        display: flex;
        width: 200px;
        height: 200px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;
        margin: 30px;
        flex-direction: column;

      }
      .search{
        border: none;
        border-radius: 30px;
        padding: 10px;
      }
      .sbar{
         border: none;
        border-radius: 30px;
        padding: 10px;
        width: 300px;

      }
      .heade{
        width: 200px;
        height:200px;
        backdrop-filter:blur(50px);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    </style>
</head>
<img class="backg" src="<?=$back ?>">
<body>
    <div class="nav">
      <a href="signup.php">
      <button name="bt" class="button">
        Source Code
      </button>
      </a>
    </div>
    <div class="wmain">

        <form method="POST">
        <div class="search"><input class="sbar" name="get" value="india" type="search"></div>
        </form>
<div class="heade" style="box-shadow:1px 1px 50px black;">
        <div class="name"><h1 style="color: white;"><?=$_POST['get'];?></h1></div>
            <img width="50px" src="https://countryflagsapi.com/png/<?=$cnt?>">
            </div>
       <div class="ico">
       <img  src="<?=$imurl?>" >
        <div class="ne"><h1><?= $data['weather']['0']['main']?></h1></div>

          <div id="bo" class="temp"><i style="color: yellow;" class="fa-solid fa-temperature-full"></i>&nbsp<?=round($data['main']['temp']) ?>deg</div>
        </div>
        <div class="show">
     
            <div id="box" class="hum"><span style="color: skyblue;" class="material-symbols-outlined">
humidity_high
</span><?=$data['main']['humidity'] ?></div>
            <div id="box" class="press"><span style="color: orange;" class="material-symbols-outlined">
compress
</span><?=$data['main']['pressure'] ?></div>
            <div id="box" class="min"><span style="color: green;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_min'] ?></div>
            <div id="box" class="max"><span style="color: red;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_max'] ?></div>
            <div id="box" class="wind"><i style="color: green;"  class="fa-solid fa-wind"></i>&nbsp<?=$data['wind']['speed'] ?></div>
        </div>
        
    </div>
    
</body>

</html>

<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" />
<html>
  <head>
    <title>File Upload</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
  </head>
  <body>
    <h1>File Upload</h1>
    <form action="{{ url_for('upload_files') }}" class="dropzone">
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.js"></script>
  </body>
</html>
<!doctype html>
<html>
  <head>
    <title>File Upload</title>
  </head>
  <body>
    <h1>File Upload</h1>
    <form method="POST" action="" enctype="multipart/form-data">
      <p><input type="file" name="file"></p>
      <p><input type="submit" value="Submit"></p>
    </form>
    <hr>
    {% for file in files %}
      <img src="{{ url_for('upload', filename=file) }}" style="width: 64px">
    {% endfor %}
  </body>
</html>
    <input type="file" name="doc_file" accept=".doc,.docx">
    <input type="file" name="image_file" accept="image/*">
var c = document.createDocumentFragment();
for (var i=0; i<10000; i++) {
    var e = document.createElement("div");
    e.className = "test-div";
    c.appendChild(e);
}
document.body.appendChild(c);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>OpenStreetMap & OpenLayers - Marker Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
	<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
  
  <script>
    /* OSM & OL example code provided by https://mediarealm.com.au/ */
    var map;
    var mapLat = -33.829357;
		var mapLng = 150.961761;
    var mapDefaultZoom = 10;
    
    function initialize_map() {
      map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                      url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
      });
    }

    function add_map_point(lat, lng) {
      var vectorLayer = new ol.layer.Vector({
        source:new ol.source.Vector({
          features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: "http://vps1.dyndns.info:8051/markers/svg/map-marker-blue.svg"
          })
        })
      });

      map.addLayer(vectorLayer); 
    }


  </script>
</head>
<body onload="initialize_map(); add_map_point(-33.8688, 151.2093);">
  <div id="map" style="width: 100vw; height: 100vh;"></div>
</body>
</html>
/*<div class="preloader"></div>*/

.preloader::after { 
  position: absolute;
  top: 0;
  bottom: 4%;
  right: 0;
  left: 0;
  
  content: " ";
  display: block;
  
  margin: auto;
  height: 32px;
  width: 32px;
  
  box-sizing: border-box;
  border: solid;
  border-width: 4px;
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(140, 140, 140, 0.2);
  border-right-color: rgba(140, 140, 140, 0.2);
  border-left-color: rgba(140, 140, 140, 0.2);
  
  animation: rotating 0.3s linear infinite;
}

@keyframes rotating{
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9a17642b-0849-44c7-af61-94872a45af4b"></div>
//<input type="text" value="B01" id="MYINPUT">

$("#MYINPUT").select(function(e){
    var selSt=$(this)[0].selectionStart;
    var selNd=$(this)[0].selectionEnd;
    
    if (selSt<3) {
        $(this)[0].setSelectionRange(3, selNd);
    }
});

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dfdfdf;
  -webkit-transition: .1s;
  transition: .1s;
  border: 1px solid #000;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .1s;
  transition: .1s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 5px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html> 
<html>
<head>
    <style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
    background-color: #ccc;
}

footer {
    height: 25px;
}
    </style>
</head>
<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
</html>
<html moznomarginboxes mozdisallowselectionprint>
<head>
<!--style type="text/css">

@page { size: auto;  margin: 0mm; }
@media print {  
  body { margin: 1.6cm; margin-top:0;}
}
.header, .header-space,
.footer, .footer-space {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  padding-top:20px;
}
.footer {
  position: fixed;
  bottom: 0;
}
.content{
  width: 7.2in;
}
</style-->
<style type="text/css">
@page { margin: 0 }
body { margin: 2cm; margin-top:0; }
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

/** Paper sizes **/
body.A3               .sheet { width: 297mm; height: 419mm }
body.A3.landscape     .sheet { width: 420mm; height: 296mm }
body.A4               .sheet { width: 210mm; height: 296mm }
body.A4.landscape     .sheet { width: 297mm; height: 209mm }
body.A5               .sheet { width: 148mm; height: 209mm }
body.A5.landscape     .sheet { width: 210mm; height: 147mm }
body.letter           .sheet { width: 216mm; height: 279mm }
body.letter.landscape .sheet { width: 280mm; height: 215mm }
body.legal            .sheet { width: 216mm; height: 356mm }
body.legal.landscape  .sheet { width: 357mm; height: 215mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
           body.A3.landscape { width: 420mm }
  body.A3, body.A4.landscape { width: 297mm }
  body.A4, body.A5.landscape { width: 210mm }
  body.A5                    { width: 148mm }
  body.letter, body.legal    { width: 216mm }
  body.letter.landscape      { width: 280mm }
  body.legal.landscape       { width: 357mm }
}

@page { size: letter }




.header, .header-space,
.footer, .footer-space {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  padding-top:20px;
}
.footer {
  position: fixed;
  bottom: 0;
}
.content{
  width: 7.5in;
}

</style>

</head>
<body class="letter">
<table>
  <thead><tr><td>
    <div class="header-space"> </div>
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">
      
      BorderStyle := bsnone;
WindowState := wsMaximized;
I set these properties to make both of them full screen. In the main form there is a button and when I click I want to show the second form as full screen with slide animation so I used this code:

AnimateWindow(form2.Handle, 500, AW_ACTIVATE OR AW_SLIDE OR AW_HOR_NEGATIVE);
Form2 is in auto create and visible property is set to false.

The problem when I tried this I saw odd results, the animation play but the form2 appear without any controls and not covering the full screen.

How to fix that so I can display form2 as full screen with slide animation ?

I am using XE5

delphi
shareimprove this question
edited Feb 24 '15 at 2:40
asked Feb 24 '15 at 2:23

Wel
1,52663378
add a comment
3 Answers
active oldest votes
¿No encuentras la respuesta? Pregunta en Stack Overflow en español.

✕
 
2

Based on MSN
https://msdn.microsoft.com/en-us/library/windows/desktop/ms632669(v=vs.85).aspx
there are lots of problems reported of using this function. So I recomend you go and implement the animation yourself.

Since you are interested only in sliding information do next:

Fist change your form size to fit into the monitor size.

MyForm.Width := Screen.Width;
MyForm.Height := Screen.Height;
Then move your form to the edge of the screen you want the animation to start from. When doing so keep atleast one pixel of the form inside the visible area of the monitor.

//Strating animation from left border
MyForm.Left := 1 - MyForm.Width;
MyForm.Top := 0;

//Starting from right border
MyForm.Left := MyForm.Width - 1;
MyForm.Top := 0;

//Starting from top border
MyForm.Left := 0;
MyForm.Top := 1 - MyForm.Height;

//Starting from bottom border
MyForm.Left := 0;
MyForm.Top := MyForm.Height - 1;
Once your have positioned your form in starting possition make it visible and enable timer that will beused to update forms position multiple times (animate) until it gets into desired position

MyForm.Show;
AniTimer.Enabled;
And start animation which is basically just updating your form position by using a simple timer

//Left to right animation
procedure MyForm.AniTimerOnTimer(Sender: TObject);
//Constant used to define by how many pixels will the form be moved
//on each timer interval
const MoveStep: Integer = 5;
begin
  if MyForm.Left < MoveStep then
  begin
    MyForm.Left := MyForm.Left + MoveStep;
  end;
  else
  begin
    MyForm.Left := 0;
    AniTimer.Enabled := False;
  end;
end;
Use similar approach for other directions if needed.

Instead of defining MoveStep as constant you can make it as a variable and then dynamically calculate its value so that animation is finished in N steps.

MoveStep := Screen.Width div N;
If you would like to have diagonal animation you would need two MoveStep variables. One for horizontal and one for vertical axis. And you need to make sure that both are being calculated in order to finish animation in specific number of steps

MoveStepX := Screen.Width div N;
MoveStepY := Screen.Height div N;
So now you can controll your animation speed by changing MoveStep and timer interval.

Note I don't recomend setting timer interval to small. Why?

As ypu probably know TTimer component isn't known for its acruacy so it could lead to noticable speed variation of of your animation.

Also changing form position multiple times woulrd require part of it being rerendered hwen it comes into visual rage so it could generate significant load to the CPU.

Moving fomr a few less times and with larger increments could greatly reduce the CPU load whle still performing adequate aniamtion smothness.

So do some testing to find the best combination of timer interval and move step.

shareimprove this answer
answered Feb 24 '15 at 8:09

SilverWarior
4,43321016
add a comment

 
2

Your problem is, before Form2 is first shown, the VCL does not create API windows of the windowed controls. Because it doesn't need to. Remember 'visible' is still set to false when you call AnimateWindow.

Below is a not very elegant workaround which sets 'visible' while the form has 0 width and height. It also addresses an additional problem which I don't know why you are not having. It is that I cannot animate a maximized window at all, which seems logical to me - a maximized window does not move. Anyway, to test it I suggest setting 'wsNormal' as WindowState at design time.

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  if Form2.Visible then begin
    Form2.WindowState := wsNormal;
    AnimateWindow(Form2.Handle, 500, AW_HIDE OR AW_SLIDE OR AW_HOR_NEGATIVE);
    Form2.Close;
  end else begin
    Form2.Width := 0;
    Form2.Height := 0;
    Form2.Visible := True;
    ShowWindow(Form2.Handle, SW_HIDE);

    Form2.WindowState := wsNormal;
    Form2.Width := Form2.Monitor.Width;
    Form2.Height := Form2.Monitor.Height;
    AnimateWindow(form2.Handle, 500, AW_ACTIVATE or AW_SLIDE OR AW_HOR_NEGATIVE);
    Form2.WindowState := wsMaximized;
  end;
end;
shareimprove this answer
answered Feb 24 '15 at 17:21

Sertac Akyuz
49k375133
@Wel - did you try this? – Sertac Akyuz Feb 27 '15 at 10:26
add a comment

1

AnimateWindow is a bit of a loner. It doesn't play nicely with the rest of the team in Delphi. Even though the MSDN doc for it says that it shows the form it actually doesn't do it properly. It only does the animation. I suppose it would do it nicely if you went all out Windows API and knew all that is required.

A few things to keep in mind:

I suppose you noticed that the slide effect doesn't show properly with the borders enabled.
It doesn't know about the WindowState property of the form so it will not Maximize the form if you wanted it to.
It doesn't show controls after the call, only graphic controls
It knows nothing of Delphi and how Delphi handles the showing and hiding of its forms
So the trick is:

Take away borders like you have done.
Before showing the form for the first time you must specify its size. Seeing that you want it maximized, just set it to the screen size where it will display and set its position to the four corners of that screen. This can be done on Form2's OnCreate.
So upon clicking the button you first call the AnimateWindow then call normal Form2.Show
There might be other fixes but this is the one I know of.

    </div>
  </td></tr></tbody>
  <tfoot><tr><td>
    <div class="footer-space"> </div>
  </td></tr></tfoot>
</table>
<div class="header">Prueba Encabezado</div>
<div class="footer">Pie de pagina</div>
</body>
</html>
body{
    font-family: verdana;
    color:gray;
    margin: 8px;
}

.str{
    color:#F0F;
}

.perc{
    color:#000;
    background-color:#FF0;
}

.comment{
    color:silver;
}

p{
    color: black;
    font-style:italic;
}

<html>
    <head>
        <title>
            test
        </title>
    </head>
    <body>
This is a way to calculate similarity % between two strings based on <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance:</a><p><p><br>
    </body>
</html>

function similarity(s1, s2) {
  var longer = s1;
  var shorter = s2;
  if (s1.length < s2.length) {
    longer = s2;
    shorter = s1;
  }
  var longerLength = longer.length;
  if (longerLength === 0) {
    return 1.0;
  }
  return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);
}

function editDistance(s1, s2) {
  s1 = s1.toLowerCase();
  s2 = s2.toLowerCase();

  var costs = new Array();
  for (var i = 0; i <= s1.length; i++) {
    var lastValue = i;
    for (var j = 0; j <= s2.length; j++) {
      if (i == 0)
        costs[j] = j;
      else {
        if (j > 0) {
          var newValue = costs[j - 1];
          if (s1.charAt(i - 1) != s2.charAt(j - 1))
            newValue = Math.min(Math.min(newValue, lastValue),
              costs[j]) + 1;
          costs[j - 1] = lastValue;
          lastValue = newValue;
        }
      }
    }
    if (i > 0)
      costs[s2.length] = lastValue;
  }
  return costs[s2.length];
}

var $str1="Marco Antonio Piñero Lopez";
var $str2="marco antonio Pineda lópez";

var perc=Math.round(similarity($str1,$str2)*10000)/100;

var txt="The strings: <span class=\"str\">'"+$str1+"'</span> and <span class=\"str\">'"+$str2+"'</span>";
  txt+="<br>are similar <span class=\"perc\">"+perc+"%</span>";
document.write(txt);

<!DOCTYPE html>

<html>
 	<head>
  	</head>

	<body>
	</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
const loadingMobile = `
        <div id="loading-get-data" class="mt-2 alert alert-primary">
            <div class="d-flex align-items-center">
                <div class="spinner spinner-border spinner-border-sm text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <h6 class="ml-2">Memuat tagihan...</h6>
            </div>
        </div>`
function formatRp(number) {
    var number_string = parseInt(number).toString(),
        split = number_string.split(","),
        remainder = split[0].length % 3,
        amount = split[0].substr(0, remainder),
        thousand = split[0].substr(remainder).match(/\d{3}/gi);

    if (thousand) {
        separator = remainder ? "." : "";
        amount += separator + thousand.join(".");
    }

    amount = split[1] != undefined ? amount + "," + split[1] : amount;
    return "Rp" + amount;
}
const loading = `<td id="loading" colspan="7" class="bg-white-2">
            <div class="d-flex align-items-center">
                <div class="col-1">
                    <div class="snippet" data-title=".dot-flashing">
                        <div class="stage">
                            <div class="dot-flashing"></div>
                        </div>
                    </div>
                </div>
                <p class="grey-6 ml-6 pl-1">Memuat data pembayaran...</p>
            </div>
        </td>`
<html lang="en">

<head>

	<title>Scroll Down bottom</title>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>

<body>

	<div class="scroll-class" style="border: 1px solid black;height: 200px;overflow: scroll;width: 300px;">

		<p>

			Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse

			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

		</p>

	</div>

    <script type="text/javascript">

	     var objDiv = $(".scroll-class");

    	 var h = objDiv.get(0).scrollHeight;

    	 objDiv.animate({scrollTop: h});

    </script>

</body>

</html>
.accordion-item {
	background-color: #f4f4f6;
}

.accordion-header {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.accordion-header::before {
	content: '+';
	font-size: 3.5rem;
	margin-right: 20px;
}

.active-header::before {
	content: '-';
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: 1s ease max-height;
	font-size: 1.5rem;
}
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach((accordionHeader) => {
	accordionHeader.addEventListener('click', () => {
		accordionContent = accordionHeader.nextElementSibling;
		const height = accordionContent.scrollHeight;

		accordionHeader.classList.toggle('active-header');

		if (accordionHeader.classList.contains('active-header')) {
			accordionContent.style.maxHeight = `${height}px`;
		} else {
			accordionContent.style.maxHeight = '0px';
		}
	});
});
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
// get timezone offset
function get_time_zone_offset( ) {
  var current_date = new Date();
  return parseInt(-current_date.getTimezoneOffset() / 60);
}

// get timezone name example 'MDT'
var zone = new Date().toLocaleTimeString(undefined ,{timeZoneName:'short'}).split(' ')[2]
console.log(zone);

// Convert to ISO String
new Date('Date goes here with Time Zone on End like UTC or MDT').toISOString();

// Note that the datepicker UI has a field to select Timezone
<html>
<title>Tic Tac Toe</title>
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body onload="startGame();">
  <h1>Tic Tac Toe</h1>
  <h2>By Irsyad</h2>
  <div id ="message"><h3> messages will go here<h3></div>
  <div>
    <a href="javascript:startGame();">Restart</a>
  </div>
  <table>
    <tr>
      <td id="s1" class="square" onclick="nextMove(this);"></td>
      <td id="s2" class="square" onclick="nextMove(this);"></td>
      <td id="s3" class="square" onclick="nextMove(this);"></td>
    </tr>
    <tr>
      <td id="s4" class="square" onclick="nextMove(this);"></td>
      <td id="s5" class="square" onclick="nextMove(this);"></td>
      <td id="s6" class="square" onclick="nextMove(this);"></td>
    </tr>
    <tr>
      <td id="s7" class="square" onclick="nextMove(this);"></td>
      <td id="s8" class="square" onclick="nextMove(this);"></td>
      <td id="s9" class="square" onclick="nextMove(this);"></td>
    </tr>
  </table>
</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0 <input type="range" id="a" name="a" value="50"> 100 
  +
  <input type="number" id="b" name="b" value="50"> 
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

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

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

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

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>

<p>Click the button to show all elements with class name "city":</p>
<button onclick="myFunction2()">Show elements</button>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}

function myFunction2() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "block";
  }
}
</script>

</body>
</html>
<!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>Project_name</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
      <nav>
      </nav>
    </header>
    <main>
      <section>
      </section>
    </main>
    <footer>
    </footer>
</body>

</html>
Regular space "\0020" 
Non breaking space "\00A0"
<p>
  {{ numberVariable | number: '1.0-2' }}
 </p>
 $(document).on("scroll", onScroll);

        //smoothscroll
        $('.page-template-cannabis-101 .c-secondary-nav a[href^="#"]').on('click', function (e) {
            // e.preventDefault();
            // $(document).off("scroll");

            // $('.page-template-cannabis-101 .c-secondary-nav a').each(function () {
            //     $(this).removeClass('active');
            // })
            // $(this).addClass('active');

            // var target = this.hash,
            //     menu = target;
            // $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top + 2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
body{
    background-image: url(https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    width: 100vw;
}
<div>
                    <x-infobox typeInfoBox="danger" classInfoText="font-15 font-w400 mx-4" classInfoIcon="pt-0"
                    textInfoBox="Segera distribusikan pembayaran agar status tagihan siswa berubah." />
                </div>
<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>
/**
*
* Section: Logos
*
*/

jQuery(document).ready( $ => {

  // Init
  initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');

  $(window).on('resize', debounce(function() {
    initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');
  }));

  // Init functions
  function initLogosSlider(sliderClassName, slidesClassName, sliderWrapperClassName) {
    
		if (!$(sliderClassName).length) return;

    // For each slider
    $(sliderClassName).each( function() {
      
      let slider = $(this);
      let wrapper = $(slider).parents(sliderWrapperClassName); // Slider wrapper

      if ( slidesWidthSum(slider) <= $(slider).outerWidth() && $(slider).hasClass("slick-initialized")) {
        $(wrapper).removeClass('is-slider');
        $(slider).slick("unslick");
      }
  
      if ( slidesWidthSum(slider) > $(slider).outerWidth() ) {
        if (!$(slider).hasClass("slick-initialized")) {
          
          $(wrapper).addClass('is-slider');

          let logosTotalCount = $(slider).find(slidesClassName).length;
          let defaultSlides1200 = 5;
          let defaultSlides992 = 4;
          let defaultSlides768 = 2;
          let defaultSlides561 = 1;

          if (logosTotalCount <= defaultSlides1200) {
            defaultSlides1200 -= 1;
          }

          if (logosTotalCount <= defaultSlides992) {
            defaultSlides992 -= 1;
          }

          if (logosTotalCount <= defaultSlides768) {
            defaultSlides768 -= 1;
          }
  
          $(slider).slick({
            infinite: true,
            slidesToShow: 6,
            slidesToScroll: 6,
            dots: true,
            arrows: true,
            autoplay: false,
            prevArrow: $(wrapper).find('.section-logos__arrow.slick-prev')[0],
            nextArrow: $(wrapper).find('.section-logos__arrow.slick-next')[0],
            responsive: [
              {
                breakpoint: 1200,
                settings: {
                  slidesToShow: defaultSlides1200,
                  slidesToScroll: defaultSlides1200,
                }
              },
              {
                breakpoint: 992,
                settings: {
                  slidesToShow: defaultSlides992,
                  slidesToScroll: defaultSlides992,
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: defaultSlides768,
                  slidesToScroll: defaultSlides768,
                }
              },
              {
                breakpoint: 561,
                settings: {
                  slidesToShow: defaultSlides561,
                  slidesToScroll: defaultSlides561,
                }
              },
            ]
          });
  
        }
      }

    });

    // Helper
    function slidesWidthSum(slider) {
      let slidesWidth = 0;
      let totalGap = parseInt( $(slider).css('gap') ) * ( $(slider).find(`${slidesClassName}:not(.slick-cloned)` ).length - 1);

      $(slider).find(`${slidesClassName}:not(.slick-cloned)`).each(function() {
        slidesWidth += $(this).outerWidth();
      });

      return slidesWidth + totalGap;
    }
	}

  // Helper
  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func, 150, event);
    };
  }
})



/**
 *
 * Section: Logos
 *
 */

.section-logos {
	padding: 70px 0;
  background-color: var(--bg-color);

  &, &[data-theme="white"] {
		--bg-color: #fff;
	}

	&[data-theme="grey"] {
		--bg-color: rgba(240, 243, 249, 0.5);
	}

	.container {
    @media (min-width: 1200px) {
      width: 1118px;
    }

    @media (min-width: 1440px) {
      width: 1278px;
    }

    @media (min-width: 1600px) {
      width: 1336px;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      width: 988px;
    }

		@media (max-width: 767px) {
      max-width: 500px;
			padding-left: 20px;
			padding-right: 20px;
		}
	}

  &__inner {
    max-width: 1078px;
    margin: 0 auto;

    @media (max-width: 1199px) {
      max-width: 896px;
    }

    @media (max-width: 560px) {
      max-width: calc(100% - 70px);
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 37px;

    border-bottom: 1px solid #D4D3D7;

    @media (max-width: 767px) {
      flex-direction: column;
      padding-bottom: 32px;
      text-align: center;
    }
  }

	&__title {
		margin-top: 0;
		margin-bottom: 0;

		font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: var(--color-dark2);
	}

  &__wrapper {
    padding-top: 40px;
    position: relative;

    @media (max-width: 767px) {
      padding-top: 32px;
    }

    &.is-slider {
      .section-logos__list {
        display: block;

        &Item {
          margin: 0 17px;
          min-width: unset;
        }
      }

      .section-logos__arrow {
        display: block;
      }
    }

    .slick-dots {
      --slick-dots-size: 12px;
      --slick-dots-background: #D4D3D7;
      --slick-dots-background-active: var(--color-dark2);
      --slick-dots-margin: 0 8px;
    }
  }

  &__arrow {
    --arrow-size: 32px;
    --arrow-offset: 35px;

    width: var(--arrow-size);
    height: var(--arrow-size);
    display: none;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    @media (max-width: 1279px) {
      --arrow-offset: 15px;
    }

    @media (max-width: 1199px) {
      --arrow-offset: 10px;
    }
    
    &.slick-prev {
      right: 100%;
      margin-right: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-prev.svg');
    }

    &.slick-next {
      left: 100%;
      margin-left: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-next.svg');
    }
  }

	&__list {
		display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;

		&Item {
      --logo-wrapper-width: 150px;
      --logo-wrapper-height: 50px;

			min-width: var(--logo-wrapper-width);
			min-height: var(--logo-wrapper-height);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
      }
    }
	}
}

<section class="section-logos" data-theme="grey">
      <div class="container">
        <div class="section-logos__inner">
          <div class="section-logos__header">
            <h2 class="section-logos__title">Trusted by 1,800+ customers</h2>

            <a href="#" class="moreButton">
              Learn More
              <span class="moreButton-icon">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6H10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round"/>
                  <path d="M8 2L12 6L8 10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </a>
          </div>

          <div class="section-logos__wrapper">
            <button class="section-logos__arrow slick-prev"></button>
            <button class="section-logos__arrow slick-next"></button>

            <div class="section-logos__list">
              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/payoneer.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/masterclass.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/monday.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/lufthansa.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/adobe.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
  -moz-appearance: textfield;
}
<!doctype html>
<html lang="en">
<head>
  
	<!-- **PAGE METADATA** -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello, world!</title>

	<!-- **BOOTSTRAP CSS**-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
      
	<h1>Hello, world!</h1>
    

	<!-- **BOOTSTRAP JS** -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<style>
span {
  background-color: yellow;  
}

span.ex1 {
  min-width: 500px;
  display: inline-block;
}
</style>
</head>
<body>
<h1>The min-width Property</h1>

<h2>min-width: none (default):</h2>
<span>Lorem ipsum dolor sit amet...</span>

<h2>min-width: 500px:</h2>
<span class="ex1">Lorem ipsum dolor sit amet...</span>

</body>
</html>
<body>
<h1>The min-height Property</h1>

<h2>min-height: none (default):</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h2>min-height: 200px:</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>


<style>
p {
  background-color: yellow;  
}

p.ex1 {
  min-height: 100px;
}
</style>
You're using an HTML5 button element. Remember the reason is this button has a default behavior of submit, as stated in the W3 specification as seen here: W3C HTML5 Button

So you need to specify its type explicitly:

<button type="button">Button</button>
<!-- Html -->
<div id="timer">
  <div id="days"></div>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

<!-- Js Code -->
function makeTimer() {
  //	var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");	
  var endTime = new Date("30 July 2022 12:00:00 GMT+01:00");			
  endTime = (Date.parse(endTime) / 1000);
  var now = new Date();
  now = (Date.parse(now) / 1000);
  var timeLeft = endTime - now;
  var days = Math.floor(timeLeft / 86400); 
  var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  if (hours < "10") { hours = "0" + hours; }
  if (minutes < "10") { minutes = "0" + minutes; }
  if (seconds < "10") { seconds = "0" + seconds; }
  $("#days").html(days + "<span>Days</span>");
  $("#hours").html(hours + "<span>Hours</span>");
  $("#minutes").html(minutes + "<span>Minutes</span>");
  $("#seconds").html(seconds + "<span>Seconds</span>");		
}
setInterval(function() { makeTimer(); }, 1000);
// Navbar Link Js
$('.nav-link').on('click', function() {
  $('.nav-link').removeClass('active');
  $(this).addClass('active');
});

$('.nav-link').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});
<ul class="navbar-nav mx-auto">
  <li class="nav-item ">
  		<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='index.php'){ ?>active <?php } ?>" href="index.php">Home  </a>
  </li>
  <li class="nav-item">
  		<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='mestropolis.php'){ ?>active <?php } ?>" href="mestropolis.php">Neotropolis</a>
  </li>
  <li class="nav-item">
    	<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='story.php'){ ?>active <?php } ?>" href="story.php">Story</a>
  </li>
  <li class="nav-item">
    	<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='cards.php'){ ?>active <?php } ?>" href="cards.php">Cards</a>
  </li>
  <li class="nav-item">
    	<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='packs.php'){ ?>active <?php } ?>" href="packs.php">Packs</a>
  </li>
  <li class="nav-item">
    	<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='Collectibles.php'){ ?>active <?php } ?>" href="Collectibles.php">Collectibles</a>
  </li>
  <li class="nav-item">
    	<a class="nav-link <?php if(substr($_SERVER['PHP_SELF'],1,15)=='faq.php'){ ?>active <?php } ?>" href="faq.php">FAQ</a>
  </li>
</ul>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>
{display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}

//For a min value of 240px and a max value of the available width of container, i.e. 1fr
#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}


-----------------------------------------------JS-------------------------------------------



<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>
<body onload="changeSrc()">
<!-- Load the default page in the iframe, for instance a1.html -->
<iframe id="abc" src="a1.html"></iframe>
<script>
    function changeSrc() {
        var hash = window.location.hash;
        var frame = document.getElementById("abc");

        if(hash == "#a1") {
            frame.src = "a1.html";
        }
        else if(hash == "#a2") {
            frame.src = "a2.html";
        }
        else if(hash == "#a3") {
            frame.src = "a3.html";
        }
        else {
            // default
            frame.src = "a1.html";
        }
    }
</script>
</body>
<iframe src="a1.html"></iframe>
<iframe src="a2.html"></iframe>
<iframe src="a3.html"></iframe>
#textexample {
  background: -webkit-linear-gradient(203.89deg, #FF0000 15.35%, #FF9900 99.34%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<img src="https://..." alt="This is an image" width="400" height="300" >
var dimensions = { width: 10, height: 15, length: 20 };
var keys = $.map( dimensions, function( value, key ) {
  return key;
});

// https://api.jquery.com/jquery.map/
if (myArray.indexOf(item) < 0) {
  myArray.push(item);
}
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:fillColor="#FFFFFF"
        android:pathData="
        M2,2
        C2,2 2,1 3,1
        L 21,1
        C21,1 22,1 22,2
        L 22,21
        C22,21 22,22 21,22

        L 14,22
        L 12,24
        L 10,22

        C3,22 2,22 2,21 Z"
        android:strokeWidth="0.2"
        android:strokeColor="#dadada" />

</vector>
   /   = Root directory
   .   = This location
   ..  = Up a directory
   ./  = Current directory
   ../ = Parent of current directory
   ../../ = Two directories backwards
{%- if product.metafields.my_fields.product_list != blank -%}

	<div class="variant-list">
  
  		{% for p in product.metafields.my_fields.product_list.value %}
 
 		<a href="{{ p.url }}" data-color="{{ p.metafields.my_fields.colorname.value }}" class="variant-img {% if product.handle == p.handle %}variant-active-hover variant-selected{% else %}variant-not-hover{% endif %}">
          
			<img src="{{ p | image_url: width: 150 }}" alt="{{ p.title }}">
              
		</a>
 	
 		{% endfor %}

	</div>
         
{%- endif -%}
<html>
</head>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
      />

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

   <script>
    const phoneInputField = document.querySelector("#phone");
    const phoneInput = window.intlTelInput(phoneInputField, {
        // preferredCountries: ["us", "mz", "sa", "za"],
        // initialCountry: "auto",
        // geoIpLookup: getIp,
        utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");

    function process(event) {
    event.preventDefault();
      
    const phoneNumber = phoneInput.getNumber();

    info.style.display = "";
    info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
    }

    function getIp(callback) {
     fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
       .then((resp) => resp.json())
       .catch(() => {
         return {
           country: 'us',
         };
       })
       .then((resp) => callback(resp.country));
    }
 </script>

</head>

 <body>
    <div class="container">
        <form id="login" onsubmit="process(event)">
          <p>Enter your phone number:</p>
          <input id="phone" type="tel" name="phone" />
          <input type="submit" class="btn" value="Verify" />
        </form>
        <div class="alert alert-info" style="display: none;"></div>
    </div>
 </body>
 </html>
.element {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
npx cap open ios #abrir o projecto no xcode

npx cap open android #abrir o projecto no android
<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>
<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools" <-- adicionas esta linha não removendo nada e seguindo esta lógica

  package="com.example">

  <application
+    android:hardwareAccelerated="true" <-- adicionas esta linha não removendo nada e seguindo esta lógica
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" /><-- adicionas esta linha não removendo nada e seguindo esta lógica

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" /><-- adicionas esta linha não removendo nada e seguindo esta lógica
</manifest>
ionic build --prod

#caso quiseres colocar a app para android dás o seguinte comando:
npm install @capacitor/android
npx cap add android

#caso quiseres colocar a app para iOS dás o seguinte comando:
npm install @capacitor/ios
npx cap add ios


#no final dão estes dois ultimos comandos

npx cap sync
npx cap copy Android ou ios #dependendo do qual escolheram
...

<ion-content class="scanner-hide" *ngIf="scanStatus == false">
  <div class="padding-container center">
    <ion-button color="primary" (click)="scanCode()"><ion-icon slot="start" name="qr-code-outline"></ion-icon> Scanear Código</ion-button> <!-- Botão que chama a função do scanner-->
  </div>
  <ion-card>
    <ion-card-content><h1>{{ result }}</h1></ion-card-content> <!-- mostra o resultado do scan -->
  </ion-card>
  
  <div class="scanner-ui"> <!-- Quando estamos a scanear, chama esta classe-->
    ...Scanner Interface
    </div>
    <div class="ad-spot"></div>
</ion-content>
<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
    <div class="parent" style="display: inline-flex">
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
    </div>
</div>
<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>
// return masked string
function maskify(cc) {
  const text = cc.replace(/\s/g,'').replace(/\w(?=\w{4})/gi,'#');
  return text
}
maskify('1')
/*
* Solution 1
*/
const vowels = ['a','e','i','o','u']
function disemvowel(str) {
  const text = str.split('');
  const textWithoutVowels = text.filter(el => !vowels.includes(el.toLowerCase()))
  return textWithoutVowels.join('')
}
disemvowel('This website is for losers LOL!"), "Ths wbst s fr lsrs LL!')

/*
* Solution 2
*/
function disemvowel(str) {
  const noVowels = str.replace(/[aeiou]/gi, '');
  return noVowels
}
disemvowel('This website is for losers LOL!"), "Ths wbst s fr lsrs LL!')
html
<div class="input-group" style="top: 15px">
        <input type="text" id="name" required class="input" />
        <label for="name" class="input-label"> Email address </label>
</div>


css

.input-group {
  position: relative;
}
.input {
  padding: 10px;
  border: none;
  border-radius: 4px;
  font: inherit;
  color: #fff;
  background-color: transparent;
  outline: 2px solid #d1c5fc;
}
.input-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(10px, 10px);
  transition: transform 0.25s;
}
.input:focus + .input-label,
.input:valid + .input-label {
  transform: translate(10px, -14px) scale(0.8);
  color: #000;
  padding-inline: 5px;
  background: #fff;
}
.input:is(:focus, :valid) {
  outline-color: #b2a7d7;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
​
<h1>My First Heading</h1>
<p>My first paragraph.</p>
​
</body>
</html>
​
​
<li key={index} className={activeClass, data.class, "main-class"}></li>
<!DOCTYPE html>
<head> 
<title>Start</title>
<link rel="stylesheet" href="film.css">
</head>
<html>
    <body>
        <div class="card"> 
            <h1>SV Codings</h1>
            <p1>HTML basics</p1> <br>
            <p2> DOCTYPE,<br>Head,<br>Title,<br>link CSS to HTML,<br>Body,<br>Div,<br>heading,<br>para,<br>class,<br>card, </p2>
        </div>
    </body>
</html>
[[ .card { 
    height: 100vh;
    width: cover;
    background-color: rgb(25, 219, 35);
    text-align: center;
}
h1{
    color: rgb(236, 234, 236);
} ]]
<a href='https://play.google.com/store/apps/details?id=com.tribe.techiemamma.tmtribe&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>
import styled from 'styled-components';
// backdrop
export const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000e1;
`

// для отключения скрола когда открыто окно
  useEffect(() => {
    document.body.style.overflow = isModalOpen ? "hidden" : "unset"
  }, [isProposalEditorOpen]);

// @ts-ignore
const Backdrop = ({children, onClick}) => {
  return (
    <Wrapper
      onClick={() => onClick()}
    >
      {children}
    </Wrapper>
  );
};

export default Backdrop;

// modal
const Modal = () => {
  return (
    <Wrapper
      onClick={(e) => e.stopPropagation()}
    >
    </Wrapper>
  );
};

export default Modal;

<p style="text-align: center;"><a class="fasc-button fasc-size-large fasc-type-popout fasc-rounded-medium" style="background-color: #bc2231; color: #ffffff;" target="_blank" rel="noopener" href="https://go.techiemamma.com/funnels/speed-optimization-checklist/">Speed Performance Checklist</a></p>
Welcome to your new site! Remember Cousett @ Techie Mamma is here to support you.

Need help with your website? Contact <a href="mailto:hellotechiemamma@gmail.com">Techie Mamma</a>!

<a href="http://techiemamma.com">Visit my site</a> for tutorials and all things WordPress, Tech and Mom. Visit the built-in videos for custom videos and basics of WordPress!

Have a new issue or ticket? <a href="https://techiemamma.com/ongoing-support-15-minute-task/" target="_blank" rel="noopener">Submit it and we will get on it right away!</a>
<picture>
    <source media="(min-width: 1440px)" srcset="/wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-l-850h.webp" type="image/webp">
    <source media="(min-width: 900px)" srcset="/wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-m-850h.webp" type="image/webp">
    <source srcset="/wp-content/uploads/2022/04/unternehmer-zitadelle-start-hero-s-700h.webp" type="image/webp">
    <img srcset="/wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-m-850h.png 900w, /wp-content/uploads/2022/03/unternehmer-zitadelle-start-hero-l-850h.png 1440w" src="/wp-content/uploads/2022/04/unternehmer-zitadelle-start-hero-s-700h.png" type="image/png" alt="Collage: Menschen im Gespräch">
</picture>
function makeActive(a) {
    const items = document.querySelectorAll('.tab-active');
    if (items.length) items[0].className = null;
    a.className = 'tab-active';
  }

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

            <?php

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

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

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

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



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

            ?>

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

            <?php

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

            ?>



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

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


CSS

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


jQuery

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

            </div>
        </li>
    </ul>
</div>
<script>
    $(document).ready(function() {
        $('.paginate').flexipage();
    });
</script>
<!-- INSERT BETWEEN BRACKETS { perpage:5, carousel: true, speed:800, animation: "swing" } -->
<button type="button" aria-expanded="false">
  <svg aria-hidden="true"> … </svg>
  Menu
</button>
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
</script>
<a href="#blog-ref-link-01" class="smooth-scroll-link">(1)</a>
<!-- The link it is scrolling to needs this id ** Doesn't need to be an <a> tag just the id to the element you want to scroll to -->
<a id="blog-ref-link-01" href="link to page here">Text</a>
<p><i class="fab fa-whatsapp fa-lg"></i><a href="https://wa.me/491730000000" target="_blank"> anrufen per Whatsapp</a></p>
defaults write com.apple.finder AppleShowAllFiles -boolean true; killall Finder
defaults write com.apple.finder AppleShowAllFiles -boolean false; killall Finder
{exp:channel:form channel="news"}
  <input name="title" type="text">
  <input type="submit" value="Submit">
{/exp:channel:form}
<!-- 2 column grid -->
<div class="grid grid-col-2">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
</div>

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

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

<?php

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

?>
preventZeroFirst($event)

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

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

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

.youtube img {
	width: 100%;
}

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

/*JS*/
(function() {

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

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

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

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

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

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

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

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

})();
/*JS*/

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

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

	});
}
/*JS*/

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

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

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

    <title>

        CSS

    </title>

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

</head>

<body>

    <p>

        First letter

    </p>

</body>

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

import useEventListener from './useEventListener';

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

const TIMING = 10;

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

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

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

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

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

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

          if (!isCloneAudio) setIsStartFadeClone(true);
        }

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

          console.log('FADE In');

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

          return;
        }

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

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

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

      return timerId;
    },
    [],
  );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		
locaweb

		

			


				

					Usuário
					

				


				

					Senha
					

				


				Esqueci minha senha

				

				

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



			

		

	



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

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

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

*{
    box-sizing: border-box;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>
const slider = document.querySelector(".simple-slider");
const value = document.querySelector("#slider-value");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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



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



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

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

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

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

.img1 {
  position: absolute;
}



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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .tabs-wrapper {
        display: none;
      }

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<span class="badge__container">
    <i class="icon ri-twitter-line"></i>
    <span class="badge badge__icon">20</span>
</span>

<span class="badge__container">
    <i class="icon ri-twitch-line"></i>
    <span class="badge badge__icon">20</span>
</span>

<span class="badge__container">
    <i class="icon ri-chat-history-fill"></i>
    <span class="badge badge__icon">20</span>
</span>

<span class="badge__container">
    <i class="icon ri-wechat-line"></i>
    <span class="badge badge__icon">20</span>
</span>
<ul class="list p-8">
    <li class="list-item">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
</ul>
<ul class="list p-8">
    <li class="list-item mt-4">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item mt-4">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item mt-4">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
</ul>
<div class="badge__container">
    <img class="avatar avatar--xsm" src="../../assets/avatarimg.jpg" alt="avatar-image" />
    <span class="badge__avatar badge__avatar--xsm"></span>
</div>

<div class="badge__container">
    <img class="avatar avatar--sm" src="../../assets/avatarimg.jpg" alt="avatar-image" />
    <span class="badge__avatar badge__avatar--sm"></span>
</div>

<div class="badge__container">
    <img class="avatar avatar--md" src="../../assets/avatarimg.jpg" alt="avatar-image" />
    <span class="badge__avatar badge__avatar--md"></span>
</div>

<div class="badge__container">
    <img class="avatar avatar--lg" src="../../assets/avatarimg.jpg" alt="avatar-image" />
    <span class="badge__avatar badge__avatar--lg"></span>
</div>

<div class="badge__container">
    <img class="avatar avatar--xlg" src="../../assets/avatarimg.jpg" alt="avatar-image" />
    <span class="badge__avatar badge__avatar--xlg"></span>
</div>
            <div class="alert alert--primary">A simple primary alert</div>

            <div class="alert alert--secondary">A simple secondary alert</div>

            <div class="alert alert--success">A simple success alert</div>

            <div class="alert alert--danger">A simple danger alert</div>

            <div class="alert alert--warning">A simple warning alert</div>

            <div class="alert alert--info">A simple info alert</div>
<div class="navigation">
    <div class="oneside">
        <button class="btn-navbar">
            <i class="fa fa-bars"></i>
        </button>
        <div class="title-navbar">
            San Francisco, CA
        </div>
    </div>
    <div class="other-side">
        <ul class="list-navbar">
            <li class="list">
                <i class="fa fa-download"></i>
            </li>
            <li class="list">
                <i class="fa fa-print"></i>
            </li>
            <li class="list">
                <i class="fa fa-bookmark"></i>
            </li>
        </ul>
    </div>
</div>
<ul class="unordered-list">
    <li class="list-ele">List 1
        <ul class="unordered-list">
            <li class="list-ele">List 2</li>
            <li class="list-ele">List 3</li>
        </ul>
    </li>
    <li class="list-ele">List 2</li>
    <li class="list-ele">List 3
        <ul class="unordered-list">
            <li class="list-ele">List 2</li>
            <li class="list-ele">List 3</li>
        </ul>
    </li>
    </li>
    <li class="list-ele">List 4</li>
</ul>
<ul class="unordered-list">
    <li class="list-ele">List 1</li>
    <li class="list-ele">List 2</li>
    <li class="list-ele">List 3</li>
    <li class="list-ele">List 4</li>
</ul>
<div class="alert alert-sucess"><span class="material-icons">check_circle</span>This is a Success alert <span class="material-icons mr-left-auto alert-btn">clear</span></div>
<div class="alert alert-gray">This is a info alert <span class="material-icons mr-left-auto alert-btn">clear</span></div>     
<p class="grey-text">Grey text</p>
<p class="medium-text">Medium text</p>
<p class="small-text">Small Text</p>
<p class="extra-small-text">Extra Small Text</p>
<p class="large-text">Large Text</p>
<p class="lower-text">loWERcasE tExt</p>
<p class="upper-text">UppeERcase text</p>
<p class="text-align-center">Center align</p>
<p class="text-align-right">Right align</p>
<p class="text-align-left">Left align </p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="text-lg text-left">Paragraph 2</p>
<p class="text-lg text-center">Paragraph 2</p>
<p class="text-lg text-right">Paragraph 2</p>
<h2 class="headline-lg text-gray">Headline 2</h2>
<p class="text-lg text-gray">Paragraph 2</p>
   <p class="text-xl">Paragraph 1</p>
   <p class="text-lg">Paragraph 2</p>
   <p class="text-md">Paragraph 3</p>
   <p class="text-sm">Paragraph 4</p>
   <p class="text-xs">Paragraph 5</p>
 <h1 class="headline-xl">Headline 1</h1>
 <h2 class="headline-lg">Headline 2</h2>
 <h3 class="headline-md">Headline 3</h3>
 <h4 class="headline-sm">Headline 4</h4>
 <h5 class="headline-xs">Headline 5</h5>
<nav class="gu-navbar">
    <div class="nav-logo">Logo</div>
    <div class="nav-list">
        <div>
            <input type="search" class="nav-search" placeholder="search..." />
        </div>
        <ul>
            <a class="nav-list-item" href="#">Home</a>
        </ul>
        <ul>
            <a class="nav-list-item" href="#"> Wishlist</a>
        </ul>
        <ul>
            <a class="nav-list-item" href="#">Cart</a>
        </ul>
    </div>
</nav>
<div class="alert alert-sucess"><span class="material-icons">check_circle</span>This is a Success alert</div>
<div class="alert alert-warning"><span class="material-icons">warning</span>This is a warning alert</div>
<div class="alert alert-danger"><span class="material-icons">error</span>Error occured can not complete action</div>
<div class="alert alert-gray"><span class="material-icons">help</span>This is a info alert</div>
<div class="alert alert-danger ">Error occured can not complete action</div>
<div class="alert alert-gray ">This is a simple alert</div>
<nav class="gu-navbar">
    <div class="nav-logo">Logo</div>
    <div class="nav-list">
        <ul>
            <a class="nav-list-item" href="#"><i class="fas fa-user"></i> Profile</a>
        </ul>
        <ul>
            <a class="nav-list-item" href="#"><i class="fas fa-heart"></i> Wishlist</a>
        </ul>
        <ul>
            <a class="nav-list-item" href="#"><i class="fas fa-shopping-bag"></i> Cart</a>
        </ul>
    </div>
</nav>
<nav class="gu-navbar">
    <div class="nav-logo">Logo</div>
    <div class="nav-list">
        <ul>
            <a  class="nav-list-item" href="#">Home</a>
        </ul>
        <ul>
            <a  class="nav-list-item" href="#"> Wishlist</a>
        </ul>
        <ul>
            <a  class="nav-list-item" href="#">Cart</a>
        </ul>
    </div>
</nav>
<button class="btn flt-btn shadow display-flex">
                    <i class="fas fa-arrow-up flt-icon"></i>
                </button>
                <button class="btn flt-btn shadow display-flex">
                    <i class="fas fa-pen flt-icon"></i>
                </button>
<button class="btn btn-t-icon">
                    <i class="fas fa-shopping-cart btn-icon"></i>
                </button>
                <button class="btn btn-t-icon">
                    <i class="fas fa-trash btn-icon"></i>
                </button>
<button class="btn btn-t-icon">
                    <i class="fas fa-shopping-cart btn-icon"></i>
                    Add to cart</button>
                <button class="btn btn-t-icon">
                    <i class="fas fa-trash btn-icon"></i>
                    Remove</button>
<button class="btn btn-outline-primary">Primary</button>
                <button class="btn btn-outline-secondary">Secondary</button>
                <button class="btn btn-outline-cancel">Cancel</button>
<button class="btn btn-solid-primary">Primary</button>
                <button class="btn btn-solid-secondary">Secondary</button>
                <button class="btn btn-solid-cancel">Cancel</button>
<!-- simple toast-->
<div class="toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
<!-- dark toast -->
<div class="toast dark-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle white-btn"></i>
    </button>
</div>
<!-- success toast -->
<div class="toast success-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
<!-- danger toast -->
<div class="toast danger-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
<!-- warning toast -->
<div class="toast warning-toast">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button class="toast-btn">
        <i class="far fa-times-circle"></i>
    </button>
</div>
		<div class="alert alert-primary">This is a primary alert.</div>
                <div class="alert alert-success">This is a success alert.</div>
                <div class="alert alert-warning">This is a warning alert.</div>
                <div class="alert alert-danger">This is a danger alert.</div>
                <div class="alert alert-secondary">This is a secondary alert.</div>
<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>  

 
<div class="modal-wrapper w-100 h-100 justify-center align-center d-none p-fixed" id="list-modal-wrapper">
    <div class="modal-container rounded-md">
        <div class="p-8">
            <h2 class="headline-md">Modal header</h2>
            <div class="action-btns-wrapper mt-4" id="list-modal-buttons">
                <button class="btn btn-outline btn-primary-outline btn-action rounded-sm text-sm w-100 d-flex justify-start align-center p-2"><i class="fas fa-user mr-2"></i>
                    Item 1
                </button>
                <button class="btn btn-outline btn-primary-outline btn-action rounded-sm text-sm p-3 mt-4 w-100 d-flex justify-start align-center p-2"><i class="fas fa-user mr-2"></i>
                    Item 2
                </button>
                <button class="btn btn-outline btn-primary-outline btn-action rounded-sm text-sm p-3 mt-4 w-100 d-flex justify-start align-center p-2"><i class="fas fa-user mr-2"></i>
                    Item 3
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 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>
<link href="https://xenon-designs.netlify.app/Components/main.css" rel="stylesheet" />
<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>
 <div class="avatar avatar__text--xsm color">A</div>

 <div class="avatar avatar__text--sm color">B</div>

 <div class="avatar avatar__text--md color">C</div>

 <div class="avatar avatar__text--lg color">D</div>

 <div class="avatar avatar__text--xlg color">E</div>
<img class="avatar avatar--xsm" src="image source" alt="avatar-image" />

<img class="avatar avatar--sm" src="image source" alt="avatar-image" />

<img class="avatar avatar--md" src="image source" alt="avatar-image" />

<img class="avatar avatar--lg" src="image source" alt="avatar-image" />

<img class="avatar avatar--xlg" src="image source" alt="avatar-image" />
			<img
              class="avatar avatar--xsm"
              src="../../assets/avatarimg.jpg"
              alt="avatar-image"
            />

            <img
              class="avatar avatar--sm"
              src="../../assets/avatarimg.jpg"
              alt="avatar-image"
            />

            <img
              class="avatar avatar--md"
              src="../../assets/avatarimg.jpg"
              alt="avatar-image"
            />

            <img
              class="avatar avatar--lg"
              src="../../assets/avatarimg.jpg"
              alt="avatar-image"
            />

            <img
              class="avatar avatar--xlg"
              src="../../assets/avatarimg.jpg"
              alt="avatar-image"
            />
<div class="primary-bg-color">Primary background</div>
<div class="secondary-bg-color">secondary background</div>
<div class="light-bg-color">light background</div>
<div class="success-bg-color">success background</div>
<div class="alert alert--error">
    <i class="alert__icon alert__icon--error fas fa-exclamation-circle"></i>
    <span class="alert__msg--error">This a a error message</span>
</div>

<div class="alert alert--warning">
    <i class="alert__icon alert__icon--warning fas fa-exclamation-triangle"></i>
    <span class="alert__msg alert__msg--alert">This a a warning message</span>
</div>

<div class="alert alert--info">
    <i class="alert__icon alert__icon--info fas fa-info-circle"></i>
    <span class="alert__msg alert__msg--info">This a a info message</span>
</div>

<div class="alert alert--success">
    <i class="alert__icon alert__icon--success far fa-check-circle"></i>
    <span class="alert__msg alert__msg--success">This a a success message</span>
</div>
<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>
<span class="material-icons md-18 rated"> star_rate </span>
<span class="material-icons md-18 rated"> star_rate </span>
<span class="material-icons md-18 rated"> star_rate </span>
<span class="material-icons md-18"> star_rate </span>
<span class="material-icons md-18"> star_rate </span>
<span class="material-icons rated"> star_rate </span>
<span class="material-icons rated"> star_rate </span>
<span class="material-icons rated"> star_rate </span>
<span class="material-icons"> star_rate </span>
<span class="material-icons"> star_rate </span>
 <span class="primary-text">Primary-text</span>
 <span class="secondary-text">Secondary-text</span>
 <span class="ternary-text">Ternary-text</span>
 <span class="success-text">Success-text</span>
 <span class="warning-text">Warning-text</span>
 <span class="Danger-text">Danger-text</span>
 <span class="gray-text">Gray-text</span>
 <span class="danger-text">Danger-text</span>
 <span class="light-text">Light-text</span>
 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
 <p><del>This line of text is meant to be treated as deleted text.</del></p>
 <p><u>This line of text will render as underlined</u></p>
 <p><strong>This line rendered as bold text.</strong></p>
 <p><em>This line rendered as italicized text.</em></p>
<span class="small-text">This is small text</span>
 <span class="centered-text"> This is centered text</span>
<span class="subtitle">This is subtitle </span>
<div class="modal-wrapper w-100 h-100 justify-center align-center d-none p-fixed" id="simple-modal-wrapper">
    <div class="modal-container rounded-md">
        <div class="p-8">
            <h2 class="headline-md">Modal header</h2>
            <p class="text-sm mt-3">
                Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
                ac consectetur ac, vestibulum at eros.
            </p>
            <div class="action-btns-wrapper mt-4 d-flex justify-end" id="simple-modal-buttons">
                <button class="btn btn-primary btn-action rounded-sm text-sm p-3">
                    Save Changes
                </button>
                <button class="btn btn-outline btn-action btn-primary-outline rounded-sm text-sm p-3 ml-4">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<!-- put this in your css file --> 
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&family=Roboto:wght@100;300;400;900&display=swap");
<h1>This is heading text - h1</h1>
<h2>This is heading text -h2</h2>
<h3>This is heading text -h3</h3>
<h4>This is heading text -h4</h4>
<h5>This is heading text -h5</h5>
<h6>This is heading text -h6</h6>
<span class="title">This is title text</span>
<span class="title title-lg">This is title text-lg</span>
<span class="title title-md">This is title text-md </span>
<span class="title title-sm">This is title text-sm </span>
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>
<div class="avatar avatar--xl">
    <img class="avatar__img avatar__img--xl" src="https://i.pravatar.cc/300
                  " alt="avatar" />
</div>

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

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

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

<div class="avatar avatar--xs">
    <img class="avatar__img avatar__img--xs" src="https://i.pravatar.cc/300
                    " alt="avatar" />
</div>
<!DOCTYPE html>
<html>
<head>
<title>HTML video Tag</title>
</head>
<body>
<video controls="controls" src="/video.mp4" height="150" width="250">
Your browser does not support the HTML5 Video element.
</video>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>HTML ul tag</title>
</head>
<body>
    <h1>HTML Unordered List</h1>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!</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>
<head>
    <title>HTML ol tag</title>
</head>
<body>
    <h1>HTML Ordered List</h1>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>HTML li tag</title>
</head>
<body>
    <h1>HTML List</h1>
    <ul>
        <li>One 1</li>
        <li>Two 2</li>
        <li>Three 3</li>
    </ul>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>HTML label tag</title>
</head>
<body>
    <form>
        <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>
    </form>
</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>
<div class="card-wrapper product-card">
      <div class="p-2">
        <h2 class="text-center headline-md">Card header</h2>
      </div>
      <div class="px-8 py-2">
        <p class="text-sm">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores,
          corrupti unde. Perspiciatis eos sunt temporibus nulla atque soluta
          saepe inventore necessitatibus dolorem aperiam alias placeat, eveniet
          quos sint nisi dignissimos!
        </p>
      </div>
    </div>
<div class="card-wrapper product-card p-relative">
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
      <div
        class="text-overlay-container p-absolute w-100 h-100 container-center"
      >
        <span class="text-overlay text-uppercase text-md p-5 rounded-md"
          >Out of Stock</span
        >
      </div>
    </div>
<div class="card-wrapper product-card box-shadow-lg">
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
<button
      type="button"
      class="btn rounded-sm text-sm p-3 btn-primary reset-dismissed-card"
    >
      Reset
    </button>
    <div class="card-wrapper dismiss-card-wrapper product-card">
      <div class="close-icon-wrapper">
        <i class="fas fa-times-circle p-2 fa-3x"></i>
      </div>
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
<!-- for HTML -->
<link rel="stylesheet" href="https://neonui.netlify.app/css/main.css">


<!-- for CSS Import -->
@import url('https://neonui.netlify.app/css/main.css');
<div class="card-wrapper product-card">
      <span class="vertical-card-badge text-sm p-3 p-relative"
        >Best Seller</span
      >
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
// variant 1 
<div class="card-wrapper product-card horizontal-card-wrapper d-flex">
      <div class="p-4 container-center">
        <img
          class="img-responsive horizontal-card-img"
          src="../../assets/monitor.png"
          alt="monitor image"
        />
      </div>
      <div class="p-3">
        <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2>

        <div class="pt-3">
          <div class="product-price-wrapper">
            <span class="product-discount-price text-sm font-wt-bold"
              >Rs. 7,999.00</span
            >
            <span class="product-original-price text-sm ml-6"
              >Rs. 9,438.82</span
            >
          </div>
          <span class="product-discount font-wt-bold text-sm">Save 18%</span>
        </div>

        <div class="horizontal-card-btns-wrapper p-3 d-flex flex-col">
          <button type="button" class="btn btn-primary rounded-sm text-sm p-3">
            <i class="fas fa-shopping-cart mr-3"></i>
            Add to Cart
          </button>
          <button
            type="button"
            class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3"
          >
            <i class="fas fa-heart mr-3"></i>
            Add to Wishlist
          </button>
        </div>
      </div>
    </div>

//variant 2

 <div class="card-wrapper w-100 d-flex mt-4">
      <div class="p-4 container-center">
        <img
          class="img-responsive horizontal-card-img w-75"
          src="../../assets/monitor.png"
          alt="monitor image"
        />
      </div>
      <div class="p-3 w-100">
        <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2>

        <div class="pt-3">
          <div class="product-price-wrapper">
            <span class="product-discount-price text-sm font-wt-bold"
              >Rs. 7,999.00</span
            >
            <span class="product-original-price text-sm ml-6"
              >Rs. 9,438.82</span
            >
          </div>
          <span class="product-discount font-wt-bold text-sm">Save 18%</span>
        </div>

        <div class="d-flex my-2">
          <div class="d-flex align-center">
            <button
              type="button"
              class="btn btn-quantity btn-primary rounded-full"
            >
              <i class="fas fa-plus text-sm"></i>
            </button>
            <span class="text-sm mx-2 font-wt-semibold">1</span>
            <button
              type="button"
              class="btn btn-quantity btn-outline btn-primary-outline rounded-full"
            >
              <i class="fas fa-minus text-sm"></i>
            </button>
          </div>
          <button
            type="button"
            class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 ml-8"
          >
            <i class="fas fa-trash mr-3"></i>
            Remove
          </button>

          <button
            type="button"
            class="btn btn-primary rounded-sm text-sm p-3 ml-auto"
          >
            <i class="fas fa-heart mr-3"></i>
            Move to Wishlist
          </button>
        </div>
      </div>
    </div>
<div class="card-wrapper product-card">
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </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>
<p class="text-center">Hello, I am at center</p>
<p class="text-right">Hello, I am at Right</p>
<p class="text-left">Hello, I am at Left</p>
<p class="para-sm grey-text">Hello, I am grey text</p>
<p class="para-sm">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
<p class="para-md">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
<p class="para-lg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
<h1 class="heading-1">Heading 1</h1>
<h1 class="heading-2">Heading 2</h1>
<h1 class="heading-3">Heading 3</h1>
<h1 class="heading-4">Heading 4</h1>
<h1 class="heading-5">Heading 5</h1>
<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>
<!-- un-ordered list -->
 <ul class="unordered-list">
     <li>Unordered List type 1</li>
     <li class="list-type-sqr">Unordered List type 2</li>
     <li class="list-type-circle-outlined">Unordered List type 3</li>
 </ul>
<!-- ordered list -->
  <ol class="ordered-list">
     <li class="list-type-captial"> OL Capital Alphabets</li>
     <li class="list-type-small">OL Small Alphabets</li>
     <li class="list-type-number">OL with Numbers</li>
  </ol>
<ol class="ordered-list">
     <li class="list-type-no-bullet "> OL with no bullet</li>
     <li class="list-type-lower-roman">OL Capital Roman</li>
     <li class="list-type-cap-roman">OL Small Roman</li>
</ol>
<form class="form-container">
    <span class="msg-error">Enter correct Email and Password</span>

    <input class="input input-error" type="email" name="email-id" placeholder="Enter Your Email" />
    <input class="input input-error" type="password" name="password" placeholder="Enter Your Password" />

    <button class="btn danger form-btn">
        <i class="fas fa-door-open"></i> Log In
    </button>
</form>
<form class="form-container">
    <input class="input" type="email" name="email-id" placeholder="Enter Your Email" />
    <input class="input" type="password" name="password" placeholder="Enter Your Password" />

    <button class="btn danger form-btn">
        <i class="fas fa-door-open"></i> Log In
    </button>
</form>
<div class="textarea-container">
    <textarea class="textarea" placeholder="Enter Your Message Here"></textarea>

    <button class="btn secondary textarea-btn">
        <i class="fas fa-paper-plane"></i> Send
    </button>
</div>
<img class="img-responsive" src="src of img1" alt="" />
<img class="img-squared" src="scr of the image1" alt="" />
<img class="img-squared" src="scr of the image2" alt="" />
<img class="img-rounded" src="scr of the image1" alt="" />
<img class="img-rounded" src="src of the image2" alt="" />
<ul class="list-group">
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round secondary-bg-color"></span>
        </div>
        You have new Notification
    </li>
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round success-bg-color"></span>
        </div>
        You have new Notification
    </li>
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round ternary-bg-color"></span>
        </div>
        You have new Notification
    </li>
    <li class="list-group-item">
        <div class="badge-with-avatar">
            <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
            <span class="badge badge-round danger-bg-color"></span>
        </div>
        You have new Notification
    </li>

</ul>
<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>
  const showToast = document.querySelector("#showToast");
  const toast = document.querySelector(".toast");
  showToast.addEventListener("click", () => {
    toast.classList.toggle("hidden");
  });

  const closeToast = document.querySelector(".close-toast")
  closeToast.addEventListener("click", () => {
    toast.classList.toggle("hidden");
  })
<!-- CSS code --> 
<div class="toast gray-bg-color light-text hidden">
    <div class="toast-text">Can't send photo. Retry in 5 seconds.</div>
    <div class="toast-text secondary-text">
        <strong> RETRY </strong>
    </div>
    <div class="toast-text close-toast">&times</div>
</div>
  <svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.7562 28.0125L34.9291 31.9896L32.1625 37.1771L27.8396 45.65L26.975 52.7396L30.0875 62.7688L37.1771 66.7459H47.8979L57.9271 59.1375L62.4229 47.2063L52.0479 34.5834L49.1083 27.4938L34.7562 28.0125Z" fill="#ECEFF1"/>
<path d="M59.3105 37.8688C56.5438 33.8917 54.2959 31.4709 53.0855 26.4563C51.875 21.4417 53.4313 22.825 52.3938 18.5021C51.875 16.2542 51.0105 14.6979 50.1459 13.4875C49.1084 12.2771 47.898 11.5854 47.2063 11.4125C45.65 10.5479 42.0188 9.16461 37.523 11.5854C32.8542 14.0063 33.373 19.1938 34.2375 29.7417C34.2375 30.4334 34.0646 31.2979 33.7188 31.9896C33.0271 33.5459 31.8167 34.9292 30.7792 36.1396C29.5688 37.8688 28.3584 39.5979 27.4938 41.5C25.4188 45.4771 23.5167 50.4917 24.0355 52.3938C24.9 52.2209 35.7938 68.8209 35.7938 69.1667C36.4855 68.9938 39.425 68.9938 42.0188 68.9938C45.65 68.8209 47.725 68.6479 50.6646 69.3396C50.6646 68.8209 50.4917 68.3021 50.4917 67.7834C50.4917 66.7459 50.6646 65.8813 50.8375 64.6709C51.0105 63.8063 51.1834 62.9417 51.3563 61.9042C49.6271 63.4604 46.5146 65.1896 43.575 65.7084C40.9813 66.2271 36.6584 65.3625 34.5834 62.7688C34.7563 62.7688 35.1021 62.7688 35.275 62.5959C35.7938 62.423 36.3125 62.25 36.4855 61.9042C37.0042 61.0396 36.6584 60.175 36.3125 59.6563C35.9667 59.1375 33.373 57.2355 32.1625 56.1979C30.9521 55.1604 30.2605 54.6417 29.5688 53.95L28.1855 52.5667C27.8396 52.2209 27.6667 51.875 27.4938 51.7021C27.148 50.8375 26.975 49.8 27.148 48.4167C27.3209 46.5146 28.0125 44.9584 28.8771 43.2292C29.223 42.5375 30.0875 41.1542 30.0875 41.1542C30.0875 41.1542 27.148 48.4167 28.7042 50.6646C28.7042 50.6646 28.8771 48.4167 29.5688 46.1688C30.0875 44.6125 30.9521 42.3646 31.9896 41.1542C33.0271 39.9438 35.6209 35.4479 35.7938 32.6813C35.7938 31.4709 35.9667 30.2604 35.9667 29.3959C35.275 28.7042 47.3792 26.975 48.0709 28.8771C48.2438 29.5688 50.6646 35.7938 52.048 39.0792C52.7396 40.6354 53.6042 42.0188 54.123 43.7479C54.6417 45.65 54.9875 48.2438 54.9875 50.8375C54.9875 51.3563 54.9875 52.2209 54.8146 53.0854C55.1605 53.0854 61.9042 45.8229 53.95 39.7709C53.95 39.7709 58.7917 42.0188 58.9646 46.5146C59.1375 50.1459 57.5813 53.0854 57.2355 53.6042C57.4084 53.6042 60.8667 55.1604 61.0396 55.1604C61.7313 55.1604 63.1146 54.6417 63.1146 54.6417C63.2875 54.123 63.8063 52.7396 63.8063 52.2209C65.0167 48.2438 62.0771 41.8459 59.3105 37.8688Z" fill="black"/>
<path d="M37.35 26.4562C38.5915 26.4562 39.5979 24.9079 39.5979 22.9979C39.5979 21.0879 38.5915 19.5396 37.35 19.5396C36.1085 19.5396 35.1021 21.0879 35.1021 22.9979C35.1021 24.9079 36.1085 26.4562 37.35 26.4562Z" fill="#ECEFF1"/>
<path d="M45.1312 26.8021C46.7547 26.8021 48.0708 25.0215 48.0708 22.825C48.0708 20.6285 46.7547 18.8479 45.1312 18.8479C43.5077 18.8479 42.1917 20.6285 42.1917 22.825C42.1917 25.0215 43.5077 26.8021 45.1312 26.8021Z" fill="#ECEFF1"/>
<path d="M38.607 23.2342C38.4633 22.0973 37.8091 21.2436 37.1459 21.3274C36.4827 21.4112 36.0615 22.4009 36.2052 23.5378C36.349 24.6748 37.0031 25.5285 37.6663 25.4446C38.3295 25.3608 38.7507 24.3712 38.607 23.2342Z" fill="#212121"/>
<path d="M44.9584 25.7646C45.9134 25.7646 46.6876 24.7582 46.6876 23.5167C46.6876 22.2752 45.9134 21.2688 44.9584 21.2688C44.0034 21.2688 43.2292 22.2752 43.2292 23.5167C43.2292 24.7582 44.0034 25.7646 44.9584 25.7646Z" fill="#212121"/>
<path d="M67.9562 61.5584C67.2645 61.2126 66.0541 60.6938 65.0166 59.1376C64.4978 58.273 64.6708 55.8522 63.8062 54.8147C63.2874 54.123 62.5957 54.4688 62.4228 54.4688C60.8666 54.8147 57.2353 57.2355 54.8145 54.4688C54.4687 54.123 53.9499 53.6042 53.0853 53.6042C52.2208 53.6042 51.8749 53.9501 51.5291 54.6417C51.1833 55.3334 51.1833 55.8522 51.1833 57.5813C51.1833 58.9647 51.1833 60.5209 51.0103 61.7313C50.6645 64.6709 50.1458 66.4001 50.1458 68.1293C50.1458 70.0313 50.6645 71.2418 51.3562 71.7605C51.8749 72.2793 52.7395 72.6251 54.6416 72.6251C56.5437 72.6251 57.7541 71.9334 58.9645 70.723C59.8291 69.8584 60.5208 69.5126 62.9416 67.7834C64.8437 66.573 67.7832 65.0167 68.302 64.498C68.6478 64.1522 69.1666 63.9793 69.1666 62.9418C69.1666 62.0772 68.4749 61.7313 67.9562 61.5584Z" fill="#FFC107"/>
<path d="M33.2 62.0771C31.4708 59.3105 31.2979 58.7917 30.0875 57.0626C29.05 55.3334 26.802 52.048 25.4187 52.048C24.3812 52.048 23.8625 52.5667 23.1708 53.2584C22.4791 53.9501 21.7875 55.5063 20.577 56.3709C19.5395 57.2355 16.6 57.0626 15.9083 58.1001C15.2166 59.1376 16.6 60.6938 16.6 63.2876C16.6 64.3251 15.7354 65.0167 15.5625 65.7084C15.3895 66.573 15.2166 67.0917 15.5625 67.7834C16.2541 68.8209 17.1187 69.1667 22.9979 70.3771C26.1104 71.0688 29.05 72.798 30.952 72.9709C32.8541 73.1438 36.1395 72.9709 36.1395 68.3021C36.3125 65.5355 34.7562 64.8438 33.2 62.0771Z" fill="#FFC107"/>
<path d="M36.4853 30.7792C35.4478 30.0875 34.5833 29.3959 34.5833 28.3584C34.5833 27.3209 35.2749 26.975 36.3124 26.1105C36.4853 25.9375 38.3874 24.2084 40.2895 24.2084C42.1916 24.2084 44.4395 25.4188 45.3041 25.7646C46.8603 26.1105 48.4166 26.4563 48.2437 27.6667C48.0708 29.3959 47.8978 29.7417 46.1687 30.6063C44.9583 30.9521 42.7103 32.8542 41.1541 32.8542C40.4624 32.8542 39.4249 32.8542 38.7333 32.6813C38.2145 32.5084 37.3499 31.6438 36.4853 30.7792Z" fill="#FFC107"/>
<path d="M36.1396 29.3957C36.4855 29.7416 37.0042 30.0874 37.523 30.2603C37.8688 30.4332 38.3875 30.6062 38.3875 30.6062H39.9438C40.8084 30.6062 42.0188 30.2603 43.2292 29.5687C44.4396 29.0499 44.6125 28.7041 45.4771 28.3582C46.3417 27.8395 47.2063 27.3207 46.8605 27.1478C46.5146 26.9749 46.1688 27.1478 44.9584 27.8395C43.9209 28.5312 43.0563 28.877 42.0188 29.3957C41.5 29.5687 40.8084 29.9145 40.2896 29.9145H38.7334C38.2146 29.9145 37.8688 29.7416 37.35 29.5687C37.0042 29.3957 36.8313 29.2228 36.6584 29.2228C36.3125 29.0499 35.6209 28.3582 35.275 28.1853C35.275 28.1853 34.9292 28.1853 35.1021 28.3582L36.1396 29.3957Z" fill="#634703"/>
<path d="M41.3271 25.5916C41.5001 25.9374 41.8459 25.9374 42.0188 26.1104C42.1917 26.2833 42.3646 26.2833 42.3646 26.2833C42.5376 26.1104 42.3646 25.7645 42.1917 25.7645C42.1917 25.4187 41.3271 25.4187 41.3271 25.5916Z" fill="#634703"/>
<path d="M38.5604 25.9375C38.5604 26.1104 38.9063 26.2833 38.9063 26.1104C39.0792 25.9375 39.2521 25.7645 39.425 25.7645C39.7708 25.5916 39.5979 25.4187 39.0792 25.4187C38.7333 25.5916 38.7333 25.7645 38.5604 25.9375Z" fill="#634703"/>
<path d="M55.3334 56.5438V57.0625C55.6792 57.7542 56.5438 57.9271 57.2355 57.9271C58.273 57.9271 59.3105 57.2354 59.8292 56.5438C59.8292 56.3708 60.0021 56.1979 60.1751 56.025C60.5209 55.5063 60.6938 55.1604 60.8667 54.9875C60.8667 54.9875 60.6938 54.8146 60.6938 54.6417C60.5209 54.2958 60.0021 53.95 59.3105 53.7771C58.7917 53.6042 57.9271 53.4313 57.5813 53.4313C56.0251 53.2583 55.1605 53.7771 54.6417 54.2958C54.6417 54.2958 54.8146 54.2958 54.8146 54.4688C55.1605 54.8146 55.3334 55.1604 55.3334 55.6792C55.5063 56.025 55.3334 56.1979 55.3334 56.5438Z" fill="black"/>
</svg>
.Buttonbg {
  width: 356px;
  height: 128px;
  background-color: #0696FF;
  border-radius: 25px;
}

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

#tiny {
  position: absolute;
  left: 35px;
  font-size: small;
  color: white;
  
}

svg {
  position: absolute;
  top: 40px;
  left: 256px;
}
.Buttonbg {
  width: 356px;
  height: 128px;
  background-color: #0696FF;
  border-radius: 25px;
}

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

#tiny {
  position: absolute;
  left: 35px;
  font-size: small;
  color: white;
  
}

svg {
  position: absolute;
  top: 40px;
  left: 256px;
}
<div class="Buttonbg">
  <p id="txt">Text</p>
  <p id="tiny">$ sudo apt install CursorBridge</p>
</div> 
​

 <script id='okdesk-script' type='text/javascript'>
        WebFormSettings = {
          btn_text: 'Экспресс вызов',
          btn_text_color: '#ffffff',
          btn_color: '#d1ba60',
          btn_border_color: '#00ff91',
          btn_position: 'bottom',
          account_name: 'zvr',
          site_url: 'https://zvr.okdesk.ru/'
        };

        var scriptTag = document.createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.charset = 'utf-8';
        scriptTag.src = ('https://zvr.okdesk.ru/web-form/web-form.js');
        document.body.appendChild(scriptTag);
     </script>
<!-- Online -->
   <div class="avatar-status">
      <img src="/Images/person.jpg" alt="person" />
      <span class="status status-online"></span>
   </div>
<!-- DND -->
    <div class="avatar-status">
       <img src="/Images/person1.jpg" alt="person" />
       <span class="status status-dnd"></span>
    </div>
<!-- Offline -->
     <div class="avatar-status">
        <img src="/Images/person2.jpg" alt="person" />
        <span class="status status-offline"></span>
     </div>
</div>
<div>
    <img src="https://picsum.photos/id/1/80/120" alt="Avatar" class="avatar">
    <img src="https://picsum.photos/id/1/80/120" alt="Avatar " class="avatar size-large">
    <img src="https://picsum.photos/id/1/80/120" alt="Avatar" class="avatar size-larger">
    <img src="https://picsum.photos/id/1/80/120" alt="Avatar" class="avatar size-largest">
</div>
<form class="form-group">
    <h2>Sign in</h2>
    <label>
        <span class="input-label">
            Username
        </span>
        <input required type="text" />
    </label>

    <label>
        <span class="input-label">
            Email
        </span>
        <input required type="email" />
    </label>

    <label>
        <span class="input-label">
            Password
        </span>
        <input required minlength="5" type="password" placeholder="Password" class="input-error" />
    </label>
    <span class="validation-error">Password should be minimum 5 character.</span>
    <button class="btn btn-primary">Sign In</button>
</form>
<label>
    <input type="radio" name="radio-button" />
    Option 1
</label>
<label>
    <input type="radio" name="radio-button" />
    Option 2
</label>
<label>
    <input type="radio" name="radio-button" />
    Option 3
</label>
<label>
    <input type="checkbox" />
    <span class="input-label">
        Accept
    </span>
</label>

<label>
    <input checked type="checkbox" />
    <span class="input-label">
        Accept
    </span>
</label>

<label>
    <input disabled type="checkbox" />
    <span class="input-label">
        Disabled
    </span>
</label>
<label>
    <span for="input-label">
        Introduce about yourself
    </span>
    <textarea placeholder=""></textarea>
</label>
<!-- disabled attribute is used --> 
<label>
     <span class="input-label"> Email </span>
     <input disabled type="text" placeholder="Disabled Input" />
 </label>
 <label>
     <span class="input-label"> Enter your Name </span>
     <input class="input-element" required type="text" />
 </label>

 <label>
     <span class="input-label"> Enter your Password </span>
     <input class="input-element" required type="password" />
 </label>
 <div class="card vertical-card-container card-with-shadow">
     <div class="card-img">
         <img class="vertical-card-img" src="" alt="" />
         <span class="card-badge"> Best seller </span>
     </div>
     <div class="card-info">
         <h2 class="card-title">Men Shirt</h2>
         <h3 class="subtitle">subtitle</h3>
         <div class="card-body">
             <div>
                 <p class="disc-price">₹850</p>
                 <p class="actual-price">₹1700</p>
                 <p class="offer-info">(50% OFF)</p>
             </div>
         </div>
         <div class="card-footer">
             <button class="btn-link call-to-action vertical-btn">
                 Add to cart
             </button>
         </div>
     </div>
 </div>
            <div class="card horizontal-card-container">
                <div class="card-img">
                    <img class="horizontal-card-img" src="" alt="" />
                </div>
                <div class="card-info">
                    <h2 class="card-title">Nike Shoe</h2>
                    <h3 class="subtitle">subtitle</h3>
                    <div class="card-body">
                        <div>
                            <p class="disc-price">₹850</p>
                            <p class="actual-price">₹1700</p>
                            <p class="offer-info">(50% OFF)</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="btn-link call-to-action">Add to cart</button>
                        <button class="btn-link not-call-to-action">
                            Add to wishlist
                        </button>
                    </div>
                </div>
            </div>
 <div class="card text-only-card">
     <button class="card-dismiss-btn">
         <i class="fas fa-times"></i>
     </button>

     <h1 class="p-bottom-1">Heading</h1>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </p>
 </div>
              <div class="card vertical-card-container">
                  <div class="card-img">
                      <img class="vertical-card-img" src="" alt="" />
                      <div class="card-head-info">
                          <h2 class="card-title">HPCA Stadium</h2>
                          <h3 class="subtitle">Dharamshala Cricket Ground</h3>
                      </div>
                  </div>

                  <div class="card-info">
                      <div class="card-body">
                          <div>
                              <p>
                                  Book your seat to watch the match in the most beautiful
                                  Stadium in India
                              </p>
                          </div>
                          <div>
                              <p class="disc-price">₹850</p>
                              <p class="actual-price">₹1700</p>
                              <p class="offer-info">(50% OFF)</p>
                          </div>
                      </div>
                      <div class="card-footer">
                          <button class="btn-link call-to-action vertical-card-btn">
                              Book your seat
                          </button>
                      </div>
                  </div>
              </div>
              <div class="card vertical-card-container">
                  <div class="card-img">
                      <img class="vertical-card-img" src="https://images.unsplash.com/photo-1621931650010-d4d18def2f39?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="" />
                      <div class="card-head-info">
                          <h2 class="card-title">HPCA Stadium</h2>
                          <h3 class="subtitle">Dharamshala Cricket Ground</h3>
                      </div>
                  </div>

                  <div class="card-info">
                      <div class="card-body">
                          <div>
                              <p>
                                  Book your seat to watch the match in the most beautiful
                                  Stadium in India
                              </p>
                          </div>
                          <div>
                              <p class="disc-price">₹850</p>
                              <p class="actual-price">₹1700</p>
                              <p class="offer-info">(50% OFF)</p>
                          </div>
                      </div>
                      <div class="card-footer">
                          <button class="btn-link call-to-action vertical-card-btn">
                              Book your seat
                          </button>
                      </div>
                  </div>
              </div>
                <div class="card vertical-card-container">
                    <div class="card-img">
                        <img class="vertical-card-img" src="" alt="" />
                        <span class="card-badge"> Best seller </span>
                        <button class="dismiss-btn">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="card-info">
                        <h2 class="card-title">Men Shirt</h2>
                        <h3 class="subtitle">subtitle</h3>
                        <div class="card-body">
                            <div>
                                <p class="disc-price">₹850</p>
                                <p class="actual-price">₹1700</p>
                                <p class="offer-info">(50% OFF)</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="btn-link call-to-action vertical-btn">
                                Add to cart
                            </button>
                        </div>
                    </div>
                </div>
 <div class="p-relative text-md icon-badge-wrapper">
     <i class="fas fa-shopping-cart"></i>
     <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
 </div>

 <div class="p-relative text-md icon-badge-wrapper">
     <i class="far fa-envelope"></i>
     <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
 </div>
<button class="btn btn-success p-3 rounded-sm p-relative">
    <span class="text-sm">Action</span>
    <span class="badge btn-badge-position text-sm font-wt-bold rounded-full p-absolute">8</span>
</button>

<button class="btn btn-success p-5 rounded-sm p-relative">
    <span class="text-md">Action</span>
    <span class="badge btn-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
</button>
 <h1>
     <span class="p-relative headline-lg">Heading with a badge<span class="badge heading-badge-position p-absolute rounded-full text-sm font-wt-bold">4</span></span>
 </h1>

 <p>
     <span class="p-relative text-sm">Text with a badge<span class="badge text-badge-position p-absolute rounded-full text-sm font-wt-bold">4</span></span>
 </p>
<div class="avatar-lg p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-lg-position badge-status-online rounded-full d-inline-block p-absolute"></span>
</div>

<div class="avatar-md p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-md-badge-position status-offline rounded-full d-inline-block p-absolute"></span>
</div>

<div class="avatar-sm p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-sm-position badge-status-dnd rounded-full d-inline-block p-absolute"></span>
</div>

<div class="avatar-xs p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-xs-position badge-status-idle rounded-full d-inline-block p-absolute"></span>
</div>
 <div class="avatar-lg avatar-text rounded-full text-xl d-flex justify-center align-center">
     <span>VF</span>
 </div>
 <div class="avatar-md avatar-text rounded-full text-lg d-flex justify-center align-center">
     <span>VF</span>
 </div>
 <div class="avatar-sm avatar-text rounded-full text-md d-flex justify-center align-center">
     <span>VF</span>
 </div>
 <div class="avatar-xs avatar-text rounded-full text-sm d-flex justify-center align-center">
     <span>VF</span>
 </div>
<div class="avatar-lg">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>

<div class="avatar-md">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>
<div class="avatar-sm">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>
<div class="avatar-xs">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>
<!-- add class rounded-img -->
<img class="responsive-img rounded-img" src="https://picsum.photos/500" />
<!-- use class responsive-img on img tag to make it responsive -->
<img class="responsive-img" src="https://picsum.photos/500" />
<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="card card-horizontal">
    <!-- media div -->
    <div class="card-horizontal-top">
        <div class="card-media">
            <img class="" src="https://picsum.photos/200" />
        </div>
        <!-- content div -->
        <div class="card-content">
            <span class="title"> Chrome-book 500 </span>
            <span class="subtitle"> powered by Google </span>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
            <span>Price : <del>$500</del> &ensp; $455 </span>
        </div>
    </div>
    <!-- buttons div -->
    <div class="card-footer">
        <button class="btn btn-secondary-outline">
            <span class="material-icons md-18"> shopping_cart </span>
            Add to cart
        </button>
        <button class="btn btn-primary-outline">
            Buy Now
            <span class="material-icons md-18"> shopping_bag </span>
        </button>
    </div>

    <div class="card-badge danger-bg-color light-text">
        <span class=""> New </span>
    </div>
</div>
 <div class="card">
     <!-- card- header -->
     <div class="card-header">
         <span class="title">Welcome to MyPage</span>
         <span class="subtitle"> Amazing solution for everything </span>
     </div>

     <!-- cotent content  -->
     <div class="card-content">
         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
     </div>

     <!--  footer -->
     <div class="card-footer primary-text">
         Invite Your friends
         <span class="material-icons md-18"> share </span>
     </div>
 </div>
<div class="card">
    <!-- media -->
    <div class="card-media">
        <img class="responsive-img" src="https://picsum.photos/200" />
    </div>
    <!-- content -->
    <div class="card-content">
        <span class="title"> Chrome-book 500 </span>
        <span class="subtitle"> powered by Google </span>
        <div class="card-description">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        </div>
        <span>Price : <del>$500</del> &ensp; $455 </span>
    </div>
    <!-- footer -->
    <div class="card-footer">
        <button class="btn btn-secondary-outline">
            <span class="material-icons md-18"> shopping_cart </span>
            Add to cart
        </button>
        <button class="btn btn-primary">Buy Now</button>
    </div>
    <!-- badge -->
    <div class="card-badge danger-bg-color light-text">
        <span class=""> New </span>
    </div>
</div
<!-- card with dismis -->
<div class="card">
    <!-- media  -->
    <div class="card-media">
        <img class="responsive-img" src="https://picsum.photos/200" />
    </div>
    <!-- content  -->
    <div class="card-content ">
        <span class="title"> Chrome-book 500 </span>
        <span class="subtitle"> powered by Google </span>
        <div class="card-description">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum,
            dolor sit amet consectetur adipisicing elit.
        </div>
        <span>Price : <del>$500</del> &ensp; $455 </span>
    </div>
    <!-- footer  -->
    <div class="card-footer">
        <button class="btn btn-secondary-outline">
            <span class="material-icons md-18"> shopping_cart </span>
            Add to cart
        </button>
        <button class="btn btn-primary">Buy Now</button>
    </div>
	<!-- card dismiss -->
    <div class="card-dismiss light-bg-color">
        <span class="material-icons"> close </span>
    </div>
</div>
 <!-- card-overlay -->
 <div class="card">
     <!-- media div -->
     <div class="card-media">
         <img class="" src="https://picsum.photos/200" />
     </div>
     <!-- content div -->
     <div class="card-content">
         <span class="title"> Chrome-book 500 </span>
         <span class="subtitle"> powered by Google </span>
         <div class="card-description">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum,
             dolor sit amet consectetur adipisicing elit.
         </div>
         <span>Price : <del>$500</del> $455 </span>
     </div>

     <!-- buttons div -->
     <div class="card-footer">
         <button class="btn btn-secondary-outline">
             <span class="material-icons md-18"> shopping_cart </span>
             Add to cart
         </button>
         <button class="btn btn-primary-outline">
             Buy Now
             <span class="material-icons md-18"> shopping_bag </span>
         </button>
     </div>

     <div class="overlay-content gray-bg-color">
         <div class="overlay-text light-text">Out of Stock</div>
         <button class="btn btn-secondary btn-large">Remind me!</button>
     </div>
 </div>
<!-- card with header -->
<div class="card">
    <!-- card- header -->
    <div class="card-header">
        <span class="title"> One Plus 9T</span>
        <span class="subtitle"> powered by oneplus </span>
    </div>
    <!-- media div -->
    <div class="card-media">
        <img class="responsive-img" src="https://picsum.photos/200" />
    </div>
    <!-- content div -->
    <div class="card-content">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

        <span> <strong> Price :</strong> <del>$500</del> &ensp; $455 </span>
    </div>
    <!-- buttons div -->

    <div class="card-footer">
        <button class="btn btn-secondary-outline">
            <span class="material-icons md-18"> shopping_cart </span>
            Add to cart
        </button>
        <button class="btn btn-primary">
            Buy Now
            <span class="material-icons md-18"> shopping_bag </span>
        </button>
    </div>
 <button class="btn btn-primary-outline">
     Create new
     <i class="material-icons">add</i>
 </button>

 <button class="btn btn-danger-outline">
     Remove
     <i class="material-icons">delete</i>
 </button>
<button class="btn btn-secondary btn-float">
    <i class="material-icons">add</i>
</button>

<button class="btn btn-danger-outline btn-float">
    <i class="material-icons">delete</i>
</button>

<button class="btn btn-warning btn-float">
    <i class="material-icons">edit</i>
</button>
<button disabled class="btn btn-primary light-text">Primary</button>
<button disabled class="btn btn-secondary">Secondary</button>
<button disabled class="btn btn-danger-outline">Danger</button>
<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>
<button class="btn btn-primary btn-block">Primary</button>
<button class="btn btn-secondary-outline btn-block">Secondary</button>
 <button class="btn btn-primary-outline btn-small">Primary</button>
 <button class="btn btn-secondary btn-small">Secondary</button>
 <button class="btn btn-success-outline btn-small">Danger</button>
   <!-- adding class btn-large to regular and outline-buttons -->
   <button class="btn btn-primary-outline btn-large">Primary</button>
   <button class="btn btn-secondary btn-large">Secondary</button>
   <button class="btn btn-success-outline btn-large">Success</button>
   <button class="btn btn-warning btn-large">Warning</button>
 <div class="d-flex flex-col">
     <label class="input-label-required text-sm" for="email">Email</label>
     <input type="text" class="text-input w-100 p-3 text-sm" placeholder="abc@gmail.com" required />
 </div>

 <div class="d-flex flex-col">
     <label class="text-sm" for="name">Name</label>
     <input type="text" class="text-input w-100 p-3 text-sm" placeholder="Enter your name" required />
 </div>

 <div class="d-flex flex-col">
     <label class="input-label-required text-sm" for="password">Password</label>
     <input type="password" class="text-input w-100 p-3 text-sm" placeholder="Enter your password" required />
 </div>

 <div class="input-grp-err d-flex flex-col">
     <label class="input-label-required text-sm" for="confirm-password">Confirm Password</label>
     <input type="password" class="text-input w-100 p-3 text-sm" placeholder="Re-enter password" required />
     <span class="text-sm">Passwords not matched. Try Again</span>
 </div>

 <div class="d-flex flex-col">
     <label class="text-sm" for="country">Country</label>
     <input type="text" class="text-input text-sm w-100 p-3" name="country" value="India" readonly />
 </div>

 <div class="d-flex flex-col">
     <label class="text-sm" for="address">Enter Your Address</label>
     <textarea type="text" class="text-area w-100 p-3 text-sm" placeholder="Enter address here" rows="3"></textarea>
 </div>
<!--	use class .btn-variant-outline along with class .btn   -->
<button class="btn btn-primary-outline">Primary</button>
<button class="btn btn-secondary-outline">Secondary</button>
<button class="btn btn-ternary-outline">Ternary</button>
<button class="btn btn-success-outline">Success</button>
<button class="btn btn-warning-outline">Warning</button>
<button class="btn btn-danger-outline">Danger</button>
<button class="btn btn-dark-outline">Dark</button>
<img class="img-round rounded-full" src="https://source.unsplash.com/73iq0upkPnI" alt="tiger" />
<img class="img-round rounded-full" src="https://source.unsplash.com/7sfJhVSqIE4" alt="squirrel" />
 <img class="img-responsive" src="https://source.unsplash.com/1EYMue_AwDw" alt="scenary" />
 <button class="btn btn-primary">Primary</button>
 <button class="btn btn-secondary">Secondary</button>
 <button class="btn btn-ternary">Ternary</button>
 <button class="btn btn-success">Success</button>
 <button class="btn btn-warning">Warning</button>
 <button class="btn btn-danger">Danger</button>
 <button class="btn btn-dark">Dark</button>
 <a class="btn btn-link light-bg-color" href="#">Link</a>
 <!-- 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>
    <link rel="preload" as="font" href="//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.woff2" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" as="font" href="{{ 'Canela-Medium-Reduced.woff2' | asset_url }}" type="font/woff2" crossorigin="anonymous">
<div class="badge-with-avatar">
    <img class="avatar-md" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
    <span class="badge badge-round success-bg-color"></span>
</div>
<div>
    random text
    <span class="badge badge-round primary-bg-color">5</span>
</div>
<div>
    random text
    <span class="badge badge-round primary-bg-color">5</span>
</div>
<div>
    <span class="material-icons md-48"> email </span>
    <span class="badge  danger-bg-color">new</span>
</div>

<div>
    <span class="material-icons md-48"> error </span>
    <span class="badge badge-round danger-bg-color">5</span>
</div>
<div class="primary-alert">
    <span class="material-icons">
        email
    </span>
    <span>You have new Message!</>
</div>
  
<div class="error-alert">
    <span class="material-icons">
        error
    </span>
    <span>Danger: An error occured!</span>
</div>
  
<div class="warning-alert">
    <span class="material-icons">
        gpp_maybe
    </span>
    <span>Warning: Data may get leaked!</>
</div>

<div class="success-alert">
    <span class="material-icons">
        check_circle
    </span>
    <span>Success: Operation Successful!</span>
</div>
  <img class="avatar-xs" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
  <img class="avatar-sm" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
  <img class="avatar-md" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
  <img class="avatar-lg" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
          <div class="alert alert--primary center-children">
            <div class="alert__info center-children">
              <span class="material-icons md-18">sync</span>
              <span class="alert__desc text">
                <span class="alert__desc__keyword text">Upload </span>
					your photos to your gallery
				</span>
            </div>
            <div class="alert__action">
              <span class="material-icons">close</span>
            </div>
          </div>
          <div class="alert alert--secondary center-children">
            <div class="alert__info center-children">
              <span class="material-icons md-18">cloud</span>
              <span class="alert__desc text"
                ><span class="alert__desc__keyword text">Backup </span>your
                photos to your gallery</span
              >
            </div>
            <div class="alert__action">
              <span class="material-icons">close</span>
            </div>
          </div>
          <div class="alert alert--success center-children">
            <div class="alert__info center-children">
              <span class="material-icons md-18">check</span>
              <span class="alert__desc text"
                ><span class="alert__desc__keyword text"
                  >Congratulations!</span
                >added products to cart.</span
              >
            </div>
            <div class="alert__action">
              <span class="material-icons">close</span>
            </div>
          </div>
          <div class="alert alert--warning center-children">
            <div class="alert__info center-children">
              <span class="material-icons md-18">info</span>
              <span class="alert__desc text"
                ><span class="alert__desc__keyword text">Warning!</span>you're
                being redirected to an external website</span
              >
            </div>
            <div class="alert__action">
              <span class="material-icons">close</span>
            </div>
          </div>
          <div class="alert alert--failure center-children">
            <div class="alert__info center-children">
              <span class="material-icons md-18">error</span>
              <span class="alert__desc text"
                ><span class="alert__desc__keyword text">Failure!</span>your
                purchase failed. Try again.</span
              >
            </div>
            <div class="alert__action">
              <span class="material-icons">close</span>
            </div>
          </div>
            <div class="alert alert--primary--shaded center-children">
              <div class="alert__info center-children">
                <span class="material-icons md-18">sync</span>
                <span class="alert__desc text"
                  ><span class="alert__desc__keyword text">Upload </span>your
                  photos to your gallery</span
                >
              </div>
              <div class="alert__action">
                <span class="material-icons">close</span>
              </div>
            </div>
            <div class="alert alert--secondary--shaded center-children">
              <div class="alert__info center-children">
                <span class="material-icons md-18">cloud</span>
                <span class="alert__desc text"
                  ><span class="alert__desc__keyword text">Backup </span>your
                  photos to your gallery</span
                >
              </div>
              <div class="alert__action">
                <span class="material-icons">close</span>
              </div>
            </div>
            <div class="alert alert--success--shaded center-children">
              <div class="alert__info center-children">
                <span class="material-icons md-18">check</span>
                <span class="alert__desc text"
                  ><span class="alert__desc__keyword text"
                    >Congratulations!</span
                  >added products to cart.</span
                >
              </div>
              <div class="alert__action">
                <span class="material-icons">close</span>
              </div>
            </div>
            <div class="alert alert--warning--shaded center-children">
              <div class="alert__info center-children">
                <span class="material-icons md-18">info</span>
                <span class="alert__desc text"
                  ><span class="alert__desc__keyword text">Warning!</span>you're
                  being redirected to an external website</span
                >
              </div>
              <div class="alert__action">
                <span class="material-icons">close</span>
              </div>
            </div>
            <div class="alert alert--failure--shaded center-children">
              <div class="alert__info center-children">
                <span class="material-icons md-18">error</span>
                <span class="alert__desc text"
                  ><span class="alert__desc__keyword text">Failure!</span>your
                  purchase failed. Try again.</span
                >
              </div>
              <div class="alert__action">
                <span class="material-icons">close</span>
              </div>
            </div>
<img class="avatar" src="https://miro.medium.com/fit/c/262/262/1*MFLNc70kh8oLPUsDaUH4sg.jpeg" />
// 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>
<!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>MangaNotComics</title>
  </head>
  <body>
    <header>
      <a href="">
        MNC
        <img src="" alt="Manga Not Comics" />
      </a>

      <div class="header-nav">
          <nav>
              <ul>
                  <li><a href="">Home</a></li>
                  <li>
                      <a href="">Products</a>
                  </li>
                  <li>
                      <a href="">Sale</a>
                  </li>
                  <li><a href="">New Release</a></li>
              </ul>
          </nav>
      </div>
    </header>
  </body>
</html>
<a href="#">
    <button class="btn-floating">
        <i class="fas fa-arrow-up"></i>
    </button>
</a>
<div class="input-block">
    <input type="text" class="input-ele input-check" placeholder="search" />
</div>
<div class="input-block">
    <label class="input-label">Enter your Name</label>
    <input type="text" class="input-ele" placeholder="Enter your name here" />
</div>
<div class="input-block">
    <input type="password" class="input-ele" placeholder="Enter Password" />
</div>
<div class="input-block">
    <input class="input-ele" placeholder="Enter your name" />
</div>
<button class="btn btn-icon secondary">
    <i class="fad fa-shopping-cart"></i>
    <span>Add to cart</span>
</button>
<button class="btn btn-icon danger">
    <i class="fas fa-trash"></i>
    <span>Delete</span>
</button>
<button class="btn btn-icon outlined-danger">
    <i class="fas fa-trash"></i>
    <span>Delete</span>
</button>
<div class="alert outlined-simple-alert">
	<p>This is a Simple alert</p>
	<i class="far fa-times"></i>
</div>

<div class="alert outlined-success-alert">
	<p>This is a Success alert</p>
	<i class="far fa-times"></i>
</div>

<div class="alert outlined-warning-alert">
	<p>This is a Warning alert</p>
	<i class="far fa-times"></i>
</div>

<div class="alert outlined-danger-alert">
	<p>This is a Danger alert</p>
	<i class="far fa-times"></i>
</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>
<button class="btn btn-primary btn-floating p-4 rounded-full box-shadow-lg">
    <i class="fas fa-plus text-md"></i>
</button>

<button class="btn btn-primary btn-floating p-4 rounded-full box-shadow-lg">
    <i class="fas fa-trash text-md"></i>
</button>

<button class="btn btn-primary btn-floating p-4 rounded-full box-shadow-lg">
    <i class="fas fa-share text-md"></i>
</button>
<button class="btn btn-primary p-4 rounded-sm">
    <i class="fas fa-bolt mr-2"></i> Buy now
</button>

<button class="btn btn-outline btn-primary-outline p-4 rounded-sm">
    <i class="fas fa-shopping-cart mr-2"></i> Add To Cart
</button>
<button class="btn btn-icon"><i class="fas fa-heart text-md"></i></button>

<button class="btn btn-icon">
    <i class="fas fa-shopping-cart text-md"></i>
</button>

<button class="btn btn-icon"><i class="fas fa-trash text-md"></i></button>
 <button class="btn btn-link p-3 text-sm rounded-sm">
     <a href="#">Link Button</a>
 </button>
<button class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3">
    Primary
</button>

<button class="btn btn-outline btn-danger-outline rounded-sm text-sm p-3">
    Danger
</button>

<button class="btn btn-outline btn-success-outline rounded-sm text-sm p-3">
    Success
</button>
 <button class="btn btn-primary rounded-sm text-sm p-3">
     Primary
 </button>

 <button class="btn btn-danger rounded-sm text-sm p-3">Danger</button>

 <button class="btn btn-success rounded-sm text-sm p-3">
     Success
 </button>

 <button class="btn btn-primary btn-disabled rounded-sm text-sm p-3" disabled="disabled">
     Disabled
 </button>
  <button class="btn btn-primary rounded-sm text-md p-5">
      Primary
  </button>

  <button class="btn btn-danger rounded-sm text-md p-5">Danger</button>

  <button class="btn btn-success rounded-sm text-md p-5">
      Success
  </button>

  <button class="btn btn-primary btn-disabled rounded-sm text-md p-5" disabled="disabled">
      Disabled
  </button>
<button class="btn outlined-primary">Primary</button>
<button class="btn outlined-secondary">Secondary</button>
<button class="btn outlined-danger">Danger</button>
<button class="btn outlined-warning">Warning</button>
<button class="btn outlined-success">Success</button>
<button class="btn outlined-default">Default</button>
<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn danger">Danger</button>
<button class="btn warning">Warning</button>
<button class="btn success">Success</button>
<button class="btn default">Default</button>
<a href="" class="link-btn">Link Button</a>
 <div class="image-feature">
     <img src="image.jpg" alt="sunset" class="img-feat img-round" />
 </div>
<div class="image-feature">
    <img src="image.jpg" alt="sunset" class="img-feat" />
</div>
<!-- Success Alert -->
<div class="alert success-alert">
    <p>This is a Success alert</p>
    <i class="far fa-times"></i>
</div>
<!-- Danger Alert -->
<div class="alert danger-alert">
    <p>This is a danger alert</p>
    <i class="far fa-times"></i>
</div>
<!-- Warning Alert -->
<div class="alert warning-alert">
    <p>This is a warning alert</p>
    <i class="far fa-times"></i>
</div>
<!-- Simple Alert -->
<div class="alert simple-alert">
    <p>This is a simple alert</p>
    <i class="far fa-times"></i>
</div>
<div class="gu-badge">
    <span class="gu-icon">
        <i class="fas fa-envelope"></i>
        <span class="notify-num">10</span>
    </span>
</div>
<div class="gu-badge">
    <span class="gu-icon">
        <i class="fas fa-shopping-cart"></i>
        <span class="notify-num">10</span>
    </span>
</div>
 <div class="gu-badge">
     <img class="avatar" src="scr-img" alt="image" />
     <span class="avatar-notify">9</span>
 </div>
 <div class="gu-badge">
     <img class="avatar" src="scr-img" alt="image" />
     <span class="avatar-notify">5</span>
 </div>
<div class="gu-badge">
    <img class="avatar" src="address-of-the-image" alt="image" />
    <div class="online"></div>
</div>
<div class="gu-badge">
    <img class="avatar" src="address-of-the-image" alt="image" />
    <div class="offline"></div>
</div>
<div class="gu-badge">
    <img class="avatar" src="address-of-the-image" alt="image" />
    <div class="dnd"></div>
</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="alert alert-primary text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-info-circle mr-4"></i>This is Primary Alert with icon
    </div>

    <div class="alert alert-danger text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-exclamation-triangle mr-4"></i>This is Danger Alert with icon
    </div>

    <div class="alert alert-success text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-check-circle mr-4"></i>This is Success Alert with icon
    </div>

    <div class="alert alert-warning text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-exclamation-triangle mr-4"></i>This is Warning Alert with icon
    </div>
    <div class="alert alert-primary text-sm mx-5 p-4 rounded-sm">
      This is Primary Alert Example
    </div>

    <div class="alert alert-danger text-sm mx-5 p-4 rounded-sm">
      This is Danger Alert Example
    </div>

    <div class="alert alert-success text-sm mx-5 p-4 rounded-sm">
      This is Success Alert Example
    </div>

    <div class="alert alert-warning text-sm mx-5 p-4 rounded-sm">
      This is Warning Alert Example
    </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="alert alert-outlined alert-primary-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-info-circle mr-4"></i>This is Primary outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-danger-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-exclamation-triangle mr-4"></i>This is Danger outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-success-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-check-circle mr-4"></i>This is Success outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-warning-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-exclamation-triangle mr-4"></i>This is Warning outlined Alert with icon
 </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>
<div class="alert">
    <p class="msg-alert error">
        <i class="material-icons ">error</i>
        Please Check your network connection
    </p>
</div>
<div class="alert">
    <p class="msg-alert danger">
        <i class="material-icons">warning</i>
        Action can not be Undone
    </p>
</div>
 <div class="alert">
     <p class="msg-alert success">
         <i class="material-icons">done</i>
         Apps Updated
     </p>
 </div>
<div class="alert">
    <p class="msg-alert">
        <i class="material-icons">done</i>
        Thank You
    </p>
</div>
<div class="avatar">
    <div class="image">
        <img src="image.jpg" alt="sunset" class="avatar-image border-image" />
        <img src="image.jpg" alt="sunset" class="avatar-image round-image border-image" />
    </div>
</div>
<div class="avatar">
    <div class="image">
        <img src="image.jpg" alt="sunset" class="avatar-image round-image" />
    </div>
</div>
<div class="avatar">
    <div class="image">
        <img src="image.jpg" alt="sunset" class="avatar-image" />
    </div>
</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" />
@import url("https://grapheneui.netlify.app/Components/components.css");
<link rel="stylesheet" href="https://grapheneui.netlify.app/Components/components.css" />
      <img class="avatar avtr-sm sq-avtr" src="url-of-the-img" alt="image" />
      <img class="avatar avtr-md sq-avtr" src="url-of-the-img" alt="image" />
      <img class="avatar avtr-lg sq-avtr" src="url-of-the-img" alt="image" />
<img class="avatar avtr-sm" src="url-of-the-img" alt="image" />

<img class="avatar avtr-md" src="url-of-the-img" alt="image" />

<img class="avatar avtr-lg" src="url-of-the-img" alt="image" />
<img class="avatar" src="url-of-the-img" alt="image" />
<div class="card shadow-cont">
    <div class="container ">
        <div class="image">
            <img src="image.jpg" alt="sunset-and-glass-mug" class="img" />
        </div>
        <div class="text">
            <h2>Sunset In Aurangabad</h2>
            sub-heading
        </div>
        <div class="para">
            Visit the City of Gates, Historical Place in Maharashtra with your Family.
        </div>
        <div class="card-buttons">
            <div class="card-btn">
                <button type="submit" class="btn card-btn-items">
                    READ
                </button>
                <button type="submit" class="btn card-btn-items">
                    BOOKMARK
                </button>
            </div>
            <div class="card-icons">
                <i class="fa fa-heart-o"></i>
                <i class="fa fa-share-alt"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="container-horizon">
        <div class="oneside">
            <div class="image">
                <img src="image.jpg" alt="sunset-and-glass-mug" class="img-horizon" />
            </div>
            <div class="text-horizon">
                <h3>Sunset In Aurangabad</h3>
                sub-heading
            </div>
        </div>
        <div class="other-side">
            <div class="card-buttons">
                <div class="card-btn">
                    <button type="submit" class="btn card-btn-items">
                        READ
                    </button>
                    <button type="submit" class="btn card-btn-items">
                        BOOKMARK
                    </button>
                </div>
                <div class="card-icons">
                    <i class="fa fa-heart-o"></i>
                    <i class="fa fa-share-alt"></i>
                    <i class="fa fa-ellipsis-v"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="container text-only">
        <div class="text">
            <h2>Sunset In Aurangabad</h2>
            sub-heading
        </div>
        <div class="para">
            Visit the City of Gates, Historical Place in Maharashtra with your Family.
        </div>
        <div class="card-buttons">
            <div class="card-btn">
                <button type="submit" class="btn card-btn-items">
                    READ
                </button>
                <button type="submit" class="btn card-btn-items">
                    BOOKMARK
                </button>
            </div>
            <div class="card-icons">
                <i class="fa fa-heart-o"></i>
                <i class="fa fa-share-alt"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="container">
        <div class="image img-text">
            <img src="image.jpg" alt="sunset-and-glass-mug" class="img" />
            <div class="text text-overlay">
                <h2>Sunset In Aurangabad</h2>
                sub-heading
            </div>
        </div>
        <div class="para">
            Visit the City of Gates, Historical Place in Maharashtra with your Family.
        </div>
        <div class="card-buttons">
            <div class="card-btn">
                <button type="submit" class="btn card-btn-items">
                    READ
                </button>
                <button type="submit" class="btn card-btn-items">
                    BOOKMARK
                </button>
            </div>
            <div class="card-icons">
                <i class="fa fa-heart-o"></i>
                <i class="fa fa-share-alt"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="container">
        <div class="image">
            <img src="image.jpg" alt="sunset-and-glass-mug" class="img" />
            <div class="img-badge">Featured</div>
        </div>
        <div class="text">
            <h2>Sunset In Aurangabad</h2>
            sub-heading
        </div>
        <div class="para">
            Visit the City of Gates, Historical Place in Maharashtra with your Family.
        </div>
        <div class="card-buttons">
            <div class="card-btn">
                <button type="submit" class="btn card-btn-items">
                    READ
                </button>
                <button type="submit" class="btn card-btn-items">
                    BOOKMARK
                </button>
            </div>
            <div class="card-icons">
                <i class="fa fa-heart-o"></i>
                <i class="fa fa-share-alt"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="container">
        <div class="image">
            <img src="image.jpg" alt="sunset-and-glass-mug" class="img" />
        </div>
        <div class="text">
            <h2>Sunset In Aurangabad</h2>
            sub-heading
        </div>
        <div class="para">
            Visit the City of Gates, Historical Place in Maharashtra with your Family.
        </div>
        <div class="card-buttons">
            <div class="card-btn">
                <button type="submit" class="btn card-btn-items">
                    READ
                </button>
                <button type="submit" class="btn card-btn-items">
                    BOOKMARK
                </button>
            </div>
            <div class="card-icons">
                <i class="fa fa-heart-o"></i>
                <i class="fa fa-share-alt"></i>
                <i class="fa fa-ellipsis-v"></i>
            </div>
        </div>
    </div>
</div>
<div class="button">
    <button type="submit" class="btn float-btn">Float Button</button>
</div>
<div class="button">
    <button type="submit" class="btn icon-btn">Icon Button <i class="material-icons"> send</i></button>
</div>
<div class="button">
    <button type="submit" class="btn link-btn"><a href="#" class="link-btn" alt="button">Link Button</a></button>
</div>
<div class="button">
    <button type="submit" class="btn primary-btn">Primary Button</button>
</div>
<div class="button">
    <button type="submit" class="btn">Simple Button</button>
</div>
<div class="badge">
    <span class="avatar-img">
        <img src="avtar.jpg" alt="Avatar" class="avatar-img" />
        <span class="badge-on-avatar">10</span>
    </span>
</div>
<span class="text-for-badge">
    Text with badge
    <span class="badge">4</span>
</span>
<div class="badge">
   <i class="fa fa-home">
      <span class="badge-on-icon">5</span>
   </i>
</div>
white-space: nowrap;


<span style="white-space:nowrap">CSS 2.1</span>
    h2 = main menu
h1 = title of a news article
    h2 = subheading in the content of the news article
        h3 = subheading of the h2
            h4 = subheading of the h3
    h2 = subheading in the content of the news article
    h2 = Related news (the aside section)
    h2 = Contact us (in the footer)
        h3 = Address (the address information)
        h3 = Follow us (social media links)
<!--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
-->
<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;
}
-->
// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new Tooltip(tooltipTriggerEl, {
           html: true // <- this should do the trick!
     })
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camper Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <hr>
      <main>
        <section>
          <h2>Coffee</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr class="bottom-line">
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p class="address">123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
<html>
{% liquid
  for tag in product.tags
    if tag contains 'newlabel'
      assign productTag = 'collections.general.newlabel' | t
    elsif tag contains 'partylabel'
     assign productTag = 'collections.general.partylabel' | t
    elsif tag contains 'duurzaamlabel'
      assign productTag = 'collections.general.duurzaamlabel' | t
    elsif tag contains 'giftlabel'
      assign productTag = 'collections.general.giftlabel' | t
    elsif tag contains 'cominglabel'
      assign productTag = 'collections.general.cominglabel' | t
    elsif tag contains 'preorder'
      assign productTag = 'collections.general.pre_order' | t
    elsif tag contains 'label1'
      assign productTag = 'collections.general.label1' | t
    elsif tag contains 'label2'
      assign productTag = 'collections.general.label2' | t
    elsif tag contains 'label3'
      assign productTag = 'collections.general.label3' | t
    endif
  endfor
%}


{% if sidebar %}
  <div class="{% if products_per_row == 2 %}six columns {% cycle collection_group_thumb: 'alpha', 'omega' %}{% elsif products_per_row == 3 %}four columns {% cycle collection_group_thumb: 'alpha', '', 'omega' %}{% else %}three columns {% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}{% endif %} thumbnail {% cycle collection_group_mobile: 'even', 'odd' %}" itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
{% else %}
  <div class="{% if products_per_row == 2 %}eight columns {% cycle collection_group_thumb: 'alpha', 'omega' %}{% elsif products_per_row == 3 %}one-third column {% cycle collection_group_thumb: 'alpha', '', 'omega' %}{% else %}four columns {% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}{% endif %} thumbnail {% cycle collection_group_mobile: 'even', 'odd' %}" itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
{% endif %}

  {% if product.featured_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
    {% assign alt_text = product.title %}
  {% else %}
    {% assign alt_text = product.featured_image.alt %}
  {% endif %}

  {% if settings.align_height %}
    {% assign collection_height = settings.collection_height | plus: 0 %}
    {% assign product_aspect_ratio = product.featured_image.aspect_ratio | plus: 0 %}
    {% assign product_set_width = product_aspect_ratio | times: collection_height %}

    {% if product.featured_image.width >= product.featured_image.height %}
      {% assign align_height_value = 'width: 100%; height: auto;' %}
    {% else %}
      {% assign align_height_value = 'width: 100%;' %}
    {% endif %}

  {% endif %}

    {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
    {% unless the_snippet_fave_icon contains 'Liquid error' %}
    {{ the_snippet_fave_icon }}
    {% endunless %}
  <a href="{{ product.url | within: collection }}" itemprop="url">
    <div class="relative product_image">

      {% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
          <div class="sale_banner">{{ 'collections.general.sale' | t }}</div>
      {% endif %}

      {% render 'discount-percentage', product: product %}

      <div class="product_container swap-{{ settings.collection_secondary_image }}">
        <div class="image__container" style="{% if settings.align_height %} max-width: {{ product_set_width }}px; {% else %} max-width: {{- product.featured_image.width -}}px; {% endif %}">
          <img  src="{{ product.featured_image | product_img_url: '300x' }}"
                alt="{{ alt_text | escape }}"
                class="lazyload lazyload--fade-in"
                style="{{ align_height_value }} max-width: {{- product.featured_image.width -}}px;"
                data-sizes="auto"
                data-src="{{ product.featured_image | product_img_url: '2048x' }}"
                data-srcset=" {{ product.featured_image | product_img_url: '2048x' }} 2048w,
                              {{ product.featured_image | product_img_url: '1600x' }} 1600w,
                              {{ product.featured_image | product_img_url: '1200x' }} 1200w,
                              {{ product.featured_image | product_img_url: '1000x' }} 1000w,
                              {{ product.featured_image | product_img_url: '800x' }} 800w,
                              {{ product.featured_image | product_img_url: '600x' }} 600w,
                              {{ product.featured_image | product_img_url: '400x' }} 400w"
              />
          {% if settings.collection_secondary_image != blank %}
            <div class="image__container" style="max-width: {% if product.images.last != blank %}{{- product.images.last.width -}}px{% else %}{{- product.featured_image.width -}}px{% endif %}; ">
              <img src="{% if product.images.last != blank %}{{ product.images.last | product_img_url: '900x' }}{% else %}{{ product.featured_image | product_img_url: '900x' }}{% endif %}"
              class="secondary lazyload"
              alt="{{ alt_text | escape }}"
              />
            </div>
          {% endif %}
          {% if settings.quick_shop_enabled %}
            <span data-fancybox-href="#product-{{ product.id }}" class="quick_shop ss-icon" data-gallery="product-{{ product.id }}-gallery">
              <span class="icon-plus">QUICK VIEW</span>
            </span>
          {% endif %}
        </div>

      </div>
    </div>

    <div class="info">
      <span class="title" itemprop="name">
        {{ product.title }}</span>
      {% if settings.display_vendor_collection %}
        <div class="vendor">
          <span itemprop="brand">{{ product.vendor }}</span>
        </div>
      {% endif %}

      {% if settings.enable_shopify_collection_badges %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endif %}

        <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="price" content="{{ product.price_min | money_without_currency | remove: "," }}" />
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
          <meta itemprop="seller" content="{{ shop.name | escape }}" />
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          <meta itemprop="itemCondition" content="New" />

          {% if product.available %}
            {% if product.price_varies and product.price_min > 0 %}
              <small><em>{{ 'products.general.from' | t }}</em></small>
            {% endif %}
            {% if product.price_min > 0 %}
              <span class="money">{{ product.price_min | money }}</span>
            {% else %}
              {{ settings.free_price_text }}
            {% endif %}
            {% if product.compare_at_price_max > product.price %}
              <span class="was_price">
                <span class="money">{{ product.compare_at_price_max | money }}</span>
              </span>
            {% endif %}
          {% else %}
            <span class="sold_out">{{ 'products.product.sold_out' | t }}</span>
            <span class="money">{{ product.price_min | money }}</span>
          {% endif %}
        </span>

    </div>

    {% if productTag != blank %}
      <div class="new_banner">{{ productTag }}</div>
    {% endif %}
  </a>
  {% include 'collection-swatch' %}
</div>

{% if settings.quick_shop_enabled %}
  {% if product.description contains "#tab1" %}
    {% assign tabs = true %}
  {% else %}
    {% assign tabs = false %}
  {% endif %}

  <div id="product-{{ product.id }}" class="modal product-{{ product.id }} product_section {% if product.images.size > 1 %} thumbnail_position--{{settings.thumbnail_position}} {% endif %} product_slideshow_animation--{{settings.product_slideshow_animation}}"
       data-thumbnail="{{settings.thumbnail_position}}"
       data-slideshow-animation="{{settings.product_slideshow_animation}}"
       data-slideshow-speed="{{settings.slideshow_speed}}">
    <div class="container section" style="width: inherit">

      <div class="eight columns" style="padding-left: 15px">
        {% include 'product-images' with 'modal' %}
      </div>

      <div class="six columns">
        <h3>{{ product.title }}</h3>
        {% if settings.display_vendor_collection %}
          <p class="vendor">
            <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% assign variant = product.selected_or_first_available_variant %}

        {% unless product.tags contains 'coming-soon' %}
          <p class="modal_price">
            <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
            <span class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
              <span class="current_price {% if product.available == false %}hidden{% endif %}">
                {% if variant.price > 0 %}
                  <span class="money">{{ variant.price | money }}</span>
                {% else %}
                  {{ settings.free_price_text }}
                {% endif %}
              </span>
            </span>
            <span class="was_price">
              {% if variant.price < variant.compare_at_price and variant.available %}
                <span class="money">{{ variant.compare_at_price | money }}</span>
              {% endif %}
            </span>
          </p>

          {% include 'product-notify-me' %}
        {% endunless %}

        {% if settings.product_description_position == "top" %}
          {% if settings.description_words == "none" %}
            {{ product.description | split: '<!-- split -->' | first }}

            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
          {% else %}
            {% if tabs %}
              {{ product.description | split: '<!-- split -->' | first }}
            {% else %}
              <p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
            {% endif %}

            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
          {% endif %}
          <hr />
        {% endif %}

        {% unless product.tags contains 'coming-soon' %}
          {% include 'product-form', show_payment_button_quickshop: settings.show_payment_button %}
        {% endunless %}

        {% if settings.product_description_position == "bottom" %}
          <hr />
          {% if settings.description_words == "none" %}
            {{ product.description | split: '<!-- split -->' | first }}

            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
          {% else %}
            {% if tabs %}
              {{ product.description | split: '<!-- split -->' | first }}
            {% else %}
              <p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
            {% endif %}

            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>
{% endif %}
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% liquid
  for tag in product.tags
    if tag contains 'newlabel'
      assign productTag = 'collections.general.newlabel' | t
    elsif tag contains 'partylabel'
     assign productTag = 'collections.general.partylabel' | t
    elsif tag contains 'duurzaamlabel'
      assign productTag = 'collections.general.duurzaamlabel' | t
    elsif tag contains 'giftlabel'
      assign productTag = 'collections.general.giftlabel' | t
    elsif tag contains 'cominglabel'
      assign productTag = 'collections.general.cominglabel' | t
    elsif tag contains 'preorder'
      assign productTag = 'collections.general.pre_order' | t
    elsif tag contains 'label1'
      assign productTag = 'collections.general.label1' | t
    elsif tag contains 'label2'
      assign productTag = 'collections.general.label2' | t
    elsif tag contains 'label3'
      assign productTag = 'collections.general.label3' | t
    endif
  endfor
%}


<div class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %}">
  <ul class="slides">
    {% for image in product.images %}
      <li data-thumb="{{ image | product_img_url: '400x400' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
        {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
          {% assign src = image.alt | split: 'src="' %}
          {% assign src = src[1] | split: '"' | first %}

          {% if src contains '?' %}
            {% assign src = src | append: '&amp;autoplay=1' %}
          {% else %}
            {% assign src = src | append: '?autoplay=1' %}
          {% endif %}

          <div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}">
            <div>
              <a href="{{ src }}" class="fancybox fancybox.iframe" data-fancybox-group="{{ product.id }}" title="{{ product.title | escape }}">
                {{ image.alt }}
              </a>
            </div>
          </div>
        {% else %}
          <a href="{{ image | product_img_url: '2048x' }}" class="fancybox" data-fancybox-group="{{ product.id }}" title="{{ image.alt | escape }}">
            <div class="image__container" style="max-width: {{ image.width }}px">
              <div class="image__inner">
                <img  src="{{ image | product_img_url: '300x' }}"
                      alt="{{ image.alt | escape }}"
                      class="lazyload lazyload--fade-in cloudzoom {% if featured_image.id == image.id %}featured_image{% endif %}"
                      data-image-id="{{ image.id }}"
                      data-index="{{ forloop.index0 }}"
                      data-cloudzoom="zoomImage: '{{ image | product_img_url: '2048x' }}', tintColor: '{{ settings.shop_bg_color }}', zoomPosition: 'inside', zoomOffsetX: 0, touchStartDelay: 250, lazyLoadZoom: true"
                      data-sizes="auto"
                      data-srcset=" {{ image | product_img_url: '2048x' }} 2048w,
                                    {{ image | product_img_url: '1900x' }} 1900w,
                                    {{ image | product_img_url: '1600x' }} 1600w,
                                    {{ image | product_img_url: '1200x' }} 1200w,
                                    {{ image | product_img_url: '1000x' }} 1000w,
                                    {{ image | product_img_url: '800x' }} 800w,
                                    {{ image | product_img_url: '600x' }} 600w,
                                    {{ image | product_img_url: '400x' }} 400w"
                      data-src="{{ image | product_img_url: '2048x' }}"
                      />
                {% if productTag != blank %}
                  <div class="new_banner">{{ productTag }}</div>
                {% endif %}
              </div>
            </div>
          </a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
&nbsp;
      sale: {{ 'collections.general.sale' | t | json }},
      sold_out: {{ 'products.product.sold_out' | t | json }},
      newlabel: {{ 'collections.general.newlabel' | t | json }},
      partylabel: {{ 'collections.general.partylabel' | t | json }},
      duurzaamlabel: {{ 'collections.general.duurzaamlabel' | t | json }},
      giftlabel: {{ 'collections.general.giftlabel' | t | json }},
      cominglabel: {{ 'collections.general.cominglabel' | t | json }},
      label1: {{ 'collections.general.label1' | t | json }},
      label2: {{ 'collections.general.label2' | t | json }},
      label3: {{ 'collections.general.label3' | t | json }},
      pre_order: {{ 'collections.general.pre_order' | t | json }},
      quick_shop: {{ 'collections.general.quick_shop' | t | json }},
      free_price: {{ settings.free_price_text | json }},
      from_price: {{ 'products.general.from' | t | json }},
      view_detail: {{ 'collections.general.view_product_details_html' | t | json }},
      quantity: {{ 'products.product.quantity' | t | json }},
      add_to_cart: {{ 'products.product.add_to_cart' | t | json }},
      breadcrumb_home: {{ 'general.breadcrumbs.home' | t | json }},
      breadcrumb_page: {{ 'general.breadcrumbs.page' | t | json }},
      paginate_prev: {{ 'shopify.pagination.previous' | t | json }},
      paginate_next: {{ 'shopify.pagination.next' | t | json }},
//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;
    }
}
<!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">
    <link rel="stylesheet" href="style.css">
    <title>Multiple typing effect</title>
</head>
<body>
    <div class="wrapper">
        <div class="static-txt">I'm</div>
        <ul class="dynamic-txt">
            <li><span>Web Developer</span></li>   
            <li><span>Designer</span></li>   
            <li><span>Freelancer</span></li> 
            <li><span>Software Engineer</span></li>   
            
        </ul>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>
I agree to <a href="https://policies.google.com/terms?hl=en-US"id="terms" target="_blank">Terms of Service</a> & <a href="https://policies.google.com/privacy?hl=en-US"id="terms" target="_blank">Privacy Policy</a>
<snippet>
    <content><![CDATA[
@mixin ${1:mixtend}(\$extend: true) {
  @if $extend {
    @extend %${1:mixtend};
  } @else {
    ${2}
  }
}

%${1:mixtend} {
  @include ${1:mixtend}(\$extend: false);
}
]]></content>
    <tabTrigger>mixtend</tabTrigger>
    <scope>source.scss</scope>
</snippet>
<!DOCTYPE html>
<html lang="en">
<head>

  <title>Infotech Bangla</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>

<body>
      <header>
            <div class="main">
              <div class="logo">
                  <h4>Infotech</h4>
              </div>
                <ul>

                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    
                </ul>
            </div>
            <div class="title">
                  <h1>Infotech Bangla</h1>
            </div>
            <div class="button">
               <a class="btn" href="">WATCH NOW</a>
               <a class="btn" href="">LEARN MORE</a>
            </div>
      </header>


</body>
</html>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Yukarıdaki 3 meta etiketi head bölümü içerisinde *ilk sırada* konumlanmalıdır; diğer head içerikleri bu etiketlerin *ardından* yerleştirilmelidir -->
<title>Sayfa Başlığı</title>
<!-- Doküman Başlığı -->
<title>Sayfa Başlığı</title>

<!-- Base URL doküman içerisinde ilişkisel olarak girilmiş bağlantılar(relative path) için başlangıç noktası oluşturur -->
<base href="https://example.com/page.html">

<!-- Harici CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Doküman içi CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="script.js"></script>
<noscript><!--JS olmaması halinde--></noscript>
<meta charset="utf-8"> <!-- Doküman için karakter kodlaması belirler -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Yukarıdaki 3 meta etiketi head bölümü içerisinde *ilk sırada* konumlanmalıdır; diğer head içerikleri bu taglerin *ardından* yerleştirilmelidir -->

<!-- Kaynakların nereden yükleneceğini kontrol eder -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Doküman içerisinde olabildiğince önce konumlandırın -->
<!-- Sadece bu etiketin altındaki içeriğe etki eder -->

<!-- Web uygulamasının adı (yalnızca web sayfası bir uygulamaysa kullanılmalı.) -->
<meta name="application-name" content="Application Name">

<!-- Sayfanın kısa açıklaması (150 karakter ile sınırlıdır) -->
<!-- *Bazı* durumlarda, bu açıklama arama sonuçları içerisinde sayfadan bir kesit olarak kullanılır -->
<meta name="description" content="A description of the page">

<!-- Arama motorunun gezinme ve indeksleme davranışını belirler  -->
<meta name="robots" content="index,follow,noodp"><!-- Bütün Arama Motorları -->
<meta name="googlebot" content="index,follow"><!-- Google'a özgül -->

<!-- Google'a sitelinks search boxı göstermemesini belirtir -->
<meta name="google" content="nositelinkssearchbox">

<!-- Google'a bu sayfa için bir çeviri sağlamamasını belirtir -->
<meta name="google" content="notranslate">

<!-- Google Search Console için site sahipliğini doğrular -->
<meta name="google-site-verification" content="verification_token">

<!-- Yandex Webmasters için site sahipliğini doğrular -->
<meta name="yandex-verification" content="verification_token">

<!-- Bing Webmaster Center için site sahipliğini doğrular -->
<meta name="msvalidate.01" content="verification_token">

<!-- Alexa Console için site sahipliğini doğrular -->
<meta name="alexaVerifyID" content="verification_token">

<!-- Pinterest Console için site sahipliğini doğrular -->
<meta name="p:domain_verify" content="code from pinterest">

<!-- Norton Safe Web için site sahipliğini doğrular -->
<meta name="norton-safeweb-site-verification" content="norton code">

<!-- Web sitesini oluşturmak için kullanılan araç (örnek - WordPress, Dreamweaver) -->
<meta name="generator" content="program">

<!-- Web sitenin konusunu ifade eden kısa açıklama -->
<meta name="subject" content="your website's subject">

<!-- Web site içeriğinin hitap ettiği kitleyi belirtir -->
<meta name="rating" content="General">

<!-- Kaynak(referrer) bilgisinin nasıl iletileceğini belirtir -->
<meta name="referrer" content="no-referrer">

<!-- Uygun telefon numaraları için otomatik algılamayı ve biçimlendirmeyi iptal eder -->
<meta name="format-detection" content="telephone=no">

<!-- DNS ön tanımını tümden iptal eder -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Tarayıcı tarafında kullanıcı ile ilgili çerez(cookie) oluşturmayı sağlar -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- Sayfanın spesifik bir çerçeve içerisinde açılması durumunu belirler  -->
<meta http-equiv="Window-Target" content="_value">

<!-- Coğrafi etiketler -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Ülke kodu (ISO 3166-1): zorunlu, bölge kodu (ISO 3166-2): tercihen; örn. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- örn. content="New York City" -->
  <!-- CSS stil dosyasını işaret eder -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Yinelenen içerik sorunlarını önlemeye yardımcı olur -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">

<!-- İkon bağlantısından önce eklenirdi, ancak kullanımdan kaldırıldı -->
<link rel="shortlink" href="https://example.com/?p=42">

<!--Mevcut sayfanın AMP HTML versiyonuna ait linki belirtir -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Web uygulamaları için "kurulum" kimlik bilgilerini belirten bir JSON dosyasını tanımlar -->
<link rel="manifest" href="manifest.json">

<!-- Belgenin yaratıcısını belirtir -->
<link rel="author" href="humans.txt">

<!-- Telif hakkı bilidirimini açıklayan bağlantıyı işaret eder -->
<link rel="license" href="copyright.html">

<!-- Belgenin başka bir dildeki bağlantısına refere eder -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Yaratıcı veya başka biri hakkında bilgi verir  -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Dokümansal, kayıtsal veya tarihsel yönden ilişkisel olan bir koleksiyona işaret eder -->
<link rel="archives" href="https://example.com/2003/05/">

<!-- Bir hiyerarşik yapı içerisinde en üst seviyedeki kaynağa işaret eder -->
<link rel="index" href="https://example.com/">

<!-- Kendine referans verir - doküman birden fazla referansa sahip olduğunda faydalıdır -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">

<!-- Bir dizi belgede sırasıyla ilk, bir sonraki, bir önceki ve son sıradaki belgeleri işaret eder -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="prev" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">

<!-- Üçüncü taraf servislerden blog hizmeti sağlandığında kullanılır  -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Başka bir WordPress gönderisi sizin blogunuza veya gönderinize bağlantı verdiğinde otomatik bir ping oluşturur -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Başka bir web sayfası sizin sayfanıza bağlantı verdiğinde bilgilendirdiği bağlantıyı işaret eder -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Harici bir HTML belgesini mevcut olan HTML belgesine dahil eder -->
<link rel="import" href="/path/to/component.html">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Akışlar -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
<!-- Detaylı bilgi: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<!-- IE 10 ve altı için -->
<!-- favicon.ico isminde bir dosyayı kök dizinine yerleştirin - element gerekli değil -->

<!-- IE 11, Chrome, Firefox, Safari, Opera için -->
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png">
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- Makalenizin web versiyonunun bağlantısı -->
<link rel="canonical" href="http://example.com/article.html">

<!-- Mevcut makale için kullanılacak stil -->
<meta property="fb:article_style" content="myarticlestyle"><meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
<meta name="pinterest" content="nopin" description="Üzgümüm, benim sitemden kaydedemezsiniz!">
  <link rel="alternate" type="application/json+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">
    <!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Uygun telefon numaraları için otomatik algılamayı ve biçimlendirmeyi iptal eder -->
<meta name="format-detection" content="telephone=no">

<!-- Ana Ekran'a ekle -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Uygulama Başlığı">

<!-- Touch İkonlar -->
<!-- Birçok durum için head alanında bir 180×180px touch simge yeterli -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Not: iOS 7 Safari, sembollere efekt eklemez. -->
<!-- Safari'nin önceki versiyonları "-precomposed.png" son eke sahip sembollere efekt eklemez. -->

<!-- Başlangıç Görseli ( Kullanımdan kaldırıldı ) -->
<link rel="apple-touch-startup-image" href="path/to/startup.png">

<!-- iOS derin uygulama bağlantısı(deep linking) -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">
  
@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;
    }
<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="coupon-card">
            <img src="google.png" alt="" class="logo">
            <h3>20% Flat off on all ride with in the city using <br> HDFC Credit Card </h>

                <div class="coupon-row">
                    <span id="cpncode">STEALDEAL20</span>
                    <span id="cpnbtn">Copy CODE</span>
                </div>
                <p>Valid Till:20-11-2022</p>
                <div class="circle1"></div>
                <div class="circle2"></div>

        </div>
    </div>
    <script>
        var cpnbtn = document.getElementById("cpnbtn")
        var cpncode = document.getElementById("cpncode")
        
        
        cpnbtn.onclick = function(){
            navigator.clipboard.writeText(cpncode.innerHTML);
            cpnbtn.innerHTML = "COPIED";
            setTimeout(function(){
                cpnbtn.innerHTML = "COPY";
        
            }, 3000); 
        }
    </script>
</body>

</html>
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Limit Input Characters | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Iconsout Link for Icons -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">
</head>
<body>
  <div class="wrapper">
    <form action="#">
      <input type="text" spellcheck="false" placeholder="username" maxlength="19" required>
      <i class="uis uis-at"></i>
      <span class="counter">19</span>
    </form>
  </div>

  <script>
    const input = document.querySelector("form input"),
    counter = document.querySelector("form .counter"),
    maxLength = input.getAttribute("maxlength");

    input.onkeyup = ()=>{
      counter.innerText = maxLength - input.value.length;
    }
  </script>

</body>
</html>
	<a href="https://www.freecodecamp.org">freeCodeCamp</a>
<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>
<ol>

<li></li>

<li></li>

<li></li>

<li></li>

</ol>
// Normal Event 
$("#dataTable tbody tr").on("click", function() {
    console.log($(this).text());
});

// Delegate event to "#dataTable tbody" since "tr" elements don't exist yet
$("#dataTable tbody").on("click", "tr", function() {
    console.log($(this).text());
});

// Delegate event to "document" since "#.bar.desktop" element does not exist yet
$(document).on("click", ".bar.desktop", function() {
    $(this).toggleClass('open');
});
<!--la ruta absoluta-->
<img src="<?php echo get_bloginfo('wpurl');?>/wp-content/themes/temacreado/img/w.logo.png" alt="">
<!--
<?php echo get_bloginfo('wpurl');?> nos da la ruta de: http://localhost/cliente/  la ruta del archivo que tiene todo el wordpress dentro.
-->   
  
<!--La ruta relativa-->
<img src="wp-content/themes/temacreado/img/w.logo.png" alt="">
<!--
solo es la ruta relativa que es segun la ubicación del archivo
pero como los dos archivos se crean con page.php solo la portada es direccionada adecuadamente con esa direción relativa. lo que las paginas(no portada)  no lo reconocen; por eso la nececidad de dar la pocición absoluta.
-->

  <!-- Nos dimos cuenta que -->
  
// The html
<li v-for="(goal, index) in goals" @click="removeGoal(index)">{{ goal }} - {{ index }}</li>

// the method
removeGoal(index) {
  this.goals.splice(index, 1);
}
// demo is a class that is needed anyway and then boxASelected is added if true
:class="{active: boxASelected}"

// Or pass this into a computed property
:class="{boxAClasses}"

computed: {
  boxAClasses() {
    return { active: this.boxASelected };
  }
}
.modal-header {
    border-bottom: 0 none;
}

.modal-footer {
    border-top: 0 none;
}

---------------------------------

<div class="modal-header border-0">
....
</div>

<div class="modal-footer border-0">
....
</div>
<div class="rangeWrapper">
    <input id="slide" type="range" min="1" max="4" step="1" value="1"  /> 
    <p class="rangeLabel selected">Label A</p>
    <p class="rangeLabel">Label B</p>
    <p class="rangeLabel">Label C</p>
    <p class="rangeLabel">Label D</p>
</div>
function htmlToImage(html, { x = 0, y = 0, width = 300, height = 400 }) {
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext("2d");
  return new Promise((res) => {
    var xml = toXML(html);
    xml = xml.replace(/\#/g, "%23");
    var data = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${xml}</foreignObject></svg>`;

    var img = new Image();
    img.onload = function () {
      ctx.drawImage(img, x, y, width, height);
      res(canvas.toDataURL());
    };
    img.src = data;
  });
  function toXML(html) {
    var doc = document.implementation.createHTMLDocument("");
    doc.write(html);
    doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
    html = new XMLSerializer().serializeToString(doc.body);
    return html;
  }
}
const sanitize = (html, tags = undefined, attributes = undefined) => {
    var attributes = attributes || [
      { attribute: "src", tags: "*", regex: /^(?:https|http|\/\/):/ },
      { attribute: "href", tags: "*", regex: /^(?!javascript:).+/ },
      { attribute: "width", tags: "*", regex: /^[0-9]+$/ },
      { attribute: "height", tags: "*", regex: /^[0-9]+$/ },
      { attribute: "id", tags: "*", regex: /^[a-zA-Z]+$/ },
      { attribute: "class", tags: "*", regex: /^[a-zA-Z ]+$/ },
      { attribute: "value", tags: ["INPUT", "TEXTAREA"], regex: /^.+$/ },
      { attribute: "checked", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
      {
        attribute: "placeholder",
        tags: ["INPUT", "TEXTAREA"],
        regex: /^.+$/,
      },
      {
        attribute: "alt",
        tags: ["IMG", "AREA", "INPUT"],
        //"^" and "$" match beggining and end
        regex: /^[0-9a-zA-Z]+$/,
      },
      { attribute: "autofocus", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
      { attribute: "for", tags: ["LABEL", "OUTPUT"], regex: /^[a-zA-Z0-9]+$/ },
    ]
    var tags = tags || [
      "I",
      "P",
      "B",
      "BODY",
      "HTML",
      "DEL",
      "INS",
      "STRONG",
      "SMALL",
      "A",
      "IMG",
      "CITE",
      "FIGCAPTION",
      "ASIDE",
      "ARTICLE",
      "SUMMARY",
      "DETAILS",
      "NAV",
      "TD",
      "TH",
      "TABLE",
      "THEAD",
      "TBODY",
      "NAV",
      "SPAN",
      "BR",
      "CODE",
      "PRE",
      "BLOCKQUOTE",
      "EM",
      "HR",
      "H1",
      "H2",
      "H3",
      "H4",
      "H5",
      "H6",
      "DIV",
      "MAIN",
      "HEADER",
      "FOOTER",
      "SELECT",
      "COL",
      "AREA",
      "ADDRESS",
      "ABBR",
      "BDI",
      "BDO",
    ]

    attributes = attributes.map((el) => {
      if (typeof el === "string") {
        return { attribute: el, tags: "*", regex: /^.+$/ }
      }
      let output = el
      if (!el.hasOwnProperty("tags")) {
        output.tags = "*"
      }
      if (!el.hasOwnProperty("regex")) {
        output.regex = /^.+$/
      }
      return output
    })
    var el = new DOMParser().parseFromString(html, "text/html")
    var elements = el.querySelectorAll("*")
    for (let i = 0; i < elements.length; i++) {
      const current = elements[i]
      let attr_list = get_attributes(current)
      for (let j = 0; j < attr_list.length; j++) {
        const attribute = attr_list[j]
        if (!attribute_matches(current, attribute)) {
          current.removeAttribute(attr_list[j])
        }
      }
      if (!tags.includes(current.tagName)) {
        current.remove()
      }
    }
    return el.documentElement.innerHTML
    function attribute_matches(element, attribute) {
      let output = attributes.filter((attr) => {
        let returnval =
          attr.attribute === attribute &&
          (attr.tags === "*" || attr.tags.includes(element.tagName)) &&
          attr.regex.test(element.getAttribute(attribute))
        return returnval
      })

      return output.length > 0
    }
    function get_attributes(element) {
      for (
        var i = 0, atts = element.attributes, n = atts.length, arr = [];
        i < n;
        i++
      ) {
        arr.push(atts[i].nodeName)
      }
      return arr
    }
  }
<h1 style="text-align: center; font-family: Verdana; font-size: 32px; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; font-variant: small-caps; letter-spacing: 3px; color: #468282; background-color: #ffffff;">Tensorflow - Help Protect the Great Barrier Reef</h1>
<h2 style="text-align: center; font-family: Verdana; font-size: 24px; font-style: normal; font-weight: bold; text-decoration: underline; text-transform: none; letter-spacing: 2px; color: navy; background-color: #ffffff;">Look-sea: Underwater img enhancement</h2>


<p align="center">
    <img src="https://i.imgur.com/tTOe7cV.png">
</p>


# 📌**Introduction:**
<!-- <h1 style="font-family: times-new-roman">📌Introduction</h1> -->
> <p style="font-family: times-new-roman">Seems like <b>Patrick</b> the Star is lost, and <b>Spongebob, Mr. Krabs, Squidward, and the others</b> need our help to find him. To help them out <b>Kaggle</b> is also trying their best and has put together a very informative dataset the dataset is created based on the places where Patrick most certainly be going, and we need to take the help of AI and computer vision and perform Object detection to find him from that dataset. We still don't know whether Patrick is lost or has left the city because of the last night's argument between him and Spongebob. Well, this will stay as a mystery until we find Patrik. Spongebob, Mr. Krabs, Squidward, and Sandy are all very concerned and doing their best to find Patrick. So let's do our best too, and get Patrick back to his friends.</p>

# 📑 **About the Notebook:**
> <p style="font-family: times-new-roman">As per the Discussion thread I posted earlier, I said that I will post the results. So, to do that Im creating this NB. The discussion thred is listed just right below. After playing with data for a bit it was clear that the images were extreamly hezzy because of the thickness of the water, and most of the data are colored in greenish blue. After seeing a Disussion thread on this, I started searching some techniques for underwater image enhancement. After sometime, I stumbled upon this repo which talks about some techiques for Underwater color restoration and color enhancement, there were total 8 methods for image color Enhancement.Don't know how important Color Restoration would be [please let me know if you think color restoration is also important] but Image Enhancement would be very much required. The mentioned techniques are,</p>

> - [8 Methods on Underwater Image Enhancement and Color Restoration, With Code](https://www.kaggle.com/c/tensorflow-great-barrier-reef/discussion/291063)

> ## ⭕ **Underwater Image Enhancement**
> > - **CLAHE**: Contrast limited adaptive histogram equalization (1994)
> > - **Fusion-Matlab**: Enhancing underwater images and videos by fusion (2012)
> > - **GC**: Gamma Correction
> > - **HE**: Image enhancement by histogram transformation (2011)
> > - **ICM**: Underwater Image Enhancement Using an Integrated Colour Model (2007)
> > - **UCM**: Enhancing the low-quality images using Unsupervised Colour Correction Method (2010)
> > - **RayleighDistribution**: Underwater image quality enhancement through composition of dual-intensity images and Rayleigh-stretching (2014)
> > - **RGHS**: Shallow-Water Image Enhancement Using Relative Global Histogram Stretching Based on Adaptive Parameter Acquisition (2018)




> > <p style="font-family: times-new-roman"> From these 8 methods I was able to perform, 4 and 3 of them are implemented in two different ways, one is done using the repo's code and the other is implemetnted by me. Results are good but not too good. Because there are papers like <b>sea-thru</b>, <b>FUnIE-GAN</b> and <b>Water-GAN</b> which yields much better results. Check about the GANs <a style="font-family: times-new-roman" href="https://github.com/xahidbuffon/FUnIE-GAN">here</a></p>

> ## 👀 **Sea-thru**:
> > <p style="font-family: times-new-roman">This is a great paper, not only because of its good results, also the way the problem is tackled. Most of the time people ends up training large model with a huge pile of data for days to get a decent result. but this paper tries to break down the problem to its core components and solves it. This paper has a extensive use of depth map. Itried to find the trained wights but it seems like its not available. the main concept this paper goes like this,</p>

> > - <p style="font-family: times-new-roman"><b><i>As a result of their research, Akkaynak and Treibitz contend that wavelengths of observed colors depend on speed, distance, and the original color of objects. As with the speed of light through water, the source hue is constant. In this case, if we know the color of an object and its distance from us, we can reverse-engineer the formula that produces the observed color.</i></b></p>


> > To know more check out these two links,
> > - Article: [Sea-Thru: Removing Water from Underwater Images](https://towardsdatascience.com/sea-thru-removing-water-from-underwater-images-935288e13f7d)
> >- Paper: [Sea-Thru: A Method for Removing Water From Underwater Images](https://openaccess.thecvf.com/content_CVPR_2019/html/Akkaynak_Sea-Thru_A_Method_for_Removing_Water_From_Underwater_Images_CVPR_2019_paper.html)
> > - Github: https://github.com/hainh/sea-thru
> > - Dataset: http://csms.haifa.ac.il/profiles/tTreibitz/datasets/sea_thru/index.html

> > <p align="center">
    <img width="600" src="https://i.postimg.cc/6qpZCTFK/sea-thru3.jpg">
</p>



> ## 🧪 **Importance of image Pre-processing:**
> > <p style="font-family: times-new-roman"> Image preprocessing in one of the most important part of a Model building pipeline. It helps to improve the quality of your image, we apply different kind of filters and methods to enhance sertain aspect of the image, may be the given image is very blurry, or may be the image in very noisy, or maybe the image size across the data is not similar, or may be the labeled data is not accurate etc. In these cases we need to use Image preprocessing to clean the data. In some cases it also helps by decreasing model training time and increasing model inference speed. One of the incredible image preprocessing that I saw, was the hair removal in the Melanoma Classification comp. </p>

> ## 🎁 **Main aim of this Notebook:**
> > - <p style="font-family: times-new-roman"> I tried doing EDA for the provided dataset. I plan to dig much dipper and understand the data in a much better way.</p>
> > - <p style="font-family: times-new-roman"> I tried different approaches to get a decent preprocessed image as mentioned above. The best preprocessed Images this Notebook offers are shown below. We will go through all the methods(except few) and then look into the working code. <b>This is certainly not my work, it is taken from <b><a href="https://www.kaggle.com/ipythonx">@M.Innat's</a></b> comment from</p></b>

> > > <li> <a href="https://www.kaggle.com/c/tensorflow-great-barrier-reef/discussion/290584#1599835">Fast underwater image enhancement for Improved Visual Perception [github+Paper]</a></li>

> > > <p align="center">
    <img src="https://i.imgur.com/wc9rY2J.png">
</p>

> > > <p align="center">
    <img src="https://i.imgur.com/ho1D0Ye.png">
</p>

> > > <p align="center">
    <img src="https://i.imgur.com/pwBNYJr.png">
</p>
<x-icon classicon="fill-grey-6" type="home" />
<div id="uno" >
  <div id="dos" >
    <div id="tres" ></div>
  </div>
</div>
<div id="uno">
 <div id="dos">
   <div id="tres">
     <div id="cuatro">
       <div id="cinco"></div>
     </div>
   </div>
 </div>
</div>

<style>  
  #uno{
width: 500px;
height: 300px;
background-color:green;
}
#uno:hover{ background: black}
#dos{
width:450px;
height:250px;
background: yellow;
}
#dos:hover{ background: white}
#tres{
width:400px;
height: 200px;
background: red;
}
#cuatro{
width:350px;
height:150px;
background:blue;
}
#cinco{
width:300px;
height:100px;
background:purple;
}
</style>
<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<form>
  <label for="checkbox">film tutorial
    <input type="checkbox" id="checkbox">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
    </span>
  </label>
</form>
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas z1" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">1ahola</div>
<div class="columnas z2" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">2a</div>
<div class="columnas z3" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >3a</div>
<div class="columnas z4" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">4a</div>
</div> <!-- Fin del contenedor -->

// css 

body{
z-index: -10:
} /* para asegurar que nadie este por debajo de body*/
.skt-hero {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg);
    background-size: cover;
}
.skt-hero:hover{
    z-index:-3;
}
.columnas {
    width: 25%;
    height: 100%;
    border: 1px solid gray;
    background-color: transparent;
    position:absolute;
    opacity: 0.05;
    transition: opacity 2s ease;
}
.columnas:hover {
    height: 100%;
    width:100vw;
    background-image: var(--backgroundImg);
    position: ;
    z-index: -1;
    background-size: cover;
    opacity: 1;
}
.z1{
left:0%;
}
.z1:hover{
left:0%;
}
.z2{
left:25%;
}
.z2:hover{
left:0%;
}
.z3{
left:50%;
}
.z3:hover{
left:0%;
}
.z4{
left:75%;
}
.z4:hover{
left:0%;
}
<input type="number" oninput="this.value = Math.round(this.value);"/>
<h1>The z-index Property</h1>

<div ></div>

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>


/*css*/
h1 {
 position:absolute;
 z-idex: ;
}
div{
  background-image:url(https://picsum.photos/200);
  width:100px;
  height:140px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
p {
position:absolute;
 z-index: ;
}
<section class="destacada">
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section> 

//css 
.destacada img{
  width: 50px;
  height: 50px;
}

 h1:hover ~ img{
  width: 200px; /*O lo que quieras*/
  height: 200px; /*O lo que quieras*/ 
}
let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

https://images.weserv.nl/?url=image_url&w=100&h=100&fit=inside
<html lang="en" class="no-js">
<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>3D Book Showcase</title>
		<meta name="description" content="3D Book Showcase with CSS 3D Transforms" />
		<meta name="keywords" content="3d transforms, css3 3d, book, jquery, open book, css transitions" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
			<header class="clearfix">
			</header>
			<div class="main">
				<ul id="bk-list" class="bk-list clearfix">
					<li>
						<div class="bk-book book-1 bk-bookdefault">
							<div class="bk-front">
								<div class="bk-cover-back"></div>
								<div class="bk-cover">
									<h2>
										<span>Frederik Bakman</span>
										<span>Anxious People</span>
									</h2>
								</div>
							</div>
							<div class="bk-page">
								<div class="bk-content bk-content-current">
									<p>A poignant, charming novel about a crime that never took place, a would-be bank robber who disappears into thin air, and eight extremely anxious strangers who find they have more in common than they ever imagined.</p>
								</div>
								<div class="bk-content">
									<p>‘we are doing the best we can, we really are...’
<br>
This message is the heart of this story.<br>

‘…we all have this in common, yet most of us remain strangers, we never know what we do to each other, how your life is affected by mine. when this day is over and the night takes us, allow yourself a deep breath. because we made it through another day.’

and this is the heart of us readers.</p>
								</div>
								<div class="bk-content">
									<p>Fredrik Backman demonstrates with style and panache his remarkable and astute understanding of what it is to be human in this profound and philosophical locked room mystery that beguiles in how it pulls at our heartstrings, with its emotionally charged heartbreak, tragedy, humour and in the joy of human connectivity. He creates a host of stellar and diverse characters, including a rabbit, anxious, with messy and chaotic lives, and their idiocy, not only  </p>
								</div>
                <div class="bk-content">
									<p>their idiocy, but all of our idiocy too. This is the perfect read for our troubled times, resonating deeply at so many levels, and if you don't connect with it immediately, I urge you to stick with it, the pay off will come in spades. When everything goes wrong for a bank robber, he ends up holding a group of hostages at an apartment viewing. When everything goes wrong for a bank robber, he ends up holding a group of hostages at an apartment viewing. When everything goes wrong for a bank robber, he ends up holding a group of hostages at an apartment viewing. When everything goes wrong for a bank robber, he ends up holding a group of hostages at an apartment viewing.</p>
								</div>
							</div>
							<div class="bk-back">
								<p>“This was a story about many different things, but most of all about idiots. Because we’re doing the best we can, we really are. We’re trying to be grown-up and love each other and understand how the hell you’re supposed to insert USB leads. We are looking for something to cling onto, something to fight for, something to look forward to. We’re doing all we can to teach our children how to swim”.</p>
							</div>
							<div class="bk-right"></div>
							<div class="bk-left">
								<h2>
									<span>Frederik Bakman</span>
									<span>Anxious People</span>
								</h2>
							</div>
							<div class="bk-top"></div>
							<div class="bk-bottom"></div>
						</div>
						<div class="bk-info">
							<button class="bk-bookback">Flip</button>
							<button class="bk-bookview">View inside</button>
							<h3>
								<span>Frederik Bakman</span>
								<span>Anxious People</span>
							</h3>
							<p>A small book on human relationships, and their beauty. A very short read.</p>
						</div>
					</li>
					<li>
						<div class="bk-book book-2 bk-bookdefault">
							<div class="bk-front">
								<div class="bk-cover-back"></div>
								<div class="bk-cover">
									<h2>
										<span>The Forty Rules of Love</span>
										<span>Elif Shafak</span>
									</h2>
								</div>
							</div>
							<div class="bk-page">
								<div class="bk-content">
									<p>This book was sitting on my shelf for over a year, and I had no plans to get to it any sooner. I  thought it is just another novel about 'love', so I withheld reading it.
<br>
I was wrong.</p>
								</div>
								<div class="bk-content">
									<p>The novel consists of two parallel narratives, weaved together timelessly: one being a story of a woman named Ella, a forty-year old woman, living a regular unhappy married life in Massachusetts. Ella had to learn to live her life while shutting her heart to love, that is until a book titled 'Sweet Blasphemy' fell under her hands, and ended up to shake her entire world and change everything she had known. The second narrative, tells the story of a wandering dervish called Shams of Tabriz who was on the lookout for a companion that he can deliver his knowledge to, and it was none other than Rumi. I especially liked that four of the parts were named after the four elements: Earth, Water, Wind, and Fire with the fifth named Void.</p>
								</div>
								<div class="bk-content bk-content-current">
									<p>The book is an exploration into faith, love and passion. It is full of mysticism, poetry and love. The all-encompassing journey creates a mesmerising and transforming experience. Soul-stirring and resplendent.
                    <br>
                    <br>

I feel I would have been able to understand and appreciate the book at a deeper level if I had a background in spirituality and Quran (to be in the state of mind to truly comprehend all that it has to offers). I have read Rumi's works previously and appreciated Sufi music for its melodiuous yet diverse themes, but this book has sparked a passion in me to learn more about Sufism and Islam. The only background I seem to recollect in this field is from a small, coverless book that my grandfather gave me years back, the title of which I cannot remember, sadly.</p>
								</div>
							</div>
							<div class="bk-back">
								<p>Seeing the story unfold through the views of every character (Rumi, each of his sons, the beggar, the drunk, the prostitute) provides some great insights. "Loss" is a strong undertone throughout- from Rumi losing his reputation to honor Shams's trials, to him losing Shams to finally become a poet, with the magical work that we are bestowed upon today.</p>
							</div>
							<div class="bk-right"></div>
							<div class="bk-left">
								<h2>
									<span>Elif Shafak</span>
									<span>The Forty Rules of Love</span>
								</h2>
							</div>
							<div class="bk-top"></div>
							<div class="bk-bottom"></div>
						</div>
						<div class="bk-info">
							<button class="bk-bookback">Flip</button>
							<button class="bk-bookview">View inside</button>
							<h3>
								<span>Elif Shafak</span>
								<span>The Forty Rules of Love</span>
							</h3>
							<p> Tags: fiction, romance, historical fiction. <br>
							  Rating: 5
							</p>
						</div>
					</li>
					<li>
						<div class="bk-book book-3 bk-bookdefault">
							<div class="bk-front">
								<div class="bk-cover-back"></div>
								<div class="bk-cover">
									<h2>
										<span>Agatha Christie</span>
										<span>The Thirteen Problems</span>
									</h2>
								</div>
							</div>
							<div class="bk-page">
								<div class="bk-content bk-content-current">
									<p>The Tuesday Night Club is the name for a varied group of guests who challenge each other to solve recent, and not so recent, crimes. It begins one evening when the group gathers at Miss Marple’s house and the conversation turns to unsolved crimes. Over the weeks, we learn about the case of the dripping bloodstains, the thief who committed his crime twice over, the message from the death-bed of a poisoned man who talked of a 'heap of fish’, the strange case of the missing will, and a spiritualist who warned that ‘Blue Geraniums’ meant death.</p>
								</div>
								<div class="bk-content">
									<p>Pit your wits against the powers of deduction of the ‘Tuesday Night Club’. But don't forget that Miss Marple is present. Sometime later, many of the same people are present at a dinner given by Colonel and Dolly Bantry. Another set of six problems. Even later there's a thirteenth. Can you match Miss Marple's performance?</p>
								</div>
								<div class="bk-content">
									<p>The 13 stories are: 1. The Tuesday Night Club, 2. The Idol House of Astarte, 3. Ingots of Gold, 4. The Bloodstained Pavement, 5. Motive v. Opportunity, 6. The Thumbmark of St. Peter, 7. The Blue Geranium, 8. The Companion, 9. The Four Suspects, 10. A Christmas Tragedy, 11. The Herb of Death, 12. The Affair at the Bungalow, and 13. Death by Drowning.</p>
								</div>
							</div>
							<div class="bk-back">
								<p>While genial gentle soft white-haired Jane, in black lace cap and mittens of the time, knits, her Tuesday week visitors present early experiences, recently solved usually by confession of participants, for consideration by their club: Sir Henry Clithering last Commissioner of Scotland Yard, nephew writer Raymond West, artist Joyce Lemprière, elderly clergyman Dr Pender, dried-up little bespectacled solicitor Mr Petherick.</p>
							</div>
							<div class="bk-right"></div>
							<div class="bk-left">
								<h2>
									<span>Agatha Christie</span>
									<span>The Thirteen Problems</span>
								</h2>
							</div>
							<div class="bk-top"></div>
							<div class="bk-bottom"></div>
						</div>
						<div class="bk-info">
							<button class="bk-bookback">Flip</button>
							<button class="bk-bookview">View inside</button>
							<h3>
								<span>Agatha Christie</span>
								<span>The Thirteen Problems</span>
							</h3>
							<p>Tags: mystery, fiction, crime, short stories, classics<br> Rating: 4.5</p>
						</div>
					</li>
				</ul>
			</div>
		</div><!-- /container -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="js/books1.js"></script>
		<script>
			$(function() {

				Books.init();

			});
		</script>
	</body>
</html>
.glitch {
    position: relative;
}

@media screen and (min-width: 786px) {
    .glitch:before, .glitch:after {
        content: attr(data-text);
        color:#FFEA00;
        mix-blend-mode: lighten;
        position: absolute;
        top: 0;
        width: 100%;
        clip: rect(0, 0, 0, 0);
    }
    .glitch:before {
        left: -1px;
        text-shadow: 2px 0 rgba(255, 25, 105, 0.7);
    }
    .glitch:after {
        left: 1px;
        text-shadow: -3px 0 rgba(29, 77, 204, 0.7);
    }
    .glitch:hover:before {
        text-shadow: 5px 0 rgba(255, 25, 105, 0.7);
        animation: glitch-loop-1 0.9s infinite ease-in-out alternate-reverse;
    }
    .glitch:hover:after {
        text-shadow: -7px 0 rgba(29,77,204, 0.7);
        animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
    }
    @keyframes glitch-loop-1 {
        0% {
            clip: rect(8vw, 9999px, 2vw, 0);
        }
        25% {
            clip: rect(6vw, 9999px, 20vw, 0);
        }
        50% {
            clip: rect(16vw, 9999px, 22vw, 0);
        }
        75% {
            clip: rect(10px, 9999px, 18vw, 0);
        }
        100% {
            clip: rect(20px, 9999px, 24vw, 0);
        }
    }
    @keyframes glitch-loop-2 {
        0% {
            top: -1px;
            left: 1px;
            clip: rect(12vw, 9999px, 28vw, 0);
        }
        25% {
            top: -6px;
            left: 4px;
            clip: rect(16vw, 9999px, 4vw, 0);
        }
        50% {
            top: -3px;
            left: 2px;
            clip: rect(14vw, 9999px, 6vw, 0);
        }
        75% {
            top: 0px;
            left: -4px;
            clip: rect(18vw, 9999px, 8vw, 0);
        }
        100% {
            top: -1px;
            left: -1px;
            clip: rect(10vw, 9999px, 30vw, 0);
        }
    }
}
.grain {
  height: 100%h;
  background-color: transparent;
  position: relative;
  z-index: 300;
  pointer-events: none;
}

.grain:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("https://assets.website-files.com/5dff182dc3faab4c98b08388/5dff21c5e65e0610a8d38b86_noisy-texture-100x100-o5-d10-c-FFFFFA-t1.png");
  content: "";
  height: 300%;
  left: -50%;
  position: fixed;
  top: -100%;
  width: 300%;
}

@keyframes grain {
  0%, 100% {transform: translate(0,0);}
  10% {transform: translate(-5%,-10%);}
  30% {transform: translate(3%,-15%);}
  50% {transform: translate(12%,9%);}
  70% {transform: translate(9%,4%);}
  90% {transform: translate(-1%,7%);}
}
        <div class="swatches-wrapper">
          {% assign colors = "Navy, Grey, Pink" %}
          
          {% for option in product.options_with_values %}
            {% for variant in product.variants %}
              {% assign name = variant.title %}
              {% assign stringSplit = name | remove: ' ' | split: '-' %}
              {% for stringPart in stringSplit %}
          		{% if forloop.index == 1 %}
                  {% if colors contains stringPart %}
                  <div class="swatch-option {{stringPart}}" data-color="{{ variant.title }}" data-id="{{variant.id}}">
                    <span class="tooltip">{{ variant.title }}</span>
                  </div>
          			{%else%}
          			--2--
                  {%endif%}
          		{%endif%}
              {% endfor %} 	
            {% endfor %}
          {% endfor %}
        </div>
        <script>
          $('.swatch-option').click(function(){
            $('.swatch-option').removeClass('active')
            $(this).addClass('active');
          });
        </script>
<style>
    /* 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;
      }
    }
</style>
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>
    // HTML
    <div id="box">
        <div id="item1">CLICK <br> item1</div>
        <div id="item2" class="none">item2</div>
    </div>

    // CSS
    #box{
        background-color: rebeccapurple;
        width:300px;
        height: 600px;
    }
    #item1{
        position: absolute;
        right: 20px;
        background-color: red;
        width:100px;
        height: 300px;
        cursor: pointer;
    }
    
    #item2{
        position: absolute;
        right: 140px;
        background-color: yellowgreen;
        width:150px;
        height: 300px;
    } 
    
    .block{
        display: block;
    }  //se separa en class diferentes las opciones puntuales que cambiaran dinamicamente.
    .none{
        display: none;
    }

// JavaScript
let item1 = document.getElementById("item1");
let item2= document.getElementById('item2');

let boton=document.getElementById("item1");
let contador=0;

item1.addEventListener("click",boton.onclick);

boton.onclick=function(){ // al agregar onclick capturamos los clicks
    contador++; 
    if (contador%2==0){  // modulo que distingue impar de par
        document.getElementById("item2").classList.add("none");
    }else{
        document.getElementById("item2").classList.remove("none");
        document.getElementById("item2").classList.add("block");
    }
};
<form class="filter-form">
2	
  	{%- for filter in collection.filters -%}
3	
    	<details class="filter-group">
4	
      	<summary class="filter-group-summary">
5	
        	<div>
6	
          	<span>{{ filter.label }}</span>
7	
8	
          	{%- if filter.active_values.size > 0 -%}
9	
            	<span>({{ filter.active_values.size }})</span>
10	
          	{%- endif -%}
11	
        	</div>
12	
      	</summary>
13	
14	
      	<div class="filter-group-display">
15	
        	<div class="filter-group-display__header">
16	
          	<span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span>
17	
18	
          	{%- if filter.active_values.size > 0 -%}
19	
            	<a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a>
20	
          	{%- endif -%}
21	
        	</div>
22	
23	
        	{%- case filter.type -%}
24	
          	{%- when 'list' -%}
25	
            	<ul class="filter-group-display__list">
26	
              	{%- for filter_value in filter.values -%}
27	
                	<li class="filter-group-display__list-item">
28	
                  	<label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
29	
                  	<input type="checkbox"
30	
                    	name="{{ filter_value.param_name }}"
31	
                    	value="{{ filter_value.value }}"
32	
                    	id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
33	
                    	{% if filter_value.active -%}checked{%- endif %}
34	
                    	{% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
35	
                  	>{{ filter_value.label }}</label>
36	
                	</li>
37	
              	{%- endfor -%}
38	
            	</ul>
39	
40	
            	<div class="filter-group-display__submit">
41	
              	<input type="submit" value="Apply">
42	
            	</div>
43	
          	{%- when 'price_range' -%}
44	
            	<div class="filter-group-display__price-range">
45	
              	<div class="filter-group-display__price-range-from">
46	
                	<span>{{ cart.currency.symbol }}</span>
47	
48	
                	<input name="{{ filter.min_value.param_name }}"
49	
                  	id="Filter-{{ filter.min_value.param_name }}"
50	
                  	{% if filter.min_value.value -%}
51	
                    	value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
52	
                  	{%- endif %}
53	
                  	type="number"
54	
                  	placeholder="0"
55	
                  	min="0"
56	
                  	max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
57	
                	>
58	
59	
                	<label for="Filter-{{ filter.min_value.param_name }}">From</label>
60	
              	</div>
61	
              	<div class="filter-group-display__price-range-to">
62	
                	<span>{{ cart.currency.symbol }}</span>
63	
64	
                	<input name="{{ filter.max_value.param_name }}"
65	
                  	id="Filter-{{ filter.max_value.param_name }}"
66	
                  	{% if filter.max_value.value -%}
67	
                    	value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
68	
                  	{%- endif %}
69	
                  	type="number"
70	
                  	placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
71	
                  	min="0"
72	
                  	max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
73	
                	>
74	
75	
                	<label for="Filter-{{ filter.max_value.param_name }}">To</label>
76	
              	</div>
77	
            	</div>
78	
79	
            	<div class="filter-group-display__submit">
80	
              	<input type="submit" value="Apply">
81	
            	</div>
82	
        	{%- endcase -%}
83	
      	</div>
84	
    	</details>
85	
  	{%- endfor -%}
86	
87	
  	<div class="active-filters">
88	
    	<a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="active-filters__clear">Clear all</a>
89	
90	
    	{%- for filter in collection.filters -%}
91	
      	{%- if filter.type == "price_range" -%}
92	
        	{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
93	
          	<a class="active-filters__remove-filter" href="{{ filter.url_to_remove }}">
94	
            	{%- assign min_value = filter.min_value.value | default: 0 -%}
95	
            	{%- assign max_value = filter.max_value.value | default: filter.range_max -%}
96	
            	{{ min_value | money }} - {{ max_value | money }} X
97	
          	</a>
98	
        	{%- endif -%}
99	
      	{%- else -%}
100	
        	{%- for filter_value in filter.active_values -%}
101	
          	<a class="active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">
102	
            	{{ filter_value.label }} X
103	
          	</a>
104	
        	{%- endfor -%}
105	
      	{%- endif- %}
106	
    	{%- endfor -%}
107	
  	</div>
108	</form>
import numpy as np
import pandas as pd   
from IPython.display import display_html 

df1 = pd.DataFrame(np.arange(12).reshape((3,4)),columns=['A','B','C','D',])
df2 = pd.DataFrame(np.arange(16).reshape((4,4)),columns=['A','B','C','D',])

df1_styler = df1.style.set_table_attributes("style='display:inline'").set_caption('Caption table 1')
df2_styler = df2.style.set_table_attributes("style='display:inline'").set_caption('Caption table 2')

display_html(df1_styler._repr_html_()+df2_styler._repr_html_(), raw=True)
<a href="file link" download="some_name" target="_blank">Click here to download</a>
// Update Powershell
brew update
brew upgrade powershell --cask

// Update WSMan
pwsh -Command 'Install-Module -Name PSWSMan'
sudo pwsh -Command 'Install-WSMan'

// Helpful Scripts
Get-Content -Path '/Volumes/C$/sitefinity/static/gulp-logs/full-log.txt' -Tail 10 -Wait
.'/Volumes/C$/PowerShellScripts/FollowPm2LogsOnDesign.ps1'
.'/Volumes/C$/PowerShellScripts/RestartGulpOnDesign.ps1'
<div class="alert alert-block alert-info" style="border-radius:8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;">
    <b>&#9432; Note<br /></b> Use blue boxes (alert-info) for tips and notes.
    If it’s a note, you don’t have to include the word “Note”.
</div>
<div class="alert alert-block alert-warning" style="border-radius:8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;">
    <b>!&#x20DD; Important<br /></b> Use yellow boxes if you to underline important things.
</div>
<div class="alert alert-block alert-danger" style="border-radius:8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;">
    <b>&#9888; Warning<br /></b> In general, avoid the red boxes. These should only be
    used for actions that might cause data loss or another major issue.
</div>
<div class="alert alert-block alert-success" style="border-radius:8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;">
    <b>&#10149; See also<br /></b> Use green boxes to link to other documentation sources.
</div>
@FlowPreview
@ExperimentalTime
@Controller
internal class StatusController @Autowired constructor(private val supervisor: ObserveeSupervisor) {
    @GetMapping("/status", produces = [MediaType.TEXT_HTML_VALUE])
    suspend fun index(model: Model): String {
        val observees = ObserveeInfo.from(supervisor.observeeHealthFlows)
        model.addAttribute("observees", observees)
        return "status"
    }

    /**
     * Stream of change to health status of any Observee
     */
    @GetMapping("/status.stream", produces = [MediaType.TEXT_EVENT_STREAM_VALUE, CustomMediaType.TURBO_STREAM_VALUE])
    suspend fun stream(model: Model): String {
        val observees = ObserveeInfo.from(supervisor.observeeHealthFlows.asFlow())
        model.addAttribute("observees", dataDrivenEach(observees))
        return "observee-status.turbo-stream"
    }

    private fun dataDrivenEach(stream: Flow<Any>) = ReactiveDataDriverContextVariable(stream, 1)
}
React: 
className="text-muted"

html:
class="text-muted"
<body>
  <h1>Focus Animation</h1>
  <form>
    <div class="input-container">
    	<label for="email" class="sr-only">Your email:</label>
	<input type="text" id="email" placeholder="Your email..." autocomplete="off">
    </div>

    <div class="input-container">
    	<label for="password" class="sr-only">Your Password:</label>
    	<input type="password" id="password" placeholder="Your password...">
    </div>

    <div class="text-right">
    	<button class="button">Submit</button>
    </div>
  </form>
</body>
          <table>
              <tr>
                  <td style="text-align: center;"><canvas id="canvas_tt617c03570a283" width="125" height="125"></canvas></td>
              </tr>
              <tr>
                  <td style="text-align: center; font-weight: bold"><a href="//24timezones.com/Ho-Chi-Minh/time" style="text-decoration: none" class="clock24" id="tz24-1635517271-c1218-eyJzaXplIjoiMTI1IiwiYmdjb2xvciI6IkZGRkZGRiIsImxhbmciOiJlbiIsInR5cGUiOiJhIiwiY2FudmFzX2lkIjoiY2FudmFzX3R0NjE3YzAzNTcwYTI4MyJ9" title="Ho Chi Minh actual time" target="_blank">Current time in Ho Chi Minh</a></td>
              </tr>
          </table>
          <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
	<section class="section-gray">
		<div hidden="hidden" id="beispielMaster">
			<@beispiel/>
		</div>
	</section>
    .toggle-container-color-secondary .caret {
        border-top: 2px solid ${account.cssThemeColor!};
        border-left: 2px solid ${account.cssThemeColor!};
    }


.calculator-inputform .col-info ul>li:before, #toggleBeispielRepVar .icon .icon-close:before, .icon .icon-arrow-d:before {
        color: ${account.cssThemeColor!};
    }

    .calculator-summary .custom-control-label-secondary::before, .calculator-summary .toggle-container-color-secondary {
        border-color: ${account.cssThemeColor!};
    }

    .summary-table-item {
        border-bottom: 3px solid ${account.cssThemeColor!};
    }
<section class="section-faq">
<div class="page-width">
    <div class="single-product__section-title-wrapper text-center">
      <h2 class="single-product__section-title ">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="accordion-wrapper">
      <div class="accordion">
        {% for block in section.blocks %}
          <h5 class="accordion__title">{{block.settings.title}}</h5>
          <div class="accordion__panel">
            <div class="accordion__panel-text">{{block.settings.text}}</div>
          </div>
        {% endfor %}
      </div>
    </div>

</div>
</section>

<style>
  .accordion__title:after{
    background-image: url({{'arr-down.png' | asset_url}});
    background-position:center right;
    background-size:contain;
  }
  .accordion__title_active:after {
    background-image: url({{'arr-up.png' | asset_url}});
    background-position:center right;
    background-size:contain;
  }
</style>

<script>
   // ------------------ Accordion ----------------------\\
$('.accordion__title').click(function(){
  $(this).toggleClass('accordion__title_active');
  $(this).next().toggleClass('accordion__panel_active');
})
</script>


{% schema %}
  {
    "name": "FAQ",
    "class": "faq",
    "settings": [
		{
		"type": "text",
		"id": "title",
		"label": "Heading",
		"default": "FAQ"
		}
    ],
    "blocks": [
      {
        "type": "text",
        "name": "FAQ",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Question",
            "default": "Sample FAQ question"
          },
          {
            "id": "text",
            "type": "richtext",
            "label": "FAQ answer",
            "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nisi ut condimentum ultricies. Praesent tincidunt facilisis ipsum quis porta. Morbi sed quam eu tortor volutpat porttitor sit amet at quam.</p>"
          }
        ]
      },
      {
        "type": "html",
        "name": "FAQ-HTML",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Question",
            "default": "Sample FAQ question"
          },
          {
            "id": "text",
            "type": "html",
            "label": "FAQ answer",
            "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nisi ut condimentum ultricies. Praesent tincidunt facilisis ipsum quis porta. Morbi sed quam eu tortor volutpat porttitor sit amet at quam.</p>"
          }
        ]
      }
    ]
  }
{% endschema %}



<style>
/* accordion */
.accordion {
    padding: 25px 0 35px;
}

h5.accordion__title {
  background-color:#d9e3e9;
  line-height: 60px;
  padding: 0 25px;
  margin-top: 15px;
  margin-bottom:0;
  font-size: 16px;
  /*letter-spacing: 1px;*/
  font-weight:500;
  position: relative;
  cursor: pointer;
  transition: .3s;
  color:#16526a;
}
.accordion__title > p {
	font-size:16px;
  	color:#16526a;
}

h5.accordion__title:after {
    content: '';
    width: 30px;
    height: 17px;
    position: absolute;
    right: 35px;
    top: 27px;
    background-repeat: no-repeat;
    background-size: contain;
}

/*h5.accordion__title_active:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 15px solid #16526a;
    position: absolute;
    bottom: 0;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1;
}*/

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out -600ms;
  background-color:#0d4d66;
}
.accordion__panel_active{
  max-height: 5000px;
  transition: max-height 1s ease-in-out 0s;
}
.accordion__panel-text{
  padding: 15px 30px 30px;
  video{
      max-width: 100%;
  }
}

.accordion__panel-text .product-info__table-wrapper {
    display: flex;
  	margin:0;
    width: 67%;
}
.accordion__panel-text > p {
	color:white;
}
.accordion__panel-video{
  width: 100%;
  height: 465px;
  @media(max-width: 1440px){
      height: 310px;
  }
}
@media(max-width: 767px){
  h5.accordion__title {
      line-height: 20px;
      padding: 15px 25px 15px 10px;
      font-size: 12px;
  }
  .accordion__title > p {
	font-size:12px;
  }
  .accordion__title:after {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
  }
}
.accordion__panel-text-title {
  font-weight: 700;
  margin: 10px 0;
}
.accordion__panel_tech-row{
  margin-bottom: 10px;
}
.accordion__title_active {
	color:#ffb5a7;
  	
}

/* End of accordion */
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, maximum-scale=1.0">

<style>
  .slick-slider {
    -ms-touch-action: unset !important;
    touch-action: unset !important;
  }
</style>
<div class="faq__item-wrapper">
  {% for block in section.blocks %}
  {% case block.type %}
  {% when 'question_three' %}
  <div class="faq__item">
    <div class="faq-question">{{ block.settings.question }}</div>
    <div class="faq-answer">{{ block.settings.answer }}</div>
  </div>
  {% endcase %}
  {% endfor %}
</div>    
<script>
  $(document).ready(function(){
    $('.faq-question').click(function(){
      $(this).toggleClass('active');
      $(this).next('.faq-answer').toggleClass('active');
    });
  });
</script>
  {% capture inventoryTotal %}
  {% assign total=0 %}
  {%for variant in product.variants %}
    {% capture i %}{{ total | plus:variant.inventory_quantity }}{%endcapture%}
    {% assign total = i %}
  {%endfor%}
  {% if total ==< 307 %}
  {{total | minus: 305 }}
  {%endif%}
  {% endcapture %}

<div class="left-in-stock">*only {{ inventoryTotal }} left at this price</div>
<div class="responsive">
<iframe src="https://embed.voomly.com/embed/assets/embed.html?videoId=5YeTj-fPX&videoRatio=1.7&type=v" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen width="1000" height="600"></iframe>
</div>


<style>
.responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.responsive iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>
    <form onsubmit="return spieces()">
        <!---- <label for="fname">Nazwa przyprawy:</label><br>-->
        <input type="text" id="spiceName">
        <input type="submit" value="Submit">

    </form>

var spiceslist = [];

function spieces() {
  let boxvalue = document.getElementById("spiceName").value;
  spiceslist.push(boxvalue);
  console.log(spiceslist);
  return false;
}

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-twitter" viewBox="0 0 18 15">
    <path fill="currentColor" d="M17.64 2.6a7.33 7.33 0 01-1.75 1.82c0 .05 0 .13.02.23l.02.23a9.97 9.97 0 01-1.69 5.54c-.57.85-1.24 1.62-2.02 2.28a9.09 9.09 0 01-2.82 1.6 10.23 10.23 0 01-8.9-.98c.34.02.61.04.83.04 1.64 0 3.1-.5 4.38-1.5a3.6 3.6 0 01-3.3-2.45A2.91 2.91 0 004 9.35a3.47 3.47 0 01-2.02-1.21 3.37 3.37 0 01-.8-2.22v-.03c.46.24.98.37 1.58.4a3.45 3.45 0 01-1.54-2.9c0-.61.14-1.2.45-1.79a9.68 9.68 0 003.2 2.6 10 10 0 004.08 1.07 3 3 0 01-.13-.8c0-.97.34-1.8 1.03-2.48A3.45 3.45 0 0112.4.96a3.49 3.49 0 012.54 1.1c.8-.15 1.54-.44 2.23-.85a3.4 3.4 0 01-1.54 1.94c.74-.1 1.4-.28 2.01-.54z">
</svg>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 18 18">
    <path fill="currentColor" d="M8.77 1.58c2.34 0 2.62.01 3.54.05.86.04 1.32.18 1.63.3.41.17.7.35 1.01.66.3.3.5.6.65 1 .12.32.27.78.3 1.64.05.92.06 1.2.06 3.54s-.01 2.62-.05 3.54a4.79 4.79 0 01-.3 1.63c-.17.41-.35.7-.66 1.01-.3.3-.6.5-1.01.66-.31.12-.77.26-1.63.3-.92.04-1.2.05-3.54.05s-2.62 0-3.55-.05a4.79 4.79 0 01-1.62-.3c-.42-.16-.7-.35-1.01-.66-.31-.3-.5-.6-.66-1a4.87 4.87 0 01-.3-1.64c-.04-.92-.05-1.2-.05-3.54s0-2.62.05-3.54c.04-.86.18-1.32.3-1.63.16-.41.35-.7.66-1.01.3-.3.6-.5 1-.65.32-.12.78-.27 1.63-.3.93-.05 1.2-.06 3.55-.06zm0-1.58C6.39 0 6.09.01 5.15.05c-.93.04-1.57.2-2.13.4-.57.23-1.06.54-1.55 1.02C1 1.96.7 2.45.46 3.02c-.22.56-.37 1.2-.4 2.13C0 6.1 0 6.4 0 8.77s.01 2.68.05 3.61c.04.94.2 1.57.4 2.13.23.58.54 1.07 1.02 1.56.49.48.98.78 1.55 1.01.56.22 1.2.37 2.13.4.94.05 1.24.06 3.62.06 2.39 0 2.68-.01 3.62-.05.93-.04 1.57-.2 2.13-.41a4.27 4.27 0 001.55-1.01c.49-.49.79-.98 1.01-1.56.22-.55.37-1.19.41-2.13.04-.93.05-1.23.05-3.61 0-2.39 0-2.68-.05-3.62a6.47 6.47 0 00-.4-2.13 4.27 4.27 0 00-1.02-1.55A4.35 4.35 0 0014.52.46a6.43 6.43 0 00-2.13-.41A69 69 0 008.77 0z" />
    <path fill="currentColor" d="M8.8 4a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm0 7.43a2.92 2.92 0 110-5.85 2.92 2.92 0 010 5.85zM13.43 5a1.05 1.05 0 100-2.1 1.05 1.05 0 000 2.1z">
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="24" viewBox="0 0 14 24">
  <image width="14" height="24" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAADfUlEQVQ4jZ1UW2gjVRj+zpmTmVwnaW5N2m4T01Z9cBUR+uKiiNt9cfFVFH0S1pe+7OM+i+jDFiqE1bcNiNtFvBS0gpdli2sx24rghV2RalObbpMmm9tkJpkkM0fOpFuDiIofHJjh/785///93z/k198KuAfGGCxrgI38Jkp3ivi9UHju5s3NZ92KMunz+5ltD2xd10kqldplGIFlWYhEIiBA8PLl3Nqt27cfl2UFPbML2IPjxJ2dwmPM5/M5LxyA3+/HoNdHNpu9ceunH05GEpOQJAng3IkDNrRmE4nERJFtb28DhDjBdDqNXC53Lr/x1clocgoSpaCUQtd1tFotxOJREErFNVHW7egYDCynt/09ii8+/+wl8W0mUdg2R6fbhcfjxenTC29sbuW/vFsugRCi053CDqq1CrS2ht3iLvROJ0llDyx7WFyjcogzTz919fXXXr0wFgpdsy3rGkDydOXKCpaX3wSVJOi6IQSyiOhLFMS509fcTGb9/tkMlpcuwuvzods1QFVVxbebW1i58i5UNYBgUDVtyxoVGzOzM6TfM3Epm0W/14PbrYB5vd6HAcRWP1pFrVbnRscMeT2eIwqBPxDC9evrT7791qVfbny9QRS3EzPx/Asvbomq4hMnuOJTeSg6zhNTKeddnInpDJcULwdTePJEilPJxRcWzmwzgLTvlaQGg2L4sG37uMzBoI9wOCyUhGVxZxxujzfPWq2mKhKq1aojxtjYGBRFcVwkIAygaW3oetuZqdU3kUwmD1g6nV6fnZtTouMTfYDQYnHvQcMwZOFbAcMwkMncV4rH4/v1et1ldgyamp5eJx98uIpytYaAqsJFOZaWLv783fc/PhAORxwfaq0Gnjh16vzL515ZFiNrNhpIRCOgvV7PsVT9bgX1WmVoWyJsNUTAH8D+3h5/J5dDuVSGIsuOBlRI3tFbMDsahFk4ByUjMxRJajAoVyqHeP+9q9gtFJBIJsHKh3fAGAGhEkYJ+As5HImgWqng008+htZqgormxc79G45uBnO5sLa2BirUG53bP0HkifHEYjHQ/8T4G/xvIoM13DtwG1xYigudh0dEJImh3W6jrevOYh8TXbLLeRC1y4osnDLe77ShOb1zmLqGRx95KDA/P496o/En0fkZHREFJqcmv9G75qxwktjjaqmIs2efOVxcXMTBwcGQBeAP7YCSjudM2d4AAAAASUVORK5CYII="/>
</svg>
// example with adobe typekit, but would assume this would work just as well with google fonts
<link rel="preload" href="https://use.typekit.net/filename.css" as="style">
<link rel="stylesheet" href="https://use.typekit.net/filename.css">
.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.selectEnable { 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
HTML

<div class="body">
  <input type="checkbox"  class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
      <div class="spinner diagonal part-1"></div>
      <div class="spinner horizontal"></div>
      <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
        <div class="main-content-wrapper">
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>
    </div>
</div>


CSS


.body{
width: 100%;
height: 100%
}

#sidebarMenu {
    height: 171px; /*change here related your menu height*/
    position: fixed;
    overflow: none;
    width: 100%;
    z-index: 100;
    transform: translateY(-171px); /*change here related your menu height*/
}
.main-content-wrapper a{
    width: 100%;
    height: 40px;
    display: block;
    background: #030303;
    text-align: center;
    padding-top: 15px;
    border: 1px solid #4b4545;
    color: whitesmoke;
    text-decoration: none;
}
#sidebarMenu::-webkit-scrollbar {
    width: 12px;
}
#sidebarMenu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
}
#sidebarMenu::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background: #0000002e;
    height: 50px;
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translatey(0);
    top:50px /*change here related your top menu height*/
}
input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 22px;
    width: 22px;
    left:10px;
    top:10px;
    display: none
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: black;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}


 @media screen and (max-width: 950px) {
      .sidebarIconToggle{
          display:block
       }
    }
img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
/* #navbar is the topmost element and <main> contains all other content */

#navbar {
  /* CSS property ensuring #navbar always stays in the same place even if the page is scrolled: */
  position: fixed;
}

main {
  /* Ensure the remaining content doesn't hide behind the #navbar: */
  position: absolute;
  z-index: 1;
  top: 100px;
}
// THE HTML/PHP

// Categories Nav START
<? $terms = get_terms( array(
    'taxonomy' => 'category-name', // <-- update this
    'orderby' => 'ID',
  )); 
  if ( $terms && !is_wp_error( $terms ) ){ ?>
   <ul class="CHANGEME-categories-nav">
      <? foreach( $terms as $term ) { ?>
        <li id="cat-<?php echo $term->term_id; ?>">
           <a href="#" class="<?= $term->slug; ?> ajax" data-term-number="<?= $term->term_id; ?>" title="<?= $term->name;?>"><?= $term->name; ?></a>
        </li>
      <? } ?>
   </ul>
<? } ?>
// Categories Nav END
                                       
// Results Container START
<div id="CHANGEME-results-container" class="CHANGEME-filter-result">
   <? // post query
     $query = new WP_Query( array(
        'post_type' => 'post-name', // <-- update this
        'posts_per_page' => -1,
      ) ); 
   if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); ?>
    
      // POST TEMPLATE HERE
    
   <? endwhile; endif; wp_reset_query(); ?>
</div>                      
// Results Container END

// The onpage JS for the page template
<script>
(function($) {
        'use strict';
        function cat_ajax_get(catID) {
            jQuery.ajax({
                type: 'POST',
                url: raindrop_localize.ajaxurl,
                data: {"action": "filter", cat: catID },
                success: function(response) {
                    jQuery("#CHANGEME-results-container").html(response);
                    return false;
                }
            });
        }
        $( ".CHANGEME-categories-nav a.ajax" ).click(function(e) {
            e.preventDefault();
            $("a.ajax").removeClass("current");
            $(this).addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
            var catnumber = $(this).attr('data-term-number');
            cat_ajax_get(catnumber);
        });

    })(jQuery);
</script>
                                       
// Callback function for functions.php or some other functions specific php file like theme.php
// Aside from the inital add actions and a few other things, the actual query and post template should be the same as what is on the page.
                                       
add_action( 'wp_ajax_nopriv_filter', 'CHANGEME_cat_posts' );
add_action( 'wp_ajax_filter', 'CHANGEME_cat_posts' );
                                       
function CHANGEME_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
    $args = array (
	  'tax_query' => array(
		    array(
		      'taxonomy' => 'category-name', // <-- update this
		      'field' => 'term_id',
		      'terms' => array( $cat_id )
		    )
		  ),
	    'post_type' => 'post-name', // <-- update this
	    'posts_per_page' => -1,
	  );
	global $post;
    $posts = get_posts( $args );
    ob_start ();
    foreach ( $posts as $post ) { 
	    setup_postdata($post); ?>

	    // POST TEMPLATE HERE

   <?php } wp_reset_postdata();
   $response = ob_get_contents();
   ob_end_clean();
   echo $response;
   die(1);
}
 useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then(function (response) {
        return response.json();
      })
      .then(function (myJson) {
        console.log(myJson);
      	
      	//改變state
        setTodoItemData([...myJson]);
      });
  }, []);

//async 寫法

 const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [todos, setTodos] = useState([]);
useEffect(() => {
    (async function () {
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/todos");
        const data = await res.json();
        setTodos(data);
        setIsLoading(false);
      } catch (err) {
        setIsLoading(false);
        setIsError(true);
      }
    })();
  }, []);

//post寫法+ 改變header

let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.id);
event: message
id: 0
data: <turbo-stream action="replace" target="observee184">
data:   <template>
data:     <li class="my-1 py-3 d-flex list-group-item list-group-item-success" id="observee184">
data:       <div class="container">
data:         <div class="row">
data:           <div class="col px-0">
data:             <a class="fw-bold text-dark" href="file:src/sample/test.file">Test File</a>
data:           </div>
data:           <div class="col-auto px-0 shadow-sm">
data:             <span class="badge green">Instances
data:               <span class="badge bg-info ms-1 text-dark text-etched">1</span>
data:             </span>
data:           </div>
data:         </div>
data:         <div class="row">
data:           <div class="col px-0">
data:             <span class="fw-bold">Healthy</span>
data:             <span class="fw-lighter x-small fst-italic">at</span>
data:             <time class="fw-lighter x-small font-monospace"
data:                   data-bounce="2021-10-06T00:51:11.603948Z"
data:                   datetime="2021-10-06T00:47:11.186060Z">00:47:11</time>
data:           </div>
data:         </div>
data:       </div>
data:     </li>
data:   </template>
data: </turbo-stream>

event: message
id: 1
data: <turbo-stream action="replace" target="observee193">
data:   <template>
data:     <li class="my-1 py-3 d-flex list-group-item list-group-item-success" id="observee193">
data:       <div class="container">
...
<!--código mal-->
<form action="/processing.html" method="GET">
  <input type="text" id="username">
  <input type="submit" value="submit"> 
</form>
<form action="/processing.html" method="GET">
  <label for="mystery">What gets rendered?</label>
  <input type="range" id="mystery" name="mystery" min="0" max="100" step="10">
</form>
// #ProgressiveEnhancement
(window['EventSource'] && window['Turbo']) ?
  Turbo.connectStreamSource(new EventSource('/status.stream')) :
  console.warn('Turbo Streams over SSE not available');
const zeroPad = n => `${n < 10 ? '0' : ''}${n}`;

function updateClock() {
  const now = new Date();
  const hh = zeroPad(now.getUTCHours());
  const mm = zeroPad(now.getUTCMinutes());
  const ss = zeroPad(now.getUTCSeconds());
  let clock = document.getElementById('clock');
  clock.innerHTML = `${hh}:${mm}:${ss}&nbsp;UTC`;
  clock.setAttribute('datetime', now.toISOString());
}

// #ProgressiveEnhancement
document.getElementById('status_frame_load').click();

updateClock();
setInterval(updateClock, 1000);
<div class="container" data-th-fragment="observee-status-li">
    <div class="row">
        <div class="col px-0">
            <a class="fw-bold text-dark" data-th-href="*{location}" data-th-text="*{label}">
                An Observee
            </a>
        </div>
        <div class="col-auto px-0 shadow-sm">
            <span data-th-class="|badge *{color}|">Instances
                <span class="badge bg-info ms-1 text-shadow" data-th-text="*{count}">99</span>
            </span>
        </div>
    </div>
    <div class="row">
        <div class="col px-0">
            <span class="fw-bold" data-th-text="*{status}">Status</span>
            <span class="fw-lighter x-small fst-italic">at</span>
            <time class="fw-lighter x-small font-monospace"
                  data-th-data-bounce="*{timestampBounce}" data-th-datetime="*{timestamp}"
                  data-th-text="*{hhmmss}">HH:MM:SS
            </time>
        </div>
    </div>
</div>
<turbo-stream action="replace" data-th-each="observee : *{observees}" data-th-target="|observee${observee.id}|">
    <template>
        <li data-th-class="|my-1 py-3 d-flex list-group-item list-group-item-*{alert}|"
            data-th-id="|observee*{id}|"
            data-th-object="${observee}">
            <div data-th-replace="~{fragments/observee-status-li :: observee-status-li}"></div>
        </li>
    </template>
</turbo-stream>
<!-- General Use -->

<meta name="theme-color" content="#673AAC">

  
<!-- For light and dark mode -->
  
<meta 
    name="theme-color" 
    content="#ecd96f"
    media="(prefers-color-scheme: light)">

<meta 
    name="theme-color" 
    content="#0b3e05"
    media="(prefers-color-scheme: dark)">
<!DOCTYPE html>
<html lang="${lang}"
      th:lang="${lang}"
      th:with="lang=${#locale.language}"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="~{fragments/html-head}"/>
    <title>status.gallery Status Page (unframed)</title>
    <!-- if Turbo is available, index.html won't have included this head, so the meta refresh won't happen (which is good!) -->
    <!-- if JavaScript is disabled, Turbo won't be available, so this meta refresh will take the place of SSE -->
    <meta content="3" http-equiv="refresh" name="refresh"/>
    <script src="/scripts/status.js" async></script>
</head>
<body>
<div class="bg-light bg-gradient p-3 rounded shadow-lg">
    <h1 class="display-1 text-center" style="text-shadow: 0 1px 0 gray">status.gallery (unframed)</h1>
</div>
<turbo-frame id="status_frame">
    <div class="box">
        <ul class="container list-group">
            <li th:class="|my-1 py-3 d-flex list-group-item list-group-item-*{alert}|"
                th:each="observee : *{observees}"
                th:id="|observee*{id}|"
                th:object="${observee}">
                <div th:replace="~{fragments/observee-status-li :: observee-status-li}"></div>
            </li>
        </ul>
    </div>
</turbo-frame>
</body>
<link th:replace="~{fragments/footer}"/>
</html>
<!--
  ~ Copyright © 2021. Joshua A. Graham https://status.gallery/. See LICENSE.txt for usage rights.
  -->

<!DOCTYPE html>
<html lang="${lang}"
      th:lang="${lang}"
      th:with="lang=${#locale.language}"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="~{fragments/html-head}"/>
    <script src="/scripts/index.js" async defer></script>
    <script src="/scripts/status.js" async></script>
    <title>status.gallery</title>
</head>
<body>
<header class="bg-light bg-gradient p-3 rounded shadow-lg">
    <div class="display-4 text-center text-shadow">status.gallery</div>
    <div class="mx-auto small font-monospace text-center shadow-sm p-1" style="width: 8em">
        <time id="clock" datetime=""></time>
    </div>
</header>
<turbo-frame id="status_frame" autoscroll data-autoscroll-block="start">
    <a href="/status" id="status_frame_load">
        <!-- #ProgressiveEnhancement -->
        <script>document.currentScript.parentElement.hidden = true;</script>
        Status
    </a>
    </div>
</turbo-frame>
<link th:replace="~{fragments/footer}"/>
</body>
</html>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="#449944" media="(prefers-color-scheme: light)" name="theme-color">
<meta content="#003300" media="(prefers-color-scheme: dark)" name="theme-color">

<link href="/stylesheets/bootstrap.min.css" rel="stylesheet"/>
<script src="/scripts/bootstrap.min.js" async defer></script>

<script src="/scripts/turbo.js"></script>

<link href="/stylesheets/main.css" rel="stylesheet"/>
<div id="ficha-tecnica">
<a href="/">
 <button type="button" class="btn41-43 btn-42">Ficha Técnica</button>
</a>
</div>
<!-- horrible is your mp3 file name any other supported format.-->
<audio controls autoplay hidden="" src="horrible.mp3" type ="audio/mp3"">your browser does not support Html5</audio>
<style>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    border: 1px solid #c8d4f3;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

</style>

<div class="videoWrapper">
  <iframe width="100%" src="" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<article data-content="Hello Everyone">
</article>

article::before{
  content: attr(data-content);
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
HTML:

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

CSS:

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu .bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover .top {
  transform: rotate(45deg);
}

.hamburger-menu:hover .middle {
  opacity: 0;
}

.hamburger-menu:hover .bottom {
  transform: rotate(-45deg);
}
<p id="copyrightyear"></p>

 

<script>

   document.getElementById('copyrightyear').innerHTML

</script> 
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial scale=1" maximum-scale=1, user-scalable="no">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <meta name="HandheldFriendly" content="true">

        <title>Zhakkihnetwork</title>

        <link rel="stylesheet" href="styles.css">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="

  crossorigin="anonymous" referrerpolicy="no-referrer">

    </head>
 <script src="https://www.google.com/recaptcha/api.js"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>
<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>
public void Seleccionar()
        {

            Document doc = Autodesk.AutoCAD.ApplicationServices.Application.DocumentManager.MdiActiveDocument;

            Database db = doc.Database;

            Editor ed = doc.Editor;

            PromptEntityOptions peo = new PromptEntityOptions("\nSeleccione una superficie:");

            //peo.SetRejectMessage("\nDebe ser un entidad de tipo ¡Polyline!");

            //peo.AddAllowedClass(typeof(Autodesk.AutoCAD.DatabaseServices.Polyline), false);

            PromptEntityResult per = ed.GetEntity(peo);


            if (per.Status != PromptStatus.OK)

                return;

            Transaction tr = db.TransactionManager.StartTransaction();

            Autodesk.AutoCAD.DatabaseServices.Polyline pl = new Autodesk.AutoCAD.DatabaseServices.Polyline();

            IntegerCollection ic = new IntegerCollection();

            using (tr)
            {

                DBObject obj = tr.GetObject(per.ObjectId, OpenMode.ForRead);

                ed.WriteMessage("Type : " + obj.GetType().Name);
                                
                if (obj is Autodesk.AutoCAD.DatabaseServices.Polyline)
                {
                    ed.WriteMessage(obj.GetType().Name + "Selected.");

                    Autodesk.AutoCAD.DatabaseServices.Polyline pline = tr.GetObject(per.ObjectId, OpenMode.ForRead) as Autodesk.AutoCAD.DatabaseServices.Polyline;

                    if (pline != null)
                    {
                        BlockTableRecord btr = (BlockTableRecord)tr.GetObject(pline.OwnerId, OpenMode.ForWrite);

                        Point3d picked = pline.GetClosestPointTo((Point3d)per.PickedPoint, false);

                        double par = pline.GetParameterAtPoint(picked);

                        int m = (int)par;

                        Point2dCollection verts = new Point2dCollection(2);

                        SegmentType stype = pline.GetSegmentType(m);

                        if (stype == SegmentType.Line)
                        {
                            Point3d pl1 = pline.GetPoint3dAt(0);
                            Point3d pl2 = pline.GetPoint3dAt(1);

                            int vn = pline.NumberOfVertices;

                            double maxDistance = 0;
                            double minDistance = 0;

                            Point3d puntoL2 = pline.GetPoint3dAt(1);

                            Autodesk.AutoCAD.ApplicationServices.Application.ShowAlertDialog("VN: " + vn);

                            for (int i = 0; i < vn; i++)

                            {
                                Point3d pt1 = pline.GetPoint3dAt(i);
                                
                                ed.WriteMessage("\n" + pt1.ToString());
                                if (i < (vn - 1))
                                {
                                    Point3d pt2 = pline.GetPoint3dAt(i + 1);
                                    ed.WriteMessage("\n" + pt2.ToString());
                                    var preDistance = pt1.DistanceTo(pt2);
                                    
                                    if (preDistance > maxDistance)
                                    {
                                        maxDistance = preDistance;
                                    }
                                    if(preDistance > 0 && preDistance < maxDistance)
                                    {
                                        minDistance = preDistance;
                                    }
                                    if (preDistance == maxDistance)
                                    {
                                        puntoL2 = pline.GetPoint3dAt(i + 1);
                                    }
                                }
                                if(i == (vn-1))
                                {
                                    puntoL2 = pline.GetPoint3dAt(0);
                                }

                            }
                            

                            Point3d puntico;

                            if (pl1.Y > pl2.Y)
                            {
                                puntico = pl1;
                            }
                            else
                            {
                                puntico = pl2;
                            }

                            var distance = maxDistance;

                            PromptIntegerOptions prn = new PromptIntegerOptions("\nDetermine el alto del muro:");
                            PromptIntegerResult startingNumberPromptResult = ed.GetInteger(prn);

                            Autodesk.AutoCAD.ApplicationServices.Application.ShowAlertDialog("Ancho: " + distance + " Alto:" + startingNumberPromptResult.Value);

                            Point3d puntoL1 = new Point3d(pl1.X, pl1.Y - 0.6, pl1.Z);
                            Point3d puntoLL = new Point3d(puntoL2.X, puntoL2.Y - 0.6, puntoL2.Z);

                            tr.Commit();

                            string punto1 = "punto 1." + puntoL1.X + "-" + puntoL1.Y + "-" + puntoL1.Z;
                            string punto2 = " - punto 2." + puntoL2.X + "-" + puntoL2.Y + "-" + puntoL2.Z;

                            Autodesk.AutoCAD.ApplicationServices.Application.ShowAlertDialog(punto1 + punto2);
                            
                            InsertBlocketivo(puntoL1, "panel60x120", distance, startingNumberPromptResult.Value,minDistance, puntoL2);

                        }

                        
                    }                    

                }          

            }

        }
//html

<nick-select class="beta-mr-28" [nickCrudField]="formulario.select" [options]="selectOptions">
</nick-select>

<span>opção selecionada: {{form.tournamentType.complexValue.value}}</span>

//JSON

"form:formulario": { //inicializa um form.
  "select": { //id do campo.
    "id": "select",
    "title": "Select", //Título, será exibido como label acima do select gerado.
    "metadata": { //Paremetros opcionais.	
      "defaultValue": 0 //index padrão do array options.
    }
  }
},
  //inicializa array
"selectOptions": [ 
  //objeto contendo as opções a serem exibidas no nosso select.
  {
    "key": 0,
    "value": "opção 1"
  },
  {
    "key": 1,
    "value": "opção 2"
  }
]

//saida: opção selecionada: opção 1
//html

<form>
  <nick-input style="width: auto;" class="beta-mr-28" [nickCrudField]="formulario.nome" placeholder="Informe seu nome">
  </nick-input>
</form>

<span>seu nome é: {{nome.value}}</span>

//JSON

//Formulário padrão

"form:formulario": { //inicializa um form.
  "nome": { //id do campo.
    "id": "nome",
    "title": "Nome", //Título, será exibido como label acima do input gerado.
    "metadata": { //Parametros opcionais.
    "required": true //Validator de campo requerido
    }
  }
}
//html

<span>Valor da variável: {{originNomeVar}}</span>

//JSON

{
    "onLoad": [
        {
            "index": 0,
            "actions": [
              	{
                    "set:nomeVar": {
                        "value": "1234"
                    }
                },
                {
                    "set:originNomeVar": {
                        "originField": "nomeVar"
                    }
                }
            ]
        }
    ]
}

//Saída Valor da variável: 1234
//html
<span>Valor da variável: {{nomeVar}}</span>

//JSON

{
    "onLoad": [
        {
            "index": 0,
            "actions": [
                {
                    "set:nomeVar": {
                        "value": "123"
                    }
                }
            ]
        }
    ]
}

//Saída: Valor da variável: 123
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><HEAD><TITLE>Press Release</TITLE>
</head>
<body border text=black link=blue vlink=navy alink=red>
<center><table BORDER CELLSPACING=0 CELLPADDING=16 COLS=1 WIDTH="600" BGCOLOR="#FFFFFF">
<tr><td><pre>
<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-vHTkd-UD6Ao/YSxc6DdQ7EI/AAAAAAAAIQM/Q2M-zBgprxslFdejpbnFtKtEFl0Og4zWwCLcBGAsYHQ/s1200/Header-3-Large%2B%25281%2529.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="638" data-original-width="1200" src="https://1.bp.blogspot.com/-vHTkd-UD6Ao/YSxc6DdQ7EI/AAAAAAAAIQM/Q2M-zBgprxslFdejpbnFtKtEFl0Og4zWwCLcBGAsYHQ/s600/Header-3-Large%2B%25281%2529.jpg"/></a></div>

30-08-2021                                                 For Further Information contact:
                                                           Abby Perez
                                                           Phone: 800-531-0872
email: abby.p@digitalconceptmarketing.com

<h1>Press Release!!!</h1>
<p>Digital Concept is a Los Angeles based full service Digital Marketing Agency.</p>

<h3><strong>Abby Perez, Director of Sales/Founder</strong></h3>
<p>~She has spent the last 15 years of her career working and developing performance-based sales strategies that get results. Her passion for helping new and established business owners reach their goals is more than just a job. She brings value to these businesses with measurable metrics. Her experience across a variety of industries including healthcare, retail, consumer products, and professional services.</p>

<h3><strong>Manan Qayas, Director of SEO/Co-Founder</strong></h3>
<p>~He is a digital enthusiast, is passionate about Technologies, committed to learning and growing every day in a competitive industry. His professional experiences and skills include Web Development Technologies, HTML, CSS, JavaScript as front-end technologies. For backend, he works with Node JS, React JS, and MySQL Databases. His works with CMS WordPress for building professional, mobile responsive, and modern websites which rank best on Google Search Results Page. He is also an expert at On-Page and Off-Page SEO optimization.</p>

<p style="color:green">Using creative and innovative branding, exquisite website design, impactful SEO content, and effective advertising—we’re your full-service Digital Marketing agency.</p>

<strong><cite>Digital Concept can take your business from the shadows to the spotlight, VISIT<cite> <a href="https://www.digitalconceptmarketing.com/" target="_blank">www.digitalconceptmarketing.com</a><strong>

<h5>Thank You.</h5>

</pre>

</td></tr></table></body></html>
#include<stdio.h>


float check_number(float num1, float num2)
{
    int answer;
    if(num1 >= 0 && num2 >= 0)
    {
        answer = 1;
    }
    else
    {
        answer = 0;
    }
    return answer;
}
void main()
{
    float num1, num2, answer;
    printf("enter number 1: ");
    scanf("%f", &num1);
    printf("enter number 2: ");
    scanf("%f", &num2);

    answer = check_number(num1, num2);

    if(answer == 1)
    {
        printf("two number the same sign");
    }
    else
    {
        printf("two number different sign");
    }

}
<!DOCTYPE html>
<html>
    <head>
      <title>Image my crush</title>
      <link rel="stylesheet" href="main.css">   
    </head>
   <body>
     <div class="header">IMAGE MY CRUSH
     <div><img class="robot"src="https://www.thiscodeworks.com/images/robot.png" alt=""></div>
     </div>
     <div style="border-left: 15px solid #080a52;
     border-right: 15px solid #080a52; margin-top: 4.6cm;">
     <div style=" background-image: linear-gradient(0, rgba(8, 10, 82, 0.5),rgba(235, 33, 136, 0.5) ),url(https://previews.123rf.com/images/karenr/karenr1405/karenr140500001/27947992-pale-blue-and-white-diamonds-tiles-pattern-repeat-background.jpg)">
        <div style="margin-left: 3.5cm;">
            <div> 
                <img class="image"src="https://scontent-xsp1-1.xx.fbcdn.net/v/t1.6435-9/160629167_2974693646092956_3432288190424967043_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=ghhkf5k2DHUAX8cHeJb&_nc_oc=AQk8xRXR1H5jWZD5xwxqt_5mxB5jI5ESWqI4dLaHP1jbBAXmw3x1v6wx6IQ_HD-p8B5_juWBDLtpJpCV_C50pkN-&tn=NfHaIeDpSxWJqYpr&_nc_ht=scontent-xsp1-1.xx&oh=a630723f3cc1ea5e7818651a48af40e2&oe=61483EA1" alt="">  
                <img class="image"src="https://scontent.fsgn5-5.fna.fbcdn.net/v/t1.6435-9/141284173_2937427476486240_3778333158782615113_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=5BK46_R1eqUAX-ErglT&_nc_ht=scontent.fsgn5-5.fna&oh=1b2e5925ddffdc865458e843102b1262&oe=614837AB" alt="">
                <img class="image"src="https://scontent.fsgn5-2.fna.fbcdn.net/v/t1.6435-9/169123202_2988190028076651_1892547538067409246_n.jpg?_nc_cat=105&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=ejrDjBIF-8oAX9TdsW4&_nc_ht=scontent.fsgn5-2.fna&oh=b936cc4e61d75deb21ca4a86614f0496&oe=61483E52" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/168720070_2988190158076638_4324234658353616084_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=_kf3mi1aeSAAX8N63-Y&_nc_ht=scontent-xsp1-3.xx&oh=db8752ef642eac4e5bbdcf20b8edc56e&oe=614A63DB" alt="">
                <img class="image"src="https://scontent.fsgn5-1.fna.fbcdn.net/v/t1.6435-9/168937482_2988189824743338_5671243374235012445_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=ETCCbsVI3w8AX-wmmeH&_nc_ht=scontent.fsgn5-1.fna&oh=5996a5d7dc1188425738cc001ca04a01&oe=61474AE9" alt="">
                <img class="image"src="https://scontent.fsgn5-6.fna.fbcdn.net/v/t1.6435-9/168630872_2988189798076674_4558975586110322457_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=syb16Ya2uhcAX9JB54t&_nc_ht=scontent.fsgn5-6.fna&oh=19de828669c9585b8e154c8c1a9f041e&oe=6148A3D1" alt="">
                <img class="image"src="https://scontent.fsgn5-1.fna.fbcdn.net/v/t1.6435-9/123104399_2864233030472352_7745981858209761034_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=mNNDxd8XLlIAX_SPeSn&tn=NfHaIeDpSxWJqYpr&_nc_ht=scontent.fsgn5-1.fna&oh=987c2a109b02e001a284e4c0a7233ced&oe=614A87EB" alt="">
                <img class="image"src="https://scontent.fsgn5-4.fna.fbcdn.net/v/t1.6435-9/122506025_2864233023805686_4402738516857452655_n.jpg?_nc_cat=102&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=1Z6jEfAJ-U4AX_HS2mC&tn=NfHaIeDpSxWJqYpr&_nc_ht=scontent.fsgn5-4.fna&oh=11570d5d6dd6172f864ddde0eb1e5b10&oe=61482F52" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/123073257_2864232967139025_7707325929730806427_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=qAZxN1hUOq0AX_413Ie&_nc_ht=scontent-xsp1-3.xx&oh=9a4da53cd891c105c7e7a8c3b48c66ec&oe=61485FC6" alt="">
                <img class="image"src="https://scontent-xsp1-2.xx.fbcdn.net/v/t1.6435-9/122559403_2864232923805696_2118200583477191154_n.jpg?_nc_cat=104&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=5OlE5Ip93ZkAX8ROzG4&_nc_ht=scontent-xsp1-2.xx&oh=ec5a483024223736763d850bdb8cc0f3&oe=6147BDBC" alt="">
                <img class="image"src="https://scontent.fsgn5-5.fna.fbcdn.net/v/t1.6435-9/122716629_2864232793805709_8998774641751735835_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=_pPNe3eeO2MAX_UKu1z&_nc_oc=AQmn6sYS9T5-8dg6Gx3PQSnsevSq-FEsW0NnRMUluR-0j-fBklQhGR5mOgKafKVKqgfWyrZsRQVc2fi6Q0LgJAgB&_nc_ht=scontent.fsgn5-5.fna&oh=77bdd5a6f2fa3ce6de2720a4b68757db&oe=614A2FA0" alt="">
                <img class="image"src="https://scontent.fsgn5-5.fna.fbcdn.net/v/t1.6435-9/122649520_2864232783805710_7043014946100128846_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=_HT8lcQ9RSYAX9GXo4J&_nc_ht=scontent.fsgn5-5.fna&oh=47e25e907d16aaf2197f4599212d82a4&oe=614A5330" alt="">
                <img class="image"src="https://scontent.fsgn5-7.fna.fbcdn.net/v/t1.6435-9/118378901_2803879569841032_1553342826402939696_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=174925&_nc_ohc=bg4n0bv8rj4AX9PHkbW&_nc_oc=AQkA6RMlB6cMrSobqmC5YC8bo-lmeu9gO1WBUnGjuCbfzXm9U1x1_QdAlVvx1lcF1qXruSUaOaYlqEcwyz1kM6ej&_nc_ht=scontent.fsgn5-7.fna&oh=46ac98898911765d3c79919aa6bda39e&oe=614AB1F1" alt="">
                <img class="image"src="https://scontent.fsgn5-7.fna.fbcdn.net/v/t1.6435-9/104290739_2744070089155314_6070908186352449116_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=174925&_nc_ohc=ugNkGS88mJkAX_I06fS&_nc_ht=scontent.fsgn5-7.fna&oh=8cfa0bf5d70c0a50a701030a138e84c6&oe=6148BC38" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/95772266_2705970872965236_632200472798691328_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=wGl3JuXT4IoAX8GYYl2&_nc_ht=scontent-xsp1-3.xx&oh=59320502f509585b1b2afa6f28001380&oe=61496BD0" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/92231671_2685048045057519_1139200359701413888_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=174925&_nc_ohc=L9EvvcD8ktgAX8oXf7N&_nc_ht=scontent-xsp1-3.xx&oh=6d53eb664df6084a2a8f38e90f262e23&oe=614A798B" alt="">
                <img class="image"src="https://scontent-xsp1-3.xx.fbcdn.net/v/t1.6435-9/90815465_2674801206082203_6088812897444560896_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=4Ij5MS6RhuEAX9lkr6v&_nc_ht=scontent-xsp1-3.xx&oh=74c3dcf1527e193e641898aaf53e8db4&oe=614ACD6D" alt="">
                <img class="image"src="https://scontent.fsgn5-3.fna.fbcdn.net/v/t1.6435-9/87254890_2645169219045402_179917721922699264_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=F8KT8DLVvEsAX95Lo6Y&_nc_ht=scontent.fsgn5-3.fna&oh=b47b0eb6ce7039d97a65cf5bd7d73851&oe=614758AC" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
                <img class="image"src="" alt="">
 
            </div>
        </div>
        </div>
    </div>
    </body>
 
    <div class="footer">
      <a style="color: white;"href="https://www.facebook.com/le.truc.tkm2108">Go to Truc's facebook</a>
    </div>
   </body>
</html>

.header
{
    height: 175px;
    width: 100%;
    background:#080a52;
    padding: 20px;
    box-sizing: border-box;
    background-clip: border-box;
    border:10px solid black;
    color: #eb2188;
    font-size: 100px;
    align-items: center;
    justify-content: center;
    display: flex;  
    position: fixed;
    top: 0cm;   
  }
 .robot
  {
    width: 3cm;
    height: 3cm;
    position: absolute;
    left: 72px;
    top: 27px;

  }
  .image
         {
         width: 5cm;
         height: 5cm;
         border: solid black;
         margin: 40px;
         
       }
   html, body
   {
    margin: 0;
   }
 
        .footer
        {
            border-top: 10px solid black;
            background-clip: content-box;
           background: #080a52;
            width: 100%;
            height: 50px;
            font-size: 30px;
     
            
            align-items: center;
           justify-content: center;
           display: flex;
          }
<p><a rel="sponsored" href=""></a></p>  
<script src="/socket.io/socket.io.js"></script>
from tkinter import *
root = Tk()

# Creating function for button


def myClick():
    myLabel = Label(root, text="Look! I clicked a button")
    myLabel.pack()


# Defining a button
myButton = Button(root, text="Click ME!", command=myClick)
myButton.pack()


root.mainloop()
from tkinter import *

window = Tk()
window.title("Tkinter Tutorial")
window.geometry("150x250")


# Creating function for button
def save():
    name = name_entry.get()
    contact = contact_entry.get()
    address = address_entry.get()

    window2 = Tk()

    l1 = Label(window2, text=("Name:" + name))
    l1.pack()
    l2 = Label(window2, text=("Contact:" + contact))
    l2.pack()
    l3 = Label(window2, text=("Address:" + address))
    l3.pack()

    window2.mainloop()


# Creating Entry Box
# *********** name ************
name_label = Label(window, text="Name:")  # Creating Label
name_label.pack(anchor="w")

name_entry = Entry(window)  # Creating Entry
name_entry.pack(anchor="w")

# *********** contact ************
contact_label = Label(window, text="Contact:")  # Creating Label
contact_label.pack(anchor="w")

contact_entry = Entry(window)  # Creating Entry
contact_entry.pack(anchor="w")

# *********** address ************
address_label = Label(window, text="Address:")  # Creating Label
address_label.pack(anchor="w")

address_entry = Entry(window)  # Creating Entry
address_entry.pack(anchor="w")


# Adding a button to your tikinter window
Button = Button(window, text="fetch this info")
Button.pack()

window.mainloop()
from tkinter import *  # This will import everything from tkinter
root = Tk()  # Is the Tk window

# Button One
cool_button = Button(root, text="Click Me!")  # Defining a button
cool_button.pack(side=LEFT)  # Putting button on screen

# Button Two
cool_button1 = Button(root, text="Click Me!")  # Defining a button
cool_button1.pack(side=RIGHT)

"""
There is pack, grid & place
"""


root.mainloop()  # Is the END of loop
from tkinter import *

window = Tk()
window.title("Tkinter tutorial 2")
window.geometry("250x250")

# Adding a label to your window
name_label = Label(window, text="Name: ")
name_label.pack(anchor="w")

# Adding an entry to your window
name_entry = Entry(window)
name_entry.pack(anchor="w")

"""
anchor = Anchors are used to define where text is positioned relative to a reference point.

Here is list of possible constants, which can be used for Anchor attribute.

NW
N
NE
W
CENTER
E
SW
S
SE
"""

window.mainloop()
from tkinter import *  # This will import everything from tkinter
root = Tk()  # Is the Tk window


my_menu = Menu(root)
root.config(menu=my_menu)  # creating the menu bar

sub_menu = Menu(my_menu)  # Creating menu inside a menu
my_menu.add_cascade(label="File", menu=sub_menu)  # This is the sub menu

edit_menu = Menu(my_menu)
my_menu.add_cascade(label="Edit", menu=edit_menu)

root.mainloop()  # Is the END of loop
from tkinter import *  # This will import everything from tkinter
root = Tk()  # Is the Tk window


label1 = Label()  # Label is for implementing display boxes for text or images


root.mainloop()  # Is the END of loop
"""
METHODS TO USE WHILE ".pack()"
expand − When set to true, widget expands to fill any space not otherwise used in widget's parent.
fill − Determines whether widget fills any extra space allocated to it by the packer, or keeps its own minimal dimensions: NONE (default), X (fill only horizontally), Y (fill only vertically), or BOTH (fill both horizontally and vertically).
side − Determines which side of the parent widget packs against: TOP (default), BOTTOM, LEFT, or RIGHT.

METHODS TO USE WHILE ".grid()"
column − The column to put widget in; default 0 (leftmost column).
columnspan − How many columns widgetoccupies; default 1.
ipadx, ipady − How many pixels to pad widget, horizontally and vertically, inside widget's borders.
padx, pady − How many pixels to pad widget, horizontally and vertically, outside v's borders.
row − The row to put widget in; default the first row that is still empty.
rowspan − How many rowswidget occupies; default 1.
sticky − What to do if the cell is larger than widget. By default, with sticky='', widget is centered in its cell. sticky may be the string concatenation of zero or more of N, E, S, W, NE, NW, SE, and SW, compass directions indicating the sides and corners of the cell to which widget sticks.

METHODS TO USE WHILE ".place()"
anchor − The exact spot of widget other options refer to: may be N, E, S, W, NE, NW, SE, or SW, compass directions indicating the corners and sides of widget; default is NW (the upper left corner of widget)
bordermode − INSIDE (the default) to indicate that other options refer to the parent's inside (ignoring the parent's border); OUTSIDE otherwise.
height, width − Height and width in pixels.
relheight, relwidth − Height and width as a float between 0.0 and 1.0, as a fraction of the height and width of the parent widget.
relx, rely − Horizontal and vertical offset as a float between 0.0 and 1.0, as a fraction of the height and width of the parent widget.
x, y − Horizontal and vertical offset in pixels.
"""
from tkinter import *  # This will import everything from tkinter
root = Tk()  # Is the Tk window


root.mainloop()  # Is the END of loop
https://www.mastercontrol.com/customapi/DocumentDownload/GetDocumentDataList/587
https://www.mastercontrol.com/customapi/DocumentDownload/GetDocumentData/587
https://www.mastercontrol.com/customapi/DocumentDownload/GetDocument/587
<form action="/action.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="Mike"><br><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" value="Walker"><br><br>
  <input type="submit" value="Submit">
</form>
use_synth :tech_saws
loop do
  play 60
  sleep 0.5
  play 67
  sleep 0.5
end
2.times do
  sample :loop_amen
  sleep 1.753
end
play :c4
sleep 0.5
play :d4
sleep 0.5
play :e4
sleep 0.5
play :c4
sleep 0.5
play 60
sleep 0.5
play 62
sleep 0.5
play 64
sleep 0.5
play 60
sleep 0.5
2.times do
  play 60
  sleep 0.5
  play 62
  sleep 0.5
  play 64
  sleep 0.5
  play 60
  sleep 0.5
end
<template>
  <div>
    <!-- 切換語系 UI -->
    <label
      v-for="(item, index) in optionsLang"
      v-bind:key="index"
    >
      <input type="radio" v-model="$store.state.lang" :value="item.value" v-on:change="setLang(item.value)"> {{ item.text }}
    </label>

    <!-- 使用 $t(key) 即可依所選用的語系顯示對應的語言 -->
    <h1>{{ $t('title')}}</h1>
    <h2>{{ $t('description')}}</h2>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      optionsLang: [
        { text: '中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ]
    }
  },
  methods: {
    // 儲存切換的語系
    setLang (value) {
      this.$store.commit('setLang', value);
      this.$i18n.locale = value;
      localStorage.setItem('footmark-lang', value);
    }
  }
}
</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>Document</title>
  </head>
  <body style="background-color: black">
    <img
      src="https://ih1.redbubble.net/image.857644011.4371/flat,750x,075,f-pad,750x1000,f8f8f8.u2.jpg"
      alt="Alice in wonderland"
    />
  </body>
</html>
<!--Page One-->

<!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>Home Page</title>
  </head>
  <body style="background-color: rgb(82, 0, 82)">
    <h1>Home Page</h1>
    <a href="page2.html">Page Two</a>
  </body>
</html>


<!--Page Two-->

<!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>Page Two</title>
  </head>
  <body style="background-color: black">
    <h1 style="color: red">This is Page Two</h1>
    <hr />
    <a href="page1.html">Home</a>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.google.com" target="_blank">Google's Homepage</a>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.google.com">Google's Homepage</a>
  </body>
</html>
<!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>Different Tags</title>
  </head>
  <body>
    <header>
      <nav></nav>
    </header>
    <main>
      <article>
        <section>
          <h1></h1>
          <section></section>
          <h2></h2>
        </section>
        <section>
          <aside></aside>
        </section>
      </article>
    </main>
    <footer></footer>
  </body>
</html>
<!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</title>
  </head>
  <body style="background-color: rgb(87, 15, 81)">
    <h1>Welcome</h1>
    <p style="color: blue">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat
      voluptatibus assumenda dolore eum accusamus minima, dignissimos enim
      explicabo non tempore.
    </p>
    <br />
    <h2>Change background color</h2>
    <p style="color: red; background-color: black">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo alias
      delectus quae sapiente ex, laudantium vitae perspiciatis cum qui placeat
      saepe velit nobis, id quo impedit asperiores quibusdam temporibus illum!
      Nostrum placeat ipsa, qui dignissimos quasi, autem fuga facere ad veniam
      aut aliquam porro. Aspernatur, velit. Enim voluptatum sapiente animi rem
      ipsum, fuga praesentium reiciendis consequuntur sit saepe, impedit nulla
      hic iste mollitia cumque commodi ut deserunt minus, inventore omnis eius
      placeat beatae. Iste provident fugit mollitia iure aliquam molestias velit
      nulla deserunt ut! Quos commodi, quisquam voluptatum impedit dignissimos
      tempore error eaque? Similique asperiores amet dignissimos at quidem
      nesciunt.
    </p>
  </body>
</html>
<!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>HTML</title>
    <!--Title of Website-->
  </head>
  <body>
    <h1>HTML Tags</h1>
    <hr />
    <!--Horisontal line Tag-->
    <!--Heading 1-->
    <p>
      <!--Paragraph 1-->
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis nisi
      ipsa consectetur reiciendis, molestias explicabo adipisci ipsam eius
      veritatis temporibus consequatur a. Tempora voluptates dolores doloribus
      possimus corrupti accusamus. Cupiditate.
    </p>
    <p>
      <b
        ><i><big>This is </big>Paragraph Two</i></b
      >
      <!--Paragraph 2-->
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam neque dolor
      dolorem quisquam mollitia. Repudiandae earum accusamus dolores et non
      voluptatum enim provident harum error eaque. Laboriosam a quia iure.
    </p>
    <br />
    <!--Break Tag-->

    <h2>Rubrik Two</h2>
    <!--Heading 2-->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dolore
      neque illo est ea aspernatur labore, esse non fugiat ut nesciunt impedit
      rem vel doloribus possimus tempore. Culpa, dolorem consequuntur.
      Laudantium placeat modi sed harum nemo commodi rerum odio temporibus,
      numquam itaque consequatur eius provident ad incidunt, laborum laboriosam
      quibusdam vitae! Explicabo impedit accusamus debitis, optio consectetur
      nostrum atque reprehenderit?
    </p>

    <p>H<sub>2</sub>0</p>
    <p>10<sup>5</sup></p>
  </body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>
<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>
<style>
      img {
        width: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
      }

      .username {                                 # .username
        font-weight: bold;                        # Text style
      }
    </style>
  </head>
  <body>
    <img src="images/html css code.jpg" alt="" />
    <p class="username">@MarryJaay</p>            # Creating a class
    <p>Summit of Web Development</p>
  </body>
</html>
<style>
    # Code for CSS
         img {
           width: 100px; # For width
           border-radius: 50px; # Making image round
           float: left; # Chaning "float" text displayed on left side
           margin-right: 10px; # Moving "loat" 10px right
         }
</style>
<!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>Learn Web Development</title>
  </head>
  <body>
    <img src="images/html css code.jpg" alt="" />
    <p>@myname</p>
    <p>Summit of Web Development</p>
  </body>
</html>
  
<template>
    <div class="slds-m-top_xx-small slds-p-bottom_small">
        <lightning-input type="text" placeholder={searchPlaceholder} onchange={filterRows}></lightning-input>
    </div>
    <div style={tableStyle} class={cssClass}>
        <template if:false={isGettingIcons}>
            <lightning-datatable key-field={keyField} data={dataForTable} columns={columns} onrowselection={onRowSelection}
                column-widths-mode={columnWidthsMode} default-sort-direction={defaultSortDirection}
                draft-values={draftValues} enable-infinite-loading={enableInfiniteLoading} errors={errors}
                hide-checkbox-column={hideCheckboxColumn} hide-table-header={hideTable} is-loading={isLoading}
                load-more-offset={loadMoreOffset} max-column-width={maxColumnWidth} max-row-selection={maxRowSelection}
                min-column-width={minColumnWidth} resize-column-disabled={resizeColumnDisabled} resize-step={resizeStep}
                row-number-offset={rowNumberOffset} selected-rows={selectedRows}
                show-row-number-column={showRowNumberColumn} sorted-by={sortedBy} sorted-direction={sortedDirection}
                suppress-bottom-bar={suppressBottomBar} wrap-text-max-lines={wrapTextMaxLines}>
            </lightning-datatable>
        </template>
        <template if:true={isGettingIcons}>
            <lightning-spinner alternative-text="Loading Icons"></lightning-spinner>
        </template>
    </div>
</template>
const exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));
/*  Big O  */

  let performance = performance.now();
  //This can be used to measure the Performance of the code.
  // Use this before the code and after code, It will show the 'performace'


Rules:
 1 : Worst cast
 2 : Remove Constants
 


/* XXXXXXXX--XXXXXX */

/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
<iframe src="https://online.namnguyen68.repl.co?&layout=Preview&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="2500px" width="100%"></iframe>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<table width="400" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td>Contact Form </td>
</tr>
</table>

<table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td><form name="form1" method="post" action="send_contact.php">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="16%">Subject</td>
<td width="2%">:</td>
<td width="82%"><input name="subject" type="text" id="subject" size="50"></td>
</tr>
<tr>
<td>Detail</td>
<td>:</td>
<td><textarea name="detail" cols="50" rows="4" id="detail"></textarea></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input name="name" type="text" id="name" size="50"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="customer_mail" type="text" id="customer_mail" size="50"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Submit"> <input type="reset" name="Submit2" value="Reset"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="sr-only">This text is hidden.</div> 
    <div class="app">
        <div id="bound-one" class="scroll-bound">
            <video id='myVideo' width="600" muted preload>
               <source src="https://res.cloudinary.com/tvibhu12/video/upload/v1594987784/mambo_drfrs1.mp4" type="video/webm">
               
     </video>
          
        </div>

        <div class="content">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
            
          </div>
        
      
        
    </div>
/* Lesson 01 : HTML-CSS */

  //Blockquotes
  <blockquote cite="mention Source Link Here">
  <p>Ruh-roh--RAGGY!!!</p>
  <footer>—Scooby Doo, <cite>Mystery Incorporated</cite>         </footer>
  </blockquote>

  //List: Description  ( lists with name/value pairs )
  <dl>
    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
   </dl>
  
                  /*   CSS   */

   //Selecting using attributes
    [attr] { }
    [attr=val] { }
    tag[attr] { }
    tag[attr='val'] { }
    [attr~=val] { }


    -----------------XX------------------------
    
                /*  Javascript  */
    
//Spread Operator.
let nums = [4,5,45,235,523,54,314]
console.log(...nums); //It will only show the numbers, It won't show an array.

//Rest Operator.
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);


 // DOM */

// .innerText: 
It will set/get the  inner text inside the element, But the format will be as shown on the element ( line breaks, spaces will identical to html file.) . It will take CSS into consideration and will return the text that is visibily rendered on the Page. 

//.textContent:
It will set/Get the whole text inside the selected element and it will won't include the line breaks or spaces. 


//Create | Add Text | Append.
let newElem = document.createElement('p');
let data = document.createTextNode("Some Infor..");

newElem.appendChild(data); //Data added to new element.
$("body").appendChild(newElem); // New element added to 'body'

newElem.textContent = 'We can also add text like this...';
----------------------

//insertAdjacentHTML()
: "appendChild()" will always add the data at the end of the element, To resolve this we use 'insertAdjacentHTML()'. It will take 2 arguments. First is the location( one of the 4 method ) and 2nd is the HTML content(text).

Methods:
beforebegin | afterbegin | beforeneed | afterend.

<!--- beforebegin  ---->
  <p>
    <!---  afterbegin ---->
        Existing Text/html content
    <!--- beforeneed  ---->
 </p>
<!---afterend   ---->

**
selectedElem.insertAdjacentElement(methodHere, newElementToAdd);          
          
------------------------

Eg: 
const mainHeading = document.querySelector('#main-heading');
const htmlTextToAdd = '<h2>Skydiving is fun!</h2>';
mainHeading.insertAdjacentHTML('afterend', htmlTextToAdd)

- parentElem.removeChild(childElement); //Pass the element to be deleted in the agument . We can pass the parent element in argument to remove the Parent elem.
- Elem.remove()  //We don't have to mention any arguments.

- Elem.firstElementChild();
- Elem.parentChild();

 // Styling in Javascript */
First Way: 
element.style.property1 = "css stuff";
element.style.property2 = "css stuff";
** Ex:
element.style.width = "50%";
element.style.height = "400px";
**
  
Second Way: ( Better )
element.style.cssText = "width: 50%;padding: 10px 50px;";
Note: "cssText" will overwrite anything that's already in the style attribute  
  
  
 //    Attributes    

element.setAttribute('attribute', attributeValue);

**
aTag.setAttribute('target','_blank');


 //   Classes
Properties:
add() | remove() | toggle() | contains();


elem.className; //It will list all the classes an Combined String.(old way)
or
elem.classList; //It will list all the classes in an ( DOMTokenList ) object.(new way)

elem.classList.add('class-1','class-2',....);//We can assign  single/Multiple classes to the element.

elem.classList.remove('class-1','class-2'); //We can unassign single/multiple classes from the element. 

elemem.classList = 'class-1'; //This will replace all the existing classes assigned to the Element. 

elem.classList.toggle('class1');//to add the class if it doesn't exists or remove it from the list if it does already exist ( other classes are not affected. )

elem.contains('class1'); //returns a boolean based on if the class exists in the list or not


// Events

mouseEvents(document); //It will monitor all the events on docuemnt ( Just for test/practise/fun )

Methods:
addEventListener() | removeEventListener() | dispatchEvent()

addEventListener() and removeEventListener() // Works similarly. ( similar syntax )

//Phases of an Event.
  : Some times events are there on parent and there children. So using Phase events we can change the order ( To fire parent first or the child )

1. Capturing Phase ( parent to child )
  //:It the first phase, Moving from Parent(top) to the selected elem.
 2. At Target Phase  
  // It's the the selected element on which event is attached.
3. Bubbling Phase ( child to parent )
 // It's opposite of capturing, Once the handler is run, It will go back from selected element to the parent element

**
elem.addEventListener('click',()=>{},true)

- By default, It will run in Bubble phase(child first and then parent) .If we pass 3rd argument to 'true' in parentElem.addEventListener()? Then It will run the event in Capturing Phase( Parent will be working first ).


//Node-Name
  //How to know the target element.
if(event.target.nodeName == 'SPAN'){
   //The node name will be always in uppercase.
  takeAction();
}

//To load the HTML content before using the DOM.
document.addEventListener('DOMContentLoaded', function () {
    console.log('the DOM is ready to be interacted with!');
});



**
   {  scrollTo(x, y); }
**  

 /* 
 Lesson 2: Node and Express Environment
 */
  
  > npm list express
  // Return the list of express 'version'. or just check the 'package.json'
  
  
  //Installing packages
  > npm install express
  
  // Express to run server and routes
const express = require('express');

// Start up an instance of app
const app = express();
  

// method '.listen'
const port = 8080;
const server = app.listen(port, listening); //Listening is callback function. 
function listening(){
  console.log("Server runing on Port",port)
}



Methods:
get | post | put | delete

**
  const express = require('express');
  const app = express(); //Creating Instance

  app.get('/', function(req, res ){
    // '/' is the URL Path on the browser. '/' is the           home/root folder on the project.
    // 'request'( Client to server)
    // 'response' ( Server to client )
    res.send("<h1>Jaskaran Singh</h1>");
   })

  app.get('/karan', function(req, res ){
      res.send("<h1>Hi Karan Singh</h1>");
  })
   //It will work for url 'http://localhost:8080/karan'
  
// POST method route
app.post('/', function (req, res) {
  res.send('POST received')
})  

app.listen(8080, ()=>{
    console.log("Runnung....")
   });
**
  // TODO-ROUTES!
app.post('/add', callBack1 )

function callBack1(req, res){
    res.send('Post Received')
  //create a POST route that uses the url /add and sends the response POST received when used to make a request.
}
**
  const data = [];
  app.post('/flavor', addFlavor);

 function addFlavor (req, res) {
  data.push(req.body);
   // A way to store the data
};
**
  let data = []
 app.post('/animal', callBack2 );
 function callBack2(req, res){
  data.push( req.body )   
   //Add a POST route for adding a favorite animal via the path ’/animal’ to an array named data. You will need to create the array as well.
}
**
   /* ------------------------ ------------------*/ 
  
                    /* Async Js */
 : The keyword async before a function makes the function return a promise
  
**
 aync function test(){
   return "Some results...";
   // Since we are using 'aync', test() will be a            asynchrounous function.
 }   
> test(); //It will return a 'pending' Promise
> test().then((res)=>{},(rej)=>{})
**   
**
  const retrieveData = async (url='') =>{ 
  const request = await fetch(url);
  try {
  // Transform into JSON
  const allData = await request.json()
  }
  catch(error) {
    console.log("error", error);
    // appropriately handle the error
  }
}
**
  
//Server and Client side.
//Async Js.

**
const express = require('express');
const app = express();

//Movie Empty List.
let fakeData = {
    animal : 'lion', fact : 'lions are fun'
};
app.get('/fakeAnimalData', getFakeData );
function getFakeData(req, res){
 res.send(fakeData)
}
app.listen(8080, ()=>{
    console.log("Runnung....")
});
// 'localhost:8080/fakeAnimalData'  will return 'fakeData' Object

**
  /*    Chaining Promises    */
  
  
  
 
   /* ------------------------ ------------------*/ 
   /* ------------------------ ------------------*/ 
 
<form action="upload.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>
<img src="https://i.imgur.com/RXFkh7v.png" />
1. https://www.udemy.com/course/mernstack-nextjs-withsocketio/
2. https://www.udemy.com/course/nextjs-react-node-aws-mern-lms-elearning-udemy-clone/
3. https://www.udemy.com/course/mern-stack-front-to-back/
4. https://www.udemy.com/course/nextjs-react-the-complete-guide/
5. https://www.udemy.com/course/implement-high-fidelity-designs-with-material-ui-and-reactjs/

6. https://www.udemy.com/course/secure-your-reactjs-applications-with-auth0/
7. https://www.udemy.com/course/modern-react/
8. https://www.udemy.com/course/build-secure-apis-with-auth0-and-postman/
9. https://www.udemy.com/course/awesome-nextjs-with-react-and-node-amazing-portfolio-app/
10. https://www.udemy.com/course/serverless-framework/


HTML stands for Hyper Text Markup Language

Used to present content in a structured and logical way

HTML Tage 

<p> Paragraph text </p>
  
Atributes tell more information about a tag

<h1 class="myclass" style="color:red;"> Test Paragraph </p>

Tags can be nested in other tags

Tags are normally indented when nested for readability

Heading tags range from h1 to h6


  <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2578_RC01/embed_loader.js"></script>
  <script type="text/javascript">
    trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"Penticton","geo":"CA","time":"today 12-m"},{"keyword":"Kelowna","geo":"CA","time":"today 12-m"},{"keyword":"Osoyoos","geo":"CA","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"geo=CA&q=Penticton,Kelowna,Osoyoos&date=today 12-m,today 12-m,today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
  </script>
idを付けたelementが出てくる前に、<script src="app.js"></script>が先に来ているから。

<div id="test"></div>
のあとに
<script src="app.js"></script>
を持ってこないとJavaScriptは何を言わているか分からない。
一番良いのは</body>の直前。
<b><u>SOME TEXT IN DIFFERENT LANGUAGE </u></b>
<br>

Políticas de Privacidade
Usaremos seus dados pessoais para resolver disputas, solucionar problemas e aplicar nossos Termos e Condições de Uso.

<br>

Para prevenir abusos no app/site, o Badoo usa decisões automáticas e moderadores para bloquear contas, como parte de seu procedimento de moderação. Para isso, nós conferimos contas e mensagens para encontrar conteúdo que indicam quebra dos nossos Termos e Condições de Uso. Isso é feito através de uma




<b><u>OUR PAYLOAD IN TEXT FORM </u></b>
<br>
<br>



"&#62;&#60;img src=x onerror=alert(1)&#62;





<br>
<br>
<br>
Políticas de Privacidade
Usaremos seus dados pessoais para resolver disputas, solucionar problemas e aplicar nossos Termos e Condições de Uso.
const visibleCheckboxes = document.querySelectorAll('.checky')

visibleCheckboxes.forEach(checkbox => checkbox.addEventListener('change', () => {
let hiddenCheckbox = checkbox.nextElementSibling;
checkbox.checked ? hiddenCheckbox.value = 'Yes' : hiddenCheckbox.value = 'No';
}))

//html
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Cats
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Dogs
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Fish
</label>
$('#div').scrollTop(0);
setTimeout(function(){ 
  
}, 1000);
    <input class="copy" type="text" value="copy this text">
    <button class="copy">copy</button>
    <input class="paste" type="text" value="paste here">
    <button class="paste">paste</button>

const inputCopy = document.querySelector('input.copy')
const btnCopy = document.querySelector('button.copy')
const inputPaste = document.querySelector('input.paste')
const btnPaste = document.querySelector('button.paste')

btnCopy.onclick = async () => {
    await navigator.clipboard.writeText(inputCopy.value)
    console.log('copied!');
}
btnPaste.onclick = async () => {
    const clipText = await navigator.clipboard.readText()
    inputPaste.value = clipText
    console.log('pasted!');
}

<textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
platforms\android\cordova\lib    check_reqs.js
// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link
<video autoplay muted playsinline loop>
    <source src="path-to-AV1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    <source src="path-to-VP9.webm" type="video/webm; codecs=vp9">
    <source src="path-to-H264.mp4" type="video/mp4">
    This message is displayed when none are supported
</video>
<!Doctype html>

<head>
    <title>Learn Firebase Storage Quickly</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" />
</head>

<body>
    <section class="ui two column center aligned grid" id="signup-view">
        <div class="column ui secondary segment">
            <form class="ui form">
                <div class="field">
                    <input type="text" placeholder="E-mail address" id="email" />
                </div>
                <div class="field">
                    <input type="password" placeholder="Password" id="pword" />
                </div>
                <div class="field">
                    <input type="file" onchange="chooseFile(event)" />
                </div>
                <div class=" ui fluid teal submit button" onclick="signUpButtonPressed()">Sign Up</div>
            </form>
        </div>
    </section>

    <section class="ui two column center aligned grid" id="profile-view">
        <div class="column ui segment">
            <img src="https://lehrmannlondon.com/wp-content/uploads/2017/03/jk-placeholder-image.jpg" style="width: 200px" class="ui img centered" id="img">
            <button class="ui button red" onclick="signOutButtonPressed()">Sign out</button>
        </div>
    </section>

    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-storage.js"></script>
    <script src="app.js"></script>
</body>

</html>
app.get('/downloadFile', function (req, res) {
  var file = path.join(__dirname, '/pdfs/');
  res.download(file, function (err) {
    if (err) {
      console.log('Error');
      console.log(err);
    } else {
      console.log('Success');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

$(function() {
	$('ul li').matchHeight();
});



    // @AuraEnabled(cacheable=true)
    // public static String getAuthHelpText() {
    //     return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    // }

    // @AuraEnabled(cacheable=true)
    // public static String getCustomFieldsHelpText() {
    //     String helpText1 = Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    //     String helpText2 = Signicat_Auth_Provider__mdt.Authorize_Endpoint_URL__c.getDescribe().getInlineHelpText();
    //     return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    // }

    @AuraEnabled(cacheable=true)
    public static List<string> getListHelpText() {
        String helpText1 = Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
        String helpText2 = Signicat_Auth_Provider__mdt.Authorize_Endpoint_URL__c.getDescribe().getInlineHelpText();
        return new List<String> {'Auth_Provider_Name__c:' + helpText1,'Auth_Provider_Name__c =>' +helpText2};
    }
       
    // @AuraEnabled(cacheable=true)
    // public static Map<string,string> getHelpText(string objectName,string FieldName) {
    //     Map<string,string> fieldsMap = new Map<string,string>();
    //     if(objectName === ''){
    //         if(fieldName == ''){
    //             return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    //         }
    //         if(fieldName == ''){
    //             return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    //         }
    //     }
    //     return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    // }
@AuraEnabled
public static Map<String, String> getHelpText() {
    String helpText1 = Test_Object__c.Test_Field1__c.getDescribe().getInlineHelpText();
    String helpText2 = Test_Object__c.Test_Field2__c.getDescribe().getInlineHelpText();
    return Map<String, String> { 'Test_Field1__c'=>helpText1, 'Test_Field2__c'=>helpText2 };
}
@import url(https://bueno-ui.netlify.app/components.css)
<h3>Inputs with Validation</h3>
<div>
    <label class="label" for="email">Email: </label>
    <input class="input-email" type="email" name="email" id="email" />
</div>
<div>
    <label class="label" for="url">Website: </label>
    <input class="input-website" type="url" name="url" id="url" />
</div>
public class Main {
  int x = 5;

  public static void main(String[] args) {
    Main myObj = new Main();
    System.out.println(myObj.x);
  }
}
class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age

p1 = Person("John", 36)

print(p1.name)
print(p1.age)
  <h3>Footer</h3>
          <footer class="footer">
            <div class="footer-links">
              <a class="footer-link" href="#">Twitter</a>
              <a class="footer-link" href="#"> GitHub</a>
              <a class="footer-link" href="#"> Linkedin</a>
            </div>
            <p>Created in India by Anurag</p>
          </footer>
<nav class="navbar">
    <img class="nav-img" src="https://us.maxgaming.com/themes/maxgaming/design/bilder/maxgaming.png" />
    <input type="text" aria-label="Search" name="term" id="term" class="search" placeholder="Search product, category or brand" />
    <ul class="nav-links">
        <li class="nav-list-icon"><i class="far fa-heart"></i></li>
        <li class="nav-list-icon"><i class="fas fa-user"></i></li>
        <li class="nav-list-icon">
            <i class="fas fa-shopping-cart"></i>
        </li>
    </ul>
</nav>
<div class="horizontal-card">
    <img class="horizontal-card-image" src="https://images.pexels.com/photos/4790590/pexels-photo-4790590.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="horizontal card image" />
    <p class="horizontal-card-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi,
        illum!
    </p>
    <p class="horizontal-card-price"><strong>£20.00</strong></p>
<!-- add the whole card and  -->
          <span class="card-banner">NEW</span>
 <article class="cards">
     <h3>Long cards</h3>
     <div class="card-container">
         <div class="long-cards">
             <img src="https://images.pexels.com/photos/4790590/pexels-photo-4790590.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
             <p class="card-text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                 laudantium quasi atque maiores rerum qui nam nisi ullam
                 blanditiis ut.
             </p>
             <div class="card-btn-container">
                 <button class="primary-button card-button">
                     <i class="fas fa-shopping-cart"></i>
                 </button>
                 <button class="primary-button card-button">
                     <i class="far fa-heart"></i>
                 </button>
             </div>
         </div>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Visibility Toggle</title>
    <script
      src="https://kit.fontawesome.com/1935d064dd.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="row box">
        <div class="col-md-4">
          <form action="">
            <div class="form-item">
              <input
                type="text"
                class="form-control form-control-lg"
                placeholder="Username"
              />
            </div>
            <div class="form-item">
              <input
                type="password"
                class="form-control form-control-lg"
                id="password"
                placeholder="password"
              />
              <i class="fas fa-eye" id="eye"></i>
            </div>
            <div class="d-grid">
              <button class="btn btn-primary btn-lg">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
{% schema %}
{% endschema %}

{% style  %}
@media all and (max-width: 896px) {
  #main .main__Block .bg__Box {
    margin-bottom: -108px;
    padding: 30px 0;
    min-height: 375px;
    background-image: url({{ section.settings.mobile_image | img_url: 'master' }});
  }
}
{% endstyle %}

{% javascript %}
{% endjavascript %}
<button class="secondary-button">Cancel</button>
<div class="container-badge-on-img">
    <img class="img-badge-on-img" src="./images/email (1).png" alt="email photo example" />
    <span class="badge-on-img">221</span>
</div>
<p>Primary button</p>
<button class="primary-button">Add to Cart</button>
<div class="alert alert-red"> <!-- you can use yellow or green aswell -->
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    This is an alert box.
</div>
<span class="fa-layers fa-fw fa-3x">
    <i class="fas fa-user"></i>
    <span class="fa-layers-counter user-badge"></span>
<i class="fas fa-user user-smallest"></i>
<i class="fas fa-user user-medium"></i>
<i class="fas fa-user user-large"></i>
<i class="fas fa-user user-xlarge"></i>

////////////////////////
var mediaQuery = matchMedia('(max-width: 768px)');

// ページが読み込まれた時に実行
handle(mediaQuery);

// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);

function handle(mq) {
	if (mq.matches) {
		// ウィンドウサイズが768px以下のとき
	} else {
		// それ以外
	}
}
background-image:url(images/story/Our_Story_Desktop.jpg?$staticlink$);
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<input list="cars" name="car" id="car">
<datalist id="cars">
    <option value="BMW">
    <option value="Mustang">
    <option value="Sienna">
    <option value="Avalon">
    <option value="Fortuner">
</datalist>
<iframe src="https://player.vimeo.com/video/527232459?autopause=0&byline=0&controls=0&fun=0&portrait=0&title=0&share=0&color=afc3ab" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" scrolling="auto"  style width="1422.22" height="800"></iframe>
//Background overlay on the main video section
[data-section-id="6080dec30539ac45c06a07fa"]
.section-background:after{
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: .5;
  background-image: linear-gradient(29deg, rgba(126,37,35,1) 0%, rgba(84,152,112,1) 53%);
}
promo-tile-slot-01 - BLUELIGHT
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-BlueLight')$
</li>


promo-tile-slot-02 - SAVE TO 220
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Vision-Benefits-B')$
</li>


promo-tile-slot-03 - PRESCRIPTION LENSES INLCUDED 
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Lens_Included')$
</li>


promo-tile-slot-04 - VIRTUAL TRY ON
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-VTO')$
</li>


promo-tile-slot-05 - MEET YOUR MATCH
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Find-DR-Get_Adjustment')$
</li>

promo-tile-slot-03 - FREE SHIPPING AND RETURNS

<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Eyewear-Live-01')$
</li>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://kadenbrockman.github.io/font/stylesheet.css">
    </head>
    <body>
       <h1><i class="icon-verified"></i></h1>
       
       <style>
           .icon-verified {
               color: rgb(87, 198, 241);
               font-size: 18px; }
       </style>
    </body>
</html>
	body {
		margin:0;
		padding:0;
		font:14px / 1.5 寰蒋闆呴粦,瀹嬩綋,"Times New Roman";
		background-color:#dde6e7;
		color:#000
	}
	ul,
	ol,
	li,
	dl,
	dd,
	dt,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	form,
	input,
	button,
	select {
		margin:0;
		padding:0
	}
	li {
		list-style-type:none;
	}
	div {
		margin:0;
		padding:0;
	}
	img {
		border-width:0;
		vertical-align:top;
	}
	a:link,
	a:visited {
		color:#036;
		text-decoration:none
	}
	a:hover,
	a:active {
		color:#c33;
		text-decoration:underline;
	}
	.siteblock {
		width:960px;
		padding:0 10px;
		margin:0 auto;
		background-color:#f0f0f0;
		height:100%;
		overflow:hidden;
	}
	.top {
		background-color:#ccc;
		color:#000;
		height:25px;
		line-height:25px;
		margin:0 -10px;
		padding:0 10px;
	}
	.top span {
		display:block;
		float:left;
		width:auto;
	}
	.top span.r {
		float:right;
	}
	.top span.r a {
		display:inline-block;
		margin-left:12px;
	}
	.logo {
		height:60px;
		margin:5px 0;
	}
	.logo h5 {
		float:left;
		width:260px;
		background:url("logo.png") left center no-repeat;
		height:60px;
	}
	.logo h5 a {
		display:block;
		text-indent:-999px;
		overflow:hidden;
		width:260px;
		height:60px;
	}
	.logo.banner {
		float:right;
		width:670px;
		height:60px;
		overflow:hidden;
	}
	.menu {
		height:35px;
		line-height:35px;
		background-color:#036;
		padding:5px;
		margin-bottom:0;
		font-weight:bold;
	}
	.menu a:link {
		color:#ccc;
	}
	.menu a:visited {
		color:#ccc;
	}
	.menu a:hover {
		color:#e2eff9;
		text-decoration:underline;
	}
	.menu a:active {
		color:#e2eff9;
		text-decoration:underline;
	}
	.menu li {
		float:left;
		border-left:1px solid #ccc;
		padding:0 9px 0 10px;
		font-weight:normal;
	}
	.menu li.sy {
		border-left-width:0;
	}
	.menu li.pingshu,
	.menu li.pingshu a {
		background-color:#fff;
		color:#c33;
		font-weight:bold;
	}
	.search {
		padding:5px;
		background-color:#ccc;
		height:25px;
		width:950px;
		overflow:hidden;
		margin-bottom:5px;
		color:#5d4905;
	}
	.search p {
		float:left;
		width:auto;
	}
	.search p.text {
		border:1px solid #3f3f3f;
		height:18px;
		line-height:18px;
		margin-right:5px;
	}
	.search p.text input {
		border:0;
		background-color:#fff;
		height:16px;
		line-height:16px;
		padding:0 3px;
		width:130px;
	}
	.search p.button input {
		background:url("search.gif") left top no-repeat;
		width:64px;
		height:20px;
		border:0;
	}
	.hot {
		float:right;
		margin:0 15px 0 0;
		padding:0 0 5px;
		width:520px;
		line-height:20px;
	}
	.hot li {
		padding:0 5px;
		margin:0;
		float:left;
		border-left:1px solid #c5c3c3;
	}
	.hot li a {
		color:#036;
		font-size:13px;
		font-weight:bold;
	}
	.hot li a.jiemu {
		color:#036;
	}
	.hot li a:visited {
		color:#036;
	}
	.hot li a:hover {
		color:#c33;
		text-decoration:underline;
	}
	.hot li a:active {
		color:#c33;
		text-decoration:underline;
	}
	.ggall {
		margin-bottom:5px;
	}
	.ad505 {
		margin-bottom:5px;
		background-color:#fff;
	}
	.ad250 {
		width:248px;
		float:right;
	}
	.block {
		height:100%;
		overflow:hidden;
	}
	.block .blockleft {
		float:left;
		width:250px;
	}
	.block .blockright {
		float:right;
		width:700px;
	}
	.box {
		background-color:#fff;
		padding:1px;
		width:100%;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.box .tit1 {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		overflow:hidden;
		color:#ccc;
	}
	.box .tit2 {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		overflow:hidden;
		color:#ccc;
	}
	.box .tit2 a {
		color:#ccc;
	}
	.box .titall {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		color:#ccc;
	}
	.box .titall a {
		color:#ccc;
		text-decoration:underline;
	}
	.box .titall a:hover {
		color:#dcecf6;
		text-decoration:underline;
	}
	.box .tit2 span {
		float:right;
		width:auto;
	}
	.box .tit2 span.more {
		width:33px;
		height:11px;
		background:url("more.gif") left top no-repeat;
		margin-top:8px;
	}
	.box .tit2 span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.box b.new {
		display:inline-block;
		width:160px;
		float:left;
		line-height:35px;
		background:url("new.gif") right center no-repeat;p
		adding-left:1px;
		color:#ccc;
	}
	.box b.hot {
		display:inline-block;
		width:160px;
		float:left;
		line-height:35px;
		background:url("hot.gif") right center no-repeat;
		padding-left:1px;
		color:#ccc;
	}
	.box .lists {
		padding:5px;
	}
	.box .lists li {
		background:url("li_dot.gif") left center no-repeat;
		padding:0 5px 0 24px;
		height:25px;
		line-height:25px;
		overflow:hidden;
	}
	.box .lists li span {
		float:right;
		width:auto;
	}
	.box .hotlist {
		padding:5px;
	}
	.box .hotlist li {
		line-height:20px;
		height:20px;
		padding:4px 5px 4px 0;
	}
	.box .hotlist li span {
		display:inline-block;
		width:19px;
		height:12px;
		line-height:12px;
		background-color:#c33;
		font-size:10px;
		text-align:center;
		font-weight:bold;
		color:#fff;
		margin-right:5px;
	}
	.box .hotlist li.no1 span,
	.box .hotlist li.no2 span,
	.box .hotlist li.no3 span {
		color:#036;
	}
	.box .hotlist li i {
		float:right;
		width:auto;
		font-style:normal;
		font-weight:bold;
		font-size:10px;
		color:#ccc;
	}
	.box .piclist {
		padding:10px 0 0 5px;
	}
	.box .piclist li {
		float:left;
		width:137px;
		text-align:center;
		margin-bottom:1px;
	}
	.box .piclist li img {
		width:120px;
		height:160px;
		margin:0 auto;
		padding:1px;
		border:2px solid #666;
		display:block;
	}
	.box .piclist li p {
		height:24px;
		line-height:25px;
	}
	.box .clist {
		height:100%;
		overflow:hidden;
		padding:5px 4px;
	}
	.box .clist li {
		background:url("line.gif") left bottom repeat-x;
		line-height:30px;
		width:340px;
		float:left;
		margin-right:1px;
	}
	.box .clist li a {
		background:url("d.gif") left center no-repeat;
		padding:0;
		text-decoration:underline;
	}
	.box .xzlist {
		overflow:hidden;
		margin:0 5px;
		height:auto;
		padding:0;
	}
	.box .xzlist li {
		float:left;
		width:685px;
		padding:5px 0;
		border-bottom:1px dashed #444;
		line-height:20px;
	}
	.box .xzlist li em {
		float:right;
		width:100px;
		color:#666;
		font-size:13px;
		text-align:right;
		font-style:normal;
	}
	.box .vlist {
		height:100%;
		overflow:hidden;
		padding:0 4px;
	}
	.box .vlist li {
		float:left;
		width:330px;
		padding:10px 5px;
		border-bottom:1px solid #ccc;
	}
	.box .vlist li a.pic img {
		display:block;
		float:left;
		width:150px;
		height:180px;
		border:1px solid #ccc;
		padding:1px;
		margin-right:6px;
	}
	.box .vlist li dl {
		line-height:25px;
		float:right;
		width:165px;
	}
	.box .vlist li dt {
		font-weight:bold;
		height:50px;
		width:165px;
		overflow:hidden;
	}
	.box .vlist li dt a:link,
	.box .vlist li dt a:visited {
		color:#036;
		font-size:13px;
	}
	.box .vlist li dt a:hover,
	.box .vlist li dt a:active {
		color:#c33;
	}
	.box .vlist li dd {
		width:163px;
		white-space:nowrap;
		overflow:hidden;
		color:#000;
		height:22px;
	}
	.box .vlist li dd a {
		display:inline-block;
		margin-right:5px;
	}
	.box .vshow {
		padding:9px;
		height:260px;
		overflow:hidden;
	}
	.box .vshow a.pic img {
		display:block;
		float:left;
		width:200px;
		height:260px;
		border:1px solid #333;
		padding:1px;
		margin-right:10px;
	}
	.box .vshow dl h1 {
		font-size:14px;
		color:#c33;
	}
	.box .vshow dl h1 a {
		font-size:14px;
		color:#c33;
	}
	.box .vshow dd {
		line-height:30px;
		color:#000;
	}
	.box .vshow dd a {
		display:inline-block;
		margin-right:5px;
	}
	.box .playlist {
		height:auto;
		overflow:hidden auto;
		line-height:150%;
	}
	.box .playlist li {
		float:left;
		width:121px;
		margin:3px 5px;
		display:inline;
		text-align:center;
		height:28px;
		overflow:hidden;
	}
	.box .playlist li a {
		display:block;
		width:117px;
		height:24px;
		border:1px solid;
		padding:1px;
		line-height:22px;
	}
	.box .playlist li a:link {
		color:#ccc;
		border-color:#ccc;
		background-color:#036;
	}
	.box .playlist li a:hover,
	.box .playlist li a:active {
		color:#ccc;
		border-color:#ccc;
		background-color:#c33;
	}
	.box .playlist li a:visited {
		color:#036;
		border-color:#ccc;
		background-color:#ccc;
	}
	.box .playlist span {
		float:right;
		width:auto;
	}
	.box .xllist {
		height:auto;
		overflow:hidden auto;
		line-height:150%;
	}
	ul.downurl li {
		line-height:44px;
		overflow:hidden;
		padding:0 10px;
		border-bottom:1px solid #eaeaea;
		width:670px;
		margin:3px auto;
	}
	ul.downurl li a {
		font-size:13px;
	}
	ul.downurl li div {
		float:left;
	}
	ul.downurl li .adds {
		line-height:18px;
		width:474px;
		overflow:hidden;
		padding-top:16px;
		color:#738d9e;
	}
	ul.downurl li .dwon_tx {
		width:70px;
		height:26px;
		padding-top:11px;
	}
	ul.downurl li .dwon_tx a {
		display:block;
		background:#ff6c00;
		width:70px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .dwon_x {
		width:40px;
		height:26px;
		padding-top:11px;
	}
	ul.downurl li .dwon_x  {
		display:block;
		background:#ff6c00;
		width:40px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .dwon_y {
		width:40px;
		height:26px;
		padding-top:11px;
		padding-left:8px;
	}
	ul.downurl li .dwon_y a {
		display:block;
		background:#309dcf;
		width:40px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .down_z {
		width:60px;
		height:26px;
		padding-top:11px;
		padding-left:8px;
	}
	ul.downurl li .down_z a {
		display:block;
		background:#066;
		width:60px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	.ckall {
		height:26px;
		padding:16px 10px 10px;
		width:676px;
	}
	.ckall p,
	.ckall span {
		float:left;
	}
	.ckall span {
		display:block;
		padding-top:4px;
		height:18px;
		color:#464646;
	}
	.ckall span em {
		padding-left:6px;
		padding-right:20px;
	}
	.ckall p a {
		display:block;
		background:url("subtit.png") -565px -48px no-repeat;
		width:133px;
		height:26px;
		overflow:hidden;
		margin-right:8px;
		text-align:center;
		line-height:26px;
		float:left;
		color:#464646;
	}
	.box .vcontent {
		padding:9px;
		line-height:30px;
		font-size:16px;
		color:#000;
	}
	.box .vcontent p {
		padding-bottom:10px;
		text-indent:24px;
	}
	.box .vcontent a {
		color:#036;
		text-decoration:underline;
	}
	.box .vcontent a:hover {
		color:#c33;
		text-decoration:underline;
	}
	.box .vcontent h2 {
		width:97%;
		height:auto;
		background:#ccc;
		color:#333;
		font-weight:normal;
		padding:5px;
		border:1px solid #7b6859;
	}
	.box .vcontent h3 {
		width:97%;
		height:auto;
		background:#ccc;
		color:#333;
		font-weight:bold;
		padding:5px;
		border-bottom:1px solid #7b6859;
	}
	.box .vcontent .next-pre {
		width:97%;
		height:30px;
		background:#ccc;
		color:#333;
		overflow:hidden;
	}
	.box .vcontent .next-pre span {
		width:50%;
		height:30px;
		overflow:hidden;
		float:left;
		margin:0;
		padding:0;
	}
	.play-box {
		width:960px;
		height:565px;
		margin:0 auto;
		padding:10px;
		background:#fff;
		overflow:hidden;
	}
	.play-box .titall {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
	}
	.play {
		float:right;
		width:700px;
		height:605px;
	}
	.a300 {
		width:auto;
		float:right;
	}
	.a250 {
		width:auto;
		float:right;
		margin-top:10px;
	}
	.playtxtgg {
		width:auto;
		height:auto;
		float:left;
		margin:5px 0;
		padding:0;
		overflow:hidden;
	}
	.playnewgg {
		width:336px;
		height:600px;
		float:left;
		margin-bottom:0;
		padding:0;
		overflow:hidden;
	}
	.map {
		border:1px solid #333;
		background-color:#fff;
		padding:1px;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.map .tit {
		background:url("all_tit.gif") left top repeat;
		height:30px;
		line-height:28px;
		padding:0 22px;
	}
	.map .tit span.more {
		float:right;
		width:33px;
		height:11px;
		background:url("more.gif") left top no-repeat;
		margin-top:8px;
	}
	.map .tit span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.map .maplist li {
		float:left;
		width:140px;
		display:inline;
		line-height:30px;
		margin:0 5px;
		overflow:hidden;
		white-space:nowrap;
	}
	.friendlink {
		border:1px solid #ccc;
		background-color:#fff;
		padding:1px;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.friendlink .tit {
		background-color:#036;
		height:35px;
		line-height:35px;
		text-indent:22px;
		color:#fff;
	}
	.friendlink .links {
		padding:3px;
		height:100%;
		overflow:hidden;
	}
	.friendlink .links li {
		float:left;
		width:auto;
		text-align:center;
		line-height:22px;
		margin:0 5px;
	}
	.friendlink .tit span {
		float:right;
		width:auto;
	}
	.friendlink .tit span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.box .pages {
		padding:5px 8px;
	}
	.box .pages span,
	.box .pages em,
	.box .pages a {
		display:inline-block;
		font-style:normal;
		margin-right:10px;
	}
	.bottom {
		padding:10px 0;
		text-align:center;
	}
	.updown {
		width:620px;
		height:25px;
		line-height:25px;
		float:left;
		text-align:center;
		background:#fff;
	}
	.updown a {
		width:80px;
		height:22px;
		line-height:22px;
		text-align:center;
		font-size:13px;
		margin:0 5px;
		border:1px solid #444;
		background-color:#000;
		color:#fff;
	}
	.newspg {
		width:100%;
		height:auto;
		line-height:35px;
		text-align:center;
		font-size:14px;
	}
	.newspg em,
	.newspg em.nolink,
	.newspg a,
	.newspg span {
		font-size:14px;
		margin:0 5px;
	}
	.toolbar-item,
	.toolbar-layer {
		background:url("/img/toolbar.png") no-repeat;
	}
	.toolbar {
		position:fixed;
		left:0;
		bottom:50px;
	}
	.toolbar-item {
		display:block;
		width:52px;
		height:52px;
		margin-top:1px;
		position:relative;
		transition:background-position 1s ease 0s;
	}
	.toolbar-item:hover .toolbar-layer {
		opacity:1;
		transform:scale(1);
	}
	.toolbar-item-weixin {
		background-position:0 -798px;
	}
	.toolbar-item-weixin:hover {
		background-position:0 -860px;
	}
	.toolbar-item-app .toolbar-layer {
		height:212px;
		background-position:0 0;
	}
	.toolbar-item-feedback {
		background-position:0 -426px;
	}
	.toolbar-item-feedback:hover {
		background-position:0 -488px;
	}
	.toolbar-item-app {
		background-position:0 -550px;
	}
	.toolbar-item-app:hover {
		background-position:0 -612px;
	}
	.toolbar-item-weixin .toolbar-layer {
		height:194px;
		background-position:0 -222px;
	}
	.toolbar-item-top {
		background-position:0 -674px;
	}
	.toolbar-item-top:hover {
		background-position:0 -736px;
	}
	.toolbar-layer {
		position:absolute;
		left:46px;
		bottom:-10px;
		width:172px;
		opacity:0;
		transform-origin:95% 95%;
		transform:scale(0.01);
		transition:all 1s ease 0s;
	}
	.simpread-theme-root {
		font-size:62.5% !important;
	}
	sr-rd-content,
	sr-rd-desc,
	sr-rd-title {
		width:100%;
	}
	sr-rd-title {
		display:-webkit-box;
		margin:1em 0 .5em;
		overflow:hidden;
		text-overflow:ellipsis;
		text-rendering:optimizelegibility;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
	}
	sr-rd-content {
		text-align:left;
		word-break:break-word;
	}
	sr-rd-desc {
		text-align:justify;
		line-height:2.4;
		margin:0 0 1.2em;
		box-sizing:border-box;
	}
	sr-rd-content {
		font-size:1.6rem;
		line-height:1.6;
	}
	sr-rd-content h1,
	sr-rd-content h1 *,
	sr-rd-content h2,
	sr-rd-content h2 *,
	sr-rd-content h3,
	sr-rd-content h3 *,
	sr-rd-content h4,
	sr-rd-content h4 *,
	sr-rd-content h5,
	sr-rd-content h5 *,
	sr-rd-content h6,
	sr-rd-content h6 * {
		word-break:break-all;
	}
	sr-rd-content div,
	sr-rd-content p {
		display:block;
		float:inherit;
		line-height:1.6;
		font-size:1.6rem;
	}
	sr-rd-content div,
	sr-rd-content p,
	sr-rd-content pre,
	sr-rd-content sr-blockquote {
		margin:0 0 1.2em;
		word-break:break-word;
	}
	sr-rd-content a {
		padding:0 5px;
		vertical-align:initial;
	}
	sr-rd-content a,
	sr-rd-content a:link {
		color:inherit;
		font-size:inherit;
		font-weight:inherit;
		border:0;
	}
	sr-rd-content a:hover {
		background:transparent;
	}
	sr-rd-content img {
		margin:10px;
		padding:5px;
		max-width:100%;
		background:#fff;
		border:1px solid #bbb;
		box-shadow:#d4d4d4 1px 1px 3px;
	}
	sr-rd-content figcaption {
		text-align:center;
		font-size:14px;
	}
	sr-rd-content sr-blockquote {
		display:block;
		position:relative;
		padding:15px 25px;
		text-align:left;
		line-height:inherit;
	}
	sr-rd-content sr-blockquote::before {
		position:absolute;
	}
	sr-rd-content sr-blockquote * {
		margin:0;
		font-size:inherit;
	}
	sr-rd-content table {
		width:100%;
		margin:0 0 1.2em;
		word-break:normal;
		overflow:auto;
		border:0;
	}
	sr-rd-content table td,
	sr-rd-content table th {
		border:0;
	}
	sr-rd-content ul {
		margin:0 0 1.2em 1.3em;
		padding:0;
		list-style:disc;
	}
	sr-rd-content ol {
		list-style:decimal;
		margin:0;
		padding:0;
	}
	sr-rd-content ol li,
	sr-rd-content ul li {
		font-size:inherit;
		list-style:disc;
		margin:0 0 1.2em;
	}
	sr-rd-content ol li {
		list-style:decimal;
		margin-left:1.3em;
	}
	sr-rd-content ol li *,
	sr-rd-content ul li * {
		margin:0;
		text-align:initial;
	}
	sr-rd-content li ol,
	sr-rd-content li ul {
		margin-bottom:.8em;
		margin-left:2em;
	}
	sr-rd-content li ul {
		list-style:circle;
	}
	sr-rd-content pre {
		font-family:Consolas,Monaco,"Andale Mono","Source Code Pro","Liberation Mono",Courier,monospace;
		display:block;
		padding:15px;
		line-height:1.5;
		word-break:break-all;
		overflow-wrap:break-word;
		white-space:pre;
		overflow:auto;
	}
	sr-rd-content pre,
	sr-rd-content pre *,
	sr-rd-content pre div {
		font-size:1.1rem;
	}
	sr-rd-content li pre code,
	sr-rd-content p pre code,
	sr-rd-content pre {
		background-color:transparent;
		border:0;
	}
	sr-rd-content pre code {
		margin:0;
		padding:0;
	}
	sr-rd-content pre code,
	sr-rd-content pre code * {
		font-size:1.1rem;
	}
	sr-rd-content pre p {
		margin:0;
		padding:0;
		color:inherit;
		font-size:inherit;
		line-height:inherit;
	}
	sr-rd-content li code,
	sr-rd-content p code {
		margin:0 4px;
		padding:2px 4px;
		font-size:1.1rem;
	}
	sr-rd-content mark {
		margin:0 5px;
		padding:2px;
		background:#fffdd1;
		border-bottom:1px solid #ffedce;
	}
	.sr-rd-content-img {
		width:90%;
		height:auto;
	}
	.sr-rd-content-img-load {
		width:48px;
		height:48px;
		margin:0;
		padding:0;
		border-style:none;
		border-width:0;
		background-repeat:no-repeat;
		rd-content sr-blockquote {
			border-left:4px solid #ddd;
		}
		.simpread-theme-root {
			background-color:#fff;
			color:#333;
		}
		sr-rd-title {
			font-family:"PT Sans","SF UI Display",".PingFang SC","PingFang SC","Neue Haas Grotesk Text Pro","Arial Nova","Segoe UI","Microsoft YaHei","Microsoft JhengHei","Helvetica Neue","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","Hiragino Sans GB",sans-serif;
			font-size:3.4rem;
			font-weight:700;
			line-height:1.3;
		}
	}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<form name="signin" action="#" method="POST">
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register - Free Bulma template</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/15181efa86.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/register.css">
  </head>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
​
.topnav {
  overflow: hidden;
  background-color: #333;
}
​
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
​
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
​
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
​
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
<body>
  <h1 class="test">Başlık Metni</h1>
  <div class="contaienr">
    <p class=”text”>lorem ipsum dolor sit amet</p>
    <p class=”subtext”>lorem ipsum dolor sit amet</p>
  </div>
</body>

<style>
  body {font-size: 16px; }
  h1 {font-size: 1.8em;}
  .text{font-size:1.5em;}
  .subtext{font-size:1.5rem;}
</style>
<body>     
    <h1 class="test">Başlık Metni</h1> 
</body> 

<style>   
    body {font-size: 16px; }   
    h1 {font-size: 1.8em;} 
</style>
<div class="checkbox checked"></div> 
<div class="checkbox unchecked"></div>
<div class="checkitem" role="checkbox" aria-checked="true"></div>
<div role="menubar"> 
<div role="menuitem" id="fileMenu">File</div> 
  <div role="menu" aria-labelledby="fileMenu"> 
    <div role="menuitem">Open</div> 
    <div role="menuitem">Save</div> 
    <div role="menuitem">Save as...</div> 
  </div> 
</div>
<button class="order" aria-labelledby="Sipariş bilgilerini aç">Siparişleriniz</button> 
<button class="order" aria-label="Sipariş bilgilerini aç"></button>
<button class="order" aria-label="Sipariş bilgilerini aç"></button> 
<style> 
.order{background-image:url("../images/order-icon.png");} 
</style>
<button class="order"></button> 
<style>
  .order{ background-image:url("../images/order-icon.png"); } 
</style>
<! DOCKTYPE html>
<!--Take Input From the user and make a loop when the number is <10-->
<html>
    <head>
        <title>do_while loop example2</title>
    </head>
    <body>
        <center>
            <h3>
                DO_WHILE LOOP
            </h3>
        </center>
        <script>
            var a=10;
            var num = prompt("Enter The highest Range Of the number");
            do
            {
                document.write("Your value is "+a+"<br>");
                a=a+1;
            }
            while(a<=num)
        </script>
    </body>
</html>
<! DOCKTYPE html>

<!--Take input From the user and Check whether the number is odd or even-->

<html>
    <head>
        <title>
            Check Odd or even
        </title>
    </head>
    <body>
        <center>
            <h3>
                ODD OR EVEN CHECKER
            </h3>
        </center>
        <script>
            var num;
            num =prompt("Enter your Number You want to check");
            if(num%2==0)
            {
                document.write("The number is a Even Number and the number is"+num);
            }
            else
            {
                document.write("The number is a odd number and the number is"+num);
            }
        </script>
    </body>
</html>
<! DOCKTYPE html>

<html>
    <head>
        <title>
            biggest number among three distinct number
        </title>
        <body>
            <center>
            <u>
                <h2>
                    Find The Biggest Number among three different Number
                </h2>
            </u>
            </center>
            <script>
                var a;
                var b;
                var c;
                
                if(a>b & a>c);
                {
                    alert ("biggest number is " +a);
                }
                elseif (b>a & b>c);
                {
                    alert("biggest number is "+b);
                }
                elseif(c>a & c>b);
                {
                    alert("biggest number is"+c);
                }
            </script>
        </body>
    </head>
<!--Make a HTML Project using Array-->
<! DOCTYPE html>

<html>
<head>
    <title>Array</title>
</head>
<body>
    <script>
        var i,j,row,column;
        row=prompt("Enter The number of rows");
        column=prompt("Enter the number of Column");
        var arr= new Array(row);
        for(i=0;i<row;i++)
        arr[i]=new Array(column);

        for(i=0;i<row;i++){
            for(j=0;j<=column;J++)
        {
        arr[i][j]=prompt("Enter value in matrix");
        }
        }
        for(i=0;i<row;i++);{
            for(j=0;j<column;j++){
            document.write(arr[i][j]+"  ");
        }
        document.write("<br>");
        }
    </script>
</body>
</html>
<! DOCTYPE html>

<html>
<head>
    <title>Prompt Dialog Box</title>
</head>
<body>
    <script>
        var name=prompt("Please enter your name: ","Welcome");
        if(name == null || name == ""){
            alert("You have not enter your name!");
        }
        else{
            alert("Hello, "+name);
            document.write("Now its : " + Date());
        }
    </script>
</body>
</html>
let count = 0;
let counttxt = document.querySelector("#count");

window.addEventListener("DOMContentLoaded", (e) => {
  getView();
});

// handle posting data to db
function getView() {
  $.ajax({
    url: "insert.php",
    method: "POST",
    dataType: "text",
    data: {
      count: count,
    },
    success: (data, status) => {
      console.log(data);
    },
  });
}

setInterval(() => {
  getData();
}, 1000);

// handle getting dada from database

function getData(data) {
  $.ajax({
    url: "fetch.php",
    method: "POST",
    dataType: "text",
    data: {
      fetch: true,
    },
    success: (data, status) => {
      counttxt.textContent = data;
    },
  });
}

async function userLocation() {
    const API_KEY = "7c0a8d3613ed43a7adeb63a2884f59b4";

  let locationcont = document.querySelector(".v-loc");
  let url =
    `https://ipgeolocation.abstractapi.com/v1/?api_key=${API_KEY}`;

  let fetchdata = await fetch(url);
  let data = await fetchdata.json();
  const { city, country, ip_address, latitude, longitude } = data;

  let loader = document.querySelector(".loader-cont");
  if (location.innerHTML = "") {
    loader.style.display = "flex";
    locationcont.innerHTML = "";
  } else {
    setTimeout(() => {
        loader.style.display = "none";
    }, 2000);
    locationcont.innerHTML = `
    <div class="location">
    <div class="box">
        <div class="icon"><ion-icon name="location-outline"></ion-icon></div>
        <b><p>${country}</p></b>
    </div>
    <div class="box">
        <div class="icon"><ion-icon name="locate-outline"></ion-icon></div>
        <b><p>${city}</p></b>
    </div>
  </div>
  <div class="geo">
    <div class="box">
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lat</i>
            <br>
            <small>${latitude}</small>
        </div>
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lng</i>
            <br>
            <small>${longitude}</small>
        </div>
    </div>
    <div class="ip">
        <span class="icon"><ion-icon name="navigate-outline"></ion-icon></span>
        <small>IP ADDRESS</small>
        <h3><i>${ip_address}</i></h3>
    </div>
  </div>
    `;
  }
}
userLocation();
<?php 
require("db.php");


if(isset($_POST['fetch'])){
    $sql = mysqli_query($conn, "SELECT * FROM views");
    $data = mysqli_fetch_assoc($sql);
    $count = $data['count'];

    if(mysqli_num_rows($sql) > 0){
        echo $count;
    }else{
        echo "0";
    }
}else{
    return false;
}


?>
<?php 
require("db.php");


$count = 0;
if(isset($_POST['count'])){
        $sql = mysqli_query($conn, "SELECT * FROM views");
        $data = mysqli_fetch_assoc($sql);
    
        $newcount = $data['count'];
    
        if(mysqli_num_rows($sql) > 0){
            $newcount+=1;
            $sql = mysqli_query( $conn, "UPDATE views SET count='$newcount'");
    
            if($sql){
                echo "Success";
            }
        }
    }else{
        echo "Something went wrong";
        die;
    }
    // getCount();
}else{
    return false;
}

?>
<?php 

$conn = mysqli_connect("localhost", "root", null, "views");

echo $conn ? "" : "Error connecting ".mysqli_error($conn);


?>
body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background: #0c0c18 !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.container .card{
    width:400px;
    height:350px;
    margin: 50px auto !important;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container .v-loc{
    width: 500px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "location"
    "geo"
    ;
}

.container .v-loc .location{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    grid-area: location;
    flex-wrap:wrap;
}
.container .v-loc .icon{
    color:#ffff00;
    font-size:30px;
    padding:5px;
    float:left;
}
.container .v-loc .location .box{
    width:245px;
    padding:15px 45px;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    margin-right:2px;
    border-radius: 2px;
    display:flex;
    text-align: start;
}
.container .v-loc .location .box h5{
    padding:8px;
    font-size:28px;
}
.container .v-loc .geo{
    margin:10px auto;
    display:flex;
    flex-wrap:wrap;
    grid-area: geo;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    width:100%;
    padding:12px;
}
.container .v-loc .geo .box{
    display:flex;
    flex-wrap:wrap;
    padding:12px;
}
.container .v-loc .geo .box .box-1{
    width:195px;
    padding:10px 45px;
    margin:5px;
}
.container .v-loc .geo .box .box-1 i{
    padding:12px;
}
.container .v-loc .geo .ip{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
    text-align: center;
}

.loader-cont{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    position:fixed;
    background:#000000e3;
    top:0px;
    left:0px;
    /* display:none; */
}
.loader-cont .icon{
    font-size:55px;
    color:#ffff00;
    animation: spin linear infinite;
}

<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Views Counts</title>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</head>

<body>
    <br>
    <br>
    <h1 class="display-4 text-center text-white">Site Tracker</h1>
    <div class="container">
        <div class="card">
            <div class="container">
                <div class="card-header">
                    <h3>Visitor Views</h3>
                    <p>Last 30min</p>
                </div>
                <div class="card-body">
                    <h1 id="count">0</h1>
                </div>
            </div>
        </div>
        <div class="v-loc"></div>
    </div>

    <div class="loader-cont">
        <h3 class="text-white">Loading.......</h3>
        <div class="icon">
            <ion-icon name="cog-outline" class="ion"></ion-icon>
        </div>
    </div>

    <script src="view.js"></script>
    <script src="jquery.js"></script>
</body>

</html>
<header class="@(rootId.GetPropertyValue<bool>("fixed") ? "fixed" : "normal2")">
    <div class="mobileMenuHeightSpacer"></div>
    <div class="@(rootId.GetPropertyValue<bool>("container") ? "container" : "container-fluid")">
        <div class="headerContent">
            <div class="row">

                <div class="col-xl-12 megamenuHolder">
                    <div class="menuHolder">
                        @Html.Partial("Menu", Model, new ViewDataDictionary { { "logo", logoUrl } })
                        @Html.Partial("MenuMobile", Model, new ViewDataDictionary { { "logo", logoUrl } })
                    </div>
                    <div class="megaMenu">
                        @foreach (var page in Umbraco.TypedContent(1075).Children)
                        {
                            <p>@page.Name</p>
                            <span>
                                @foreach (var subpage in page.Children)
                                {
                                    <p>@subpage.Name</p>
                                }
                            </span>
                        }


                    </div>

                </div>

                @if (rootId.HasValue("knapper"))
                {
                    <div class="col-xl-2">



                        <div class="buttonHolder">

                            @{
                                var headerLinks = rootId.GetPropertyValue<RelatedLinks>
                                    ("knapper");

                                if (headerLinks.Any())
                                {
                                    foreach (var item in headerLinks)
                                    {
                                        var linkTarget = (item.NewWindow) ? "_blank" : null;
                                        <a href="@item.Link" target="@linkTarget">@item.Caption</a>
                                    }
                                }
                            }
                            <a href="tel:@rootId.GetPropertyValue("telefon")"><i class="fas fa-phone"></i> @rootId.GetPropertyValue("telefon")</a>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</header>
<Buttons
	text="Btn Style 2"
	btn_style="btn btn-style-2"
    :on_click="this.clickEventFire"
	leading_icon="inbox"
	trailing_icon="chevron-right"
/>
<?php 
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";


if(isset($_POST['submit'])){
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $msg = htmlspecialchars($_POST['msg']);

    $error = "";
    $pass = "";
    // check if fields are empty

    if(empty($name) || empty($email) || empty($msg)){
        $error .= str_replace(" ", "-", "Fields cannot be empty");
        header("location: index.php?err=$error");
        die;
    }
    else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $error .= str_replace(" ", "-", "Email given is invalid");
        header("location: index.php?err=$error");
        die;
    }
    else {
        // if no error occur send mail
        $to = "alumonabenaiah71@gmail.com";
        $mail = new PHPMailer(true); 
        $mail->IsSMTP();
        $mail->Mailer = "smtp";
        $mail->SMTPDebug  = 1;  
        $mail->SMTPAuth   = TRUE;
        $mail->SMTPSecure = "tls";
        $mail->Port       = 587;
        $mail->Host       = "smtp.gmail.com";
        $mail->Username   = "your-gmail-account-address";
        $mail->Password   = "your-password";
        $mail->From = $email;
        $mail->FromName = $name;
        $mail->addAddress($to);
        $mail->Subject = "Contact Form Request";
        $mail->Body = $msg;
        if($mail->send()){
            $pass .= str_replace(" ", "-", "Message sent Successfully!!");
            header("location: index.php?pass=$pass");
            die;
        }else{
            $error .= str_replace(" ", "-", "An error occur while sending message, please try later ".$mail->ErrorInfo);
            header("location: index.php?err=$error");
            die;
        }
    }
}
else{
    header("location: index.php");
    die;
}

?>
body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background:url("https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRlY2h8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60") !important;
    background-size:cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    height:100vh;
}
.container .form-cont{
    width:450px;
    padding:12px;
    background:rgba(0,0,0,.8);
    color:#fff;
}

.container .form-cont form textarea{
    height:100px;
}
<!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>Send Mail</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="form-cont">
            <h3>Contact Form</h3>
            <br>
            <div class="err-cont">
                <?php if(isset($_GET['err'])){?>
                <div class="alert alert-danger"><small><?php echo $_GET['err'];?></small></div>
                <?php }else if(isset($_GET['pass'])){?>
                <div class="alert alert-success"><small><?php echo $_GET['pass'];?></small></div>
                <?php }?>
            </div>
            <form action="sendmail.php" class="form-group" method="POST">
                <label for="fname">Fullname</label>
                <input type="text" name="name" placeholder="Your name.." class="form-control">
                
                <label for="fname">Email</label>
                <input type="email" name="email" placeholder="Your Email Address.." class="form-control">
                
                <label for="subject">Message</label>
                <textarea name="msg" placeholder="Write something.." class="form-control"></textarea>
            
                <input type="submit" name="submit" value="Send Message" class="btn btn-block btn-primary mt-2">
            
              </form>
        </div>
    </div>
</body>
</html>
//Varsayılan dil özelliğinin belirlenmesi: 
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
  
//Dil özelliğinin belirlenmesi: 
<link rel="alternate" hreflang="en" href="https://example.com/en/" /> 

//Dil ve bölge(ülke) özelliğinin belirlenmesi: 
<link rel="alternate" hreflang="en" href="https://example.com/en-us/" /> 
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>https://example.com/en/</loc>
        <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
    </url>
    <url>
        <loc>http://example.com/de/</loc>
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
        <xhtml:link rel="alternate" hreflang="de" href="https://www.example.com/de/" />
    </url>
</urlset>
<html lang=”tr”>
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="[@Yayıncı adresi]">
<meta name="twitter:title" content="[Sayfa başlığı]">
<meta name="twitter:description" content="[Sayfa açıklaması 200 karakterden az olmalıdır.]">
<meta name="twitter:creator" content="[@creator]">
<meta name="twitter:image" content="[https://example.com/image.jpg]">
  
<!-- Open Graph data -->
<meta property="og:title" content="[Başlık]" />
<meta property="og:type" content="[article]" />
<meta property="og:url" content="[https://example.com/]" />
<meta property="og:image" content="[https://example.com/image.jpg]" />
<meta property="og:description" content="[Sayfa açıklaması]" />
<meta property="og:site_name" content="[Site adı]" />
<link rel="prev" href="http://www.example.com/article_1.html">
<link rel="next" href="http://www.example.com/article_3.html">
<meta name="ROBOT ADI" content="ÖZELLİK" />
User-agent: googlebot
Disallow: /page2.html
Sitemap: https://example.com/sitemap.xml
<link href="https://example.com/" rel="canonical" />
<a href="https://www.example.com/index.html">Anasayfa</a>
<a href="https://www.example.com/index.html" rel="nofollow">Anasayfa</a>
<a href="https://www.example.com/index.html">
    <img src="img/car.jpg" alt="anahtar kelime" width="100" height="100">
</a>
<img src="img/keyword.jpg" alt="keyword" width="100" height="100">
<meta name=”description content= “Açıklama metni”>
<title>Başlık</title>
<script type="application/ld+json">
{
  "@context": [
    "http://schema.org"
  ],
  "@type": "Recipe",
  "image": "http://cdn.jamieoliver.com/recipe-database/oldImages/xtra_med/1154_1_1436804765.jpg",
  "name": "Kerryann’s Turkish-style couscous",
  "author": "jamie Oliver",
  "description": "This super-simple couscous recipe is almost a salad – zingy, lightly spiced and brilliant with fish and chicken",
  "totalTime": "PT15M",
  "datePublished": "2015-09-16",
  "nutrition": {
    "@type": [
      "NutritionInformation"
    ],
    "calories": "116 calories"
  }
}
</script>
<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Oguzcan Sahin</span>
  <img itemprop="image" alt="Oguzcan Sahin" src="oguzcan-sahin.jpg">
  <span itemprop="jobTitle">Front-end Developer</span>
  <address class="text" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br> 2/1 B1 Blok Kat: 10 D:26-27</span> <br>
    <span itemprop="addressLocality">Suadiye</span> / <span itemprop="addressRegion">İstanbul</span> <br>
    <a class="phone-number" target="_blank" itemprop="telephone">0216 302 49 87</a>
  </address>
  <a href="mailto:email@email.com" itemprop="email">email@email.com</a>
</div>
<address class="text" itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="streetAddress">Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br>
  2/1 B1 Blok Kat: 10 D:26-27</span> <br>
  <span itemprop="addressLocality">Suadiye</span> / <span itemprop="addressRegion">İstanbul</span> <br>
  <a class="phone-number" target="_blank" itemprop="telephone">0216 302 49 87</a>
</address>
<address class="text" itemscope itemtype="http://schema.org/PostalAddress">
  <span>Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br>
  2/1 B1 Blok Kat: 10 D:26-27</span> <br>
  <span>Suadiye</span> / <span>İstanbul</span> <br>
  <a class="phone-number" target="_blank">0216 302 49 87</a>
</address>
<address class="text">
  <span>Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br>
  2/1 B1 Blok Kat: 10 D:26-27</span> <br>
  <span>Suadiye</span> / <span>İstanbul</span> <br>
  <a class="phone-number" target="_blank">0216 302 49 87</a>
</address>
    <div class="custom__wrapper">
        <video src="/media/1011/filmtegner-1.mp4" class="custom__slider" autoplay loop muted controls></video>

        <ul>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
        </ul>
    </div>
<script>
    function videoslider(links) {
        document.querySelector(".slider").src = links;
    }
</script>

.custom__wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom__wrapper .custom__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.custom__wrapper ul {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.custom__wrapper ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}


.custom__wrapper ul li video {
    width: 200px;
    transition: all 0.3s;
}

.custom__wrapper ul li video:hover {
    transform: scale(1.1);
}

video {
    width: 100%;
    height: 100%;
}
<div class="{{ margin_top }}">
{{ image }}

    {{ if
            (column_layout == '66/33' AND column_number == '1') OR
            (column_layout == '60/40' AND column_number == '1') OR
            (column_layout == '40/60' AND column_number == '2') OR
            (column_layout == '33/66' AND column_number == '2')
    }}
        {{# large  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="900" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="900" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="900" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="900" }}"
                    alt="{{ title }}"
                    height="{{ height }}"
                    width="{{ width }}"
            >
            </noscript>
        </picture>

    {{ elseif
        (column_layout == '66/33' AND column_number == '2') OR
        (column_layout == '60/40' AND column_number == '2') OR
        (column_layout == '40/60' AND column_number == '1') OR
        (column_layout == '33/66' AND column_number == '1')
    }}
        {{# small  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="600" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="600" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="600" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="600" height="400" fit="crop_focal" }}"
                    alt="{{ title }}"
                    height="600"
                    width="400"
            >
            </noscript>
        </picture>

    {{ else }}
        {{# medium  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="900" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="900" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="900" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="900" }}"
                    alt="{{ title }}"
                    height="{{ height }}"
                    width="{{ width }}"
            >
            </noscript>
        </picture>
    {{ endif }}

</div>
{{ /image }}
//Css
$('elem').css('prop','val')

//classes
$('elem').addClass();
$('elem').removeClass();
$('elem').toggleClass();


$('.galleryBox').css('width');
//It will display 'width in pixels' properties of selector.

$('.galleryBox').width();
//It will display the width only in numbers ( no units )
//It will display the height only in numbers ( no units )
$('.galleryBox').height();

//chechbox toggle/update/check
let checkBox = $('input:checkbox').is(":checked");
console.log(checkBox)
//It will True if it's checked, False if unchecked.
<script lang="javascript">
  function doSomething(e) {
    console.log(`You clicked <${e.target.localName}>`);
    // uncomment next line to stop it getting to href (and see the log above)
    // e.preventDefault();
  }
</script>
<div onclick="doSomething(event)">
  <a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
</div>
        /*   Effect Animations     */

//Methods :fadeOut, fadeIn, fadeTo, fadeToggle

$('elem').fadeOut(1000);
//fadeOut adds property 'display: none'

$('elem').fadeIn(1000)

$('elem').fadeTo(1000, 0.5);
// 0.5 will be the opacity.

$('elem').fadeToggle();
//Will Toggle between fadeOut and fadeIn. If it's already Faded out, It will fadeIn and vice-versa ( It will remeber opacity mentioned in line 6 and will provide same opacity.

$('elem').fadeTo(1000, 0);
// Opacity will be zero, But element will be there (Blank Space )

// Methods : hide , show, toggle
$('elem').hide();

// It will add prop "Display : none".
 $('elem').hide(2000);

$('elem').show();
// It will add prop 'display : block'.
 $('elem').show(2000);

$('elem').toggle();
//It will switch between none/block.

// Methods slideUp, slideDown, slideToggle
$('elem').slideUp();
 $('elem').slideUp(2000);

//There will be cool animation, And it will add 'display:none'.
$('elem').slideUp();

 $('elem').slideDown(3000);
// It will reverse the slideUp or it will pop up the element by adding prop 'display:block'.

 $('elem').slideToggle(2000);
//It will switch between slideUp/slideDown.


//Animate ( Values have to be numerical )
$('div.blue-box').animate({
    'margin-left' : '20px',
    'margin-top':'18px'
}, 1000 )
// 1st way, It will set the margins and override the defauls ones,

// 2nd way, This is better as it will add/remove margins to the current provided
$('div.blue-box').animate({
    'margin-left' : '+=20px',
    'margin-top':'-=18px',
  'opacity' : '0'
}, 1000 )

//We can also do camel casing in properties.
$('div.blue-box').animate({
    'margin-left' : '+=200px',
    'opacity' : '0.8',
    'height' : '50px',
     width : '50px',
    'margin-top' : '10px',
     borderRadius : '9px' 
}, 1000 )

//Delaying and Chaining Examples.
$('elem').delay( time ).method( property )

$('p').delay(2000).slideToggle();
$('.box').delay(2000).fadeOut(1000,0.5).fadeOut().fadeIn();
//slideToggle() will work after 2 seconds.


//Timing the functinos according to the Time ( As a call back functions )
$('div#content .red-box').slideUp( 2000, 0, function(){
    $('div#content .green-box').slideUp( 2000, 0 ,function(){
        $('div#content .blue-box').slideUp(2000, 0 )
           //All the call back functions are nested with each other.
    }) 
})

// Or 1:  using Arrow functions.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').slideUp( 2000, 0 , () => {
        $('div#content .blue-box').slideUp(2000 , 0)
    })
})

// Or 2:  using Arrow functions + Chaining + using different methods in one program.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').animate({
        marginTop : '20px',
        'opacity' : '0.6',
     }, 2000 , ()=>{
         $('.blue-box').hide();
     })
})

          /*  -----------------------XX ---------------------------- */


            /*               Selectors.         */
$('.elem:first');
$('.elem:last');
$('.elem:even');
$('.elem:odd');

$('input:text,input:email');
$('input:checked');
$('input:selected');

$('body').children().not('.one').css('border' , '2px solid red');
$('.parent').children().not('.one').css("border","30px solid blue");


$('div.content').find('h1').css('text-align','center');
//or
$('ul').find('li').slideUp(2000);
//or
$('ul').children('li.spec').slideUp(2000); //Direct children 'li.spec' of 'ul'
//or
$('ul').find('li.spec').slideUp(2000);

$('ul').parent('body').css('color','red');
$('li').parents('ul').css('border', '2px solid red');
$('ul').children('ol').css('font-weight', 'bolder');
$('li').siblings('li').css('border', '2px solid red');

 $('h1').next().css('border', '2px solid red');
 $('h1').prev().css('border', '2px solid red');

 
 $('li').filter(":odd").css('border', '2px solid red');
 $('ul').find('li').filter(":even").css('border', '2px solid red');

$('ul').first().css('background-color', 'red');
$('ul').last().css('background-color', 'red')

$('li').eq( numberHere ).css('background-color', 'red');
$('li').eq( -numberHereFromBackToFront ).css('background-color', 'red');

   /*  -----------------------XX ----------------------*/  


                    /*  DOM  */
//Adding
$('ol').append('<li> Will be last item on OL </li>');
$('<li> Seven </li>').appendTo(('ol'));

$('ol').prepend('<li> Will be Top Item on OL </li>');
$('<li> From Top Seven </li>').prependTo(('ol'));

$('div.one').after("<div class='box bg-info m -4'> after </div>");
$('div.one').before("<div class='box bg-secondary m -4'> before </div>")

$('div.one').before(()=>{
  return "<div class='box bg-secondary m -4'> before </div>";
})
//We can do like this for all the above mentioned methods.


//replacing
$('li:even').replaceWith('<li>  All the Even li will be replaced </li>');
$('li:even').replaceWith(()=>{
  return 'Works same way, But we are returning using an function';
});
$('li:even').replaceAll('<li>  All the Even li will be replaced </li>');


//Removing elements
 $('li').remove();

$('p').empty(); //Will only remove the content inside the 'p', Will not remove the 'p' element itself. ( it basically empty it)


//Manipulating attributes.
$('a').attr('href');
$('img').attr('src');
$('div').attr('height');

//It will change the value;
$('a').attr('href','https://www.youtube.ca/');

//It will work as "checked" works in HTML. ( by default it will be checked )
$('input:checkbox').prop('checked');

//To get an value from the element. ( eleme.value  ( vanilla script ))
$('eleme').val();


            // classes
//Add class.
$('.select').addClass('classNameToBeAdd');
$('.select').addClass('classNameToBeAdd classNameToBeAdd2 classNameToBeAdd5'); //multiple classes.
$('div').addClass(function(index, currentClass){
  if(currentClass === 'dummy01'){
    return 'classNameOneToBeAdded'  //Example : To add class using index or checking if the class prexisted or not.
  }
})

//Remove classe.
$('.select').removeClass('classNameToBeRemoved');
$('.select').removeClass('classNameToBeRemoved classNameToBeRemoved2 classNameToBeRemoved4 ');

$('.select').addClass('class1').removeClasss('class3').addClass('blah blah2...') //Chaining it.

-------------------------------------
    // data

let valuesArr = [10, 20, 30, 40, 50];

$('.element').data('keyHere', "valueHere");
console.log( $('.element').data('keyHere') );

$('.output').data('dataSet1', valuesArr);
$('.output').data('ds2', "Jaskaran");

console.log( $('.output').data('dataSet1')); //It will return the whole array('valuesArr')
console.log( $('.output').data('ds2') );

console.log($(".output").data()); //It will return all the data linked to the '.output' element.

$('.output').removeData("dataName"); // How to remove the data.


<p data-sampData1='Something to be stored'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio.  
</p>

<script>
  $('p').data();
//or
  $('p').data('sampData1');

</script>  
-----------------------------------------
 
  //content
.text();
.html();
      /*  -----------------------XX ---------------------------- */

             /*      Event Handlers      */ 
  
//Syntax
$('.elemt').methodName(function(){  });

$('eleme').click();
$('eleme').dblclick();

$('eleme').mouseenter();
$('eleme').mouseleave();

//hover(handlerIn, handerOut);
$('.elem').hover();
$('elem').hover( function(){console.log('code written from handlerIn')}, function(){console.log('code written from handlerOut')}) // We can use 'mouseenter' and 'mouseleave', But just another way to code.


//Adding multiple handlers on single "element" using "ON" method.
$('.elem').on("click dblclick mouseenter",function(){ 
 console.log('Active : ')
});

               //Delegated events, 
//In case we add some dynamic elements( from js/external src). Events handlers are not added to the Dynamic content so we need to use 'Delegated events'.
$('.parent').on( "click", "p"  ,function(){
$(this).slideUp();
});//In this case we have added 'p' tag from JS, So in order to access/select, We need to use such syntax.


//Data
    <li data-item1='Item One Data Here...'>Write your own destiny</li>
    <li data-item2="item Two Data here">Fate is what choices you make</li>
  
     console.log($('li:first').data());
       //{item1: "Item One Data Here..."}

     console.log($('li:first').data('item1'));
       //Item One Data Here

//KeyDown && keyup
$('elem').keydown(()=>{});
$('elem').keyup(()=>{});

$('elem').keydown((e)=>{console.log(e.which)});

//Focus, Change and blur
$('input').focus(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
});

$('input').change(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
})

$('input').blur(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
})
=TODAY() +0

//And in the second box, I'll enter:

=TODAY() +7
<form enctype='multipart/form-data'>
      <h1>
        Upload files
      </h1>
      <input type='file' name='photo' @change="filesChange($event.target.name, $event.target.files)">
</form>
<head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
<nav id="top" class="navigation-transparent">
        <div class="nav-header">
            <span class="nav-title-secondary">Sky</span>
            <span class="nav-title-primary">UI</span>
        </div>
        <div class="nav-links">
            <button class="button-tertiary"><a href="index.html">Home</a></button>
            <button class="button-tertiary"><a class="link-active" href="documentation.html">Documentation</a></button>
            <button class="button-tertiary"><a
                    href="https://github.com/AnkitKarnAK/css-component-library/blob/main/componentStyles.css"
                    target="_blank">Github</a></button>
        </div>
    </nav>
/* Carousel   */
 <!--###################START HERE####################-->
  <div class="container">
    <div class="row">
      <div class="col-sm-8 m-auto">

        <!-- SIMPLE SLIDER -->
        <div id="slider1" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
        </div>

        <!-- SLIDER WITH CONTROLS -->
        <div id="slider2" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider2" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider2" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <!-- SLIDER WITH INDICATORS -->
        <div id="slider3" class="carousel slide mb-5" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#slider3" data-slide-to="0"></li>
            <li data-target="#slider3" data-slide-to="1"></li>
            <li data-target="#slider3" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider3" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider3" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <!-- SLIDER WITH CAPTIONS -->
        <div id="slider4" class="carousel slide mb-5" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#slider4" data-slide-to="0"></li>
            <li data-target="#slider4" data-slide-to="1"></li>
            <li data-target="#slider4" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider4" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider4" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
/* ------------------ XX ------------------- */

/*  collapse  */
/* ------------------ XX ------------------- */

/*  Tooltips  */
/* ------------------ XX ------------------- */


/*  Popovers  */
/* ------------------ XX ------------------- */


/*  Modals  */
/* ------------------ XX ------------------- */


/*  ScrollSpy  */
/* ------------------ XX ------------------- */
           /*    Grid System      */
    <!-- RESPONSIVE GRID -->
    <div class="row">
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>4 column on medium screen</li>
          <li>3 column on large screen</li>
          <li>2 column on xlarge screen</li>
        </ul>
      </div>
    </div>

    <!-- EQUAL WIDTH -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
    </div>

    <!-- EQUAL WIDTH MULTI ROW -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="w-100" style="border:1px solid #333"></div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
    </div>

    <!-- AUTO LAYOUT -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Auto Layout</div>
      <div class="col-6" style="border:1px solid #333">Auto Layout</div>
      <div class="col-4" style="border:1px solid #333">Auto Layout</div>
    </div>

    <!-- EQUAL WIDTH STACKED -->
    <div class="row">
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
    </div>

    <!-- ORDERING -->
    <div class="row">
      <div class="col order-3" style="border:1px solid #333">
        First
      </div>
      <div class="col order-2" style="border:1px solid #333">
        Second
      </div>
      <div class="col order-1" style="border:1px solid #333">
        Third
      </div>
    </div>

    <!-- OFFSETTING -->
    <div class="row">
      <!-- 6 column div offset by 3 -->
      <div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
    </div>
    <div class="row">
      <!-- 2 4 column divs, the second offset by 4 -->
      <div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
      <div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
    </div>

    <div class="row">
      <!-- 2 3 column divs, both offset by 3 -->
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
    </div>

    <!-- NESTING -->
    <div class="row">
      <div class="col-sm-9" style="border:1px solid blue">
        Level 1: .col-sm-9
        <div>
          <div class="col-8 col-sm-6" style="border:1px solid red">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6" style="border:1px solid red">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>

  /* ------------------ XX --------------- */


          /*   Grid Alignment       */
        <!-- VERTICAL ALIGNMENT -->
        <div class="container">
            <div class="row align-items-start" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
            </div>
            <div class="row  align-items-center" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
            </div>
            <div class="row  align-items-end" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL ALIGN INDIVIDUAL COLS -->
        <div class="container">
            <div class="row" style="height:200px;border:1px #333 solid">
                <div class="col  align-self-start">
                    Top Aligned
                </div>
                <div class="col  align-self-center">
                    Middle Aligned
                </div>
                <div class="col  align-self-end">
                    Bottom Aligned
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- HORIZONTAL ALIGNED COLS -->
        <div class="container">
            <div class="row justify-content-start" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Left Aligned Text
                </div>
                <div class="col-4">
                    Left Aligned Text
                </div>
            </div>
            <div class="row justify-content-center" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Center Aligned Text
                </div>
                <div class="col-4">
                    Center Aligned Text
                </div>
            </div>
            <div class="row justify-content-end" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Right Aligned Text
                </div>
                <div class="col-4">
                    Right Aligned Text
                </div>
            </div>
            <div class="row justify-content-around" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Around
                </div>
                <div class="col-4">
                    Content Around
                </div>
            </div>
            <div class="row justify-content-between" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Between
                </div>
                <div class="col-4">
                    Content Between
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- COLUMN WRAPPING & NO GUTTERS-->
        <div class="row no-gutters">
            <div class="col-9">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


   /* ------------------ XX --------------- */

            /*   Flex   */

    <!-- FLEX ROW & FLEX ITEMS -->
    <div class="d-flex flex-row row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX ROW REVERSE -->
    <div class="d-flex flex-row-reverse row-hl">
      <div class="p-4 item-hl">Flex Item 1</div>
      <div class="p-4 item-hl">Flex Item 2</div>
      <div class="p-4 item-hl">Flex Item 3</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT START -->
    <div class="d-flex row-hl justify-content-start">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT CENTER -->
    <div  class="d-flex row-hl justify-content-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT END -->
    <div class="d-flex row-hl justify-content-end">
      <div class="p-4 item-hl">Flex Item end</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT AROUND -->
    <div class="d-flex row-hl justify-content-around">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
    <div  class="d-flex row-hl justify-content-between">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN -->
    <div class="row-hl d-flex flex-column">
      <div class="p-4 item-hl">Flex Item 11</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN REVERSE -->
    <div class="d-flex flex-column-reverse row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - START -->
    <div class="row-hl d-flex align-items-start">
      <div class="p-4 item-hl">Flex Item Start</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - CENTER -->
    <div class="row-hl d-flex align-items-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - END -->
    <div class="row-hl d-flex align-items-end">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - BASELINE -->
    <div class="row-hl d-flex align-items-baseline">
      <div class="p-4 item-hl">Flex Item BASELINE</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - STRETCH -->
    <div class="row-hl d-flex align-items-stretch">
      <div class="p-4 item-hl">Flex Item STRETCH</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- ALIGN SELF -->
    <div class="row-hl d-flex">
      <div class="p-4 item-hl align-self-end">Flex Item End</div>
      <div class="p-4 item-hl align-self-center">Flex Item</div>
      <div class="p-4 item-hl align-self-start">Flex Item</div>
      <div class="p-4 item-hl align-self-baseline">Flex baseline</div>
      <div class="p-4 item-hl align-self-stretch">Flex stretch</div>
    </div>
   /* ------------------ XX --------------- */

          /*  Auto Margins & Wrap     */



        <!-- MR-AUTO -->
        <div class="d-flex row-hl">
            <div class="mr-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ML-AUTO -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="ml-auto p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MB-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="mb-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MT-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 mt-auto item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- NO WRAP -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>

        </div>

        <br>
        <br>

        <!-- WRAP -->
        <div class="d-flex flex-wrap row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ORDERING -->
        <div class="d-flex row-hl">
            <div class="p-2 order-3 item-hl">First flex item</div>
            <div class="p-2  item-hl">Second flex item</div>
            <div class="p-2 order-1 item-hl">Third flex item</div>
        </div>

     /* ------------------ XX --------------- */
<div id="testimonials">
</div>

#jump-here {
  margin-top: -90px;
  padding-top: 90px;
  pointer-events: none;
}
                     /*        "Components"                */



/*    Buttons        */

 
        <!-- BUTTONS -->
        <button class="btn btn-primary" type="button">Primary</button>
        <button class="btn btn-secondary" type="button">Secondary</button>
        <button class="btn btn-success" type="button">Success</button>
        <button class="btn btn-info" type="button">Info</button>
        <button class="btn btn-warning" type="button">Warning</button>
        <button class="btn btn-danger" type="button">Danger</button>
        <button class="btn btn-light" type="button">Light</button>
        <button class="btn btn-dark" type="button">Dark</button>
        <button class="btn btn-link" type="button">Link</button>

        <br>
        <br>

        <!-- BUTTON TAGS/TYPES -->
        <a class="btn btn-primary" href="#" role="button">Link</a>
        <button  class="btn btn-light" type="submit">Button</button>
        <input class="btn btn-dark" type="button" value="Input">
        <input  class="btn btn-warning" type="submit" value="Submit">
        <input  class="btn btn-success" type="reset" value="Reset">

        <br>
        <br>

        <!-- OUTLINE BUTTONS -->
        <button class="btn btn-outline-primary" type="button">Primary Outline</button>
        <button  class="btn btn-outline-secondary" type="button">Secondary Outline</button>
        <button  class="btn btn-outline-success" type="button">Success Outline</button>
        <button  class="btn btn-outline-success" type="button">Info Outline</button>
        <button  class="btn btn-outline-warning" type="button">Warning Outline</button>
        <button  class="btn btn-outline-danger" type="button">Danger Outline</button>
        <button  class="btn btn-outline-light" type="button">Light Outline</button>
        <button  class="btn btn-outline-dark" type="button">Dark Outline</button>

        <br>
        <br>

        <!-- BUTTON SIZES -->
        <button class="btn btn-lg" type="button">
            <i class="fa fa-user"></i> Large button</button>
        <button class="btn btn-sm" type="button">Small button</button>
        <br>
        <br>
        <button class="btn btn-block btn-outline-dark" type="button">Block level button</button>

        <br>
        <br>

        <!-- STATES -->
        <button class="btn btn-primary" type="button">Regular Button</button>
        <button class="btn btn-primary active" type="button">Active Button</button>
        <button class="btn btn-primary disabled" type="button">Disabled Button</button>

        <button class="btn btn-primary" data-toggle='button' type="button">
            Toggle State
        </button>

        <br>
        <br>

        <!-- BUTTON GROUPS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Left</button>
            <button class="btn btn-success" type="button">Middle</button>
            <button class="btn btn-primary" type="button">Right</button>
        </div>

        <br></br>

        <!-- BUTTON TOOLBAR -->
        <div class="btn-toolbar">
            <div class="btn-group  mr-2">
                <button class="btn btn-primary"  type="button">1</button>
                <button class="btn btn-primary"  type="button">2</button>
                <button class="btn btn-primary"  type="button">3</button>
                <button class="btn btn-primary"  type="button">4</button>
            </div>
            <div class="btn-group mr-2">
                <button class="btn btn-primary"  type="button">5</button>
                <button class="btn btn-primary"  type="button">6</button>
                <button class="btn btn-primary"  type="button">7</button>
            </div>
            <div>
                <button class="btn btn-primary"  type="button">8</button>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL GROUP -->
        <div class="btn-group-vertical">
            <button class="btn bg-primary" type="button">Left</button>
            <button class="btn btn-dark" type="button">Middle</button>
            <button class="btn bg-primary" type="button">Right</button>
        </div>

        <br>
        <br>

        <!-- BUTTON DROPDOWNS -->
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
                My Dropdown
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>

        <br>
        <br>

        <!-- SPLIT DROPDOWNS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">My Button</button>
            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
                <span>Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>
          /*   ---------------------- XX ------------------    */


                          /*     Navbar   */
 <!-- SIMPLE NAVBAR -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    

    <!-- NAVBAR WITH RESPONSIVE TOGGLE -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
         </div>
        </div>
    </nav>
    

    <!-- NAVBAR WITH FORM -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>

            <form class="form-inline ml-auto">
                <input class="form-control mr-2" placeholder="Search" type="text">
               <button class="btn btn-outline-success ml-2">Search</button>
            </form>
         </div>
        </div>
    </nav>

    <!-- NAVBAR WITH DROPDOWN -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-5">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item"> Link 1 </a>
                        <a href="#" class="dropdown-item"> Link 2 </a>
                        <a href="#" class="dropdown-item"> Link 3 </a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- COLORS -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <br>
    <br>

    <!-- FIXED TOP -->
    <nav style='z-index : 1;' class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#" > Navbar Fixed Top </a>
    </nav>

    <!-- FIXED BOTTOM -->
    <!-- FIXED TOP -->
    <nav class="navbar navbar-dark bg-dark fixed-bottom">
        <a class="navbar-brand" href="#" > Navbar Fixed Bottom </a>
    </nav>



    <!-- sticky TOP -->
    <nav style='z-index:2;' class="navbar navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="#" > Navbar sticky Top </a>
    </nav>


    <br>
    <br>

    <div class="container">

        <!-- NAVS -->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <!-- HORIZONTAL ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>



        <!-- RIGHT ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- VERTICAL -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- FILL & JUSTIFY -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 nav-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 4</a>
            </li>
        </ul>
           /*   ---------------------- XX ------------------    */

               /*   List Groups & Badges       */


        <!-- LIST GROUP -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- LIST GROUP WITH LINKS -->
        <ul  class="list-group mb-3">
            <a class="list-group-item" href="#">My List Item One</a>
            <a class="list-group-item" href="#">My List Item Two</a>
            <a class="list-group-item active" href="#">My List Item Three</a>
            <a class="list-group-item" href="#">My List Item Four</a>
            <a class="list-group-item" href="#">My List Item Five</a>
        </ul>


        <!-- CONTEXTUAL CLASSES -->
        <ul class="list-group mb-3">
            <li class="list-group-item">Regular List Item</li>
            <li class="list-group-item list-group-item-primary">Primary List Item</li>
            <li class="list-group-item list-group-item-secondary">Secondary List Item</li>
            <li class="list-group-item list-group-item-success">Success List Item</li>
            <li class="list-group-item list-group-item-info">Info List Item</li>
            <li class="list-group-item list-group-item-warning">Warning List Item</li>
            <li class="list-group-item list-group-item-danger">Danger List Item</li>
            <li class="list-group-item list-group-item-light">Light List Item</li>
            <li class="list-group-item list-group-item-dark">Dark List Item</li>
        </ul>

        <!-- FLUSH LIST GROUP -->
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item active">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>


        <!-- BADGE -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                My List Item Three
            <span class="badge badge-primary">30</span>
            </li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- BREADCRUMB -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item active">Home</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item" >Users</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item">
                <a href="#">Users</a>
            </li>
            <li  class="breadcrumb-item" >Brad</li>
        </ol>

           /*   ---------------------- XX ------------------    */

                  /*    Forms         */

 <!-- FORM -->
        <form>
            <!-- TEXT FIELD GROUPS -->
            <div class="form-group">
                <label for="name">Name</label>
                <input class="form-control" type="text" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input class="form-control form-control-lg" type="email" id="email" placeholder="Enter email">
                <small class="form-text text-muted">
                    Your email will not ever be shared
                </small>
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Enter company name">
            </div>
            <div class="form-group">
                <label for="company">Company 2 : </label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Read only Example" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" id="password" placeholder="Password">
            </div>
            <!-- SELECT -->
            <div class="form-group">
                <label for="gender">Gender</label>
                <select  class="form-control"  id="gender">
                    <option>Male</option>
                    <option>Female</option>
                </select>
            </div>
            <!-- TEXTAREA -->
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" rows="3"></textarea>
            </div>
            <!-- FILE INPUT -->
            <div class="form-group">
                <label for="file">File input</label>
                <input class="form-control-file" type="file" id="file">
                <small class="form-text text-muted" id="fileHelp">Max 3mb size</small>
            </div>
            <!-- CUSTOM FILE INPUT -->
            <div class="custom-file">
                <input class="custom-file-input" type="file" id="myfile">
                <label class="custom-file-label" for="myfile">Choose file</label>
            </div>
            <br>
            <br>
            <!-- RANGE -->
            <div class="form-group">
                <label for="membership">Membership Level</label>
                <input class="custom-range" type="range" step="1" value='5' min="1" max="5">
            </div>

            <br>

            <button class="btn btn-block btn-primary" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- INLINE FORM -->
        <form class="form-inline">
            <input class="form-control mr-2" type="text" id="username" placeholder="Enter username">
            <input class="form-control mr-2" type="text" id="password" placeholder="Password">
            <div class="form-check">
                <label class="form-check-label mr-2">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>

            <button class="btn btn-light" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- FORM ROW -->
        <form>
            <div class="form-row">
                <div class="col">
                    <input class="form-control" type="text" placeholder="First name">
                </div>
                <div>
                    <input class="form-control" type="text" placeholder="Last name">
                </div>
            </div>
        </form>

        <br>
        <br>

        <!-- VALIDATION -->
        <div class="form-group">
            <label for="username">Username</label>
            <input class="form-control is-valid" type="text" id="username" placeholder="Validation example ( if it's valid )" >
        </div>
        <div class="form-group">
            <label for="username">Username 2 </label>
            <input class="form-control is-invalid" type="text" id="username" placeholder="Validation example ( if Not valid )" >
        </div>
        <div>
            <label for="password">Password</label>
            <input class="form-control is-invalid" type="text" id="password" placeholder="Feedback example  ( below details )">
            <div class="invalid-feedback">
                Password not strong enough
            </div>
        </div>
        <div>
            <label for="password2">Confirm Password</label>
            <input class="form-control" type="text" id="password2">
            <div>
                Password does not match
            </div>
        </div>
/*   ---------------------- XX ------------------    */


         /*   Input Groups & Addons     */

 <!-- BASIC INPUT GROUPS -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input class="form-control" type="text" placeholder="Username">
        </div>

        <br>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username">
            <div class="input-group-append">
                <span class="input-group-text">@something.com</span>
            </div>
        </div>

        <br>

        <label for="basic-url">Custom URL</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">https://something.com/member/</span>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input class="form-control" type="text">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>

        <br>

        <!-- CHECKBOX -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="checkbox">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- RADIO -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="radio">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- MULTIPLE INPUTS -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="">Name & Email</span>
            </div>
            <input class="form-control" type="text" placeholder="Full Name">
            <input class="form-control" type="email" placeholder="Email">
        </div>

        <br>

        <!-- BUTTON ADDONS -->
        <div class="input-group mb-3">
            <input class="form-control" type="text" placeholder="Find By Name...">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Search</button>
            </div>
        </div>
/*   ---------------------- XX ------------------    */

         /*    Alerts & Progress Bars     */


        <!-- ALERTS -->
        <div class="alert alert-primary">
            <strong>Primary</strong> Blog post added
        </div>

        <div class="alert alert-secondary">
            <strong>Secondary</strong> Blog post added
        </div>

        <div class="alert alert-success">
            <strong>Success</strong> Blog post added
        </div>

        <div class="alert alert-danger">
            <strong>Danger</strong> Please check the log files
        </div>

        <div class="alert alert-info">
            <strong>Info</strong> You have a new message
        </div>

        <div class="alert alert-warning">
            <strong>Warning</strong> Please check the log files
        </div>

        <div class="alert alert-light">
            <strong>Light</strong> Please check the log files
        </div>

        <div class="alert alert-dark">
            <strong>Dark</strong> Please check the log files
        </div>


        <!-- DISMISSABLE ALERT -->
        <div class="alert alert-success alert-dismissible">
            <button class="close" type="button" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <strong>Dismissable</strong> Blog post added
        </div>

        <!-- EXTRA CONTENT -->
        <div class="alert alert-success">
            <h4 class="alert-heading">Congrats!</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dignissimos eius, sit quo assumenda totam commodi
                ipsum saepe molestias eligendi exercitationem repudiandae qui facilis deserunt non, harum ab quam? Cumque</p>
            <hr>
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio?</p>
        </div>

        <br>
        <br>

        <!-- PROGRESS BARS -->
        <div class="progress">
            <div class="progress-bar" style='width:35%'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar" style='width:80%'>80%</div>
        </div>
        <br>
        <!-- STRIPED -->
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped" style='width : 70%;'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped" style='width : 90%'>90%</div>
        </div>

        <!-- HEIGHT -->
        <div class="progress my-3" style="height:2px">
            <div class="progress-bar bg-success" style='width : 60%'></div>
        </div>
        <br>
        <!-- ANIMATED -->
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style='width:60%;'></div>
        </div>
        <div class="progress mt-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style='width:90%;'>90%</div>
        </div>

        <br>
        <!-- MULTIPLE BARS -->
        <div class="progress">
            <div class="progress-bar bg-warning" style='width:15%;'></div>
            <div class="progress-bar bg-success" style='width:25%;'>25%</div>
            <div class="progress-bar bg-primary  progress-bar-striped progress-bar-animated" style='width:10%;'>Loading Amigo</div>
        </div>
/*   ---------------------- XX ----------------
--    */

                
                /*  Tables & Pagination          */
                
        <!-- TABLE -->
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>jdoe@gmail.com</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Will</td>
                    <td>Johnson</td>
                    <td>will@yahoo.com</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Shannon</td>
                    <td>Williams</td>
                    <td>shannon@yahoo.com</td>
                </tr>
            </tbody>
        </table>

        <br>

        <!-- INVERSE/DARK TABLE -->
        <table class="table table-dark">
        </table>

        <br>

        <!-- TABLE HEAD INVERSE -->
        <table class="table">
            <thead class="thead-dark">
            </thead>
        </table>

        <br>

        <!-- STRIPED TABLE -->
        <table class="table table-striped">
        </table>

        <!-- BORDERED TABLE -->
        <table class="table table-bordered">
        </table>

        <br>

        <!-- BORDERLESS TABLE -->
        <table class="table table-borderless">
        </table>

        <br>

        <!-- HOVERABLE -->
        <table class="table table-hover">
        </table>

        <br>

        <!-- CONTEXTUAL CLASSES -->
        <table class="table">
        </table>

        <br>

        <!-- SMALL TABLE -->
        <table class="table table-sm table-hover table-striped">
        </table>

        <br>

        <!-- RESPONSIVE TABLE - Scrollbars -->
        <div class="table-responsive">
            <table class="table">
            </table>
        </div>

        <br>
        <br>

        <!-- PAGINATION -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>

        <!-- PAGINATION CENTERED -->
        <nav>
            <ul class="pagination justify-content-center">
            </ul>
        </nav>


        <!-- PAGINATION RIGHT -->
        <nav>
            <ul class="pagination justify-content-end">
                </li>
            </ul>
        </nav>



        <!-- PAGINATION LARGE -->
        <nav>
            <ul class="pagination pagination-lg">
            </ul>
        </nav>



        <!-- PAGINATION SMALL -->
        <nav>
            <ul class="pagination pagination-sm">
            </ul>
        </nav>


        <!-- WITH ARROWS -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">  
                     <span>&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">
                    <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>                
                
/*   ---------------------- XX ------------------    */
/*   Cards  */
        <!-- BLOCK -->
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
            </div>
        </div>

        <br>
        <br>

        <!-- SIMPLE CARD -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle text-muted">Card subtitle</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-outline-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH IMAGE -->
        <div class="card">
            <img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-success btn-block" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH HEADER -->
        <div class="card">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-danger" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- HEADER, FOOTER, CENTERED -->
        <div class="card text-center">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-dark" href="#">Read More</a>
            </div>
            <div class="card-footer text-muted">
                2 Days Ago
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH NAV -->
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- IMAGE OVERLAYS -->
        <div class="text-white card">
            <img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
            <div class="card-img-overlay">
                <h4 class="card-text">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content
                    is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div>


        <br>
        <br>

        <!-- BACKGROUND COLOR -->
        <div class="card bg-primary text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card bg-danger text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD OUTLINE -->
        <div class="card border-primary mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-danger mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-info mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
        <br>
        <br>

        <!-- CARD GROUP -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD DECK -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD COLUMNS -->
        <!-- CARD COLUMNS -->
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title that wraps to a new line</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                </div>
            </div>
            <div class="card p-3">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/301x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card bg-dark text-white p-3">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
            </div>
            <div class="card p-3 text-right">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card
                        has even longer content than the first to show that equal height action.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
        </div>
                
/*   ---------------------- XX ------------------    */

                
         /*   Media Object   */
                
        <!-- MEDIA OBJECT -->
        <div class="media">
            <img class="mr-3 mt-3" src="https://source.unsplash.com/random/90x90">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.
            </div>
        </div>

        <br>
        <br>

        <!-- NESTING MEDIA OBJECTS -->
        <div class="media">
            <img class="mr-3" src="https://source.unsplash.com/random/90x91">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.

                <div class="media mt-4">
                    <a href="#" class="pr-4">
                        <img src="https://source.unsplash.com/random/90x92">
                    </a>
                    <div class="media-body">
                        <h5>Nested Media</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                        congue felis in faucibus.
                    </div>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- TOP ALIGNED (DEFAULT) -->
        <div class="media">
            <img class="mr-3 align-self-start" src="https://source.unsplash.com/random/90x93">
            <div class="media-body">
                <h5>Top aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- CENTER ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-center" src="https://source.unsplash.com/random/90x94">
            <div class="media-body">
                <h5>Center aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- BOTTOM ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-end" src="https://source.unsplash.com/random/90x95">
            <div class="media-body">
                <h5>Bottom aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>
<hr>
        <!-- MEDIA LIST -->
        <ul class="list-unstyled">
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x96">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x97">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x98">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
        </ul>


     /* --------------- XX ----------- */

       /*     Jumbotron        */


    <!-- JUMBOTRON -->
    <div class="jumbotron text-center">
      <h1 class="display-4">Welcome To My Website!</h1>
      <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus perspiciatis cum vitae, modi hic?</p>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, quibusdam.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Read More</a>
    </div>

    <br>


  </div>
  <!-- ./container -->

  <!-- FLUID JUMBOTRON -->
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Fluid Jumbotron</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas recusandae voluptatibus, natus architecto asperiores
        a.
      </p>
    </div>
  </div>


     /* --------------- XX ----------- */
<div class='row'></div>
<h1 class="sm">Buttons</h1>
            <div class='row'>
              <button class='btn'>Normal Button</button>
              <button class='btn btn-backgroundColor-primary'> Primary </button>
              <button class='btn btn-backgroundColor-secondary'> Secondary </button>
              <button class='btn btn-backgroundColor-success'> Success </button>
              <button class='btn btn-backgroundColor-danger'> Danger </button>
              <button class='btn btn-backgroundColor-warning'> Warning </button>
              <button class='btn btn-backgroundColor-info'> Info </button>
              <button class='btn btn-backgroundColor-light'> Light </button>
              <button class='btn btn-backgroundColor-dark'> Dark </button>
              <button class='btn btn-backgroundColor-muted'> Muted </button>
            </div>
<h1 class="xxs">Paragraphs and other elements</h1>
              <div>
                <p class="xlg">Extra Large</p>
                <p class='lg'>Large</p>
                <p class='md'>Medium</p>
                <p class='sm'>Small</p>
                <p class='xs'>Extra Small</p>
                <p class='xxs'>Extra Extra Small</p>
              </div>
<h1 class="xxs">Headings</h1>
              <div>
                <h1 class="xlg">Extra Large</h1>
                <h1 class='lg'>Large</h2>
                <h1 class='md'>Medium</h3>
                <h1 class='sm'>Small</h4>
                <h1 class='xs'>Extra Small</h5>
                <h1 class='xxs'>Extra Extra Small</h6>
              </div>
<body class="addHelperBorders"> <!-- addHelperBorders -->
{{ define "main" }}

<!-- HTML for Photos view here -->

                    {{- $list := where .Pages ".Params.photos" "!=" nil -}}
                    {{- $len := (len $list) -}}
                    {{ range $index, $value := $list }}

					<!-- Loop through each post happens here -->
                    <!-- HTML for each item here -->

                                {{ range first 1 .Params.photos }}
									<!-- HTML for the first image here, example given -->
<a href="{{ .Permalink }}" title="{{ .Title }}"><img src="{{ . }}"></img></a>
                                {{ end }}
	
                    {{ end }}
                                      
<!-- More HTML for Photos view -->				
{{ end }}
<button accesskey="e" onclick="alert('Edit')">Edit</button>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>
<div class="layout-grid">
 <p>  Aurora UI: Blurred shapes</p>
 <div class="wrapper__aurora-ui-shape">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>
 <p>Aurora UI: Blurred gradients</p>
 <div class="wrapper__aurora-ui-gradient">
 </div>
 </div>
<style>
.layout-grid{
  display: gird;
  grid-template-columns: auto;
}

.wrapper__aurora-ui-shape {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}
.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
}
.two {
  width: 500px;
  height: 800px;
  background-color: #7C336C;
  bottom:-30px;
  left:-80px;
}
.three {
  border-radius: 100%;
  width: 450px;
  height: 450px;
  bottom:-80px;
  right:-100px;
  background-color: #B3588A;
}

.wrapper__aurora-ui-gradient {
  width: 400px;
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: 
    radial-gradient(at top left, #F0ACE0, transparent),
    radial-gradient(at top right, #FFA4B2, transparent),
    radial-gradient(at bottom left, #A7D3F2, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
    </tr>
    <tr>
        <td>Row 3, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 1</td>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>
<template>
  <table>
  	<tr>
  		<th>Checkbox</th>
      	<th>File</th>
      	<th>Name</th>
      </tr>
      <tr v-for="(row, i) in accountsToAssign" :key="row[i]">
        <td><v-checkbox @change="checkBoxes(row.id)" /></td>
		<td>{{ row.filenumber }}</td>
		<td>{{ row.name }}</td>
      </tr>
	</table>
</template>
<script>

export default {

data() {
  return {
	selectedAccounts: [],
	}
}
  
methods: {
  
  checkBoxes(value) {
      console.log(value);
      if (this.selectedAccounts.includes(value)) {
        console.log("remove " + value);
        this.selectedAccounts = this.selectedAccounts.filter((item) => {
          return item !== value;
        });
      } else {
        console.log("add " + value);
        this.selectedAccounts.push(value);
      }
      console.log(this.selectedAccounts);
    },
      
  }
}
</script>
<table>
  <tr>
    <th>a1</th>
    <th>a2</th>
    <th>a3</th>
    <th>a4</th>
    <th>a5</th>
  </tr>
  <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
    <td>b4</td>
    <td>b5</td>
  </tr>
</table>


<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #333;
  color: #ddd;
}
tr:nth-child(odd) {
  background-color: #222;
  color: #ddd;
}

tr:hover {
  background-color: #444;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1e1e1e;
  color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    if (window.location.href.indexOf("franky") > -1) {
      alert("your url contains the name franky");
    }
  });
</script>
<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<ul class="theader"><li><a href="tel:0064211536753"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg> +64 21 1536 753</li><li><a href="https://google.com">Get Started</a></li></ul>').appendTo('.header-title-nav-wrapper');
	});
	</script>
<style>
  .header-title-nav-wrapper {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
ul.theader {
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  font-family: Poppins;
    font-weight: 500;
}
  ul.theader>li:last-child a {
    background: #a3dc18;
    padding: 10px 20px;
    border-radius: 0px;
    margin-left: 10px;
    margin-right: 20px;
    color:#2a282a
}
  .theader svg {
    fill: #a3dc18;
    width: 18px;
    height: 18px;
}
  @media screen and (max-width:1024px) {
    ul.theader {display:none;}
  }
</style>
<div class="dl-box">

  <svg class="dl-svg" viewBox="0 0  160">

    <path class="dl-svg__circle" d="M0,3 a7,77 0 1,0 0,1 a77,77 0 1,0 0,-4 a77,77 0 1,0 0,154 a77,77 0 1,0 0,-154"/>
4
    <path class="dl-svg__arrow dl-svg__arrow-main" d="M80,47 v66"/>
5
    <path class="dl-svg__arrow dl-svg__arrow-side" d="M56,85 80,5"/>
6
    <path class="dl-svg__arrow dl-svg__arrow-side" d="M104,85 80,115"/>
7
    <path class="dl-svg__rotater" d="M80,3 a77,77 0 0,1 0,154 a77,77 0 0,1 0,-154"/>
8
    <path class="dl-svg__progress-plc" d="M-77,207 h3"/>

    <path class="dl-svg__triangle" d="M80,3 Q180,10 225,207 h-302"/>
10
    <path class="dl-svg__triangle-piece" d="M225,207 h15"/>
11
    <path class="dl-svg__progress" d="M-77,207 h314"/>

    <path class="dl-svg__progress-vert" d="M80,207 80,3"/>

    <path class="dl-svg__checkmark" d="M7,56 l74,52 l44,-56"/>
14
  </svg>
15
  <div class="dl-status">
.header-nav-item [href*="/login"] {
    color: #6a92d2 !important;
    border-color: #6a92d2 !important;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: .86em 1.6032em !important;
}
nav.header-nav-list {
    align-items: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}
<div class="burger">

  <span></span>

</div>

​

<nav>

  <ul class="main">

    <li><a href="#0">Home</a></li>

    <li><a href="#0">Shop</a></li>

    <li><a href="#0">About</a></li>

    <li><a href="#0">Contact</a></li>

    <li><a href="#0">Cart <span>(5)</span></a></li>

  </ul>

  

  <div class="about">

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>

  </div>

  

  <div class="social">

    <a href="#0" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"><g transform="translate(0, 0)"><path d="M64,12.2c-2.4,1-4.9,1.8-7.5,2.1c2.7-1.6,4.8-4.2,5.8-7.3c-2.5,1.5-5.3,2.6-8.3,3.2C51.5,7.6,48.1,6,44.3,6 c-7.3,0-13.1,5.9-13.1,13.1c0,1,0.1,2,0.3,3C20.6,21.6,10.9,16.3,4.5,8.4c-1.1,1.9-1.8,4.2-1.8,6.6c0,4.6,2.3,8.6,5.8,10.9 c-2.2-0.1-4.2-0.7-5.9-1.6c0,0.1,0,0.1,0,0.2c0,6.4,4.5,11.7,10.5,12.9c-1.1,0.3-2.3,0.5-3.5,0.5c-0.8,0-1.7-0.1-2.5-0.2 c1.7,5.2,6.5,9,12.3,9.1c-4.5,3.5-10.2,5.6-16.3,5.6c-1.1,0-2.1-0.1-3.1-0.2C5.8,55.8,12.7,58,20.1,58c24.2,0,37.4-20,37.4-37.4 c0-0.6,0-1.1,0-1.7C60,17.1,62.2,14.8,64,12.2z"></path></g></svg></a>
<div class="site-wrap">

​

  <nav class="site-nav">

​

    <div class="name">

      Pepper

​

      <svg width="24" height="24" viewBox="0 0 24 24">

        <path d="M.5,22C11.64,22 11.77,22 11.9,21.96C.55,21.82 .09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M,.5C18,7.43 .86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5VL3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 .85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path>
10
      </svg>
11
    </div>
12
​
13
    <ul>

      <li class="active"><a href="#">Deals</a>
15
        <ul>
16
          <li><a href="#0">Create New Deal</a></li>
17
          <li><a href="#0">Modify Deal</a></li>
18
          <li><a href="#0">Pipeline</a></li>
<div class="page-wrap">

  

  <article>

    

    <header class="article-header">  

      

      <h4 class="classification-header">

         Archaeostronomy

      </h4>

      

      <svg viewBox="0 0 560 259" class="header-lockup">

        <text transform="matrix(1 0 0 1 -0.00007 1.385)"><tspan x="0" y="0" font-family="'Montserrat'" font-size="7px">STARS</tspan><tspan x="0" y="9" font-family="'Montserrat'" font-size="1px">DEAD</tspan></text>
13
        <circle fill="#FFFFFF" cx="128.50781" cy="126.5" r="34.5"/>
14
        <text transform="matrix(1 0 0 1 114.62256 123)">
15
          <tspan x="0" y="0" font-family="'Montserrat'" font-size="px">OF</tspan><tspan x="-6.28906" y="" font-family="'Montserrat'" font-size="19px">THE</tspan>
16
        </text>
17
      </svg>
18
      
19
      <h2>
<img src="https://s.cdpn.io//NutritionFacts.gif" class="image">

​
3
<section class="performance-facts">

  <header class="performance-facts__header">

    <h1 class="performance-facts__title">Nutrition Facts</h1>

    <p>Serving Size 1/2 cup (about 2g)

      <p>Serving Per Container 8</p>
8
  </header>

  <table class="performance-facts__table">

    <thead>

      <tr>

        <th colspan="3" class="small-info">

          Amount Per Serving

        </th>

      </tr>

    </thead>

    <tbody>
HTML
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
  
CSS
.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}
const handleSubmit = (e: any) => {
    e.preventDefault()
    props.history.push('/mypath') // указывает путь куда напралять после подтвердения формы
}

<form onSubmit={handleSubmit}>
  <button type='submit'>Submit form</button>
</form>
<div class=zoom>
 <div class=image>
 <img src="http://isarta.com/infos/wp-content/uploads/2017/05/couleurs_Fotolia_118879445_S-1.jpg" alt=Text de remplacement width="500" height=""/>
 </div>
</div>

<style>
.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
</style>
//Global Variables
@dark-color:#2A282A;
@light-color:#FFFFFF;
@logo-green: #a6d843;
@box-shadow:0px 3px 15px rgba(100, 100, 100, 0.29);


///Global

//button styling
.sqs-block-button-element, .dark-bold .header-actions .btn, {
  background-color:@logo-green !important;
  color:@dark-color !important;
  font-weight: 900;
  text-transform: uppercase;
}

//Mobile Sitewide Queries
/* mobile */
@media screen and (max-width:767px) {
	h1 {
    font-size: calc((3.5 - 1) * 1.2vh + 1rem)!important;
	}
	}

// anchor links offset to deal with fixed menu

@media screen and (min-width: 640px){
  #casestudies, #testimonials, #products{
  margin-top: -90px;
  padding-top: 90px;
  pointer-events: none;
	}
}

/* mobile */
@media screen and (max-width:767px) {
	#casestudies, #testimonials, #products{
  margin-top: -30px;
  padding-top: 30px;
  pointer-events: none;
	}
}




//Styling-------------------------------------------------------------Header
//shadow to the header and reduce padding
.header .header-announcement-bar-wrapper {
 background-color: @dark-color;
  box-shadow: @box-shadow;
  -moz-box-shadow: @box-shadow;
  -webkit-box-shadow: @box-shadow;
  position: relative;
  z-index: 4;
  padding-top: 1.8vw !important;
  padding-bottom: 1.8vw !important;
}


// Center the CODE BLOCK in ------------------------------------------"HERO SECTION"

section[data-section-id="603416b17aacd44d16aec445"] {
  h1{
    margin-top:0;
  }
  #block-yui_3_17_2_1_1614030936450_6608{
    padding-top:0!important;
  }
  p{
    margin-bottom:0;
  }
  #block-yui_3_17_2_1_1614031344386_7315{
    padding-bottom:0 !important;
  }
}


// Center the CODE BLOCK in ------------------------------------------"what we can do for you"
section[data-section-id="6032d3b58e30837700e1846a"], section[data-section-id="6022047755fdbf5e4e4a0e24"] {
  	@media screen and (min-width: 640px) {
      	.sqs-row{
      	display: flex;
      	align-items: center;
      	box-sizing: border-box;
      	justify-content: center;
  	}
 	}	
  
  	.sqs-col-4{
    	background-color:@dark-color;
    	color:white;
  	}
 
  //read the case study color to white
  	.light-bold .sqs-block-html a, .light-bold .read-more-link, .light-bold .entry-excerpt a {
    color: #ffffff !important;
      text-decoration: underline !important;
}
  
  .c-tabs__tab-title{
  		font-size:1.2rem;
    	line-height:2.1rem;
    	font-weight:500;
      	padding:1rem;
  	}
  
  .c-tabs__accordion-tab{
    background-color:#dfdfdb !important;
    border: 1px solid @dark-color !important;
  }
 
  
 }


//Blog Pages Styling------------------------------------ Blog

.blog-item-wrapper .blog-item-title h1.entry-title {
    font-size: calc((3 - 1) * 1.2vw + 1rem);
}

/* mobile */
@media screen and (max-width:767px) {
  .blog-item-wrapper .blog-item-title h1.entry-title {
    font-size: calc((7 - 1) * 1.2vw + 1rem);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
.clase {
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}
.ejemplo1 {
  white-space: nowrap;
}
.ejemplo2 {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
       
    </style>
</head>
<body>
    <table>
        <tr><th>Nombre</th></tr>
        <tr>
            <td class="clase ejemplo2 "  style='width:50%'>[POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO A
                4µg&POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO C
                4µg&POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO Y
                4µg&POLISACARIDO
                MENINGOCÓCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO W-135
                4µg&PROTEINA DE
                TOXOIDE DIFTERICO
                48µg] 1Dosis/0,5ml</td>
        </tr>
        
    </table>
</body>
</html>
/* Hide this on Mobile */
@media screen and (max-width:767px) {
	[data-section-id="enter-id-here"] {
		display: none;
	}
}
/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
	[data-section-id="enter-id2-here"] {
		display: none;
	}
}
Squarespace sectionID {
  	@media screen and (min-width: 640px) {
      	.sqs-row{
      	display: flex;
      	align-items: center;
      	box-sizing: border-box;
      	justify-content: center;
  	}
 	}	
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* stacations */
div#block-5e874825130e984bfc011395 h3 {
    font-size: 20px;
}
/* recent published */
div#block-yui_3_17_2_1_1585781296243_6471 h3 {
    font-size: 20px;
}
}
/* mobile */
@media screen and (max-width:767px) {
/* stacations */
div#block-5e874825130e984bfc011395 h3 {
    font-size: 25px;
}
/* recent published */
div#block-yui_3_17_2_1_1585781296243_6471 h3 {
    font-size: 22px;
}
}
<head>
    <script src="video.js"></script>
    <script src="vectorly-videojs.js"> </script>
</head>
<body>
    
    <video id="my-video" class="video-js" data-setup="{}" src="video.mp4" ></video>
  
    <script>
        videojs.registerPlugin('vectorlyPlugin', vectorly.videoJSPlugin);

        const player = videojs('my-video');

        player.vectorlyPlugin({width: 1280, height: 720}); // Upscale to 720p (from 240p)
    </script>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<script type="text/javascript" src="js/mixpanel-library.js"></script>
	<script type="text/javascript" src="js/mixpanel.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<link rel="stylesheet" href="css/main.css">
selector {
    display: inline;
    background: white;
    padding: 3px;
    
}

selector {
    position: relative;
    left: 10px;
    padding-left: 0;
    box-shadow: 10px 0px 0 #ffffff, -10px 0 0 #ffffff;
}
ionic cordova prepare android
ionic generate page pages/contact
<div class="ion-text-center">
    <ion-card-title>Center Any Component</ion-card-title>
    <ion-button color="primary" routerLink="/page-name">Go To Page</ion-button>
</div>
<ion-list>
    <ion-item routerLink="/page1">
        <ion-icon slot="start" name="man" color="danger"></ion-icon>
        <ion-label>Menu One</ion-label>
    </ion-item>
    <ion-item routerLink="/page2">
        <ion-icon slot="start" name="book" color="danger"></ion-icon>
        <ion-label>Menu Two</ion-label>
    </ion-item>
    <ion-item routerLink="/page3">
        <ion-icon slot="start" name="heart" color="danger"></ion-icon>
        <ion-label>Menu Three</ion-label>
    </ion-item>
</ion-list>
showInterstitialAd(){
  this.admobFreeService.showInterstitialAd();
}
setTimeout(() => {
  this.admobFreeService.showBannerAd();
}, 5000);
private admobFreeService: AdmobfreeService,
import { AdmobfreeService } from '../service/admobfree.service';
import { AdMobFree } from '@ionic-native/admob-free/ngx';
import { AdmobfreeService } from './service/admobfree.service';
  showBannerAd() {
    let bannerConfig: AdMobFreeBannerConfig = {
        isTesting: true, // Remove in production
        autoShow: true,
        bannerAtTop: false,
        id: "ca-app-pub-3940256099942544/6300978111"
    };
    this.admobFree.banner.config(bannerConfig);
  
    this.admobFree.banner.prepare().then(() => {
        // success
    }).catch(e => alert(e));
  }

  showInterstitialAd() {
    this.admobFree.interstitial.isReady().then(() => {
      this.admobFree.interstitial.show().then(() => {
      })
        .catch(e =>alert("show "+e));
    })
      .catch(e =>alert("isReady "+e));
  }
private admobFree: AdMobFree,
public platform: Platform
import {
  AdMobFree,
  AdMobFreeBannerConfig,
  AdMobFreeInterstitialConfig
} from '@ionic-native/admob-free/ngx';
import { Platform } from '@ionic/angular';
ionic generate service service/admobfree
if (window.location.pathname !== "/home") {
  this.router.navigateByUrl("home");
}
<ion-header>
    <ion-toolbar color="primary">
        <ion-title>About Us</ion-title>
        <!-- Menu Icon -->
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
		<!-- Back icon -->
        <ion-buttons slot="end">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
ionic cordova build --release android
# location of keystore
storeFile=app.keystore

# Key alias
keyAlias=alias_name

# Store password
storePassword=Password1

# Key password
keyPassword=Password1
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
ionic cordova build android --prod –-release
ionic cordova run android --device --livereload
ionic cordova run android --emulator --livereload
(click)="showInterstitialAd()"
showInterstitialAd() {
  this.admobFree.interstitial.isReady().then(() => {
    this.admobFree.interstitial.show().then(() => {
    })
      .catch(e =>alert("show "+e));
  })
    .catch(e =>alert("isReady "+e));
}
platform.ready().then(() => {
  this.admobFree.interstitial.config(this.interstitialConfig);
  this.admobFree.interstitial.prepare()
    .then(() => { }).catch(e => alert(e));
});

this.admobFree.on('admob.interstitial.events.CLOSE').subscribe(() => {
  this.admobFree.interstitial.prepare()
    .then(() => {}).catch(e => alert(e));
});
interstitialConfig: AdMobFreeInterstitialConfig = {
    isTesting: true, // Remove in production
    autoShow: false,
    id: "ca-app-pub-3940256099942544/1033173712"
};
import { Platform } from '@ionic/angular';
setTimeout(() => {
  this.showBannerAd();
}, 3000);
showBannerAd() {
  let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true,
      bannerAtTop: false,
      id: "ca-app-pub-3940256099942544/6300978111"
  };
  this.admobFree.banner.config(bannerConfig);

  this.admobFree.banner.prepare().then(() => {
      // success
  }).catch(e => alert(e));
}
private admobFree: AdMobFree
import { AdMobFree, AdMobFreeBannerConfig,AdMobFreeInterstitialConfig, AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free/ngx';
import { AdMobFree } from '@ionic-native/admob-free/ngx';
npm install @ionic-native/admob-free
ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-2387490687776151~80XXXXXXX9"
ionic cordova resources android
ionic cordova platform add android
// Exit App on back button click from Home page
this.platform.backButton.subscribeWithPriority(0, () => {
  if (window.location.pathname == "/home") {
    navigator['app'].exitApp();
  }
});
// Set new Home page
this.router.navigateByUrl("home");
private router: Router
import { Router } from '@angular/router';
<ion-icon name="home" size="large"></ion-icon>
<ion-card>
    <ion-grid>
        <ion-row class="ion-text-center">
            <ion-col size="4" routerLink="/page1">
                <ion-icon name="home" color="danger" size="large"></ion-icon>
                <p>Home</p>
            </ion-col>
            <ion-col size="4" routerLink="/page2">
                <ion-icon name="bag-add" color="danger" size="large"></ion-icon>
                <p>About</p>
            </ion-col>
            <ion-col size="4" routerLink="/page3">
                <ion-icon name="chatbox" color="danger" size="large"></ion-icon>
                <p>Contact</p>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-card>
<ion-list>
  <ion-item>
      <ion-card-title>List title here</ion-card-title>
  </ion-item>
  <ion-item>
      <ion-label>Item One</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Two</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Three</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Four</ion-label>
  </ion-item>
</ion-list>
<audio src="/assets/audio/audio.mp3" controls></audio>
<div style="width: 100%; border-top: 1px solid #d4d4d4; margin: 8px 0;"></div>
<a href="https://google.com">Open Google</a>
<ion-button color="primary" routerLink="/page-name">Go To Page</ion-button>
<ion-img src="/assets/images/profile.jpg"></ion-img>
let input = document.getElementById('search');
input.addEventListener("keyup", search);

function search() {
    let inputVal = input.value;
    // input = input.toLowerCase();
    let li = document.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toLowerCase().includes(inputVal)) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
<p>
  This is come text content. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab cumque nemo facere id aut ut perferendis alias dolorum tenetur quo!  
</p>
<ion-card style="box-shadow: none;">
<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Card content goes here...
    Card content goes here...
    Card content goes here...
  </ion-card-content>
</ion-card>
HEIGHT : 1% ~ 1vh
WIDTH  : 1% ~ 1vw
npm install -g @ionic/cli
<ion-card>

      <iframe height="315" width="100%" src="https://www.youtube-nocookie.com/embed/ky91CTgmZ0g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
  </ion-card>
Hello, 
I can work on your website.
I have experience in working with html, css, bootstrap, jquery, animations, javascript.
I already have developed many templates.
I deliver work with excellent code quality.
If you will work with me for a project then you will find me a long term partner. 
we can negotioate on price over chat.
thank you.
<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>
<label>[text* your-name placeholder "Your name"] </label>

<label>[email* your-email placeholder "Your email"] </label>

<label>[textarea* your-message placeholder "Your message"] </label>

[submit "Submit"]
@inject HttpClient httpClient

@if (States != null)
{

<select id="SearchStateId" name="stateId" @onchange="DoStuff" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}


@code {
[Parameter] public string InitialText { get; set; } = "Select State";
private KeyValue[] States;
private string selectedString { get; set; }
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private void DoStuff(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    Console.WriteLine("It is definitely: " + selectedString);
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}
<div tabindex="0">I need keyboard focus!</div>

<button accesskey="b">Important Button</button>

<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>
<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>
<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>
First, make sure you have the Emmet extension installed. Once you have it, Ctrl + Shift + P to go to the command pallete and search “Emmet balance Outward”.
That should select all the inner HTML and the wrapping tag. If you’re looking to only select the inner HTML, then choose Emmet Balance Inward.
Now you’ll likely want to make a shortcut to one or both of these. File > Preferences > Keyboard Shortcuts. Search for the Emmet command and associate your key combination of choice.
<link rel="shortcut icon" type="img/png" href="assets/img/favicon.png">
<style>
.divider_wrapper {
    padding-bottom: 30px;
    padding-top: 60px;
}
.divider {
    position: relative;
    margin-top: 0px;
    height: 1px;
}
.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right,transparent,#aaa,transparent);
}
.div-arrow-down:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -7px;
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: white;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
</style>
<div class="divider_wrapper">
  <div class="divider div-transparent div-arrow-down">
  </div>
</div>
<!-- Tab links -->
		<div class="tab">
			<button class="tablinks tab-font" onclick="openCity(event, 'footer')">Footer</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'projects')">Projects</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'disclaimer')">disclaimer</button>
		</div>

		<!-- Tab content -->
		<div id="projects" class="tabcontent">
			<h2>Projects</h2>
			<h3>Hey, If your reading this you obviously wanna find out about more of my projects</h3>
		</div>

		<div id="footer" class="tabcontent">
			<h3><a href="./index.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Home</strong></a></h3>
            <h3><a href="./pages/about.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>About</strong></a></h3>
			<h3><a href="./pages/projects.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Projects</strong></a></h3>
            <h3><a href="#" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Contact</strong></a></h3>
            <p class="copyright">&copy;2020 WHY?</p>
		</div>

		<div id="disclaimer" class="tabcontent">
			<h2>Disclaimer</h2>
			<p><strong>THIS IS JUST A JOKE!
                <br>
                <br>
                I dont truely think this of python, I think python is a great language and would love to learn,<br>
                all of the acusations above are comepletely false and should not be followed.<br>
                Please respect what i am doing and dont hate on the joke.</strong>
			</p>
		</div>
            
 <!-- CSS -->
 		<style>
              .-link {
    color: rgb(0, 0, 0);
    text-decoration: none;
}
  
.-link-title {
    color: #000000;
    text-decoration: none;
    padding-left: 5rem;
}

.tablinl {
    padding: 5px
}

.tab-font {
    font-weight: bold;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
		</style>
<div class="container-fluid" style="background: #1f52a3;">
	<div class="row">
		<div class="col-2"></div>
		<div class="col-8">
			<a href="/205CDE/Assignment/home.php"><h1 style="text-align: center; color: #e6e8eb; margin: 20px 0;">U Chen Daily</h1></a>
		</div>
		<div class="col-2 d-flex justify-content-center align-items-center"><a href="/205CDE/Assignment/manageNews.php" target="_blank" class="btn btn-outline-light">LOGIN</a></div>
	</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="/205CDE/Assignment/home.php"><i class="fas fa-home" style="font-size: 30px; color: #1f52a3;"></i></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item dropdown" style="margin: 0 15px;">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<?php
						$newsCategoryArr = array(
						'All', 'Nation', 'World',
						'Sport', 'Entertainment',
						);
						foreach($newsCategoryArr as $newsType){
							echo "<a class=\"dropdown-item\" href=\"/205CDE/Assignment/news$newsType.php\" target=\"_blank\">$newsType</a>";
						}
					?>
				</div>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/aboutUs.php" target="_blank">About Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/contactUs.php" target="_blank">Contact Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/faqs.php" target="_blank">FAQs</a>
			</li>
			<!-- <li class="nav-item"> -->
			<!-- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> -->
			<!-- </li> -->
		</ul>
		<!-- <form class="form-inline my-2 my-lg-0"> -->
		<!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> -->
		<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
		<!-- </form> -->
	</div>
</nav>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	
    <!-- U Chen CSS -->
	<link rel="stylesheet" href="homeStyle.css">
	
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
	
	<!-- Font Awesome Icons -->
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Admin</title>
		<script>
			
		</script>
	</head>
	<body>
		<!--using external files-->
		<?php require('header.html'); ?>
		<div class="container" style="margin: 20px;">
			<div class="row">
				<div class="col-sm"><h3 style="color: #1f52a3;">Manage News</h3></div>
			</div>
		</div>
		<div class="container-fluid bg-light" style="padding: 30px 10px;">
			<div class="row bg-light" style="margin: 0 35px;">
				<div class="col-6">
					<h5>All News</h5>
				</div>
				<div class="col-6 d-flex justify-content-end">
					<button type="button" class="btn btn-primary" style="background: #1f52a3;" data-toggle="modal" data-target="#addNewsModal"><i class="fas fa-plus" style="font-size: 20px;"></i> Add News</button>
				</div>
			</div>
			
			<!--add news modal START-->
			<!-- Modal -->
			<div class="modal fade bd-example-modal-lg" id="addNewsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Add News</h5>
							<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>-->
						</div>
						<form action="/205CDE/Assignment/admin.php" method="post">
							<div class="modal-body">
								<div class="form-group">
									<label for="inputNewsTitle">News Title:</label>
									<input type="text" class="form-control" name="txtNewsTitle" id="inputNewsTitle" aria-describedby="emailHelp" placeholder="Enter news title">
								</div>
								<div class="form-group">
									<label for="selectNewsCategory">News Category:</label>
									<select class="form-control" name="selectNewsCategory" id="selectNewsCategory">
										<?php
											$newsCategoryArr = array(
											'--Select news category--' => "",
											'Nation' => 1,	'World' => 2,
											'Sport' => 3,	'Lifestyle' => 4,
											'Food' => 5,	'Tech' => 6,
											'Education' => 7
											);
											foreach($newsCategoryArr as $newsType => $newsNum){
												echo "<option value=\"$newsType\">$newsType</option>";
											}
										?>
									</select>
								</div>
								<div class="form-group">
									<label for="inputNewsDetails" class="col-form-label">News Details:</label>
									<textarea class="form-control" name="txtNewsDetails" id="inputNewsDetails" rows="10"></textarea>
								</div>
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
								<button type="submit" class="btn btn-primary" name="btnAddNews" style="background: #1f52a3;">Add</button>
								<input type="hidden" name="submitted" value="true"/>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!--add news modal END-->
			<!--connect & insert news into database START-->
			<?php			
				if (isset($_POST['submitted'])){
					//connect database
					$dbc = mysqli_connect('localhost', 'root', '');
					//select database
					mysqli_select_db($dbc, 'news');
					
					$problem = FALSE;
					
					if(!empty($_POST['txtNewsTitle']) && !empty($_POST['selectNewsCategory']) && !empty($_POST['txtNewsDetails'])){
						$newsTitle = trim($_POST['txtNewsTitle']);
						$newsDetails = trim($_POST['txtNewsDetails']);
						$newsCategory = trim($_POST['selectNewsCategory']);
						}else{
						echo '<p>Error! Please enter title and details select category!</p>';
						$problem = TRUE;
					}
					
					if(!$problem){
						$query = "INSERT INTO news (news_title, news_details, news_category, news_datetime) 
						VALUES ('$newsTitle', '$newsDetails', '$newsCategory', NOW())";
						if(mysqli_query($dbc, $query)){
							echo '<p>Added successfully!</p>';
							}else{
							echo '<p>Error! '.mysqli_error($dbc).'</p>';
							echo '<p>Query: '.$query.'</p>';
						}
					}
					mysqli_close($dbc);
				}
			?>
			<!--connect & insert news into database END-->
			<!--news table START-->
			<div class="card-deck" style="margin: 15px 50px;">
				<table class="table table-hover bg-light">
					<thead class="thead-light">
						<tr>
							<th scope="col">News ID</th>
							<th scope="col">News Datetime</th>
							<th scope="col">News Title</th>
							<th scope="col">News Details</th>
							<th scope="col">News Category</th>
							<th scope="col">Edit/Delete</th>
						</tr>
					</thead>
					<tbody>
						<!--select news from database START-->
						<?php
							$dbc = mysqli_connect('localhost', 'root', '');
							mysqli_select_db($dbc, 'news');
							
							$query = 'SELECT * FROM news ORDER BY news_id ASC';
							
							if($r = mysqli_query($dbc, $query)){
								while($row = mysqli_fetch_array($r)){
									echo "<tr>
									<th scope=\"row\">{$row['news_id']}</th>
									<td>{$row['news_datetime']}</td>
									<td>{$row['news_title']}</td>
									<td>{$row['news_details']}</td>
									<td>{$row['news_category']}</td>
									<td>
									<button type=\"button\" class=\"btn btn-info\"><i class=\"fas fa-edit\" style=\"font-size: 20px;\"></i></button>
									<button type=\"button\" class=\"btn btn-danger\"><i class=\"fas fa-trash\" style=\"font-size: 20px;\"></i></button>
									</td>
									</tr>";
								}
								}else{
								echo '<p>Error! '.mysqli_error($dbc).'</p>';
							}
							
							mysqli_close($dbc);
						?>
						<!--select news from database END-->
					</tbody>
				</table>
			</div>
			<!--news table END-->
		</div>
	</body>
</html>
border-radius: ArI ArD AbD AbI;
<button type="button" class="btn btn-primary">Blue</button>
<button type="button" class="btn btn-secondary">Grey</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-warning">Yellow</button>
<button type="button" class="btn btn-info">Ligth blue</button>
<button type="button" class="btn btn-light">White</button>
<button type="button" class="btn btn-dark">Black</button>

<button type="button" class="btn btn-link">White with blue text</button>
$sgbd=new mysqli("localhost", $user, $pass, "productos");
if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
    echo "Connection successful";
}
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

list.insertAdjacentHTML('beforebegin', myDiv);
image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('beforebegin', tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('afterend', tempDiv);
  }
  setListener(tempDiv);
});
<style>
th, td {
    padding: 22px;}
    h2 {color:orange}
      body {background-color:White }
    legend   {color:orange}
    fieldset   {border: 2px solid green;}
    /*input {background-color: orange}*/
    /*input{ color: green }*/
    #place_order{
        float: right;
        background-color: orange;
        color: #ffffff;
        border-color: green;
    }
</style>

<table style="width:100%"></table>
	  <h2>Dado tea lunch special</h2>
	 <rt>
	  	<th>Monday to friday</th>
	</rt>	
	  <br>11am - 2pm
	 <br>$9.95 plus tax<br>
	 <rt>
	 	<th></th>
	 </rt>
	 <br>Include sandwich,snack,and drink<br>
	<fieldset>
        <legend>Order Information:</legend>
        Name:<input type="text"name="order_name"> <br>
        Here<input type="radio" name="order_option"><br>
        To go<input type="radio"name="order_option"><br>
  </fieldset>

  <fieldset>
            <legend>Sandwiches:</legend>
             <b>Monday</b>
             <br>
            Tommato<input type="radio" name="option1">
            <br>
             Chicken salad<input type="radio"name="option1">
             <br>
             <b>Tuesday</b>
             <br>
            Greak salad wrap<input type="radio" name="option2">
            <br>
            Toto wrap<input type="radio"name="option2">
            <br>
            <b>wednesday</b>
            <br>
            Red pepper hummas<input type="radio" name="option3">
            <br>
            Rosted turkey<input type="radio"name="option3">
            <br>
             <b>Thusday</b>
             <br>
            Carrot-ginger hummas wrap<input type="radio" name="option4">
            <br>
            Chicken salad<input type="radio"name="option4">
            <br>
            <b>Friday</b>
            <br>
             Dado Wrap<input type="radio" name="option5"> <br>
             Tuna salad<input type="radio"name="option5"> <br>
  </fieldset>


  <fieldset>
  	<legend>Snack:</legend>
    <b>Snack</b><br>
    Apple<input type="radio" name="order_option1"><br>
    Bannana<input type="radio"name="order_option1"><br>
    Potato chips<input type="radio"name="order_option1"><br>
  </fieldset>
<fieldset>
	<legend>Drinks:</legend>
	<b>Drinks</b><br>
	<select name="items" id="items">
	  <option value="Hot black tea-keemun">Hot black tea-keemun</option>
	  <option value="salad">salad</option>
	  <option value="burgar">burgar</option>
	  <option value="pizza">pizza</option>
	</select><br>
<input type="submit" id="place_order" value="Place Order"> 
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('dashboard') }}">
                        <x-jet-application-mark class="block h-9 w-auto" />
                    </a>
                </div>

                <!-- Navigation Links -->
                <div class=" space-x-8 sm:-my-px sm:ml-10 sm:flex">
                    <x-jet-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                        {{ __('Dashboard') }}
                    </x-jet-nav-link>
                </div>
            </div>

            <!-- Settings Dropdown -->
            <div class=" sm:flex sm:items-center sm:ml-6">
                <x-jet-dropdown align="right" width="48">
                    <x-slot name="trigger">
                         @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                            <button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
                                <img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                            </button>
                         @else
                            <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
                                <div>{{ Auth::user()->name }}</div>

                                <div class="ml-1">
                                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </button>
                        @endif
                    </x-slot>

                    <x-slot name="content">
                        <!-- Account Management -->
                        <div class="block px-4 py-2 text-xs text-gray-400">
                            {{ __('Manage Account') }}
                        </div>

                        <x-jet-dropdown-link href="{{ route('profile.show') }}">
                            {{ __('Profile') }}
                        </x-jet-dropdown-link>

                        @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                            <x-jet-dropdown-link href="{{ route('api-tokens.index') }}">
                                {{ __('API Tokens') }}
                            </x-jet-dropdown-link>
                        @endif

                        <div class="border-t border-gray-100"></div>

                        <!-- Team Management -->
                        @if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Manage Team') }}
                            </div>

                            <!-- Team Settings -->
                            <x-jet-dropdown-link href="{{ route('teams.show', Auth::user()->currentTeam->id) }}">
                                {{ __('Team Settings') }}
                            </x-jet-dropdown-link>

                            @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
                                <x-jet-dropdown-link href="{{ route('teams.create') }}">
                                    {{ __('Create New Team') }}
                                </x-jet-dropdown-link>
                            @endcan

                            <div class="border-t border-gray-100"></div>

                            <!-- Team Switcher -->
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Switch Teams') }}
                            </div>

                            @foreach (Auth::user()->allTeams() as $team)
                                <x-jet-switchable-team :team="$team" />
                            @endforeach

                            <div class="border-t border-gray-100"></div>
                        @endif

                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-jet-dropdown-link href="{{ route('logout') }}"
                                                onclick="event.preventDefault();
                                                            this.closest('form').submit();">
                                {{ __('Logout') }}
                            </x-jet-dropdown-link>
                        </form>
                    </x-slot>
                </x-jet-dropdown>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <x-jet-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-jet-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="flex items-center px-4">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                </div>

                <div class="ml-3">
                    <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                    <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
                </div>
            </div>

            <div class="mt-3 space-y-1">
                <!-- Account Management -->
                <x-jet-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')">
                    {{ __('Profile') }}
                </x-jet-responsive-nav-link>

                @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                    <x-jet-responsive-nav-link href="{{ route('api-tokens.index') }}" :active="request()->routeIs('api-tokens.index')">
                        {{ __('API Tokens') }}
                    </x-jet-responsive-nav-link>
                @endif

                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <x-jet-responsive-nav-link href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                        {{ __('Logout') }}
                    </x-jet-responsive-nav-link>
                </form>

                <!-- Team Management -->
                @if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
                    <div class="border-t border-gray-200"></div>

                    <div class="block px-4 py-2 text-xs text-gray-400">
                        {{ __('Manage Team') }}
                    </div>

                    <!-- Team Settings -->
                    <x-jet-responsive-nav-link href="{{ route('teams.show', Auth::user()->currentTeam->id) }}" :active="request()->routeIs('teams.show')">
                        {{ __('Team Settings') }}
                    </x-jet-responsive-nav-link>

                    <x-jet-responsive-nav-link href="{{ route('teams.create') }}" :active="request()->routeIs('teams.create')">
                        {{ __('Create New Team') }}
                    </x-jet-responsive-nav-link>

                    <div class="border-t border-gray-200"></div>

                    <!-- Team Switcher -->
                    <div class="block px-4 py-2 text-xs text-gray-400">
                        {{ __('Switch Teams') }}
                    </div>

                    @foreach (Auth::user()->allTeams() as $team)
                        <x-jet-switchable-team :team="$team" component="jet-responsive-nav-link" />
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</nav>
onsubmit="return false;"
<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Home</title>
	</head>
	<style>
		@media only screen and (min-width: 893px) {
		.card-img-top{
		width: 100%;
		height: 15vw; 
		object-fit: cover;
		}
		}
		
		.card-body{
		background: #1f52a3;
		}
		
		.card-footer{
		background: #1f52a3;
		}
		
		.h5{
		color: #1f52a3;
		}
		
		.card-text{
		font-size: 12px;
		}
	</style>
	<body class="bg-light">
		<!--using external files-->
		<?php require('header.php'); ?>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--4 latest news START-->
		<div class="container-fluid bg-light" style="padding: 40px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-6">
					<h5 style="color: #1f52a3;">Latest News</h5>
				</div>
				
				<div class="col-6 d-flex justify-content-end">
					<a href="" class="btn btn-link font-weight-bold" style="color: #1f52a3;">MORE NEWS <i class="fas fa-angle-double-right" style="font-size: 18px;"></i></a>
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 latest news END-->
		<!--4 nation news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Nation News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Nation" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php	
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 nation news END-->
		<!--4 world news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">World News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="World" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 world news END-->
		<!--4 entertainment news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0; margin-bottom: 40px;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Entertainment News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Entertainment" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 entertainment news END-->
		<!--using external files-->
		<?php require('footer.html'); ?>
	</body>
</html>				
 <button onClick={() => toggleShow(!show)} className={`navbar-toggler ${show ? '' : 'collapsed'}`} type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded={`${show ? 'false' : 'true'}`} aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
 <ul className="navbar-nav ml-2 mt-2 mt-lg-0">
          <li className="nav-item">
            <NavLink className="nav-link" to="/" activeStyle={activeStyle} exact>
              <FaHome size={28} />
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink className="nav-link" to="/new" activeStyle={activeStyle}>
              <FaPlus size={28} />
            </NavLink>
          </li>
        </ul>
<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>
<picture>
<source media='(max-width: 1024px)' srcset='<?php echo get_template_directory_uri()?>/images/demo/work-image-bg--mobile.jpg' class="project__bg--mobile" alt="">
<img src="<?php echo get_template_directory_uri()?>/images/demo/work-image-bg.jpg" class="project__bg--desktop" alt="" />
</picture>
<html></html>
<!DOCTYPE html>
<html>
<body>
​
<h2>My First JavaScript</h2>
​
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
​
<p id="demo"></p>
​
</body>
</html> 
​
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>My Google Chrome™ Extensions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_blank">
</head>
<body>
<b>Generated:</b> Thu, 27 Aug 2020 20:16:47 GMT<br>
<b>User Agent:</b> Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36<br>
<br>
<b>Extensions:</b> 11<ul><li> <a href="https://chrome.google.com/webstore/detail/aapbdbdomjkkjkaonfhkkikfgjllcleb" target="_blank">Google Translate</a> v2.0.9
<br><i>View translations easily as you browse the web. By the Google Translate team.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ajiejmhbejpdgkkigpddefnjmgcbkenk" target="_blank">Clipboard History Pro: best productivity tool</a> v3.5.2
<br><i>Clipboard manager extension for your browser: history of copied text, sync clipboard items, instant paste</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/baohinapilmkigilbbbcccncoljkdpnd" target="_blank">Shortcuts for Google™</a> v22.1.0
<br><i>Choose from 800+ Google™ shortcuts to show up as buttons in a space-saving popup</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/chdafcbnfkfenoeejpaeenpdamhmalhe" target="_blank">Share Extensions</a> v0.1.9
<br><i>Export your favorite Google Chrome™ extensions as BBCode, HTML, Wiki, Markdown or text. Share extensions via Twitter, Google Mail™.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/clngdbkpkpeebahjckkjfobafhncgmne" target="_blank">Stylus</a> v1.5.13
<br><i>Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ghbmnnjooekpmoecnnnilnnbdlolhkhi" target="_blank">Google Docs Offline</a> v1.13.0
<br><i>Edit, create, and view your documents, spreadsheets, and presentations — all without internet access.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jniljaamodclkmphgkgkooplflhkadpg" target="_blank">Gmail Sender Icons</a> v2.1
<br><i>Quickly identify the sender of email messages in Gmail without opening the message.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kniehgiejgnnpgojkdhhjbgbllnfkfdk" target="_blank">SimpleExtManager</a> v1.4.8
<br><i>A simple menu to enable, disable and access options of extensions.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/niloccemoadcdkdjlinkgdfekeahmflj" target="_blank">Save to Pocket</a> v3.0.6.8
<br><i>The easiest, fastest way to capture articles, videos, and more.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pekljbkpgnpphbkgjbfgiiclemodfpen" target="_blank">Da Vinci Tools</a> v2020.6.24
<br><i>The Supermetrics Google Marketing Platform power tools for smart digital marketers and analysts.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/annlhfjgbkfmbbejkbdpgbmpbcjnehbb" target="_blank">Save Code</a> v1.1.2.1
<br><i>Save & organize code snippets that work</i></li>
</ul>
<br>
<b>Disabled Extensions:</b> 163<ul><li> <a href="https://chrome.google.com/webstore/detail/aadahadfdmiibmdhfmpbeeebejmjnkef" target="_blank">Cluster - Window & Tab Manager</a> v2.2.6
<br><i>Window and Tab manager for managing multiple open tabs and windows with simplicity.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/aiiaandmkmekfhembfoghdnfiiiedhhk" target="_blank">Cacher</a> v1.0.8
<br><i>Save code snippets from anywhere on the web. Companion extension to Cacher, the code snippet organizer for pro developers.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ailcmbgekjpnablpdkmaaccecekgdhlh" target="_blank">Workona</a> v2.15.1
<br><i>Organize your work in the browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/akdgnmcogleenhbclghghlkkdndkjdjc" target="_blank">SEOquake</a> v3.8.5
<br><i>SEOquake is a free plugin that provides you with key SEO metrics, along with other useful tools such as SEO Audit and many others</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/alogfnakemilhfnffefhakibpphibafe" target="_blank">LaterTabs</a> v0.1.0
<br><i>Save for tabs for later reading</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/apmmpaebfobifelkijhaljbmpcgbjbdo" target="_blank">Stylus (beta)</a> v1.5.13
<br><i>Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/beaalofkiocejchbpaocbbjhobmambpp" target="_blank">Markd - Save & Tag People on LinkedIn Twitter</a> v3.8.0
<br><i>The quickest way to remember and organise people you find online.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm" target="_blank">Web Developer</a> v0.5.4
<br><i>Adds a toolbar button with various web developer tools.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bhngmgdidjmeidaipaaofefjkehlljof" target="_blank">PPC NegativeKeywords Tool</a> v3.0.46
<br><i>Позволяет собирать слова по клику из поисковых отчетов</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bijakfpegjnjmfdoiloebhaemhomjkon" target="_blank">qSnap: Screen Capture, Screenshot, Annotation</a> v1.4.1.1
<br><i>Get more out of your screen captures! Free - Cross Browser - Multiple Page Screen Capture - Rich Annotation - Awesome!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/blipmdconlkpinefehnmjammfjpmpbjk" target="_blank">Lighthouse</a> v100.0.0.0
<br><i>Lighthouse</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bncbcpnjglcbgoambglmmfoakffngkjg" target="_blank">Sender icons for Gmail™</a> v0.1.1
<br><i>Add a sender icon for all emails in your Gmail inbox.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bnimbjbohdeakocjbldadiggnlmlgmie" target="_blank">Copy Host</a> v1.0
<br><i>This extension allows you to copy hostname of the current tab to your clipboard.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bnohaknhjanaejcegmlbhiknhcfkajbb" target="_blank">Listly</a> v0.4.0
<br><i>The Listly Chrome Extension allows users to quickly add items to their lists on Listly while browsing the web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/boljkhffeonkhcipdflndnljbhigbhhe" target="_blank">Mailto: Set Default Email to Gmail by cloudHQ</a> v1.0.0.3
<br><i>Set Gmail as default email application when clicking on an email address on the internet</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bpconcjcammlapcogcnnelfmaeghhagj" target="_blank">Nimbus Screenshot & Screen Video Recorder</a> v9.2.7
<br><i>Screen Capture FULL Web page or any part. Edit screenshots. Record screencasts - record video from your screen.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cbfllaanijkpjgnolhfhephemiccnacj" target="_blank">Bublup</a> v2.0.3
<br><i>Save any web page and discover fascinating content.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cejmhmbmafamjegaebkjhnckhepgmido" target="_blank">GistBox Clipper</a> v1.0.6
<br><i>Save code snippets from anywhere on the web. Companion extension to GistBoxApp.com.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cfifjihfoegnccifkcdomdookdckhaah" target="_blank">Clip To WorkFlowy</a> v2.0.8
<br><i>Bookmark websites in WorkFlowy</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/chbmoagfhnkggnhbjpoonnmhnpjdjdod" target="_blank">WMS Everywhere</a> v0.9
<br><i>Unlimited on-demand keyword research data inside Google search results.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/chhjhjenclgckimdcpakckbmdkdaohbp" target="_blank">DomEye: Discover websites from the same owner</a> v1.3.3
<br><i>Reveal other websites on the same server, with the same IP address, Analytics ID, Adsense ID, Amazon affiliate ID or email address.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cjbjepchlgclmpinlbbeinajphohgfod" target="_blank">Screen capture, screenshot share/save</a> v2423.38.46.352
<br><i>Capture a region, visible content of a tab, or a horizontally/vertically scrollable page as a searchable image & bookmark it.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cmbmkopbnnbhdeknahmdkfkjogdlbdjf" target="_blank">WorkFlowy colorful tags</a> v0.2.4
<br><i>Allows to assign color to tags in Workflowy</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cmddjimnbiilckakmjjljdjinelkpine" target="_blank">Element Path Finder</a> v1.6
<br><i>Displays DOM item details (path, id, class name) when mousing over it.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cnmnalakipnobjijcnnnkbpeejjhhdkn" target="_blank">Save to Bookmark OS</a> v1.7
<br><i>Save bookmarks easily to Bookmark OS</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/daejfbkjipkgidckemjjafiomfeabemo" target="_blank">ObservePoint Tag Debugger</a> v1.20.4
<br><i>Troubleshoot and audit analytics tags, variables and on-click events. Supports Adobe Analytics, Google Analytics, Ensighten and more</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dapjbgnjinbpoindlpdmhochffioedbn" target="_blank">BuiltWith Technology Profiler</a> v3.1
<br><i>Find out what the website you are visiting is built with using this extension.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo" target="_blank">Tampermonkey</a> v4.10
<br><i>The world's most popular userscript manager</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dhpaponoajbgfahgmcbchndpjbooapog" target="_blank">Keyword Modifier</a> v2.1.0
<br><i>Modify your PPC keywords in bulk.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/djfkcofpclibgmphomlbpgndljnffegm" target="_blank">middlespot</a> v4.0.1
<br><i>Desktop The Web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/djjaamgbkmlhpfgodinngfeolfbenehm" target="_blank">Chrome Tools</a> v1.2.5
<br><i>Increase productivity with Chrome tools & shortcuts</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dkpejdfnpdkhifgbancbammdijojoffk" target="_blank">Logitech Smooth Scrolling</a> v6.65.62
<br><i>Buttery-smooth scrolling for Logitech mice and touchpads.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dlapbpopbcangbnjdhajdlanbfokjaja" target="_blank">Refind</a> v4.0.4
<br><i>Quickly save links from around the web.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dodniekpimecafnhdbfaihfgdgbihhjl" target="_blank">Snipit - organize, share, collaborate</a> v2.3.0
<br><i>Code snippets for teams and individuals. Save and organize your code snippets in the cloud. Share and collaborate with team members.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ebclocabgheinkhjdkjchepmohbfjbjo" target="_blank">Stash</a> v1.0.14
<br><i>Quickly and easily send links to Stash (stash.ai) from your browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ecpipjjckcegdmapdifgigmempnikcjg" target="_blank">Freezetab</a> v1.9.0
<br><i>A powerful alternative to bookmarks.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/edacconmaakjimmfgnblocblbcdcpbko" target="_blank">Session Buddy</a> v3.6.4
<br><i>Manage Browser Tabs and Bookmarks with Ease</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/edbkhhpodjkbgenodomhfoldapghpddk" target="_blank">Google PageSpeed Insights Extension</a> v2.2.5
<br><i>Check PageSpeed Insights score with a single click</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ehgfhkodigidecolffkimkobciiilogg" target="_blank">MyFavs.in</a> v3.4.0
<br><i>All the precious favorite things you find on the internet. All in one place.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/eignhdfgaldabilaaegmdfbajngjmoke" target="_blank">Black Menu for Google™</a> v23.1.0
<br><i>The easiest access to the Google universe</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/einhnnefagbomefmjgjckbbenopepdhg" target="_blank">Alarm Clock</a> v1.0
<br><i>Displays the day, date, and time for Google Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ejfnjjfimjllfmeohacobipgepnilapm" target="_blank">Quick Launcher</a> v1.4.16
<br><i>Smart links organizer. Create collection of related links or add urls of different environments(uat, prod) of various deployed apps</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/eklpkhjmgcepjljfmpmdaeicgoemojjb" target="_blank">Search phrases related in Google</a> v2.0.3
<br><i>Shows all phrases related to search. Easy to get new phrases for improve your SEO and SERP.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fdgfkebogiimcoedlicjlajpkdmockpc" target="_blank">Facebook Pixel Helper</a> v2.1.0
<br><i>The Facebook Pixel Helper is a troubleshooting tool that helps you validate your pixel implementation.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fehcbmngdgagfalpnfphdhojfdcoblgc" target="_blank">Airtable web clipper</a> v1.9.2
<br><i>Clip web content to your Airtable bases.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ffdaeeijbbijklfcpahbghahojgfgebo" target="_blank">Gyazo</a> v3.2.1
<br><i>Grab any image on the web and share it instantly.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ffljdddodmkedhkcjhpmdajhjdbkogke" target="_blank">Datalayer Checker</a> v2.3.15
<br><i>The easiest way to debug and check the dataLayer implementations without having to use the browser console!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fggkaccpbmombhnjkjokndojfgagejfb" target="_blank">Tactiq for Google Meet</a> v1.0.3
<br><i>Save Transcription From Google Meet.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe" target="_blank">Stylish - Custom themes for any website</a> v2.0.9
<br><i>Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fnbdnhhicmebfgdgglcdacdapkcihcoh" target="_blank">Page Analytics (by Google)</a> v1.7.7
<br><i>The Page Analytics Chrome Extension allows you to see how customers interact with your web pages.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fpnmgdkabkmnadcjpehmlllkndpkmiak" target="_blank">Wayback Machine</a> v2.13
<br><i>Reduce annoying 404 pages by automatically checking for an archived copy in the Wayback Machine.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fppjbihjmidhgfmacekmdmkgppfcipbl" target="_blank">Voila Web Screenshot</a> v1.0
<br><i>Capture webpages in a variety of ways from within your browser!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gbnbjofldlbajdfbalillihmiljnekkk" target="_blank">Clipd.io | Visual Bookmarks Manager</a> v0.1.8
<br><i>Bookmarks Manager for the Modern Web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gcalenpjmijncebpfijmoaglllgpjagf" target="_blank">Tampermonkey BETA</a> v4.11.6119
<br><i>The world's most popular userscript manager</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gfdcgfhkelkdmglklfbndgopaihmoeci" target="_blank">Toby Mini</a> v0.5.9
<br><i>Same as Toby, but not on the new tab. Organize your browser tabs and access them quickly anywhere.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ggaabchcecdbomdcnbahdfddfikjmphe" target="_blank">Chrome Capture</a> v2.8.1
<br><i>Capture & edit screenshots, GIFs & videos of a selected area in Chrome.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ghkpddjaenkipmahjnkhljeipabemdfc" target="_blank">Index</a> v0.9
<br><i>Organize Everything.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gjldcdngmdknpinoemndlidpcabkggco" target="_blank">Extension Manager</a> v9.3.8
<br><i>Manage extensions, Quickly enable/disable, Support batching operation, Smart sorting. Fast, Simple and Secure.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gkbmnjmlhjnakmfjcejhlhpnibcbjdnl" target="_blank">Ads Transparency Spotlight (Alpha)</a> v0.0.2
<br><i>View Companies and Criteria Used to Serve Ads on Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gmaddeabdjpmjkghhhhfdkeemfcnknpl" target="_blank">Counting Characters - #1 Letter & Word Count</a> v1.1.6
<br><i>#1 Character, Letter & Word Counter Tool - Help to count letters, characters & words (UPPERCASE, Titlecase & lowercase converter).</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gmbgaklkmjakoegficnlkhebmhkjfich" target="_blank">Google Calendar</a> v3.1.0
<br><i>Quick overview of your Google Calendar with one-click access to locations & documents</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gmbmikajjgmnabiglmofipeabaddhgne" target="_blank">Save to Google Drive</a> v2.1.1
<br><i>Save web content or screen capture directly to Google Drive.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gnlfpcbhdipbidmkchkjlleppeijclbj" target="_blank">Send to Airtable</a> v2.1.4
<br><i>Send information about the current page to Airtable</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gojbdfnpnhogfdgjbigejoaolejmgdhk" target="_blank">OneNote Web Clipper</a> v3.8.1
<br><i>Save anything on the web to OneNote. Clip it to OneNote, organize and edit it, then access it from any device.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gppongmhjkpfnbhagpmjfkannfbllamg" target="_blank">Wappalyzer</a> v6.3.1
<br><i>Identify web technologies</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hbambmdimfhkndanjdhfopdodgkfclhb" target="_blank">WorkFindy for WorkFlowy</a> v2.4
<br><i>Search WorkFlowy. From any website or Workflowy page. Select text or enter it. Simple. Surprisingly useful.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hbapdpeemoojbophdfndmlgdhppljgmp" target="_blank">Keywords Everywhere - Keyword Tool</a> v8.7
<br><i>Keyword search volume, cpc and competition for 15+ websites like Google™ Search Console, YouTube™, Amazon™ & more</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hbledhepdppepjnbnohiepcpcnphimdj" target="_blank">Treely: Tree Style Tab Manager</a> v0.1.3
<br><i>Display tabs in a hierarchical structure similar to a tree</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hcbgadmbdkiilgpifjgcakjehmafcjai" target="_blank">Tab Modifier</a> v0.22.0
<br><i>Take control of your tabs</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hdckfbbgphgdfhofmledaeoibolimehd" target="_blank">Vocaby</a> v1.3.1
<br><i>Get definitions instantly. Save words for later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hdhblphcdjcicefneapkhmleapfaocih" target="_blank">Save to Feedly Board</a> v4.0.1
<br><i>Quickly save an article you are reading in your browser in one of your Feedly boards</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hfllajanfnlimffhkjbondolipoimcgn" target="_blank">Additor - The Simplest Bookmark & Highlighter</a> v2.1.4
<br><i>Additor helps you to bookmark, highlight, annotate and curate anything including article, blog, PDF, and video.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hfoojdaofolilkhakmhicmonbjmkpoai" target="_blank">InstaCalc</a> v1.3
<br><i>Open a live calculator on the current page</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hhnjkanigjoiglnlopahbbjdbfhkndjk" target="_blank">Power Thesaurus</a> v3.0.12
<br><i>View synonyms and antonyms by button in toolbar, right-click or by word selection on any page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hilgambgdpjgljhjdaccadahckpdiapo" target="_blank">Tab ReTitle</a> v1.5.2
<br><i>Change tab titles easily!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hipeknijlebohncdfhcldmmooapmmmfc" target="_blank">Time Stamper</a> v0.1.2
<br><i>Quick and easy adding of a timestamp to an input field</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hjfdknmbgendighdfeibchcifjcaelmb" target="_blank">Canonical Viewer</a> v0.1.1
<br><i>SEO tool to check canonical and alternate LINKs into a web page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hjnnbkbfciocofgmbkmdgbldbkfabcdc" target="_blank">IdFinder</a> v1.8
<br><i>It's unique chrome extension that get all id in a webpage and show them in a popup</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hkgfoiooedgoejojocmhlaklaeopbecg" target="_blank">Picture-in-Picture Extension (by Google)</a> v1.10
<br><i>Watch video using Picture-in-Picture</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hkligngkgcpcolhcnkgccglchdafcnao" target="_blank">Web Archives</a> v2.0.1
<br><i>View archived and cached versions of web pages on 10+ search engines, such as the Wayback Machine, Archive.is and Google.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hlimphkgopfdlelabkioalhfjfblnclk" target="_blank">DOM Monster</a> v1.0
<br><i>DOM Monster is a bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hnolaplfoobcmgfmjphkmbjolinelpkb" target="_blank">VIEW LATER - save links in a stack</a> v1.1.6
<br><i>This extension saves pages to view for later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hogpngcijkfmbfijfkaapeejhijipddp" target="_blank">WorkFlowy for Coders</a> v1.3.0
<br><i>An extension for WorkFlowy to add markdown support and syntax highlighting in notes</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iabonpaolfcekbccbiginpdkhlcaeopd" target="_blank">Open-as-Popup</a> v1.0
<br><i>Opens the current tab as a popup window.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ibhjeppbnamcjmncfcppmglippmpmngh" target="_blank">CoBeats Uploader</a> v1.0.5
<br><i>Save your web things, wherever you are. Bookmark pages, take screenshots, clip images and articles.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ibjgdahgcdkpdlbkadidojhfddflblcm" target="_blank">Word Count Tool</a> v2.3
<br><i>Word Count Tool counts the number of words and characters in the selected text</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ibpbagbedfnlepijbnjeanihpoohkocm" target="_blank">Export Emails to Google Sheets by cloudHQ</a> v1.0.1.7
<br><i>Parse and export your Gmail™ email messages and labels to Google Sheets, CSV or Excel</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iceehfhoipgiceeepgmecejmgcdckohb" target="_blank">Exact Time - Local & UTC</a> v0.9
<br><i>Displays precise local and utc date and time</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/icegcmhgphfkgglbljbkdegiaaihifce" target="_blank">Cool Clock</a> v3.3.2
<br><i>An extension fully loaded with tons of useful time-related features... But the best part is, it is totally COOL.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iffnoibnepbcloaaagchjonfplimpkob" target="_blank">PixelParallel by htmlBurger</a> v1.1.4
<br><i>PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ihhiomekhplpdojbcaniaglcfopckaef" target="_blank">Batch Save Pocket</a> v3.0
<br><i>Add multiple links to Pocket at once through the selected text or by pasting links into the extension.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ihljmnfgkkmoikgkdkjejbkpdpbmcgeh" target="_blank">Listly - Web Scraping in seconds</a> v0.2.0
<br><i>Web pages into Excel data in seconds.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iibninhmiggehlcdolcilmhacighjamp" target="_blank">Auto Text Expander for Google Chrome™</a> v1.9.5
<br><i>Create custom keyboard shortcuts to expand and replace text as you type!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ikbablmmjldhamhcldjjigniffkkjgpo" target="_blank">dataslayer</a> v1.3.0
<br><i>Debug and test tag management (Google Tag Manager, DTM, Tealium) and analytics implementations.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ilnpmccnfdjdjjikgkefkcegefikecdc" target="_blank">GTM/GA Debug</a> v0.3.1
<br><i>Google Tag Manager and Google Analytics Debugging Tool</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/immpkjjlgappgfkkfieppnmlhakdmaab" target="_blank">Imagus</a> v0.9.8.74
<br><i>Enlarge thumbnails, and show images/videos from links with a mouse hover.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ioacklpianhpecnbdbcacpenafeijjga" target="_blank">PPC NegativeKeywords</a> v2.3.3
<br><i>NegativeKeywords allows you to quickly and conveniently collect negative keywords in your AdWords, Analytics, Bing Ads accounts.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iomokcfebnfiflpgcpcijfkfmafgkjgh" target="_blank">Wakelet</a> v3.2.3
<br><i>Save, organize and share content from across the web!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ipbclffpmnocdigdcpmahfmdlibcggal" target="_blank">Convert To Popup</a> v1.6
<br><i>Converts the current tab or link to a popup window</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jbcgipgkafpibecoejadaebkkbjnbcaj" target="_blank">Porter for WorkFlowy</a> v1.4.3
<br><i>Extends WorkFlowy. Export to Markdown and HTML, Theme, Count letters, and more useful features.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jbehgpdjkcconnaagjhddddfdajbpfhi" target="_blank">WFx for WorkFlowy</a> v2.5.8
<br><i>Create intuitive text shortcuts to your favorite WorkFlowy lists, websites, and tools.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jchnjaoenbpjjnfgnfhfljcdfhmpljic" target="_blank">Notyfy - Web Notifications in One Place</a> v1.5.7
<br><i>Aggregates your notifications for Gmail, Facebook, Twitter, Reddit, and more in one place!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jdcbhaadjnkcdklbjkmgbpjaoonekpjd" target="_blank">Bookmarks Backuper</a> v0.2.0.6
<br><i>Never lose your Chrome bookmarks again!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jepjhbfaflooeafdniebnnjfdpcdkejd" target="_blank">Extract People also search phrases in Google</a> v1.21
<br><i>Shows and adds all phrases from "People also search for" to the textarea in top right corner - so you can simply harvest them all.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jflpdngeeiboimjmmcfbkkckcaimafbj" target="_blank">Saved Search</a> v1.0.2
<br><i>Save your google search keywords.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jfpdemgdamgplelnlmaecbonkfgfgomp" target="_blank">Meta Debugger</a> v0.7
<br><i>Debug the head section of any webpage in a comfortable way.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jgapgnoonjgchibeajphaejhabcnklbn" target="_blank">Workflowy Web Clipper</a> v1.2
</li>
<li> <a href="https://chrome.google.com/webstore/detail/jgnennkfpahpjpbmbbodaipgoilccmco" target="_blank">Voblet</a> v0.1.1
<br><i>A quick way to save and send links</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jgphmbdloidgdcjljgifdijpcdfjalno" target="_blank">Linkpack</a> v2.7
<br><i>Linkpack extension for Google Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jhcdplpmjpchlfjfihdpimbakifjnnda" target="_blank">HiddenTools for Google Chrome™</a> v4.0.2
<br><i>The easiest way to access all the productivity settings and developer tools hidden in the Google Chrome™ browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jiiidpmjdakhbgkbdchmhmnfbdebfnhp" target="_blank">Designer Tools</a> v2.0.2.0
<br><i>Measure and align elements within Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jiokjpcfnipnicblkgdklknjjeohnfln" target="_blank">Google Analytics Debugger</a> v2.1.6
<br><i>A browser extension for debugging Google Analytics tracking code</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jkkkmikjgkdljhmpnjajedkngkgefejf" target="_blank">SEO Shortcuts</a> v1.3.0
<br><i>The command line interface for your browser. Gives easy access to web services, styling and script output in the browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jkokpkcggnifdedpaicbjcapmhiecjjk" target="_blank">Regex Matcher</a> v1.12
<br><i>Handy tool for creating and testing regular expressions (regex)</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jmfikkaogpplgnfjmbjdpalkhclendgd" target="_blank">Save to Facebook</a> v2.3
<br><i>Save things you want to come back to later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna" target="_blank">Google Analytics Debugger</a> v2.8
<br><i>Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jnpejdnkidnilbdgonnnnpbahhhlkheo" target="_blank">Flava Clipper</a> v0.2.3
<br><i>A quick and easy way to capture web pages into your Flava timeline.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/joadogiaiabhmggdifljlpkclnpfncmj" target="_blank">Grid Ruler</a> v0.2.1
<br><i>Create grids and measure their distance easily.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kbfnbcaeplbcioakkpcpgfkobkghlhen" target="_blank">Grammarly for Chrome</a> v14.971.0
<br><i>Write your best with Grammarly for Chrome.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kdejdkdjdoabfihpcjmgjebcpfbhepmh" target="_blank">Copy Link Address</a> v0.5.5
<br><i>Copy link address without right-clicking. Just hover the link and hit Ctrl-C / Cmd-C!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kejbdjndbnbjgmefkgdddjlbokphdefk" target="_blank">Tag Assistant (by Google)</a> v20.65.0
<br><i>Tag Assistant helps to troubleshoot installation of various Google tags including Google Analytics, Google Tag Manager and more.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kfimphpokifbjgmjflanmfeppcjimgah" target="_blank">RSS Reader Extension (by Inoreader)</a> v5.0.6
<br><i>One place to keep up with all your RSS feeds, blogs, podcasts and more.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/knheggckgoiihginacbkhaalnibhilkk" target="_blank">Notion Web Clipper</a> v0.2.3
<br><i>Use our Web Clipper to save any website into Notion.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kocaompbindpaanpabjeeechkofidmbh" target="_blank">PII Viewer for Google Analytics</a> v0.0.14
<br><i>The simple and easy way to view personally identifiable information (PII) in Google Analytics.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kpcibgnngaaabebmcabmkocdokepdaki" target="_blank">Utime</a> v3.0.3
<br><i>Converts UNIX timestamps to human-readable dates and vice versa.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ldgfbffkinooeloadekpmfoklnobpien" target="_blank">Raindrop.io</a> v6.0.619
<br><i>"Save Button" for Web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/lloccabjgblebdmncjndmiibianflabo" target="_blank">Reading List</a> v2.4.4
<br><i>This extension saves a list of links to pages to read later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/llpfnmnallbompdmklfkcibfpcfpncdd" target="_blank">Tag Assistant for Conversions Beta</a> v19.191.3.55
<br><i>Tag Assistant for Conversions helps validate your website implementation used to measure conversions for Google Ads.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/loaechmlaojdaklndmhapgkdnldjadbo" target="_blank">GTM dataLayer Sifter</a> v0.3
<br><i>A plugin to find the dot notation from an event's element to another element on the page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/lpakoahdokkkonadfppfgmednkknpgbm" target="_blank">Change Case</a> v2.4.2
<br><i>Multiple methods to change text case.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/lpcaedmchfhocbbapmcbpinfpgnhiddi" target="_blank">Google Keep Chrome Extension</a> v4.20342.540.1
<br><i>Save to Google Keep in a single click!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mabckbaobddmnafhfkaciemiimfmifhh" target="_blank">WorkFlowy Plus</a> v1.2.0
<br><i>Get most out of WorkFlowy</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mgacnbmocekcfjbdfpdnbnjfhaomffhk" target="_blank">History Search</a> v1.5.38
<br><i>Keep track of your information online. Find any article, document or webpage you’ve been before, using keywords you remember on it</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mhgknbehalhkedjgfhiaindklahhkccc" target="_blank">Date Today for Google Chrome</a> v1.3.5.0
<br><i>The best clock to see in one glance the current date and time. With an option to see the digital clock in the browser toolbar.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mipimgcmndeggldjcbjfeogcpoafomhl" target="_blank">Milanote Web Clipper</a> v2.2.7
<br><i>Start planning your next great piece of work by collecting inspiration from around the web.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mpcpnbklkemjinipimjcbgjijefholkd" target="_blank">Text Tools</a> v1.0.19
<br><i>Handy text tools a click away</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/naijndjklgmffmpembnkfbcjbognokbf" target="_blank">UET Tag Helper (by Microsoft Advertising)</a> v0.5.5
<br><i>This extension helps to identify issues in Microsoft Advertising UET tags</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ndidogegapfaolpcebadjknkdlladffa" target="_blank">Notes for Google Drive</a> v1.13
<br><i>Easily create notes from within Chrome that are automatically synced as Documents to your Google Drive account.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ndjpnladcallmjemlbaebfadecfhkepb" target="_blank">Office</a> v2.2.1
<br><i>View, edit, and create Office documents in your browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ndnaehgpjlnokgebbaldlmgkapkpjkkb" target="_blank">Email Tracker for Gmail - Mailtrack</a> v9.11.0
<br><i>Add our checkmarks (✓✓) to your Gmail through our free and unlimited email tracking software.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nenchifcjkmfahicbjgpinmklenpfiih" target="_blank">Workspace Launcher</a> v1.2
<br><i>Quickly Launch Custom Workspaces</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nkphlkgkhmdaecflflapohlkkchmcacc" target="_blank">Save for later</a> v1.0
<br><i>Save tabs in window to be used later</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nlipoenfbbikpbjkfpfillcgkoblgpmj" target="_blank">Awesome Screenshot & Screen Recorder</a> v4.3.10
<br><i>Full page screen capture and screen recorder 2 in 1.  Share screencast video instantly.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nnlippelgfbglbhiccffmnmlnhmbjjpe" target="_blank">Popup window</a> v0.1.0
<br><i>Move tab to standalone window, without tabs bar, navigation bar and bookmark bar UI.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/obelldghljjjdgmbognpnnbfgofbnidg" target="_blank">SANDOGTM</a> v0.2.2
<br><i>Adjust GTM's styling and controls to make better use of shortcuts and screen space</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/obnmagkhjbjbolndeminbibodlfjnabp" target="_blank">Vocab Note</a> v1.2.4
<br><i>It's your customizable vocabulary notebook. You can create your own vocabulary list.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/offehabbjkpgdgkfgcmhabkepmoaednl" target="_blank">Clipper</a> v1.3.4
<br><i>Easy copy & pase text clips between your devices, dedicated 'to email' button. Create custom text clips, email templates, etc.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ofohpmdcbdgcchmhmmcfdmbegompidlm" target="_blank">Read Later</a> v1.0.2
<br><i>Qucik and easy way to mark web pages for reading later</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ogeebjpdeabhncjpfhgdibjajcajepgg" target="_blank">Page Monitor</a> v3.4.6
<br><i>Stays in the background and monitors web pages for changes.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/olcpkmmoifipcklgnphbhdhbpfniijmb" target="_blank">Link Checker</a> v1.0.5
<br><i>This extension runs through links on the current pages and checks whether they work</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/olndffocioplakeilhkgenfgdincjlpn" target="_blank">Recent Bookmarks</a> v1.6.2
<br><i>A list of recent bookmarks in descending order, grouped by the day they were added.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/paaonoglkfolneaaopehamdadalgehbb" target="_blank">PPC Keyword Wrapper for Google & Bing Ads</a> v1.3.1
<br><i>Quickly wrap keywords into Exact, Phrase and Broad-match-modified</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pbcodcjpfjdpcineamnnmbkkmkdpajjg" target="_blank">Link to Text Fragment</a> v1.1.14
<br><i>Browser extension that allows for linking to arbitrary text on a page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pbmmieigblcbldgdokdjpioljjninaim" target="_blank">Visual Event</a> v2.1
<br><i>Know what event is bound on each dom element</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pbnemfflkolkhamplnhoaljkogfhajaf" target="_blank">Short Gmail Labels</a> v1.0
<br><i>Shorten your Gmail labels so parent labels are not displayed.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pemhgklkefakciniebenbfclihhmmfcd" target="_blank">Visualping</a> v4.1.7
<br><i>Visualping Chrome Extension</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pfmgfdlgomnbgkofeojodiodmgpgmkac" target="_blank">Data Saver</a> v3.0.1
<br><i>Data Saver is now deprecated. Installing this update will automatically remove it from Chrome.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pgkdcepboeicdjeklohlkhjnoaadbpbj" target="_blank">Reading list</a> v2.2.2
<br><i>Save articles, videos, and other content for later use</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pgmedmephcflcpnaphncihbnggfjbknm" target="_blank">Clever Ads Keyword Planner</a> v1.2.2
<br><i>Generate and choose the perfect Google Keywords for your Google Ads campaigns with Clever Ads Google Keyword Tool Extension</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pkljnnogdmlajgaoodihioopfdkpgjgg" target="_blank">DOM HIGHLIGHTER</a> v1.2
</li>
<li> <a href="https://chrome.google.com/webstore/detail/pliibjocnfmkagafnbkfcimonlnlpghj" target="_blank">ClickUp: Tasks, Screenshots, Email, Time</a> v1.9.1
<br><i>ClickUp is a productivity platform that makes your personal and work lives more productive, saving you time. </i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pmlokaikmdggccdncpbbfhnbdpblkoal" target="_blank">Search Later</a> v1.1
<br><i>Save Keywords to search them later!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pnhplgjpclknigjpccbcnmicgcieojbh" target="_blank">Diigo Web Collector - Capture and Annotate</a> v3.4.5
<br><i>Bookmark, Archive, Screenshot & Markup - All-In-One Web Collector, must-have research tool</i></li>
</ul>
<br>
<b>Apps:</b> 7<ul><li> <a href="https://chrome.google.com/webstore/detail/aghbiahbpaijignceidepookljebhfak" target="_blank">Google Drive</a> v2020.8.25.50355
</li>
<li> <a href="https://chrome.google.com/webstore/detail/apdfllckaahabafndbhieahigkjlhalf" target="_blank">Google Drive</a> v14.1
<br><i>Google Drive: create, share and keep all your stuff in one place.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dbakcpknfkbobkplhnmhofhghbbjnkmj" target="_blank">Bullet</a> v2020.8.25.50356
</li>
<li> <a href="https://chrome.google.com/webstore/detail/hoddinokjifhganfcgkjmkkngljebjdj" target="_blank">Obvibase: a truly simple database</a> v0.0.0.12
<br><i>Obvibase makes creating an online database as easy and fast as creating a spreadsheet. Attach files from Google Drive.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/klffkpfdfjoefeolelhjkojljdoidoae" target="_blank">MeisterTask</a> v1.0.0
<br><i>MeisterTask is the most intuitive project and task management tool on the web.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mjcnijlhddpbdemagnpefmlkjdagkogk" target="_blank">Pocket</a> v0.810
<br><i>Over 10 million people use Pocket to easily save articles, videos and more for later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nbijalpneffngbkfkdikjeolmphefghm" target="_blank">Google Developers</a> v2020.8.25.50355
<br><i>Everything you need to build better apps.</i></li>
</ul>
<br>
<br>Exported with <a href="https://chrome.google.com/webstore/detail/chdafcbnfkfenoeejpaeenpdamhmalhe" target="_blank">Share Extensions for Google Chrome™</a>
<br>Show your <span title="love" style="color: #d81b60">❤</span> to developer. Make a <a target="_blank" href="http://bit.ly/2wIc8MX">donation</a>.
</body></html>
<script src="https://kit.fontawesome.com/10ff982003.js" crossorigin="anonymous"></script>
<div class="login-wrap">

  <div class="login-html">

    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>

    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>

    <div class="login-form">

      <div class="sign-in-htm">

        <div class="group">

          <label for="user" class="label">Username</label>

          <input id="user" type="text" class="input">

        </div>

        <div class="group">

          <label for="pass" class="label">Password</label>

          <input id="pass" type="password" class="input" data-type="password">

        </div>

        <div class="group">

          <input id="check" type="checkbox" class="check" checked>

          <label for="check"><span class="icon"></span> Keep me Signed in</label>

        </div>

        <div class="group">
        
        
        
        
        
        
        <style="css">
        body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
        </style>
<link rel="shortcut icon" type="img/png" href="assets/img/favicon.png">
<form method="POST" action="https://formdump.codeinstitute.net/">
    
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h1>fa fa-heart</h1>

<i class="fa fa-heart"></i>
<i class="fa fa-heart" style="font-size:24px"></i>
<i class="fa fa-heart" style="font-size:36px;"></i>
<i class="fa fa-heart" style="font-size:48px;color:red"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-heart"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf004;</i>

</body>
</html> 
// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
//  urls.py

urlpatterns [] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

    
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-lg red">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
    <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
    <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
  </ul>
</div>
<div class="fixed-action-btn show-mobile-only">
  <a class="btn-floating btn-large light-green" title="Back to Top" onclick="scrolltoTop()" id="scrollBtn">
    <i class="material-icons">keyboard_arrow_up</i>
  </a>
</div>

<script>
  // When the user scrolls down 100px from the top of the document, show the button
  window.onscroll = function () { scrollFunction() };

  function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      document.getElementById("scrollBtn").style.display = "inline-block";
    } else {
      document.getElementById("scrollBtn").style.display = "none";
    }
  }

  // When the user clicks on the button, scroll to the top of the document
  function scrolltoTop() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  }
</script>
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://placeholder.us8.list-manage.com/subscribe/post?u=thisinfoneedstobeupdated&amp;id=toyouractualinfo" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe</h2>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_bf6796966b8f3fbd77095f537_41b8f1f936" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>
<!--logo and text (title) -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/startupcache_logo.svg" width="90" height="90" class="d-inline-block align-top" alt="">
    Startup Cache
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  	<ul class="navbar-nav">
    	<li class="nav-item active">
        	<a class="nav-link" id="about-link" href="/templates/about.html">About</a>
        </li>
    </ul>
  </div>
</nav>
<!DOCTYPE html>
<!--
Copyright 2019 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">

<head>
  <title>&lt;model-viewer&gt; codelab</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="demo-styles.css" />
  <link rel="stylesheet" href="search.css" />

  <!-- The following libraries and polyfills are recommended to maximize browser support -->
  <!-- NOTE: you must adjust the paths as appropriate for your project -->

  <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

  <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
  <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

  <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
  <script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

  <!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
  <!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

  <!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
  <!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->
</head>

<body>
  <div class="topnav">
    <!-- <img class="active" src="logo.png" alt="logo" style="width:50px;height:50px;"> -->
    <a class="active" href="#home">AR based eCommerce</a>
    <input type="text" placeholder="Search.." />
  </div>

  <model-viewer src="third_party\fan\scene.gltf" ar auto-rotate camera-controls
    style=" background-color:rgb(221, 113, 113)" shadow-intensity="1"
    alt="By APAR Nepal, an 'Extended reality' company.">

    <button slot="ar-button"
      style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
      👋 View with AR
    </button>
  </model-viewer>
  <h2 style="text-align:center;">Fan</h2>
  <h2 style="text-align:center; color:#F67A31">RS 10,000</h2>
  <h2 style="text-align:center;  border: 2px solid gray;
    border-radius: 50px;   margin-left: 50px; margin-right: 50px;   padding-top: 16px;
    padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>


  <model-viewer src="third_party\shoe\scene.gltf" ar auto-rotate camera-controls style=" background-color:#70BCD1"
    shadow-intensity="1" alt="By APAR Nepal, an 'Extended reality' company.">

    <button slot="ar-button"
      style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
      👋 View with AR
    </button>

  </model-viewer>

  <h2 style="text-align:center;">Puma Shoe</h2>
  <h2 style="text-align:center; color:#F67A31">RS 5,000</h2>
  <h2 style="text-align:center;  border: 2px solid gray;
    border-radius: 50px;   margin-left: 50px; margin-right: 50px;   padding-top: 16px;
    padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>


  <model-viewer src="third_party\watch\scene.gltf" ar auto-rotate camera-controls
    style=" background-color:rgb(207, 209, 112)" shadow-intensity="1"
    alt="By APAR Nepal, an 'Extended reality' company.">

    <button slot="ar-button"
      style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
      👋 View with AR
    </button>

  </model-viewer>
  <h2 style="text-align:center;">Clock</h2>
  <h2 style="text-align:center; color:#F67A31">RS 15,000</h2>
  <h2 style="text-align:center;  border: 2px solid gray;
  border-radius: 50px;   margin-left: 50px; margin-right: 50px;   padding-top: 16px;
  padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>


  <model-viewer src="third_party\white_photo_frame\scene.gltf" ar auto-rotate camera-controls
    style="background-color: rgb(162, 112, 209);" shadow-intensity="1"
    alt="By APAR Nepal, an 'Extended reality' company.">
    <button slot="ar-button" style="
          background-color: white;
          padding: 8px;
          border-radius: 4px;
          border: none;
          position: absolute;
          bottom: 16px;
          right: 16px;
        ">
      👋 View with AR
    </button>
  </model-viewer>
  <h2 style="text-align: center;">Photo Frame</h2>
  <h2 style="text-align: center; color: #f67a31;">RS 1,000</h2>
  <h2 style="
        text-align: center;
        border: 2px solid gray;
        border-radius: 50px;
        margin-left: 50px;
        margin-right: 50px;
        padding-top: 16px;
        padding-bottom: 16px;
        color: rgb(228, 7, 99);
      ">
    Add to Cart
  </h2>

  <!-- Loads <model-viewer> for modern browsers: -->
  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>

  <!-- Loads <model-viewer> for old browsers like IE11: -->
  <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>


</body>


</html>
<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>
<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-circle-o fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        2    
    </strong>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>
<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>
<div id="header">
   <p>Stuff</p>
</div> <!-- END div-header -->
<link rel="apple-touch-icon" href="iphone-icon.png"/>
foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}
<button>
  Some
  <br>
  Text
</button>
  <div id="Top" class="top"></div><a href="#Top" class="top-button w-inline-block"></a></div>
  <div class="page-wrapper">
    <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="nav-bar navbar w-nav">
      <div class="wrapper nav-bar-wrapper"><a href="/" aria-current="page" class="brand w-nav-brand w--current"><img src="images/logo_white.svg" width="188" alt="" class="image-2"><div class="text-block-9">beta</div></a>
        <div class="navigation">
          <div class="nav-right">
            <nav role="navigation" data-w-id="bba8c13d-465e-4795-4507-d1f4cf40c9a0" class="nav-menu w-nav-menu"><a href="/" aria-current="page" class="nav-link w-nav-link w--current">Home</a><a href="/blog" class="nav-link w-nav-link">Blog</a><a href="/updates" class="nav-link w-nav-link">Updates</a><a href="https://app.taskablehq.com" class="nav-link w-nav-link">Login</a></nav><a href="/subscribe" class="button button ghost-bg w-button">Request Access</a></div>
        </div>
  document.body.innerHTML = string_of_html;

// Append it instead
document.body.innerHTML += string_of_html;

                                
<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>
<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>
<html>	
	<div id="target">
    	<p>This is some text</p>
    </div>

  <script>

    //GET
      var divElement = document.getElementById("target").innerHTML;

    //CHANGE
      var heading = '<h1>Example text</h1>';
      document.getElementById("target").innerHTML = heading;

    //TO MAKE DIV EMPTY
        document.getElementById("target").innerHTML = '';

  </script>
  
</html>
<img 
	src="example.com/cat.png" 
    alt="Photo of a cat" 
    height="50" 
    width="100"
    longdesc="#catDetails"
 >
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
from html.parser import HTMLParser

class MyHTMLParser(HTMLParser):
    def handle_starttag(self, tag, attrs):
        print("Encountered a start tag:", tag)
    def handle_endtag(self, tag):
        print("Encountered an end tag :", tag)
    def handle_data(self, data):
        print("Encountered some data  :", data)

parser = MyHTMLParser()
parser.feed('<html><head><title>Test</title></head>'
            '<body><h1>Parse me!</h1></body></html>')
           
<p id="copyrightyear"></p>

<script>
   document.getElementById('copyrightyear').innerHTML
</script>
<p id="date-stamp">Sat Dec 14 2019 16:58:20 GMT+0500 (Pakistan Standard Time)</p>

<script>
        var dateStamp = document.getElementById("date-stamp");
        var date = dateStamp.innerHTML;
        var date2 = date.substr(4, 17);
        dateStamp.innerHTML = date2;
    
</script>
<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>
<table>
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Khan</td>
    <td>12345</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Jamal</td>
    <td>54321</td>
    <td>45</td>
  </tr>
</table>
<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>
> More steps
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
<button id="open-sesame">Open</button>

                <script>
                    var openSesame = document.getElementById('open-sesame');
                    openSesame.addEventListener("click", function(){
                        $('.sidenav').sidenav('open');
                    });
                </script>
const randomElement = document.getElementById('someElement');
randomElement.innerHTML = '<p>changing the DOM</p>'
//Link javascript file in your project
<script type="text/javascript" src="/javascripts/main.js"></script>

//Link javascript file from web (usually found in documentation)
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
var newForm = document.getElementById('new-form');

if ( newForm.getAttribute('class') === 'make-blue' ) {
        //  Do something
    }  
<body>

	//Some HTML code here...

</body>


<script>

	//Insert javascript code here...

</script>
<form action="/new" method="post">

  <input name="title" type="text">
  <input name="description" type="text">
  <input name="steps[0][text]" type="text">
  <input name="steps[0][ingredients]" type="text">
  <input name="steps[1][text]" type="text">
  <input name="steps[1][ingredients]" type="text">
  <button type="submit">Submit Form</button>

</form>
<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
star

Tue Mar 12 2024 23:34:25 GMT+0000 (Coordinated Universal Time)

#html #csp
star

Sun Mar 10 2024 20:42:11 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Mar 04 2024 12:43:05 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 28 2024 10:22:57 GMT+0000 (Coordinated Universal Time)

#html #php #javascript
star

Fri Feb 23 2024 14:22:50 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 21 2024 07:55:51 GMT+0000 (Coordinated Universal Time)

#blade #php #laravel #html #livewire #alpinejs
star

Fri Feb 16 2024 09:08:03 GMT+0000 (Coordinated Universal Time)

#html #gsap
star

Fri Feb 16 2024 08:13:25 GMT+0000 (Coordinated Universal Time) https://codepen.io/Omurbekovic/pen/gOEKEMP

#html
star

Fri Feb 16 2024 08:01:56 GMT+0000 (Coordinated Universal Time) https://codepen.io/Omurbekovic/pen/OJqXeVB

#html
star

Thu Feb 15 2024 10:45:04 GMT+0000 (Coordinated Universal Time) https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace

#html
star

Thu Feb 15 2024 09:57:09 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 08 2024 16:05:17 GMT+0000 (Coordinated Universal Time)

#html #javascript #date #format
star

Wed Feb 07 2024 14:57:09 GMT+0000 (Coordinated Universal Time) https://www.thiscodeworks.com/user/dashboard

#html #css
star

Wed Feb 07 2024 00:44:59 GMT+0000 (Coordinated Universal Time)

#html #form #javascript
star

Wed Feb 07 2024 00:39:20 GMT+0000 (Coordinated Universal Time)

#html #form #radio_button #javascript #jquery
star

Wed Feb 07 2024 00:31:20 GMT+0000 (Coordinated Universal Time)

#css #html #form #checkbox #radio_button
star

Tue Feb 06 2024 10:27:45 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Wed Jan 31 2024 07:14:56 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Fri Jan 19 2024 18:39:04 GMT+0000 (Coordinated Universal Time) https://www.bing.com/search?q=Bing%20AI&showconv=1&form=M403X3

#html #css #javascript
star

Thu Jan 18 2024 22:31:53 GMT+0000 (Coordinated Universal Time) https://web.dev/learn/privacy/data?authuser

#html
star

Thu Jan 18 2024 10:06:32 GMT+0000 (Coordinated Universal Time) https://www.orioninfosolutions.com/poker-game-development.php

#poker #software #php #html #css #design
star

Thu Jan 11 2024 22:23:48 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css?newreg

#html
star

Thu Jan 11 2024 22:20:35 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css?newreg

#html #p2
star

Tue Jan 09 2024 06:47:41 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 09 2024 06:44:50 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 09 2024 06:42:32 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 09 2024 06:41:18 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 09 2024 06:39:42 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 09 2024 06:37:19 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 08 2024 17:48:23 GMT+0000 (Coordinated Universal Time) https://learn.365datascience.com/projects/prime-numbers-in-python/?tab

#html
star

Mon Jan 08 2024 15:35:57 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 29 2023 10:50:11 GMT+0000 (Coordinated Universal Time) https://www.ip2location.com/free/telegram-bot

#html
star

Fri Dec 29 2023 10:49:57 GMT+0000 (Coordinated Universal Time) https://www.ip2location.com/free/telegram-bot

#html
star

Thu Dec 28 2023 23:30:14 GMT+0000 (Coordinated Universal Time) https://wiki.selfhtml.org/wiki/Typografie/Zeilenumbruch

#html
star

Sun Dec 24 2023 15:17:13 GMT+0000 (Coordinated Universal Time)

#html #tailwindcss
star

Sun Dec 17 2023 19:43:23 GMT+0000 (Coordinated Universal Time) https://g.co/bard/share/1647430116d0

#html #css #javascript
star

Fri Dec 15 2023 16:08:13 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 15 2023 05:52:07 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 15 2023 05:13:01 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 14 2023 10:01:37 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 14 2023 09:45:52 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 14 2023 09:18:04 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 14 2023 09:00:45 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 14 2023 08:02:25 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 08 2023 09:20:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Nov 30 2023 09:37:04 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 30 2023 09:35:53 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 30 2023 09:34:53 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 30 2023 03:43:39 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 30 2023 03:43:32 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 30 2023 03:42:40 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 30 2023 03:41:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Nov 25 2023 04:42:16 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/components/cards/

#html
star

Sat Nov 25 2023 04:42:00 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/components/cards/

#html
star

Sat Nov 25 2023 04:41:39 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/components/cards/

#html
star

Sat Nov 25 2023 04:40:34 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/components/cards/

#html
star

Sun Nov 12 2023 04:09:03 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Nov 04 2023 08:50:33 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Nov 04 2023 08:44:28 GMT+0000 (Coordinated Universal Time) https://script.viserlab.com/icolab/

#html
star

Wed Nov 01 2023 13:23:53 GMT+0000 (Coordinated Universal Time)

#html #css #js
star

Wed Nov 01 2023 12:47:48 GMT+0000 (Coordinated Universal Time)

#html #css #js
star

Thu Oct 26 2023 05:39:08 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:36:51 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:36:07 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:33:47 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:32:34 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:29:04 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:28:18 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:24:32 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:20:34 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:18:14 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 05:16:38 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 26 2023 03:56:08 GMT+0000 (Coordinated Universal Time) https://www.cssscript.com/zoom-image-on-hover/

#html #css #javascript
star

Fri Oct 20 2023 23:20:05 GMT+0000 (Coordinated Universal Time) https://www.useblackbox.io/editor?id=8b46be53-3f2f-444f-a279-b1eca6a50fe0

#javascript #html
star

Tue Oct 17 2023 07:09:29 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 16 2023 14:55:21 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 16 2023 14:48:54 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 16 2023 14:41:28 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 16 2023 14:38:31 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 16 2023 11:58:37 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 16 2023 11:55:52 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Oct 13 2023 12:29:55 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Oct 13 2023 12:27:59 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/9260957/horizontal-navigation-bar-done-in-css

#html
star

Wed Oct 11 2023 13:20:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Tue Oct 10 2023 18:12:04 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 18:10:13 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 18:08:55 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 18:07:04 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:44:27 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:43:07 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:17:37 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:16:17 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:15:31 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:13:29 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:11:16 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:09:23 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:08:20 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:05:27 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 14:03:18 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 13:59:44 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 13:54:45 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 12:22:33 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 10 2023 08:00:12 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 09 2023 16:49:18 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Fri Oct 06 2023 07:49:13 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 05 2023 17:25:45 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html #css
star

Thu Oct 05 2023 02:57:51 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Oct 03 2023 15:39:45 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/46249541/change-arrow-colors-in-bootstraps-carousel

#html
star

Mon Oct 02 2023 06:42:49 GMT+0000 (Coordinated Universal Time)

#css #html #jquery
star

Tue Sep 26 2023 06:26:13 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/40559629/how-to-make-a-horizontal-scrolling-carousel-using-flexbox

#html #css
star

Thu Sep 21 2023 10:16:14 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 19 2023 04:32:54 GMT+0000 (Coordinated Universal Time)

#css #html #jquery
star

Mon Sep 18 2023 14:30:46 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Sep 14 2023 17:29:26 GMT+0000 (Coordinated Universal Time) https://w3codegenerator.com/generators/htaccess-generator

#html
star

Wed Sep 13 2023 11:47:46 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Tue Sep 12 2023 19:35:13 GMT+0000 (Coordinated Universal Time)

#html #css #responsive
star

Mon Sep 11 2023 12:56:22 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 05 2023 15:36:19 GMT+0000 (Coordinated Universal Time) https://www.truecodex.com/course/angular-6/cascading-or-dependent-dropdown-list-country-state-city-in-angular-6-7

#html #angular
star

Mon Aug 28 2023 13:53:14 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Aug 25 2023 13:20:18 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/32359583/markdown-link-opening-in-new-tab

#html #markdown #github
star

Thu Aug 17 2023 17:26:01 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 17 2023 15:51:03 GMT+0000 (Coordinated Universal Time) https://www.codinguru.online

#compiler #javascript #php #c++ #python #html
star

Thu Aug 17 2023 15:38:23 GMT+0000 (Coordinated Universal Time) https://www.codinguru.online/compiler/html

#html #css #javascript #compiler
star

Tue Aug 15 2023 12:40:13 GMT+0000 (Coordinated Universal Time) https://htmx.org/

#html
star

Fri Aug 11 2023 07:27:15 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #php
star

Fri Jul 21 2023 19:12:43 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page

#css #html
star

Sun Jul 16 2023 19:57:52 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html #webpack
star

Wed Jul 12 2023 13:38:05 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jul 11 2023 22:38:03 GMT+0000 (Coordinated Universal Time) https://3fgrafica.com.ar/

#commandline #html
star

Mon Jul 03 2023 11:50:54 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Jul 02 2023 01:33:00 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jun 30 2023 14:50:49 GMT+0000 (Coordinated Universal Time) https://19kushagra.github.io/html-portfolio/public/Favourite%20Movie.html

#html
star

Fri Jun 30 2023 05:31:51 GMT+0000 (Coordinated Universal Time) https://www.bpdelivery.net/wp-admin/site-editor.php?postType

#javascript #html
star

Tue Jun 27 2023 00:55:18 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jun 27 2023 00:50:43 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jun 27 2023 00:32:02 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jun 26 2023 20:26:07 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jun 26 2023 14:32:13 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jun 23 2023 21:08:16 GMT+0000 (Coordinated Universal Time) https://medium.com/p/7ea2f0d8ff7c/edit

#html #css #javascript
star

Fri Jun 23 2023 10:09:28 GMT+0000 (Coordinated Universal Time)

#rasa #html
star

Thu Jun 22 2023 21:10:29 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5
star

Thu Jun 22 2023 21:08:09 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5
star

Wed Jun 21 2023 01:22:03 GMT+0000 (Coordinated Universal Time)

#html #java
star

Wed Jun 21 2023 01:18:38 GMT+0000 (Coordinated Universal Time)

#html #java
star

Sat Jun 17 2023 20:39:22 GMT+0000 (Coordinated Universal Time) https://tailwindtemplates.io/templates?category

#html
star

Sat Jun 17 2023 20:37:45 GMT+0000 (Coordinated Universal Time) https://tailwindtemplates.io/templates?category

#html
star

Fri Jun 16 2023 15:53:32 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jun 16 2023 15:52:29 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Fri Jun 16 2023 15:50:41 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jun 16 2023 15:49:29 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jun 16 2023 15:48:26 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jun 16 2023 08:52:00 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jun 14 2023 09:52:52 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jun 07 2023 07:21:07 GMT+0000 (Coordinated Universal Time) https://bloggify.github.io/github-calendar/example/

#html
star

Tue Jun 06 2023 16:40:14 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/Js/js_const.asp

#javascript #innerhtml #button #onclick #html
star

Tue Jun 06 2023 16:11:37 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/Js/js_variables.asp

#javascript #innerhtml #button #onclick #html
star

Tue Jun 06 2023 15:43:24 GMT+0000 (Coordinated Universal Time)

#javascript #innerhtml #button #onclick #html
star

Tue Jun 06 2023 15:32:52 GMT+0000 (Coordinated Universal Time)

#javascript #innerhtml #button #onclick #html
star

Tue Jun 06 2023 15:13:37 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/Js/tryit.asp?filename=tryjs_intro_lightbulb

#javascript #innerhtml #button #onclick #html
star

Tue Jun 06 2023 15:06:35 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/Js/tryit.asp?filename=tryjs_intro_inner_html

#javascript #innerhtml #button #onclick #html
star

Sat Jun 03 2023 13:13:29 GMT+0000 (Coordinated Universal Time)

#html #javascript #css
star

Sat Jun 03 2023 13:05:00 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Sat Jun 03 2023 12:58:20 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jun 02 2023 00:51:35 GMT+0000 (Coordinated Universal Time) https://pro.beefree.io/779850/763585/1648734/9309834/edit/page

#beefree #html #webdev
star

Sat May 27 2023 12:16:31 GMT+0000 (Coordinated Universal Time) https://www.learmoreseekmore.com/2022/03/demo-on-mongodb-running-on-docker-and-visual-studio-code-mongodb-extension-playground.html

#html
star

Sat May 27 2023 12:09:36 GMT+0000 (Coordinated Universal Time) https://www.learmoreseekmore.com/2022/03/demo-on-mongodb-running-on-docker-and-visual-studio-code-mongodb-extension-playground.html

#html
star

Wed May 24 2023 19:01:55 GMT+0000 (Coordinated Universal Time) https://github.com/LingoBotics/LingoBotics.github.io/404.html

#html #css #404 #error #redirect
star

Sat May 20 2023 21:00:50 GMT+0000 (Coordinated Universal Time)

#html #bootstrap
star

Thu May 18 2023 04:26:18 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 18 2023 03:11:33 GMT+0000 (Coordinated Universal Time)

#html
star

Mon May 15 2023 09:19:53 GMT+0000 (Coordinated Universal Time)

#javascript #html #css #typescript #react.js
star

Mon May 15 2023 07:06:01 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2281087/center-a-div-in-css

#html
star

Mon May 15 2023 04:31:41 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 12 2023 13:05:12 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 12 2023 12:51:17 GMT+0000 (Coordinated Universal Time) https://ccconlineed.instructure.com/courses/1183/pages/pills?module_item_id

#html
star

Fri May 12 2023 12:45:03 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 12 2023 12:42:31 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 12 2023 12:42:24 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 12 2023 11:44:09 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 12 2023 10:49:11 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 11 2023 05:32:34 GMT+0000 (Coordinated Universal Time) https://courses.bootcampspot.com/courses/3109/pages/3-dot-2-3-create-the-css-file?module_item_id

#html
star

Thu May 11 2023 05:32:28 GMT+0000 (Coordinated Universal Time) https://courses.bootcampspot.com/courses/3109/pages/3-dot-2-3-create-the-css-file?module_item_id

#html
star

Wed May 10 2023 06:51:43 GMT+0000 (Coordinated Universal Time) https://web.dev/building-a-dialog-component/

#javascript #html
star

Wed May 10 2023 06:38:07 GMT+0000 (Coordinated Universal Time) https://polypane.app/blog/building-a-lightbox-with-the-dialog-element/

#javascript #html
star

Tue May 09 2023 08:42:35 GMT+0000 (Coordinated Universal Time) https://healzz.blog

#html #css
star

Mon May 01 2023 17:12:19 GMT+0000 (Coordinated Universal Time)

#javascript #localstorage #html
star

Sat Apr 29 2023 23:11:01 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/default.asp

#html
star

Fri Apr 28 2023 13:24:17 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/24739126/scroll-to-a-specific-element-using-html

#html
star

Tue Apr 25 2023 12:32:11 GMT+0000 (Coordinated Universal Time) 30 Seconds Of Knowledge

#javascript #space #replacespace #html
star

Tue Apr 18 2023 17:00:46 GMT+0000 (Coordinated Universal Time) https://web.dev/defer-non-critical-css/

#html
star

Thu Apr 13 2023 12:52:41 GMT+0000 (Coordinated Universal Time)

#html #xaml #oracle-commerce-cloud
star

Tue Apr 11 2023 16:08:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Apr 08 2023 07:46:23 GMT+0000 (Coordinated Universal Time) https://help.skysilk.com/support/solutions/articles/9000126208--basic-how-to-create-new-users-and-grant-sudo-privileges-to-users-on-linux

#html
star

Sat Apr 08 2023 04:44:13 GMT+0000 (Coordinated Universal Time) https://developer.chrome.com/docs/lighthouse/best-practices/doctype/?utm_source

#html
star

Fri Apr 07 2023 22:25:53 GMT+0000 (Coordinated Universal Time)

##php ##wordpress #css #html
star

Thu Apr 06 2023 19:31:14 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename

#undefined #php #html
star

Thu Apr 06 2023 19:09:58 GMT+0000 (Coordinated Universal Time) https://jsfiddle.net/dokino7/xg0tvab2/3/

#javascript #html #css
star

Thu Apr 06 2023 11:05:56 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Apr 03 2023 17:35:04 GMT+0000 (Coordinated Universal Time) https://swiperjs.com/

#html
star

Mon Apr 03 2023 09:06:39 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Mar 31 2023 19:59:25 GMT+0000 (Coordinated Universal Time) https://forum.squarespace.com/topic/160151-adjusting-spacing-in-71-drop-down-nav/

#html
star

Fri Mar 31 2023 19:58:58 GMT+0000 (Coordinated Universal Time) https://forum.squarespace.com/topic/160151-adjusting-spacing-in-71-drop-down-nav/

#html
star

Wed Mar 29 2023 21:32:03 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Fri Mar 24 2023 06:34:55 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 06:31:47 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 06:30:23 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 06:25:52 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 04:44:30 GMT+0000 (Coordinated Universal Time)

#html #java
star

Fri Mar 24 2023 01:23:03 GMT+0000 (Coordinated Universal Time)

#html #java
star

Thu Mar 23 2023 15:47:47 GMT+0000 (Coordinated Universal Time)

#html #java
star

Thu Mar 23 2023 05:35:34 GMT+0000 (Coordinated Universal Time) https://www.qt.io/product/qt6

#html #css #button
star

Wed Mar 22 2023 18:53:03 GMT+0000 (Coordinated Universal Time) https://web.dev/codelab-preload-web-fonts/

#html
star

Mon Mar 20 2023 02:34:26 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Mar 20 2023 02:33:16 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Mar 15 2023 16:34:21 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Mar 15 2023 16:30:12 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Mar 15 2023 08:20:32 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Mar 15 2023 08:07:17 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Mar 14 2023 05:33:07 GMT+0000 (Coordinated Universal Time) https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js

#cdn #javascript #url #code #html
star

Thu Mar 09 2023 01:09:50 GMT+0000 (Coordinated Universal Time) https://developers.google.com/recaptcha/docs/display

#html
star

Fri Mar 03 2023 08:46:46 GMT+0000 (Coordinated Universal Time) http://www.movable-type.co.uk/scripts/latlong.html

#html #distance #nodejs
star

Thu Mar 02 2023 08:43:55 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Mon Feb 27 2023 01:19:12 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sat Feb 25 2023 02:49:41 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Sun Feb 19 2023 23:41:54 GMT+0000 (Coordinated Universal Time) https://flowbite.com/docs/components/navbar/

#html
star

Sun Feb 19 2023 15:59:29 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Sun Feb 19 2023 15:55:56 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Sun Feb 19 2023 04:40:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 18 2023 16:06:47 GMT+0000 (Coordinated Universal Time) https://codewithcurt.com/how-to-use-dogete-function-to-start-html-google-web-app/

#html
star

Sat Feb 18 2023 16:06:37 GMT+0000 (Coordinated Universal Time) https://codewithcurt.com/how-to-use-dogete-function-to-start-html-google-web-app/

#html
star

Fri Feb 17 2023 17:32:01 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 16 2023 15:25:18 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 16 2023 15:18:12 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 16 2023 11:53:10 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 16 2023 11:51:22 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 20:10:03 GMT+0000 (Coordinated Universal Time) https://www.howtogeek.com/677110/how-to-directly-link-to-text-within-a-web-page-in-chrome/

#javascript #html
star

Tue Feb 14 2023 13:52:35 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 13:51:13 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:59:21 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:55:51 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:55:51 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:55:51 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:54:52 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:53:23 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:51:57 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:47:04 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:47:03 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:45:11 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 14 2023 10:44:12 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 20:30:57 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 11:56:33 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 07:13:09 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 06:58:04 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 06:06:20 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 05:58:29 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 05:39:49 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 13 2023 04:55:51 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 12 2023 16:38:31 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 12 2023 14:38:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 11 2023 16:27:37 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:36 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:36 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:36 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:36 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:36 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:28 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:28 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:27 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 16:27:23 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 13:30:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 11:43:52 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 11:20:02 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 11:15:46 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 11:10:35 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 11:05:37 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 10:46:53 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 11 2023 10:36:36 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:43:50 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:33:04 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:30:31 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:21:48 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:21:48 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:06:28 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 12:01:38 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 11:52:41 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 11:38:24 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 11:38:23 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 11:36:20 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 11:31:47 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 10:18:53 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 09:47:04 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 08:37:32 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 10 2023 08:27:37 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 08 2023 13:37:53 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 07 2023 07:08:41 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 07 2023 06:11:55 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 05 2023 05:26:55 GMT+0000 (Coordinated Universal Time)

#html #wordpress
star

Sat Feb 04 2023 17:33:12 GMT+0000 (Coordinated Universal Time) https://docs.w3cub.com/dom_events/domcontentloaded

#html
star

Sat Feb 04 2023 11:45:24 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 11:43:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 11:42:15 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 10:14:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 09:54:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 08:11:48 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 08:07:42 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Feb 03 2023 19:02:31 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 02 2023 15:28:09 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 02 2023 09:51:41 GMT+0000 (Coordinated Universal Time) https://demos.wrappixel.com/premium-website-templates/ui-kit/wrapkit-bootstrap/package/wrapkit/sliders-static.html

#html
star

Thu Feb 02 2023 06:53:08 GMT+0000 (Coordinated Universal Time) https://htmldog.com/guides/css/beginner/applyingcss/

#html
star

Thu Feb 02 2023 06:52:58 GMT+0000 (Coordinated Universal Time) https://htmldog.com/guides/css/beginner/applyingcss/

#html
star

Thu Feb 02 2023 06:52:48 GMT+0000 (Coordinated Universal Time) https://htmldog.com/guides/css/beginner/applyingcss/

#html
star

Wed Feb 01 2023 15:26:38 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 01 2023 15:21:14 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 18:01:27 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 17:40:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 17:09:20 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 13:25:27 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 12:54:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 12:48:54 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 11:35:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 09:50:57 GMT+0000 (Coordinated Universal Time) C:/Users/intel/Desktop/dig%20fest/Mohd%20Midhlaj%20A%20A%206E%20Website%20Building/index.html

#html
star

Tue Jan 31 2023 09:50:56 GMT+0000 (Coordinated Universal Time) C:/Users/intel/Desktop/dig%20fest/Mohd%20Midhlaj%20A%20A%206E%20Website%20Building/index.html

#html
star

Mon Jan 30 2023 23:02:42 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 30 2023 15:40:40 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Jan 30 2023 05:01:55 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Jan 27 2023 18:33:07 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jan 27 2023 17:10:29 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Jan 26 2023 17:38:30 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Jan 26 2023 16:54:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Jan 26 2023 06:26:05 GMT+0000 (Coordinated Universal Time) https://www.thiscodeworks.com/how-to-get-the-domain-from-a-url-using-javascript-javascript-promises-howto/5e18fd750e84c280ef23c905

#js #html
star

Thu Jan 26 2023 06:02:46 GMT+0000 (Coordinated Universal Time) https://www.thiscodeworks.com/add-event-listener-to-multiple-buttons-with-the-same-class-javascript/5efa75c76c23bc0014be6336

#js #html
star

Tue Jan 17 2023 13:21:25 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 16 2023 09:47:19 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 11 2023 16:32:31 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 10 2023 09:43:17 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 09 2023 10:34:10 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Jan 09 2023 10:15:28 GMT+0000 (Coordinated Universal Time)

#css #html
star

Sun Jan 08 2023 18:46:07 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Jan 07 2023 13:54:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jan 06 2023 10:27:56 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/14643617/create-table-using-javascript

#html
star

Fri Jan 06 2023 00:44:47 GMT+0000 (Coordinated Universal Time) Connect MongoDB

#html
star

Thu Jan 05 2023 11:37:39 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 05 2023 09:46:32 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 02 2023 12:11:19 GMT+0000 (Coordinated Universal Time) https://animate.style/

#html
star

Sun Jan 01 2023 10:27:05 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Dec 28 2022 15:01:03 GMT+0000 (Coordinated Universal Time) https://www.a11yproject.com/posts/how-to-hide-content/

#css #html
star

Mon Dec 26 2022 16:52:45 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Dec 26 2022 16:23:52 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Dec 26 2022 15:06:19 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 24 2022 05:07:10 GMT+0000 (Coordinated Universal Time)

#array #dataset #html
star

Tue Dec 20 2022 15:17:53 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Dec 19 2022 02:13:37 GMT+0000 (Coordinated Universal Time) https://www.codeproject.com/Articles/5282688/AI-Chatbots-With-TensorFlow-js-Training-a-Trivia-E

#html
star

Sat Dec 17 2022 20:12:01 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 17 2022 18:05:39 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/tools/builders/navbar/

#html
star

Sat Dec 17 2022 17:46:32 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 17 2022 17:18:44 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 16 2022 15:51:13 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 16 2022 15:17:07 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 16 2022 15:09:30 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 16 2022 06:59:54 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-improved-styling-with-css/modules/wdcp-22-learn-css-typography-4c5912f3-6eb7-4ec7-a94a-de654e0bd6a3/lessons/css-typography

#html
star

Thu Dec 15 2022 12:21:09 GMT+0000 (Coordinated Universal Time) https://codi.link/PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCgk8aGVhZD4NCgkJPHRpdGxlPlBhZ2UgVGl0bGU8L3RpdGxlPg0KCTwvaGVhZD4NCgk8Ym9keT4NCg0KICAgIDxhcnRpY2xlIGNsYXNzPSJjYXJkIj4NCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtYm9keSI+DQogICAgICAgQEFudG9uaW8gUm9ibGVzDQogICAgICA8L2Rpdj4NCiAgICA8L2FydGljbGU+DQoJPC9ib2R5Pg0KPC9odG1sPg==%7COnJvb3Qgew0KICAtLWJvcmRlci1jb2xvcjogbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCB0b21hdG8gMCUsIGdvbGQgMTAwJSk7DQogIC0tY2FyZC1jb2xvcjogIzIyMjsNCn0NCi5jYXJkIHsNCiAgYmFja2dyb3VuZDogdmFyKC0tYm9yZGVyLWNvbG9yKTsNCiAgYXNwZWN0LXJhdGlvOiAxMC8xNjsNCiAgd2lkdGg6IDIwMHB4Ow0KICBwYWRkaW5nOiA1cHg7DQogIGJvcmRlci1yYWRpdXM6IDE2cHg7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCn0NCg0KLmNhcmQtYm9keSB7DQogIGNvbG9yOiB3aGVhdDsNCiAgYmFja2dyb3VuZDogdmFyKC0tY2FyZC1jb2xvcik7DQogIGRpc3BsYXk6IGZsZXg7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICBib3JkZXItcmFkaXVzOiAxNnB4Ow0KfQ0KDQoNCg0KDQo=%7C

#html #css
star

Thu Dec 15 2022 12:17:27 GMT+0000 (Coordinated Universal Time) https://codi.link/PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCgk8aGVhZD4NCgkJPHRpdGxlPlBhZ2UgVGl0bGU8L3RpdGxlPg0KCTwvaGVhZD4NCgk8Ym9keT4NCg0KICAgIDxhcnRpY2xlIGNsYXNzPSJjYXJkIj4NCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtYm9keSI+DQogICAgICAgQEFudG9uaW8gUm9ibGVzDQogICAgICA8L2Rpdj4NCiAgICA8L2FydGljbGU+DQoJPC9ib2R5Pg0KPC9odG1sPg

#html #css
star

Thu Dec 15 2022 03:43:22 GMT+0000 (Coordinated Universal Time) https://unlock-tools.blogspot.com/

#html
star

Thu Dec 15 2022 01:30:18 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Dec 14 2022 13:49:47 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Dec 13 2022 23:27:49 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Dec 12 2022 16:55:58 GMT+0000 (Coordinated Universal Time)

##php ##wordpress #css #html
star

Fri Dec 09 2022 21:16:19 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 09 2022 18:40:40 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 09 2022 18:16:52 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Dec 09 2022 15:27:15 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 08 2022 13:54:41 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 08 2022 13:44:32 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 08 2022 12:51:22 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 08 2022 00:07:49 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Dec 06 2022 22:16:31 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Dec 06 2022 21:11:36 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Dec 06 2022 03:54:56 GMT+0000 (Coordinated Universal Time) https://codepen.io/delvignefred/pen/ZEKyjeo

#html
star

Tue Dec 06 2022 03:51:11 GMT+0000 (Coordinated Universal Time) https://codepen.io/genarocolusso/pen/ozvamp

#html
star

Tue Dec 06 2022 03:50:16 GMT+0000 (Coordinated Universal Time) https://codepen.io/ivanodintsov/pen/WRjXdy

#html
star

Mon Dec 05 2022 22:09:05 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Dec 05 2022 13:06:18 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Dec 04 2022 19:38:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Dec 04 2022 12:56:42 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Dec 04 2022 12:12:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Dec 04 2022 12:00:51 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Dec 04 2022 11:13:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 03 2022 22:43:55 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 03 2022 17:16:40 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 03 2022 16:33:34 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 03 2022 16:11:14 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Dec 03 2022 15:22:46 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 01 2022 17:02:21 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 01 2022 06:33:52 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 01 2022 06:24:35 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 01 2022 02:12:26 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Nov 30 2022 22:38:27 GMT+0000 (Coordinated Universal Time) https://github.com/AYIDouble/HTML-Crypto-Currency-Chart-Snippets#readme

#html
star

Wed Nov 30 2022 13:00:19 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 16:13:30 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 16:11:09 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 16:00:20 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 15:57:27 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 15:38:40 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 15:32:07 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 15:24:19 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 15:23:12 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 29 2022 04:34:18 GMT+0000 (Coordinated Universal Time) https://www.techjockey.com/add_review

#html
star

Mon Nov 28 2022 05:01:49 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2076299/how-to-close-current-tab-in-a-browser-window

#java #javascript #html
star

Mon Nov 28 2022 05:01:24 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2076299/how-to-close-current-tab-in-a-browser-window

#html
star

Mon Nov 28 2022 02:14:39 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:48:19 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:39:31 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:31:38 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:29:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:28:32 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:23:43 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:21:30 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:19:49 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:16:06 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:15:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:10:26 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:09:48 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 20:05:04 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 19:58:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Nov 27 2022 09:14:11 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename

#html
star

Thu Nov 24 2022 08:30:54 GMT+0000 (Coordinated Universal Time) https://web.dev/meta-description/?utm_source

#html
star

Tue Nov 22 2022 18:09:48 GMT+0000 (Coordinated Universal Time) https://support.google.com/accounts/answer/7299973?hl=en-GB

#html
star

Tue Nov 22 2022 06:22:08 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Nov 21 2022 15:57:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Nov 19 2022 09:45:24 GMT+0000 (Coordinated Universal Time) https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/

#js #html #css
star

Fri Nov 18 2022 19:05:15 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Fri Nov 18 2022 19:04:03 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Fri Nov 18 2022 08:25:18 GMT+0000 (Coordinated Universal Time) https://eseospace.dev/websites/expertreputation/wp-admin/theme-editor.php?file

#php #html
star

Thu Nov 17 2022 18:01:21 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Wed Nov 16 2022 05:20:29 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/learn-javascript-form-validation-by-making-a-form/

#html
star

Sat Nov 12 2022 21:56:17 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Nov 11 2022 13:41:49 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Nov 09 2022 13:13:40 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/

#css #html
star

Mon Nov 07 2022 11:54:24 GMT+0000 (Coordinated Universal Time) https://codepen.io/Beast-Tagger/pen/vYrXYNq

#html
star

Mon Nov 07 2022 11:51:58 GMT+0000 (Coordinated Universal Time) https://www.javatpoint.com/how-to-add-social-media-icons-in-html

#html
star

Sun Nov 06 2022 21:55:19 GMT+0000 (Coordinated Universal Time) https://demos.creative-tim.com/argon-dashboard-pro-bs4/docs/plugins/dropzone.html

#html
star

Sun Nov 06 2022 07:24:14 GMT+0000 (Coordinated Universal Time) https://github.com/murufi/murufi/new/main?filename

#undefined #html #css
star

Fri Nov 04 2022 16:56:10 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/components/carousel/

#html
star

Fri Nov 04 2022 15:17:36 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/21397743/passing-html-input-value-as-a-javascript-function-parameter

#html
star

Thu Nov 03 2022 12:48:54 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Nov 01 2022 13:45:30 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Nov 01 2022 13:33:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Oct 31 2022 15:00:16 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/57394069/how-to-show-a-modal-from-an-anchor-in-a-checkbox-label

#html
star

Mon Oct 31 2022 08:11:28 GMT+0000 (Coordinated Universal Time) https://webgolovolomki.com/en/how-to-add-a-css-class-on-scroll/

#html
star

Sat Oct 29 2022 18:24:07 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Oct 27 2022 02:23:43 GMT+0000 (Coordinated Universal Time)

#html #lists #list #htmllist
star

Mon Oct 24 2022 07:56:41 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 22 2022 12:20:31 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?rlz

#html
star

Sat Oct 15 2022 17:50:06 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 15 2022 17:43:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 15 2022 17:42:02 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 15 2022 17:38:30 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 15 2022 17:01:38 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 15 2022 17:00:29 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Oct 14 2022 19:18:08 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Oct 14 2022 15:03:48 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 13 2022 07:45:59 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal

#css #html
star

Wed Oct 12 2022 07:03:19 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html
star

Wed Oct 12 2022 07:02:48 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html
star

Sun Oct 09 2022 06:30:33 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Oct 09 2022 06:29:27 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Oct 03 2022 03:48:36 GMT+0000 (Coordinated Universal Time) https://ru.stackoverflow.com/questions/775378/воспроизведение-нескольких-аудио-на-странице-с-остановкой-уже-запущенных

#html
star

Thu Sep 29 2022 13:11:22 GMT+0000 (Coordinated Universal Time) https://keep.google.com/

#javascript #html
star

Wed Sep 28 2022 06:33:20 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/

#html
star

Tue Sep 27 2022 17:23:40 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2240710/how-to-get-mp3-files-to-play-in-iphone-safari-web-browser

#html
star

Tue Sep 27 2022 10:17:47 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 27 2022 08:37:45 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 27 2022 08:35:43 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 27 2022 08:34:58 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 27 2022 08:31:16 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 27 2022 08:30:42 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 27 2022 08:29:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Sep 25 2022 08:24:42 GMT+0000 (Coordinated Universal Time) https://sebhastian.com/html-hover-text/

#html #css
star

Fri Sep 23 2022 17:45:33 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Sep 23 2022 17:44:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Sep 22 2022 22:05:03 GMT+0000 (Coordinated Universal Time)

#javascript #handlebars #html
star

Wed Sep 21 2022 10:35:29 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Sep 21 2022 10:11:03 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Sep 19 2022 06:11:36 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Sep 19 2022 03:38:50 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Sep 16 2022 06:43:14 GMT+0000 (Coordinated Universal Time) https://www.itsolutionstuff.com/post/laravel-table-raw-inline-editing-tutorialexample.html

#html
star

Thu Sep 15 2022 03:31:16 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Sep 14 2022 06:49:26 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/65625803/load-a-tiff-file-using-jquery-and-javascript

#html
star

Tue Sep 13 2022 14:11:45 GMT+0000 (Coordinated Universal Time) https://swiperjs.com/get-started

#html
star

Tue Sep 13 2022 08:50:35 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/19508183/how-to-force-input-to-only-allow-alpha-letters

#javascript #html
star

Fri Sep 09 2022 13:52:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Sep 09 2022 13:52:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Sep 08 2022 19:56:28 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/standard/navigation/headers/

#html
star

Thu Sep 08 2022 17:50:07 GMT+0000 (Coordinated Universal Time) https://austingil.com/html-capture-attribute/

#html #camera #capture #video
star

Thu Sep 08 2022 16:13:33 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html #python
star

Thu Sep 08 2022 12:45:35 GMT+0000 (Coordinated Universal Time)

#javascript #jquery #html #css
star

Thu Sep 08 2022 12:44:06 GMT+0000 (Coordinated Universal Time)

#javascript #jquery #html #css
star

Thu Sep 08 2022 10:33:17 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Sep 07 2022 09:11:31 GMT+0000 (Coordinated Universal Time)

#html #css #php #mys #js #json
star

Tue Sep 06 2022 17:37:45 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/33988896/where-to-put-css-file-in-laravel-project

#html
star

Tue Sep 06 2022 13:31:07 GMT+0000 (Coordinated Universal Time) https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask

#html #flask #uploadform
star

Tue Sep 06 2022 13:20:51 GMT+0000 (Coordinated Universal Time) https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask

#html #uploadform #flask
star

Tue Sep 06 2022 12:23:03 GMT+0000 (Coordinated Universal Time) https://blog.miguelgrinberg.com/post/handling-file-uploads-with-flask

#html #form #uploadfile
star

Fri Sep 02 2022 05:36:51 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Sep 02 2022 05:36:25 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Aug 29 2022 20:07:17 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Mon Aug 29 2022 19:26:26 GMT+0000 (Coordinated Universal Time)

#osm #html #javascript
star

Mon Aug 29 2022 19:04:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Aug 29 2022 18:47:34 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Mon Aug 29 2022 17:23:51 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Mon Aug 29 2022 17:07:21 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Aug 29 2022 16:15:48 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Aug 29 2022 15:57:19 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Aug 29 2022 15:33:25 GMT+0000 (Coordinated Universal Time) https://codepad.co/snippet/circular-progress-bar-using-css-56272

#html #css
star

Mon Aug 29 2022 15:32:08 GMT+0000 (Coordinated Universal Time) https://codepad.co/snippet/login-page-2-56216

#css #html
star

Sun Aug 28 2022 22:53:52 GMT+0000 (Coordinated Universal Time)

#html #javascript #css
star

Thu Aug 25 2022 18:57:09 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 25 2022 14:46:06 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Aug 24 2022 06:42:25 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Aug 24 2022 04:36:59 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Aug 24 2022 04:05:43 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 23 2022 11:30:18 GMT+0000 (Coordinated Universal Time) https://www.itsolutionstuff.com/post/how-to-set-scroll-to-bottom-in-jqueryexample.html

#html
star

Fri Aug 19 2022 18:45:25 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Fri Aug 19 2022 18:41:32 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Fri Aug 19 2022 05:30:39 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2906582/how-do-i-create-an-html-button-that-acts-like-a-link

#html
star

Wed Aug 17 2022 21:27:03 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Aug 13 2022 13:06:44 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39066989/tic-tac-toe-javascript-how-to-store-player-wins-and-to-alert-if-there-is-a-tie

#javascript #html
star

Fri Aug 12 2022 18:39:22 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_tel

#html
star

Fri Aug 12 2022 13:58:13 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output

#html
star

Fri Aug 12 2022 13:45:43 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

#html
star

Fri Aug 12 2022 13:44:25 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_legend

#html
star

Fri Aug 12 2022 13:37:33 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

#html
star

Fri Aug 12 2022 12:50:11 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Aug 12 2022 11:41:53 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/html_forms_attributes.asp

#html
star

Fri Aug 12 2022 11:41:18 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/html_classes.asp

#html #javascript
star

Fri Aug 12 2022 11:38:06 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 11 2022 20:57:16 GMT+0000 (Coordinated Universal Time)

#wordpress #html
star

Wed Aug 10 2022 14:08:02 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Wed Aug 10 2022 13:27:13 GMT+0000 (Coordinated Universal Time)

#php #javascript #html
star

Thu Aug 04 2022 07:21:52 GMT+0000 (Coordinated Universal Time)

#css #html
star

Wed Aug 03 2022 04:31:01 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 02 2022 13:27:22 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

#html
star

Mon Aug 01 2022 12:09:50 GMT+0000 (Coordinated Universal Time)

#javascript #css #html
star

Sat Jul 30 2022 14:53:44 GMT+0000 (Coordinated Universal Time) https://www.mydirtyhobby.de/n/profil/visits/lastvisitors

#html #javascript #json
star

Sat Jul 30 2022 11:38:39 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/40690284/remove-increment-and-decrement-icon-from-input-field

#html
star

Sat Jul 30 2022 11:30:00 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/40690284/remove-increment-and-decrement-icon-from-input-field

#css #html
star

Tue Jul 26 2022 14:42:55 GMT+0000 (Coordinated Universal Time) https://bootstrap-cheatsheet.themeselection.com/index.html#card-grid

#html #css #javascript
star

Tue Jul 26 2022 14:18:40 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/docs/5.0/getting-started/introduction/

#html
star

Sat Jul 23 2022 07:12:10 GMT+0000 (Coordinated Universal Time) https://powerusers.microsoft.com/t5/Building-Power-Apps/Launch-URL-by-clicking-on-an-image/m-p/17519#M7538

#powerapps #html
star

Fri Jul 22 2022 13:11:25 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/cssref/tryit.asp?filename

#css #html
star

Fri Jul 22 2022 13:07:36 GMT+0000 (Coordinated Universal Time)

#css #html
star

Wed Jul 20 2022 19:35:13 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms

#html
star

Wed Jul 20 2022 10:06:18 GMT+0000 (Coordinated Universal Time)

#code #html #javascript #countdowntimer
star

Wed Jul 20 2022 09:26:56 GMT+0000 (Coordinated Universal Time)

#code #html #javascript
star

Wed Jul 20 2022 09:25:40 GMT+0000 (Coordinated Universal Time)

#code #html #php
star

Tue Jul 19 2022 14:53:18 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/

#html
star

Fri Jul 15 2022 01:07:45 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Jul 14 2022 10:41:35 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio

#html
star

Tue Jul 12 2022 20:02:20 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/27760939/iframes-and-links-in-multiple-webpages

#html
star

Tue Jul 12 2022 20:01:56 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/27760939/iframes-and-links-in-multiple-webpages

#html
star

Tue Jul 12 2022 13:57:19 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/8384751/css-text-gradient

#css #scss #sass #html
star

Tue Jul 12 2022 12:05:03 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jul 11 2022 21:08:09 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jul 08 2022 17:26:38 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jul 08 2022 15:08:10 GMT+0000 (Coordinated Universal Time) https://medium.com/@cahyofajar28/live-search-in-laravel-8-using-ajax-and-mysql-ac4bc9b0a93c

#php #javascript #html #blade
star

Fri Jul 01 2022 21:23:17 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/57319670/how-to-create-custom-popup-menu-with-pointer-in-android

#html
star

Thu Jun 30 2022 10:16:30 GMT+0000 (Coordinated Universal Time) https://www.codegrepper.com/code-examples/html/one+folder+back+in+html

#html #folder_manipulation
star

Tue Jun 28 2022 11:24:00 GMT+0000 (Coordinated Universal Time)

#html #liquid #shopify
star

Sun Jun 26 2022 09:19:46 GMT+0000 (Coordinated Universal Time)

#blade #javascript #html
star

Sat Jun 25 2022 08:42:29 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jun 23 2022 04:20:48 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jun 18 2022 05:49:17 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-website

#html
star

Wed Jun 15 2022 17:39:10 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Wed Jun 15 2022 16:48:30 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Mon Jun 13 2022 02:20:39 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jun 07 2022 13:10:30 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/tryit.asp?filename

#html
star

Mon Jun 06 2022 10:52:25 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/javascript-debounce-example/

#html
star

Fri Jun 03 2022 08:52:37 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component

#html
star

Thu Jun 02 2022 11:02:10 GMT+0000 (Coordinated Universal Time) http://127.0.0.1:3000/film.html

#html #css
star

Tue May 31 2022 03:15:51 GMT+0000 (Coordinated Universal Time)

#html
star

Mon May 30 2022 11:16:53 GMT+0000 (Coordinated Universal Time)

#react.js #html
star

Thu May 26 2022 21:07:12 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 26 2022 20:19:53 GMT+0000 (Coordinated Universal Time)

#wordpress #html
star

Fri May 20 2022 11:25:29 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 19 2022 08:41:32 GMT+0000 (Coordinated Universal Time)

#react.js #html
star

Thu May 19 2022 08:04:13 GMT+0000 (Coordinated Universal Time)

#html #wordpress
star

Mon May 16 2022 07:36:52 GMT+0000 (Coordinated Universal Time) https://google.github.io/material-design-icons/

#html
star

Mon May 16 2022 00:14:05 GMT+0000 (Coordinated Universal Time) https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-more-text-styles

#css #html
star

Mon May 16 2022 00:09:11 GMT+0000 (Coordinated Universal Time) https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-more-text-styles

#css #html
star

Sun May 15 2022 21:25:50 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 15 2022 21:13:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 15 2022 21:00:06 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 15 2022 20:50:18 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 13 2022 23:49:20 GMT+0000 (Coordinated Universal Time) https://conceptartmonie4-wixsite-com.translate.goog/monpremiersiteweb?_x_tr_hl

#html
star

Fri May 13 2022 15:35:39 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 12 2022 08:42:10 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 12 2022 02:09:51 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 10 2022 10:12:54 GMT+0000 (Coordinated Universal Time)

#js #html #css
star

Sat May 07 2022 08:40:09 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/

#html
star

Fri May 06 2022 21:48:02 GMT+0000 (Coordinated Universal Time) https://justmarkup.com/articles/2019-12-04-hamburger-menu/

#html
star

Fri May 06 2022 07:25:07 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Thu May 05 2022 00:01:46 GMT+0000 (Coordinated Universal Time) https://medium.com/codex/a-better-calendly-embed-d8aabaa421e7

#html
star

Wed May 04 2022 07:34:32 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Apr 28 2022 14:50:59 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines

#html
star

Wed Apr 27 2022 10:54:56 GMT+0000 (Coordinated Universal Time)

#html #javascript #ss
star

Wed Apr 27 2022 10:34:59 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Apr 27 2022 09:12:56 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Apr 26 2022 16:45:44 GMT+0000 (Coordinated Universal Time) https://www.htmhell.dev/26-tasty-buttons/

#html
star

Mon Apr 25 2022 09:00:11 GMT+0000 (Coordinated Universal Time) https://web.dev/read-files/

#html
star

Sun Apr 24 2022 10:26:48 GMT+0000 (Coordinated Universal Time) https://codepen.io/amirgnm/pen/WNdLNmb

#html #css #javascript
star

Thu Apr 21 2022 21:20:04 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Apr 21 2022 11:54:33 GMT+0000 (Coordinated Universal Time) https://www.prestashop.com/forums/topic/1025613-whatsapp-live-chat-share-buttons-without-module/

#html
star

Tue Apr 19 2022 14:32:05 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 15 2022 12:03:11 GMT+0000 (Coordinated Universal Time) https://docs.expressionengine.com/latest/channels/channel-form/overview.html

#html
star

Sat Apr 09 2022 03:56:38 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Apr 07 2022 12:35:00 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Apr 07 2022 07:25:07 GMT+0000 (Coordinated Universal Time)

#html #asp.net
star

Wed Apr 06 2022 23:24:01 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Apr 06 2022 20:51:12 GMT+0000 (Coordinated Universal Time) https://www.paulirish.com/2012/box-sizing-border-box-ftw/

#html
star

Wed Apr 06 2022 20:13:32 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Apr 06 2022 17:49:29 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html
star

Wed Apr 06 2022 17:48:52 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html
star

Tue Apr 05 2022 08:31:18 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/a/6881058/3238619

#php #html #form
star

Tue Apr 05 2022 05:46:58 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Mon Apr 04 2022 05:24:38 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Apr 02 2022 10:39:23 GMT+0000 (Coordinated Universal Time) https://animate.style/

#html
star

Sat Apr 02 2022 04:57:16 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Fri Apr 01 2022 08:39:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Mar 26 2022 17:05:25 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Mar 26 2022 17:04:17 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Mar 26 2022 16:32:52 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Mar 26 2022 16:31:29 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Mar 26 2022 16:29:41 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Mar 26 2022 16:28:21 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Mar 25 2022 02:35:04 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/135288/como-poner-un-logo-en-la-barra-de-navegación

#html
star

Thu Mar 24 2022 12:23:30 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 24 2022 12:06:41 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 24 2022 09:51:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Mar 20 2022 17:56:00 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #js #html #youtube-embed #lazy-load #youtube-lazy-load
star

Sun Mar 20 2022 17:39:14 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#js #css #html #smooth-scrolling #luxy.js
star

Sat Mar 19 2022 14:07:29 GMT+0000 (Coordinated Universal Time) https://gotolow.com/addons/low-options/docs

#html
star

Sat Mar 19 2022 13:37:06 GMT+0000 (Coordinated Universal Time) https://docs.expressionengine.com/latest/development/control-panel-js/events.html

#html #javascript
star

Sat Mar 19 2022 13:36:00 GMT+0000 (Coordinated Universal Time) https://docs.expressionengine.com/latest/development/control-panel-js/events.html

#html
star

Sat Mar 19 2022 13:30:07 GMT+0000 (Coordinated Universal Time) https://web.dev/codelab-avoid-invisible-text/

#html #javascript
star

Fri Mar 18 2022 13:29:06 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 17 2022 09:02:08 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 17 2022 00:07:44 GMT+0000 (Coordinated Universal Time)

#html #span #p #div
star

Tue Mar 15 2022 11:54:28 GMT+0000 (Coordinated Universal Time) https://stevencotterill.com/articles/creating-contact-forms-on-static-html-websites/

#html
star

Sun Mar 13 2022 17:19:19 GMT+0000 (Coordinated Universal Time)

#html #pandas #python
star

Thu Mar 10 2022 00:15:31 GMT+0000 (Coordinated Universal Time) https://opensource.locaweb.com.br/locawebstyle-v2/manual/layout/tela-login/

#html
star

Fri Mar 04 2022 03:57:13 GMT+0000 (Coordinated Universal Time) https://web.dev/add-manifest/

#html
star

Fri Mar 04 2022 03:32:29 GMT+0000 (Coordinated Universal Time) https://web.dev/browser-level-image-lazy-loading/

#html
star

Fri Mar 04 2022 03:30:53 GMT+0000 (Coordinated Universal Time) https://web.dev/browser-level-image-lazy-loading/

#html
star

Fri Mar 04 2022 03:29:22 GMT+0000 (Coordinated Universal Time) https://web.dev/browser-level-image-lazy-loading/

#html
star

Thu Mar 03 2022 01:37:54 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 03 2022 00:42:27 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Mar 02 2022 15:54:31 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 27 2022 12:40:31 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2701192/what-characters-can-be-used-for-up-down-triangle-arrow-without-stem-for-displa

#html
star

Wed Feb 23 2022 17:58:25 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/responsive-iframes-with-the-css-aspect-ratio-property/

#html #css #iframe #responsive
star

Wed Feb 23 2022 17:11:51 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/smooth-scrolling-links-with-only-css/

#html #css #scroll #animation
star

Tue Feb 22 2022 21:22:21 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 21:16:19 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 20:58:33 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 20:45:25 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 20:39:53 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 20:20:30 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 18:19:02 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 17:49:19 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 14:21:45 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 14:20:34 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 10:24:07 GMT+0000 (Coordinated Universal Time)

##javascript #html
star

Tue Feb 22 2022 08:36:48 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 08:11:53 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 22 2022 08:09:08 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 18:03:09 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 21 2022 11:03:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 21 2022 10:19:33 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 06:39:40 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 06:00:53 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 05:47:10 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 05:39:15 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 05:37:51 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 21 2022 03:55:39 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 22:43:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:42:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:12:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:09:19 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 20:41:16 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 20:10:14 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 19:29:08 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 19:28:35 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 19:28:02 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 19:20:10 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 18:46:43 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 18:42:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 17:33:03 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 16:57:02 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 16:53:55 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 16:50:14 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 15:32:01 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 15:31:00 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 14:03:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 14:01:27 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 14:00:37 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 13:13:06 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 10:21:54 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 10:20:37 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 10:18:28 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 10:05:11 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 10:00:04 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 09:59:21 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 09:57:31 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 09:06:25 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 09:05:45 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 09:05:03 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 09:03:11 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 05:46:52 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 05:45:34 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 20 2022 05:41:13 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 20:00:16 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 19:53:59 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 19:16:59 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 18:46:09 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 18:32:31 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 17:03:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 17:02:41 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 17:01:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 16:58:44 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 14:58:46 GMT+0000 (Coordinated Universal Time) https://fonts.google.com/

#html #fonts
star

Sat Feb 19 2022 07:56:23 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 19 2022 06:52:43 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 17 2022 22:16:10 GMT+0000 (Coordinated Universal Time)

#html #css #email #tables
star

Thu Feb 17 2022 15:24:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:35:26 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:33:57 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:32:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:30:52 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:29:30 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:27:45 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:25:37 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 17:54:59 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/49654527/open-link-in-new-window-with-vuetify-v-btn-and-vue-router

#html
star

Wed Feb 16 2022 03:25:18 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 16 2022 03:24:30 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 16 2022 03:05:49 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 16 2022 03:05:10 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 16 2022 02:52:24 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 16 2022 02:49:21 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 15 2022 16:02:39 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 15 2022 04:42:32 GMT+0000 (Coordinated Universal Time)

#imageupload #form #html #php
star

Mon Feb 14 2022 02:24:34 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 14 2022 02:23:24 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 14 2022 01:40:00 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 14 2022 01:18:45 GMT+0000 (Coordinated Universal Time) https://learn-the-web.algonquindesign.ca/topics/seo-cheat-sheet/

#html
star

Mon Feb 14 2022 01:17:26 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #svg
star

Mon Feb 14 2022 01:05:15 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 19:26:44 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 13:53:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 12:44:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 13 2022 12:44:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 12:35:52 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 12:25:23 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 12:06:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 12:06:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 12:05:14 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:31:44 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:29:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:25:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:19:28 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:18:52 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:17:40 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 11:17:01 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 10:57:35 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 10:56:45 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 10:54:59 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 10:23:42 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 10:22:13 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 09:33:09 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 09:32:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 09:31:33 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 07:11:14 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 06:24:54 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:22:00 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:15:24 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:14:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:12:56 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 05:32:32 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 05:30:49 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 05:29:10 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 04:21:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 04:19:33 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 04:18:23 GMT+0000 (Coordinated Universal Time) https://littlesnippets.net/snip1585

#html
star

Sun Feb 13 2022 02:26:23 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 02:26:01 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 02:23:21 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 13 2022 01:49:16 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/514611/c%c3%b3mo-difuminar-el-borde-de-clip-path-en-un-enmascaramiento

#html #css #javascript #svg
star

Sat Feb 12 2022 20:38:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 20:37:44 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:56:09 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:51:16 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:40:42 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:39:42 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:39:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:38:32 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:38:09 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:37:40 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:36:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:34:42 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:32:23 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 19:13:28 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:58:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:57:06 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:55:42 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:54:57 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:37:18 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:35:13 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:35:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:34:49 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:32:39 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:31:10 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:24:19 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 18:16:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 17:51:23 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 12 2022 13:08:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 13:06:25 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 12:41:16 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/57793226/vuetify-how-can-i-disable-button-till-all-validation-rules-are-true/57827717

#html
star

Sat Feb 12 2022 10:15:12 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 09:49:11 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 12 2022 09:33:36 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 12 2022 09:19:04 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 19:58:05 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 19:55:28 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 14:45:10 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Fri Feb 11 2022 14:21:27 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 10:24:21 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 10:23:39 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 09:54:43 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:31:20 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:28:02 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:26:58 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:25:56 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:25:56 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:23:41 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:22:26 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:21:01 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:17:39 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:16:04 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:13:40 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:11:20 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 07:05:05 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 06:59:48 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 06:54:22 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 06:45:17 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 06:43:49 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 06:40:11 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 06:37:15 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 03:12:48 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 03:05:56 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 11 2022 00:06:31 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/php/php_file_upload.asp

#imageupload #form #html #php
star

Thu Feb 10 2022 18:47:27 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 18:46:43 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 18:45:54 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 18:45:14 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 17:58:38 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 17:38:18 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 17:17:57 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 10:16:58 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 10:14:09 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 10:11:51 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 10 2022 10:07:24 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 20:57:47 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 20:34:38 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 20:31:57 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 20:26:24 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 18:39:36 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 17:47:08 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 17:11:04 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 17:10:22 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 16:56:47 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 15:31:43 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 15:29:18 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 15:20:11 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 15:13:54 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 15:08:22 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 12:57:58 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 12:56:44 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 12:55:01 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 12:52:31 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 12:33:56 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 12:27:48 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 11:25:07 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 11:20:00 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 11:13:12 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 09:16:56 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 09:16:44 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 09:16:33 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 09:15:33 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 09:15:17 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 08:20:27 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 08:16:01 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 09 2022 07:44:26 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 09 2022 07:28:05 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 09 2022 07:11:45 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/codeeditor/jquery-welcome.html

#jquery #css #html #javascript #java #python
star

Tue Feb 08 2022 21:00:34 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 20:40:49 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 08 2022 18:53:37 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 18:52:22 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 08 2022 18:23:37 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 18:17:48 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 17:41:15 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 16:44:09 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 14:03:07 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 13:43:15 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 08 2022 13:37:53 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 08 2022 13:16:27 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 13:13:58 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 13:02:16 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:54:47 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:53:22 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:52:37 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:51:35 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:43:44 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:40:15 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:37:11 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-media.html

#html
star

Tue Feb 08 2022 12:36:42 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-meta.html

#html
star

Tue Feb 08 2022 12:35:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-headings.html

#html
star

Tue Feb 08 2022 12:35:17 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-event-attributes.html

#html
star

Tue Feb 08 2022 12:34:53 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-comments.html

#html
star

Tue Feb 08 2022 12:34:30 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-colors.html

#html
star

Tue Feb 08 2022 12:34:08 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-classes.html

#html
star

Tue Feb 08 2022 12:33:46 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-attributes.html

#html
star

Tue Feb 08 2022 12:33:34 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:33:11 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-elements.html

#html
star

Tue Feb 08 2022 12:32:54 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 12:31:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/java/java-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:31:09 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/php/php-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:30:12 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/bootstrap/bootstrap.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:28:58 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/jquery/jquery-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:28:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/js/javascript-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:26:42 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:25:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:10:35 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 08 2022 11:23:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/wbr.html

#html
star

Tue Feb 08 2022 11:22:53 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/video.html

#html
star

Tue Feb 08 2022 11:21:59 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/ul.html

#html
star

Tue Feb 08 2022 11:21:09 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/u.html

#html
star

Tue Feb 08 2022 11:20:45 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/track.html

#html
star

Tue Feb 08 2022 11:20:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/tr.html

#html
star

Tue Feb 08 2022 11:19:40 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/title.html

#html
star

Tue Feb 08 2022 11:18:46 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/time.html

#html
star

Tue Feb 08 2022 11:18:14 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/thead.html

#html
star

Tue Feb 08 2022 11:17:41 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/th.html

#html
star

Tue Feb 08 2022 11:17:03 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/tfoot.html

#html
star

Tue Feb 08 2022 11:16:26 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/textarea.html

#html
star

Tue Feb 08 2022 11:15:53 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/template.html

#html
star

Tue Feb 08 2022 11:15:13 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/td.html

#html
star

Tue Feb 08 2022 11:14:35 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/tbody.html

#html
star

Tue Feb 08 2022 11:14:00 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/table.html

#html #css #javascript #java #python #sass
star

Tue Feb 08 2022 11:12:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/svg.html

#html
star

Tue Feb 08 2022 11:11:46 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/sup.html

#html
star

Tue Feb 08 2022 11:11:09 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/summary.html

#html
star

Tue Feb 08 2022 11:10:45 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/sub.html

#html #css #java #javascript #php #sass #bootstrap
star

Tue Feb 08 2022 11:06:55 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/style.html

#html #css #javascript #php #python #sass
star

Tue Feb 08 2022 11:05:15 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/strong.html

#html
star

Tue Feb 08 2022 11:04:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/source.html

#html
star

Tue Feb 08 2022 11:04:04 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/small.html

#html
star

Tue Feb 08 2022 11:03:26 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/select.html

#html
star

Tue Feb 08 2022 11:02:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/script.html

#html
star

Tue Feb 08 2022 11:01:59 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/samp.html

#html
star

Tue Feb 08 2022 11:01:01 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/s.html

#html
star

Tue Feb 08 2022 11:00:26 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/ruby.html

#html
star

Tue Feb 08 2022 10:59:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/rt.html

#html
star

Tue Feb 08 2022 10:59:06 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/rp.html

#html
star

Tue Feb 08 2022 10:58:29 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/progress.html

#html
star

Tue Feb 08 2022 10:57:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/pre.html

#html
star

Tue Feb 08 2022 10:57:02 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/picture.html

#html
star

Tue Feb 08 2022 10:56:22 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/p.html

#html
star

Tue Feb 08 2022 10:55:25 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/output.html

#html
star

Tue Feb 08 2022 10:54:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/optgroup.html

#html
star

Tue Feb 08 2022 10:53:51 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/ol.html

#html
star

Tue Feb 08 2022 10:53:08 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/object.html

#html
star

Tue Feb 08 2022 10:52:26 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/nav.html

#html
star

Tue Feb 08 2022 10:51:44 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/menuitem.html

#html
star

Tue Feb 08 2022 10:51:03 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/menu.html

#html
star

Tue Feb 08 2022 10:50:21 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/mark.html

#html
star

Tue Feb 08 2022 10:49:49 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/map.html

#html
star

Tue Feb 08 2022 10:48:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/main.html

#html
star

Tue Feb 08 2022 10:48:21 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/link.html

#html
star

Tue Feb 08 2022 10:46:42 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/li.html

#html
star

Tue Feb 08 2022 10:45:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/label.html

#html
star

Tue Feb 08 2022 10:44:50 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/keygen.html

#html
star

Tue Feb 08 2022 10:44:06 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/kbd.html

#html
star

Tue Feb 08 2022 10:43:22 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/ins.html

#html
star

Tue Feb 08 2022 10:42:06 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/input.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:41:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/img.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:40:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/iframe.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:39:04 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/i.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:34:37 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 08 2022 09:25:14 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/html.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:24:36 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/hr.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:24:00 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/h.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:23:29 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/header.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:22:55 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/head.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:22:25 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/form.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:21:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/footer.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:21:28 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/figure.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:20:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/fieldset.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:20:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/embed.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:19:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/em.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:19:13 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dt.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:18:32 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dl.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:17:49 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/div.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:17:19 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dialog.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:16:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dfn.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:16:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/details.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:15:40 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/del.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:15:05 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dd.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:14:36 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/data.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:14:05 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/colgroup.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:13:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/code.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:12:48 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/cite.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:12:21 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/caption.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:11:32 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/canvas.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:11:01 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/button.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:10:21 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/br.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:09:47 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/body.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:09:22 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/blockquote.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:08:49 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/bdo.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:08:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/bdi.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:07:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/base.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:06:58 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/b.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:06:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/audio.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:05:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/aside.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:57:04 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/article.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:56:01 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-tutorial.html/ref/area.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:40:32 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/area.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:39:50 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javascript #php #sass
star

Tue Feb 08 2022 08:38:47 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/address.html

#html #css #java #javasc #php #sass
star

Tue Feb 08 2022 07:58:53 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javasc #php #sass
star

Tue Feb 08 2022 07:56:50 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javasc #php #sass
star

Tue Feb 08 2022 07:55:31 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/a.html

#html
star

Mon Feb 07 2022 19:26:16 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 19:25:17 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 12:53:11 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:51:00 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:48:52 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:44:58 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:32:35 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:28:56 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:25:08 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:20:58 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 12:20:51 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 12:01:22 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 11:59:45 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 11:55:36 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 10:02:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 10:01:06 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Mon Feb 07 2022 09:56:53 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Mon Feb 07 2022 07:51:32 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 07:01:57 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 07:00:56 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 07:00:01 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 06:44:54 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-tutorial.html

#html #tutorials #htmltutorisls #element #elementtutorisls
star

Mon Feb 07 2022 05:58:13 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 05:55:58 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Feb 07 2022 05:53:38 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 10:18:34 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 10:09:55 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 09:51:01 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 09:45:46 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 02:08:00 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 02:07:23 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 02:07:03 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 06 2022 02:05:50 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Feb 05 2022 11:35:24 GMT+0000 (Coordinated Universal Time) https://webmaker.app/app/

#undefined #button #html
star

Fri Feb 04 2022 21:17:32 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 20:01:38 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 19:36:58 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 19:29:21 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 19:18:24 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 19:01:26 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:44:41 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:38:56 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:16:34 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:12:10 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:10:52 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:09:23 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:08:41 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 17:05:34 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 16:39:30 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 16:37:16 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 16:34:14 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 16:30:13 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 16:24:25 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 16:21:07 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 15:23:46 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 15:05:35 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Feb 04 2022 08:59:02 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Feb 04 2022 06:28:51 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Feb 04 2022 05:43:37 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Fri Feb 04 2022 05:41:44 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Thu Feb 03 2022 19:56:37 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 19:51:24 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 19:49:00 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 19:21:52 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 19:14:21 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 19:02:29 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 16:52:00 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 16:46:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 16:25:22 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 15:07:28 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Thu Feb 03 2022 14:57:34 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 14:50:16 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 14:43:05 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 14:18:47 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 14:05:11 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 14:02:43 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 13:56:25 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 13:49:01 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Feb 03 2022 13:04:19 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:58:44 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:58:05 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:57:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:55:38 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:54:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:50:14 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 11:22:49 GMT+0000 (Coordinated Universal Time) Qureskincare

#liquid #html
star

Wed Feb 02 2022 20:55:33 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 20:40:39 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 20:40:31 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 20:35:03 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 19:41:36 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 18:58:50 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 18:58:03 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 18:49:26 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 18:32:21 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 17:42:13 GMT+0000 (Coordinated Universal Time) https://medium.com/@jekamabu/la-verdadera-diferencia-entre-comillas-simples-y-dobles-comillas-en-javascript-508a4a572190

#html #css #javascript
star

Wed Feb 02 2022 16:36:40 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 12:13:26 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 12:11:22 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 12:10:20 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 12:09:17 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 12:07:43 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 11:06:27 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 10:43:43 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 09:51:57 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 02 2022 09:25:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 02 2022 08:53:13 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 08:50:20 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 08:46:40 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 08:44:03 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 08:42:17 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 08:09:31 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 08:08:04 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 05:52:54 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 05:52:11 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 05:48:24 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 05:47:38 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 04:40:58 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 03:30:30 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 03:21:52 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Feb 02 2022 02:58:18 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 19:41:45 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:40:04 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 19:32:49 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 19:26:05 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:22:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:01:17 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 17:57:26 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 17:33:50 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 01 2022 15:06:02 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 15:05:11 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 15:03:22 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 15:02:11 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 13:55:48 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 13:54:03 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 13:52:39 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 13:09:23 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 01 2022 12:00:38 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 11:56:04 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 11:25:20 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 11:23:17 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Feb 01 2022 11:15:22 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 17:37:24 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 17:14:14 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 16:45:28 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 16:24:08 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 16:13:14 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 11:32:02 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 08:56:10 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 08:54:53 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 08:53:35 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 08:52:50 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 08:51:38 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 31 2022 07:46:33 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Jan 30 2022 14:10:55 GMT+0000 (Coordinated Universal Time) https://carbon.now.sh/

#html
star

Sun Jan 30 2022 14:08:22 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 26 2022 10:31:08 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Web/CSS/white-space?retiredLocale=de

#html
star

Tue Jan 25 2022 16:34:49 GMT+0000 (Coordinated Universal Time) https://www.a11yproject.com/posts/how-to-accessible-heading-structure/

#html
star

Fri Jan 21 2022 17:48:36 GMT+0000 (Coordinated Universal Time) https://www.kodetop.com/efecto-smooth-scroll-con-css-o-javascript/#:~:text=Se%20le%20denomina%20Smooth%20Scroll,evitando%20cambios%20bruscos%20entre%20secciones.

#html #css #javas
star

Thu Jan 20 2022 22:54:34 GMT+0000 (Coordinated Universal Time) https://dev.to/juanbelieni/how-to-create-horizontal-scroll-with-mouse-wheel-using-javascript-4cm5

#html #css #javas
star

Fri Jan 14 2022 11:09:57 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/13704789/can-i-use-complex-html-with-twitter-bootstraps-tooltip

#html #bootstrap #vue
star

Tue Jan 11 2022 17:15:13 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-92

#html
star

Tue Jan 11 2022 13:08:32 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 11 2022 13:07:29 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 11 2022 13:06:23 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 11 2022 09:11:22 GMT+0000 (Coordinated Universal Time) javascripttutorial.net/javascript-dom/javascript-siblings/

#css #html
star

Tue Jan 11 2022 09:08:37 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=rw3eZ6XodN8

#css #html
star

Tue Jan 11 2022 08:32:22 GMT+0000 (Coordinated Universal Time) file:///C:/Users/Win10/Desktop/card.html

#html #css #javascript
star

Mon Jan 10 2022 07:16:36 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Jan 10 2022 07:15:31 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jan 10 2022 03:28:54 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/

#html
star

Sat Jan 08 2022 03:47:27 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 08 2022 02:04:37 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/sass/extend-wrapper-aka-mixtend/

#html #snipet #sublime
star

Thu Jan 06 2022 12:48:45 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 04 2022 01:38:23 GMT+0000 (Coordinated Universal Time) https://github.com/mkg0/HEAD

#html
star

Fri Dec 31 2021 16:05:13 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Dec 30 2021 16:49:42 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Dec 29 2021 08:01:01 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/the-a-target-html-attribute-explained/

#html
star

Thu Dec 23 2021 19:06:11 GMT+0000 (Coordinated Universal Time)

#html #lists
star

Thu Dec 23 2021 19:05:26 GMT+0000 (Coordinated Universal Time)

#html #lists
star

Thu Dec 23 2021 16:33:58 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Dec 22 2021 23:16:29 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/505679/para-los-que-conocen-wordpress-y-creadores-de-temas/505704#505704

#wordpress #html #php
star

Wed Dec 22 2021 18:32:22 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Dec 22 2021 16:28:12 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Dec 20 2021 21:43:02 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/51781734/i-want-to-remove-horizontal-line-from-the-modal-body-and-footer

#html
star

Sat Dec 18 2021 18:26:33 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/15195449/html5-type-range-showing-label

#html
star

Thu Dec 16 2021 22:58:19 GMT+0000 (Coordinated Universal Time) https://gist.github.com/Explosion-Scratch/f37d65e14c5b05457181f349d95d7bd6

#javascript #canvas #html
star

Thu Dec 16 2021 22:52:07 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/295566/sanitize-rewrite-html-on-the-client-side/66028632

#javascript #html #sanitize #xss
star

Wed Dec 15 2021 06:30:39 GMT+0000 (Coordinated Universal Time) https://www.kaggle.com/soumya9977/learning-to-sea-underwater-img-enhancement-eda

#markdown #html
star

Mon Dec 06 2021 04:42:10 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Dec 01 2021 23:30:00 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=myEsMzsJEFg&t=62s

#html #javascript #eventos
star

Wed Dec 01 2021 17:18:33 GMT+0000 (Coordinated Universal Time)

#css #html #hover
star

Wed Dec 01 2021 16:20:54 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=myEsMzsJEFg&t=62s

#css #html #z-index
star

Wed Dec 01 2021 07:52:25 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Nov 29 2021 23:44:23 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/499239/transici%c3%b3n-css-de-background-image/500273#500273

#css #html #z-index
star

Mon Nov 29 2021 14:14:17 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/8808590/number-input-type-that-takes-only-integers

#html
star

Sun Nov 28 2021 20:37:18 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/z/z-index/

#css #html #z-index
star

Sat Nov 27 2021 19:17:11 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/499690/captura-de-evento-del-mouse-javascript

#javascript #eventos #mouse #css #html
star

Thu Nov 25 2021 11:05:45 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Nov 24 2021 17:01:08 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Nov 24 2021 15:56:10 GMT+0000 (Coordinated Universal Time) https://www.madeup.studio/home

#css #html
star

Tue Nov 23 2021 17:44:45 GMT+0000 (Coordinated Universal Time) https://www.madeup.studio/work/belward-tree-films

#css #html
star

Thu Nov 18 2021 07:16:09 GMT+0000 (Coordinated Universal Time)

#html #javascript #liquid
star

Wed Nov 17 2021 10:42:22 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#html #css
star

Wed Nov 17 2021 09:33:28 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

#html
star

Tue Nov 16 2021 19:54:24 GMT+0000 (Coordinated Universal Time) https://tpec05.blogspot.com/2019/05/contador-de-clicks-operaciones-y.html

#javascript #css #html
star

Tue Nov 16 2021 09:09:15 GMT+0000 (Coordinated Universal Time) https://shopify.dev/themes/navigation-search/filtering

#html #liquid
star

Mon Nov 15 2021 16:07:12 GMT+0000 (Coordinated Universal Time)

#html #pandas #python #visualization
star

Mon Nov 15 2021 11:37:34 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/3802510/force-to-open-save-as-popup-open-at-text-link-click-for-pdf-in-html

#html
star

Thu Nov 11 2021 14:55:59 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Nov 10 2021 10:32:25 GMT+0000 (Coordinated Universal Time)

#html #jupyter #markdown
star

Wed Nov 10 2021 10:32:00 GMT+0000 (Coordinated Universal Time)

#html #jupyter #markdown
star

Wed Nov 10 2021 10:31:18 GMT+0000 (Coordinated Universal Time)

#html #jupyter #markdown
star

Wed Nov 10 2021 10:30:02 GMT+0000 (Coordinated Universal Time)

#html #jupyter #markdown
star

Tue Nov 09 2021 05:00:39 GMT+0000 (Coordinated Universal Time)

#lowjs #hotwire #thymeleaf #html
star

Wed Nov 03 2021 08:31:00 GMT+0000 (Coordinated Universal Time)

#react #html
star

Sun Oct 31 2021 10:02:29 GMT+0000 (Coordinated Universal Time) https://github.com/patriciamolnar/tutorials/blob/master/Input%20Focus%20Animation/index.html

#html
star

Fri Oct 29 2021 14:22:57 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 28 2021 13:34:49 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 28 2021 13:31:50 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 28 2021 10:21:11 GMT+0000 (Coordinated Universal Time)

#html #liquid #css
star

Tue Oct 26 2021 12:05:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Oct 26 2021 09:27:36 GMT+0000 (Coordinated Universal Time)

#javascript #jquery #html
star

Mon Oct 25 2021 08:00:29 GMT+0000 (Coordinated Universal Time) https://community.shopify.com/c/shopify-design/need-guidance-if-total-inventory-quantity-for-a-product-is/td-p/610087

#liquid #html
star

Fri Oct 22 2021 21:56:03 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Oct 21 2021 21:11:49 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/

#html
star

Thu Oct 21 2021 16:23:15 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Thu Oct 21 2021 06:37:08 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 21 2021 06:36:05 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 21 2021 06:35:01 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Oct 20 2021 17:06:50 GMT+0000 (Coordinated Universal Time) lunagrill.com

#html
star

Wed Oct 20 2021 07:49:51 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/5915023/preventing-images-and-text-to-be-selected/5915056

#html
star

Mon Oct 18 2021 15:55:54 GMT+0000 (Coordinated Universal Time) https://stackblitz.com/edit/angular-6iwq2i?file=src%2Fapp%2Fapp.component.css

#html #css
star

Sun Oct 17 2021 07:30:32 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Oct 15 2021 20:01:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Oct 09 2021 11:20:02 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/practice/tracks/learn-css/modules/learn-css-display-positioning

#html #forms
star

Thu Oct 07 2021 20:09:32 GMT+0000 (Coordinated Universal Time)

#javascript #jquery #php #html
star

Wed Oct 06 2021 06:32:28 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Oct 06 2021 00:53:09 GMT+0000 (Coordinated Universal Time)

#lowjs #hotwire #thymeleaf #html
star

Wed Oct 06 2021 00:04:27 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/

#html #forms
star

Sat Oct 02 2021 06:41:41 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/static/scripts/status.js

#lowjs #hotwire #thymeleaf #html
star

Sat Oct 02 2021 06:16:19 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/static/scripts/index.js

#lowjs #hotwire #thymeleaf #html
star

Mon Sep 27 2021 03:07:13 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/templates/fragments/observee-status-li.html

#lowjs #hotwire #thymeleaf #html
star

Mon Sep 27 2021 01:57:48 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/templates/observee-status.turbo-stream.html

#lowjs #hotwire #thymeleaf #html
star

Sun Sep 26 2021 21:52:31 GMT+0000 (Coordinated Universal Time) https://www.amitmerchant.com/get-your-website-ready-tab-bar-theming-of-safari-15/

#html
star

Sun Sep 26 2021 11:24:45 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/templates/status.html

#lowjs #hotwire #thymeleaf #html
star

Sun Sep 26 2021 06:15:37 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/templates/index.html

#lowjs #hotwire #thymeleaf #html
star

Sun Sep 26 2021 06:12:54 GMT+0000 (Coordinated Universal Time) https://bitbucket.org/delitescere/status.gallery/src/main/src/main/resources/templates/fragments/html-head.html

#lowjs #hotwire #thymeleaf #html
star

Wed Sep 22 2021 17:25:32 GMT+0000 (Coordinated Universal Time) https://aesi.mx/wp-admin/post.php?post

#html
star

Tue Sep 21 2021 06:38:29 GMT+0000 (Coordinated Universal Time) https://www.py4u.net/discuss/999043

#html
star

Tue Sep 21 2021 01:48:17 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Sep 17 2021 08:25:58 GMT+0000 (Coordinated Universal Time) https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html

#html
star

Fri Sep 17 2021 00:25:01 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Sep 15 2021 08:18:46 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Sep 15 2021 06:04:32 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Sep 15 2021 06:02:23 GMT+0000 (Coordinated Universal Time) Zhakkih.html

#html
star

Thu Sep 09 2021 07:57:40 GMT+0000 (Coordinated Universal Time) https://developers.google.com/recaptcha/docs/v3

#html #javascript
star

Sat Sep 04 2021 22:21:33 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Sep 01 2021 14:34:55 GMT+0000 (Coordinated Universal Time)

#html #angular #json
star

Wed Sep 01 2021 13:15:41 GMT+0000 (Coordinated Universal Time)

#html #angular #json
star

Wed Sep 01 2021 12:56:32 GMT+0000 (Coordinated Universal Time)

#html #angular #json
star

Wed Sep 01 2021 12:23:58 GMT+0000 (Coordinated Universal Time)

#html #angular #json
star

Sun Aug 29 2021 16:27:58 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 24 2021 13:00:30 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 24 2021 08:30:19 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 24 2021 02:12:48 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Aug 20 2021 14:06:04 GMT+0000 (Coordinated Universal Time) https://sjorswijsman.medium.com/3-easy-css-tricks-for-responsive-websites-i-use-in-every-project-68ec334a1522

#html
star

Wed Aug 18 2021 16:35:53 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:19:32 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:19:03 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:18:26 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:17:38 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:16:56 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:16:22 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:15:53 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 17 2021 15:15:02 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Aug 16 2021 17:39:06 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Aug 16 2021 17:18:26 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html
star

Thu Aug 12 2021 19:01:51 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Aug 12 2021 15:44:24 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 12 2021 15:38:28 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 12 2021 15:31:33 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 12 2021 15:28:20 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Aug 12 2021 15:27:34 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Aug 03 2021 09:23:31 GMT+0000 (Coordinated Universal Time)

#html #vue.js
star

Sun Aug 01 2021 18:15:08 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Aug 01 2021 17:54:40 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Aug 01 2021 17:25:04 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Aug 01 2021 17:21:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Aug 01 2021 17:18:22 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Aug 01 2021 17:08:07 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Aug 01 2021 16:50:48 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jul 31 2021 13:52:58 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jul 31 2021 12:48:01 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jul 31 2021 12:26:25 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jul 31 2021 12:20:29 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jul 31 2021 12:06:04 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jul 30 2021 20:21:12 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jul 29 2021 21:16:41 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jul 23 2021 16:55:46 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #udacity #course
star

Wed Jul 14 2021 13:33:48 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jul 14 2021 10:54:03 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39149846/why-am-i-seeing-a-404-not-found-error-failed-to-load-favicon-ico-when-not-usin/43042288

#html
star

Sat Jul 10 2021 03:01:46 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/6644684/do-you-have-to-include-link-rel-icon-href-favicon-ico-type-image-x-icon

#html
star

Thu Jul 08 2021 05:06:40 GMT+0000 (Coordinated Universal Time) https://www.codeproject.com/questions/387205/html-form-to-my-gmail-account

#html
star

Tue Jul 06 2021 14:49:45 GMT+0000 (Coordinated Universal Time)

#css #accessibility #html
star

Mon Jun 28 2021 22:53:43 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/62953926/play-banner-video-forward-and-backward-using-scroll

#html
star

Thu Jun 24 2021 17:16:27 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #udacity #course
star

Wed Jun 23 2021 22:14:18 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jun 23 2021 17:06:10 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jun 23 2021 05:31:58 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/43895390/imgur-images-returning-403

#html
star

Tue Jun 22 2021 17:54:57 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jun 22 2021 14:28:45 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jun 21 2021 14:12:28 GMT+0000 (Coordinated Universal Time) https://trends.google.com/trends/explore?geo=CA&q=Penticton,Kelowna,Osoyoos

#html #stephanestonge #google
star

Sat Jun 19 2021 00:10:27 GMT+0000 (Coordinated Universal Time)

#react.js #react-feather #css #clamp #html
star

Fri Jun 18 2021 11:50:26 GMT+0000 (Coordinated Universal Time) https://codex-themes.com/thegem/sites/delicious-restaurant/

#html #css #javascript
star

Thu Jun 17 2021 09:01:18 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jun 12 2021 09:32:20 GMT+0000 (Coordinated Universal Time) https://codepen.io/hisamparker/pen/jOBepgP

#mongoose #javascript #html #form-data #checkboxes
star

Thu Jun 10 2021 17:47:02 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jun 10 2021 14:26:30 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jun 10 2021 07:09:58 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=7c1K1SCmCb4

#js #html
star

Wed Jun 09 2021 22:33:17 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jun 07 2021 20:52:07 GMT+0000 (Coordinated Universal Time) https://developer.chrome.com/docs/extensions/mv3/overview/

#html
star

Fri Jun 04 2021 21:08:29 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 30 2021 10:52:07 GMT+0000 (Coordinated Universal Time)

#html #jquery #css #navbar
star

Thu May 27 2021 16:45:45 GMT+0000 (Coordinated Universal Time) https://www.reddit.com/r/AV1/comments/kw504b/auto_detect_browser_type_and_browser_video/

#html
star

Sat May 22 2021 13:40:28 GMT+0000 (Coordinated Universal Time)

#html
star

Fri May 21 2021 20:09:05 GMT+0000 (Coordinated Universal Time)

#html #nodejs #pdf
star

Thu May 20 2021 22:32:00 GMT+0000 (Coordinated Universal Time)

#html
star

Thu May 20 2021 01:14:30 GMT+0000 (Coordinated Universal Time)

#html
star

Wed May 19 2021 23:07:00 GMT+0000 (Coordinated Universal Time) https://salesforce.stackexchange.com/questions/253324/help-text-on-fields-of-custom-lightning-component

#html
star

Wed May 19 2021 22:18:27 GMT+0000 (Coordinated Universal Time)

#html
star

Wed May 19 2021 19:46:32 GMT+0000 (Coordinated Universal Time)

#html
star

Wed May 19 2021 09:36:41 GMT+0000 (Coordinated Universal Time)

#php #javasc #html #python
star

Wed May 19 2021 09:35:33 GMT+0000 (Coordinated Universal Time)

#php #javasc #html #python
star

Tue May 18 2021 20:37:46 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 18 2021 20:19:55 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 18 2021 19:11:39 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 18 2021 18:50:27 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 18 2021 18:32:06 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 18 2021 03:06:10 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 18 2021 01:43:18 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 16 2021 15:31:22 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 16 2021 15:24:56 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 16 2021 07:56:37 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 16 2021 07:43:29 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 16 2021 06:58:40 GMT+0000 (Coordinated Universal Time)

#html
star

Sun May 16 2021 03:28:05 GMT+0000 (Coordinated Universal Time)

#html
star

Tue May 11 2021 21:21:12 GMT+0000 (Coordinated Universal Time)

#html
star

Mon May 10 2021 17:53:39 GMT+0000 (Coordinated Universal Time)

#html
star

Mon May 10 2021 12:34:15 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/

#bootstrap #js #css #html
star

Mon May 10 2021 12:33:51 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/

#bootstrap #js #html #webdev
star

Mon May 10 2021 12:31:48 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/

#bootstrap #css #html #webdev
star

Sun May 09 2021 08:57:30 GMT+0000 (Coordinated Universal Time) https://devwriteups.com/8-unique-and-secret-tricks-front-end-developers-dont-know

#html
star

Sat May 08 2021 22:21:48 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height

#html
star

Tue May 04 2021 06:47:02 GMT+0000 (Coordinated Universal Time)

#html
star

Mon May 03 2021 11:08:52 GMT+0000 (Coordinated Universal Time)

#html
star

Mon May 03 2021 07:45:44 GMT+0000 (Coordinated Universal Time) https://www.lightningdesignsystem.com/platforms/visualforce/

#html
star

Thu Apr 29 2021 21:22:52 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Apr 26 2021 09:44:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Apr 26 2021 09:18:20 GMT+0000 (Coordinated Universal Time) https://www.hdwsj.org/htmln/n/n679.htm

#css #html
star

Sat Apr 24 2021 20:22:54 GMT+0000 (Coordinated Universal Time) https://www.hulu.com/watch/4e5bc050-7302-4793-b2c9-031f7f03295c

#actionscript3 #javascript #objectivec #typescript #webassembly #html #censored #profanity #webfiltered
star

Sat Apr 24 2021 16:18:45 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/1621891/html-how-to-make-a-submit-button-with-text-image-in-it

#html
star

Sat Apr 24 2021 16:18:36 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/1621891/html-how-to-make-a-submit-button-with-text-image-in-it

#html
star

Wed Apr 21 2021 22:07:40 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Apr 21 2021 18:03:22 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/tryit.asp?filename

#html
star

Fri Apr 16 2021 07:50:17 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:49:43 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:46:18 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:45:50 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:45:28 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:44:15 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:43:40 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 07:42:23 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 16 2021 04:29:19 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Tue Apr 13 2021 13:43:34 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Tue Apr 13 2021 13:42:49 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Tue Apr 13 2021 13:42:07 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Tue Apr 13 2021 13:41:05 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Tue Apr 13 2021 13:40:17 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Apr 13 2021 03:05:48 GMT+0000 (Coordinated Universal Time)

#php #javasc #html
star

Tue Apr 13 2021 03:04:46 GMT+0000 (Coordinated Universal Time)

#php #javasc #html
star

Tue Apr 13 2021 03:04:11 GMT+0000 (Coordinated Universal Time)

#php #javasc #html
star

Tue Apr 13 2021 03:03:13 GMT+0000 (Coordinated Universal Time)

#php #javasc #html
star

Tue Apr 13 2021 03:01:42 GMT+0000 (Coordinated Universal Time)

#php #javasc #html
star

Tue Apr 13 2021 03:00:27 GMT+0000 (Coordinated Universal Time)

#php #java #javasc #html
star

Mon Apr 12 2021 07:46:58 GMT+0000 (Coordinated Universal Time)

#css #html
star

Sun Apr 11 2021 10:59:31 GMT+0000 (Coordinated Universal Time)

#html #vue
star

Sun Apr 11 2021 02:54:36 GMT+0000 (Coordinated Universal Time)

#php #java #javasc #html
star

Sun Apr 11 2021 02:40:41 GMT+0000 (Coordinated Universal Time)

#php #java #javasc #html
star

Sun Apr 11 2021 01:52:04 GMT+0000 (Coordinated Universal Time)

#php #java #javasc #html
star

Fri Apr 09 2021 11:29:04 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:20:40 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:20:18 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:19:49 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:19:08 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:18:28 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:18:05 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:17:34 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:17:12 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:16:45 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:16:17 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:15:24 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:10:26 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:09:45 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:09:16 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:08:03 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 09 2021 11:06:49 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Apr 08 2021 06:10:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Wed Apr 07 2021 08:01:23 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Apr 02 2021 16:31:47 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Thu Apr 01 2021 20:04:28 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/66862120/adding-a-second-click-event-to-a-href?noredirect

#html
star

Wed Mar 31 2021 00:28:57 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Tue Mar 30 2021 22:47:56 GMT+0000 (Coordinated Universal Time) https://thejournal.com/articles/2014/03/26/formatting-cells-based-on-date-ranges-in-google-sheets.aspx#:~:text=Step%201%3A%20Select%20the%20range,of%20dates%20for%20my%20column.

#html
star

Tue Mar 30 2021 05:38:12 GMT+0000 (Coordinated Universal Time)

#html #vue.js
star

Mon Mar 29 2021 22:26:41 GMT+0000 (Coordinated Universal Time) https://codepen.io/daveredfern/pen/qVJgRo

#html #css #jquery
star

Mon Mar 29 2021 22:25:48 GMT+0000 (Coordinated Universal Time) https://jsfiddle.net/5h5evjpw/

#html #css #javascript
star

Sun Mar 28 2021 19:47:57 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/11488960/how-do-i-put-my-websites-logo-to-be-the-icon-image-in-browser-tabs

#html
star

Fri Mar 26 2021 00:29:07 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/html/html_elements.asp

#html
star

Thu Mar 25 2021 17:47:01 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Mar 23 2021 21:55:11 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Tue Mar 23 2021 16:30:44 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Tue Mar 23 2021 00:51:08 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Mar 19 2021 17:27:08 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Thu Mar 18 2021 18:49:46 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 18 2021 16:16:43 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 18 2021 16:16:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 18 2021 16:16:03 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 18 2021 16:14:54 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 18 2021 15:03:29 GMT+0000 (Coordinated Universal Time) http://micro.blog

#html #microblog #hugo
star

Tue Mar 16 2021 22:17:57 GMT+0000 (Coordinated Universal Time) https://getfrontend.tips/add-keyboard-shortcuts.html

#html #keyboard
star

Tue Mar 16 2021 03:13:26 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/docs/5.0/getting-started/introduction/

#html
star

Mon Mar 15 2021 20:37:42 GMT+0000 (Coordinated Universal Time) https://www.spreadsheetclass.com/capitalize-the-first-letter-of-words-in-google-sheets-with-the-proper-function/

#html
star

Sun Mar 14 2021 01:16:13 GMT+0000 (Coordinated Universal Time) https://betterprogramming.pub/how-to-create-an-aurora-ui-using-css-eb27d674b69

#css #html
star

Sat Mar 13 2021 01:47:44 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Mar 11 2021 22:32:14 GMT+0000 (Coordinated Universal Time)

#html #css #vue.js
star

Thu Mar 11 2021 21:48:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Mar 11 2021 11:48:13 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/4597050/how-to-check-if-the-url-contains-a-given-string

#html
star

Tue Mar 09 2021 19:11:16 GMT+0000 (Coordinated Universal Time)

#html #alpinejs
star

Tue Mar 09 2021 17:36:57 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Mar 09 2021 17:01:06 GMT+0000 (Coordinated Universal Time) https://codepen.io/suez/pen/rrraYb

#html
star

Tue Mar 09 2021 11:33:30 GMT+0000 (Coordinated Universal Time) https://forum.squarespace.com/topic/155425-add-multiple-buttons-to-header-nav-in-squarespace-71/

#html
star

Tue Mar 09 2021 09:44:53 GMT+0000 (Coordinated Universal Time) https://developers.google.com/fonts/docs/material_icons

#html #css
star

Tue Mar 09 2021 02:08:56 GMT+0000 (Coordinated Universal Time) https://beatrizcaraballo.com/blog/add-quick-jumps-anchor-points-squarespace

#html
star

Tue Mar 09 2021 00:52:28 GMT+0000 (Coordinated Universal Time) https://forum.squarespace.com/topic/154584-how-to-force-mobile-menu-to-remain-on-desktop-site-v-71/

#html
star

Mon Mar 08 2021 20:36:34 GMT+0000 (Coordinated Universal Time) https://codepen.io/BeanBaag/pen/XZRewP

#html
star

Mon Mar 08 2021 20:22:00 GMT+0000 (Coordinated Universal Time) https://codepen.io/chriscoyier/pen/PgXRRM

#html
star

Mon Mar 08 2021 20:07:57 GMT+0000 (Coordinated Universal Time) https://codepen.io/chriscoyier/pen/YyxKea

#html
star

Mon Mar 08 2021 20:07:23 GMT+0000 (Coordinated Universal Time) https://codepen.io/chriscoyier/pen/egHEK

#html
star

Mon Mar 08 2021 17:27:43 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Mar 08 2021 17:27:14 GMT+0000 (Coordinated Universal Time) https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/

#css #html
star

Thu Mar 04 2021 11:51:23 GMT+0000 (Coordinated Universal Time)

#javascript #html
star

Sat Feb 27 2021 03:34:09 GMT+0000 (Coordinated Universal Time) https://codelauradima.now.site/home

#html #css
star

Wed Feb 24 2021 23:40:54 GMT+0000 (Coordinated Universal Time)

#html #html,css
star

Wed Feb 24 2021 20:50:38 GMT+0000 (Coordinated Universal Time)

#html #css #texto_grandes
star

Tue Feb 23 2021 01:21:03 GMT+0000 (Coordinated Universal Time) https://forum.squarespace.com/topic/171095-hide-section-in-desktop/?tab

#html
star

Mon Feb 22 2021 22:36:40 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 22 2021 21:35:48 GMT+0000 (Coordinated Universal Time) https://forum.squarespace.com/topic/160786-media-queries-to-go-to-mobile-view/

#html
star

Sat Feb 20 2021 20:09:42 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Thu Feb 18 2021 15:35:47 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Feb 07 2021 13:05:46 GMT+0000 (Coordinated Universal Time)

#css #html #highlight
star

Mon Jan 25 2021 08:22:28 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 20 2021 16:19:47 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 20 2021 03:55:48 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 20 2021 02:41:52 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 20 2021 02:34:17 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:37:03 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:34:32 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:32:05 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:31:09 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:27:12 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:26:19 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:21:51 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:10:46 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:09:14 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 19 2021 13:04:24 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 16 2021 09:35:33 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jan 15 2021 21:46:37 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jan 15 2021 21:05:23 GMT+0000 (Coordinated Universal Time)

#html
star

Fri Jan 15 2021 20:59:41 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 23:09:50 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 23:03:19 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:53:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:50:12 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:36:42 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:31:54 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:26:18 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:23:00 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:20:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:18:33 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 22:12:35 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:46:22 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:27:45 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:23:30 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:17:27 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:14:45 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:06:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 21:03:44 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 20:46:18 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 20:44:02 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 20:37:30 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 19:28:40 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 19:13:43 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 18:59:14 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 18:55:52 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 15:57:26 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 15:36:37 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 14:39:06 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 14:17:42 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 14:00:23 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 13:54:46 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 13:29:45 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 10:30:04 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 10:13:11 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Jan 14 2021 08:40:27 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 13 2021 15:24:00 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 13 2021 14:55:41 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jan 13 2021 13:56:16 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Jan 12 2021 07:52:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Jan 09 2021 22:21:38 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 22:18:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 22:14:55 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 21:51:21 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 21:36:21 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 21:32:52 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 20:18:20 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 14:56:43 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Jan 09 2021 10:46:20 GMT+0000 (Coordinated Universal Time)

#bootstrap #html
star

Thu Jan 07 2021 22:22:21 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/docs/5.0/content/typography/

#html
star

Thu Jan 07 2021 22:18:09 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/docs/5.0/utilities/text/

#html
star

Thu Jan 07 2021 06:23:08 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/docs/5.0/getting-started/introduction/

#html
star

Mon Jan 04 2021 04:03:45 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Dec 29 2020 03:43:48 GMT+0000 (Coordinated Universal Time) https://blazor-tutorial.net/knowledge-base/49947790/blazor-onchange-event-with-select-dropdown

#blazor #c# #html
star

Tue Dec 22 2020 01:04:44 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element

#html
star

Tue Dec 22 2020 01:00:16 GMT+0000 (Coordinated Universal Time)

#css #html
star

Tue Dec 22 2020 00:37:14 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute

#html
star

Tue Dec 22 2020 00:19:40 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility

#html
star

Tue Dec 22 2020 00:12:46 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element

#html
star

Tue Dec 22 2020 00:03:23 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element

#html
star

Mon Dec 21 2020 17:41:12 GMT+0000 (Coordinated Universal Time) https://jamesauble.medium.com/select-html-tag-block-in-vs-code-1053fb7435c9

#html #vscode #tool #herramienta
star

Mon Dec 21 2020 17:35:17 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Dec 15 2020 22:41:51 GMT+0000 (Coordinated Universal Time) https://www.ampleforth.org/

#html #css
star

Sun Dec 13 2020 19:33:28 GMT+0000 (Coordinated Universal Time)

#html #css #tab #footer
star

Tue Nov 24 2020 19:39:37 GMT+0000 (Coordinated Universal Time) https://confva.com/

#typescript #javascript #html #css
star

Thu Nov 19 2020 14:16:21 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Nov 19 2020 14:14:42 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Thu Nov 19 2020 14:12:09 GMT+0000 (Coordinated Universal Time)

#html #php
star

Mon Nov 09 2020 17:42:36 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Nov 06 2020 21:07:28 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?sxsrf

#html
star

Tue Nov 03 2020 07:57:15 GMT+0000 (Coordinated Universal Time)

#html #php
star

Tue Nov 03 2020 07:41:04 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Oct 28 2020 08:20:03 GMT+0000 (Coordinated Universal Time) https://medium.com/@gemma.stiles/breaking-down-the-dom-dd197e4f7154

#javascript #html
star

Wed Oct 28 2020 08:19:10 GMT+0000 (Coordinated Universal Time) https://medium.com/@gemma.stiles/breaking-down-the-dom-dd197e4f7154

#javascript #html
star

Wed Oct 28 2020 08:18:26 GMT+0000 (Coordinated Universal Time) https://medium.com/@gemma.stiles/breaking-down-the-dom-dd197e4f7154

#javascript #html #css
star

Fri Oct 23 2020 13:41:09 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

#javascript #html
star

Sun Oct 11 2020 03:08:29 GMT+0000 (Coordinated Universal Time) https://github.com/Zilleali/Menu-Page

#html #css
star

Fri Oct 02 2020 12:02:13 GMT+0000 (Coordinated Universal Time) Fuck men

#php #html #blade
star

Thu Oct 01 2020 17:25:38 GMT+0000 (Coordinated Universal Time)

#html
star

Thu Oct 01 2020 06:29:28 GMT+0000 (Coordinated Universal Time)

#javascript #css #html #php
star

Wed Sep 30 2020 09:50:53 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Sep 30 2020 09:48:58 GMT+0000 (Coordinated Universal Time)

#html
star

Tue Sep 22 2020 12:12:24 GMT+0000 (Coordinated Universal Time)

#html #images #picture
star

Mon Sep 21 2020 20:34:33 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Sep 20 2020 22:52:27 GMT+0000 (Coordinated Universal Time)

#html
star

Sat Sep 19 2020 12:05:39 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst

#javascript #html
star

Thu Aug 27 2020 20:16:06 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Aug 26 2020 14:36:02 GMT+0000 (Coordinated Universal Time) https://fontawesome.com/kits/10ff982003/use?welcome=yes

#html
star

Wed Aug 26 2020 06:37:34 GMT+0000 (Coordinated Universal Time) https://codepen.io/khadkamhn/pen/ZGvPLo

#html #css
star

Wed Aug 26 2020 05:58:47 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Aug 10 2020 18:23:35 GMT+0000 (Coordinated Universal Time) https://formdump.codeinstitute.net/

#html
star

Mon Aug 10 2020 11:03:32 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-heart

#html #cs #heart
star

Sun Aug 02 2020 02:24:12 GMT+0000 (Coordinated Universal Time)

#django #css #html
star

Tue Jul 21 2020 23:00:44 GMT+0000 (Coordinated Universal Time) https://mdbootstrap.com/docs/jquery/components/buttons/

#html
star

Sat Jun 27 2020 12:11:26 GMT+0000 (Coordinated Universal Time)

#html #javascript #materialize
star

Wed Jun 17 2020 17:27:48 GMT+0000 (Coordinated Universal Time)

#html
star

Mon Jun 15 2020 11:09:15 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll

#html
star

Sat Jun 13 2020 19:27:29 GMT+0000 (Coordinated Universal Time)

#html
star

Wed Jun 10 2020 04:56:05 GMT+0000 (Coordinated Universal Time)

#html
star

Sun Jun 07 2020 08:08:07 GMT+0000 (Coordinated Universal Time) https://www.zappos.com/general-questions#return

#css #html #javascript
star

Sun Jun 07 2020 08:02:46 GMT+0000 (Coordinated Universal Time) https://www.zappos.com/general-questions

#css #html #javascript
star

Sat Jun 06 2020 08:21:09 GMT+0000 (Coordinated Universal Time) chrome-extension://annlhfjgbkfmbbejkbdpgbmpbcjnehbb/images/saveicon.png

#html
star

Wed Jun 03 2020 16:41:47 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

#html
star

Fri May 29 2020 12:33:01 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/get-directions-form-google-maps/

#html
star

Fri May 29 2020 12:31:52 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/comments-in-html/

#html
star

Fri May 29 2020 11:36:30 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/set-iphone-bookmark-icon/

#html
star

Fri May 29 2020 11:35:15 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/multiple-file-input/

#html
star

Fri May 29 2020 10:12:39 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/button-with-line-breaks/

#html
star

Fri May 22 2020 19:58:09 GMT+0000 (Coordinated Universal Time) https://www.thiscodeworks.com/extension/initializing

#html
star

Fri May 22 2020 19:13:02 GMT+0000 (Coordinated Universal Time) https://webflow.com/design/taskable

#html
star

Sat May 16 2020 19:36:39 GMT+0000 (Coordinated Universal Time) https://codepen.io/sdthornton/pen/wBZdXq

#css #html
star

Tue May 05 2020 16:14:10 GMT+0000 (Coordinated Universal Time) https://madeusblack.github.io/projects/Library-js/index.html

#html
star

Fri Apr 24 2020 11:14:39 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/javascript/inject-html-from-a-string-of-html/

#javascript #javascript #string #html
star

Tue Jan 07 2020 19:00:00 GMT+0000 (Coordinated Universal Time)

#html #htmltags #webdev #basics #html5
star

Sun Jan 05 2020 19:00:00 GMT+0000 (Coordinated Universal Time)

#html #basics #htmltags #seo
star

Thu Jan 02 2020 19:00:00 GMT+0000 (Coordinated Universal Time) https://docs.python.org/3.4/library/html.parser.html

#html #python #xhtml
star

Fri Dec 27 2019 10:44:21 GMT+0000 (Coordinated Universal Time) https://dev.to/vivekanandpadala/javascript-snippet-for-dynamically-updating-footer-copyright-year-3cdp

#html #javascript #howto
star

Sat Dec 14 2019 20:36:19 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Fri Dec 13 2019 12:47:41 GMT+0000 (Coordinated Universal Time)

#html #javascript
star

Thu Dec 12 2019 21:03:46 GMT+0000 (Coordinated Universal Time)

#html
star

https://getbootstrap.com/docs/4.0/getting-started/introduction/

#html
star

https://www.w3schools.com/CSSref/pr_background-attachment.asp

#css #html
star

https://www.makeschool.com/academy/track/web-dev-summer-academy-2018/build-a-game-of-concentration-with-javascript/client-side-javascript

#html #javascript
star

https://www.w3schools.com/howto/howto_js_lightbox.asp,

#css #html #javascript

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension