Snippets Collections
<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;
}
.responsive-img {
  max-width: 100%;
  height: auto;

}
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&iframeId=czfdrdr57a&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="3650px" 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> 
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="320">
	<tbody>
		<tr>
			<td align="left" class="mcnCaptionBottomImageContent" style="padding: 0 9px 9px 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" valign="top">Space for a picture<br />
			<br />
			Caption</td>
		</tr>
        <tr>Optional second row</tr>
	</tbody>
</table>

<table align="right" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="200">
	<tbody>
		<tr>
			<td class="mcnTextContent" style="padding: 0px 9px;font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #222222;font-size: 14px;line-height: 150%;text-align: left;" valign="top" width="260">
			<div><strong>LARGE LEFT</strong>
			</div>
			</td>
		</tr>
        <tr>Optional Second Row</tr>
	</tbody>
</table>
<p style="margin: -95px 0px 0px 0px;">&nbsp;</p>
<div style="background: #FFCD54; margin: 20px 0; padding: 15px 15px 15px 15px; border-radius: 0px;">
<p>SOME WRITING YOU WANT</p>

<p>SOME MORE WRITING YOU WANT</p>
</div>
<table align="left">
	<tbody>
		<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>

				<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>
        		<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>
</table>
    <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>
<option value="" disabled selected hidden>
  Select asset
</option>

// 
{TOKENS?.map(el => {
  return (
    <>
    <option value="" hidden>Exchange asset</option>
    <option key={el} value={el}>{el}</option>
   </>
 )
})}
<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);
}
}