beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('beforebegin', tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('afterend', tempDiv);
  }
  setListener(tempDiv);
});

<style>
th, td {
    padding: 22px;}
    h2 {color:orange}
      body {background-color:White }
    legend   {color:orange}
    fieldset   {border: 2px solid green;}
    /*input {background-color: orange}*/
    /*input{ color: green }*/
    #place_order{
        float: right;
        background-color: orange;
        color: #ffffff;
        border-color: green;
    }
</style>

<table style="width:100%"></table>
	  <h2>Dado tea lunch special</h2>
	 <rt>
	  	<th>Monday to friday</th>
	</rt>	
	  <br>11am - 2pm
	 <br>$9.95 plus tax<br>
	 <rt>
	 	<th></th>
	 </rt>
	 <br>Include sandwich,snack,and drink<br>
	<fieldset>
        <legend>Order Information:</legend>
        Name:<input type="text"name="order_name"> <br>
        Here<input type="radio" name="order_option"><br>
        To go<input type="radio"name="order_option"><br>
  </fieldset>

  <fieldset>
            <legend>Sandwiches:</legend>
             <b>Monday</b>
             <br>
            Tommato<input type="radio" name="option1">
            <br>
             Chicken salad<input type="radio"name="option1">
             <br>
             <b>Tuesday</b>
             <br>
            Greak salad wrap<input type="radio" name="option2">
            <br>
            Toto wrap<input type="radio"name="option2">
            <br>
            <b>wednesday</b>
            <br>
            Red pepper hummas<input type="radio" name="option3">
            <br>
            Rosted turkey<input type="radio"name="option3">
            <br>
             <b>Thusday</b>
             <br>
            Carrot-ginger hummas wrap<input type="radio" name="option4">
            <br>
            Chicken salad<input type="radio"name="option4">
            <br>
            <b>Friday</b>
            <br>
             Dado Wrap<input type="radio" name="option5"> <br>
             Tuna salad<input type="radio"name="option5"> <br>
  </fieldset>


  <fieldset>
  	<legend>Snack:</legend>
    <b>Snack</b><br>
    Apple<input type="radio" name="order_option1"><br>
    Bannana<input type="radio"name="order_option1"><br>
    Potato chips<input type="radio"name="order_option1"><br>
  </fieldset>
<fieldset>
	<legend>Drinks:</legend>
	<b>Drinks</b><br>
	<select name="items" id="items">
	  <option value="Hot black tea-keemun">Hot black tea-keemun</option>
	  <option value="salad">salad</option>
	  <option value="burgar">burgar</option>
	  <option value="pizza">pizza</option>
	</select><br>
<input type="submit" id="place_order" value="Place Order"> 

<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('dashboard') }}">
                        <x-jet-application-mark class="block h-9 w-auto" />
                    </a>
                </div>

                <!-- Navigation Links -->
                <div class=" space-x-8 sm:-my-px sm:ml-10 sm:flex">
                    <x-jet-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                        {{ __('Dashboard') }}
                    </x-jet-nav-link>
                </div>
            </div>

            <!-- Settings Dropdown -->
            <div class=" sm:flex sm:items-center sm:ml-6">
                <x-jet-dropdown align="right" width="48">
                    <x-slot name="trigger">
                         @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                            <button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
                                <img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                            </button>
                         @else
                            <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
                                <div>{{ Auth::user()->name }}</div>

                                <div class="ml-1">
                                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </button>
                        @endif
                    </x-slot>

                    <x-slot name="content">
                        <!-- Account Management -->
                        <div class="block px-4 py-2 text-xs text-gray-400">
                            {{ __('Manage Account') }}
                        </div>

                        <x-jet-dropdown-link href="{{ route('profile.show') }}">
                            {{ __('Profile') }}
                        </x-jet-dropdown-link>

                        @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                            <x-jet-dropdown-link href="{{ route('api-tokens.index') }}">
                                {{ __('API Tokens') }}
                            </x-jet-dropdown-link>
                        @endif

                        <div class="border-t border-gray-100"></div>

                        <!-- Team Management -->
                        @if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Manage Team') }}
                            </div>

                            <!-- Team Settings -->
                            <x-jet-dropdown-link href="{{ route('teams.show', Auth::user()->currentTeam->id) }}">
                                {{ __('Team Settings') }}
                            </x-jet-dropdown-link>

                            @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
                                <x-jet-dropdown-link href="{{ route('teams.create') }}">
                                    {{ __('Create New Team') }}
                                </x-jet-dropdown-link>
                            @endcan

                            <div class="border-t border-gray-100"></div>

                            <!-- Team Switcher -->
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Switch Teams') }}
                            </div>

                            @foreach (Auth::user()->allTeams() as $team)
                                <x-jet-switchable-team :team="$team" />
                            @endforeach

                            <div class="border-t border-gray-100"></div>
                        @endif

                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-jet-dropdown-link href="{{ route('logout') }}"
                                                onclick="event.preventDefault();
                                                            this.closest('form').submit();">
                                {{ __('Logout') }}
                            </x-jet-dropdown-link>
                        </form>
                    </x-slot>
                </x-jet-dropdown>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <x-jet-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-jet-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="flex items-center px-4">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                </div>

                <div class="ml-3">
                    <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                    <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
                </div>
            </div>

            <div class="mt-3 space-y-1">
                <!-- Account Management -->
                <x-jet-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')">
                    {{ __('Profile') }}
                </x-jet-responsive-nav-link>

                @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                    <x-jet-responsive-nav-link href="{{ route('api-tokens.index') }}" :active="request()->routeIs('api-tokens.index')">
                        {{ __('API Tokens') }}
                    </x-jet-responsive-nav-link>
                @endif

                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <x-jet-responsive-nav-link href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                        {{ __('Logout') }}
                    </x-jet-responsive-nav-link>
                </form>

                <!-- Team Management -->
                @if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
                    <div class="border-t border-gray-200"></div>

                    <div class="block px-4 py-2 text-xs text-gray-400">
                        {{ __('Manage Team') }}
                    </div>

                    <!-- Team Settings -->
                    <x-jet-responsive-nav-link href="{{ route('teams.show', Auth::user()->currentTeam->id) }}" :active="request()->routeIs('teams.show')">
                        {{ __('Team Settings') }}
                    </x-jet-responsive-nav-link>

                    <x-jet-responsive-nav-link href="{{ route('teams.create') }}" :active="request()->routeIs('teams.create')">
                        {{ __('Create New Team') }}
                    </x-jet-responsive-nav-link>

                    <div class="border-t border-gray-200"></div>

                    <!-- Team Switcher -->
                    <div class="block px-4 py-2 text-xs text-gray-400">
                        {{ __('Switch Teams') }}
                    </div>

                    @foreach (Auth::user()->allTeams() as $team)
                        <x-jet-switchable-team :team="$team" component="jet-responsive-nav-link" />
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</nav>

onsubmit="return false;"

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- U Chen CSS -->
		<link rel="stylesheet" href="homeStyle.css">
		
		<title>U Chen Daily | Home111</title>
  </head>
  <body>
		<div class="container-fluid" style="background: #1f52a3;">
			<div class="row">
				<div class="col-2"></div>
				<div class="col-8">
					<h1 style="text-align: center; color: #e6e8eb; margin: 20px 0;">U Chen Daily</h1>
				</div>
				<div class="col-2"></div>
			</div>
		</div>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<a class="navbar-brand" href="#">Navbar</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Dropdown
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">Something else here</a>
						</div>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
					</li>
				</ul>
				<form class="form-inline my-2 my-lg-0">
					<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
				</form>
			</div>
		</nav>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<div class="container-fluid bg-light" style="padding: 30px 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5>Top News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 15px 50px;">
				<div class="card mb-4">
					<img class="card-img-top img-fluid" src="https://via.placeholder.com/350x200" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title text-uppercase text-light">Covid-19: 89 new cases, two new deaths bring total to 136</h5>
						<!-- <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
					</div>
					<div class="card-footer border-0">
						<div class="row">
							<div class="col-6 card-text text-light text-uppercase">
								Nation
							</div>
							<div class="col-6 card-text text-light text-right text-uppercase">
								30 Sept 2020
							</div>
						</div>
					</div>
				</div>
				<div class="card mb-4">
					<img class="card-img-top img-fluid" src="https://via.placeholder.com/350x200" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title text-uppercase text-light">Covid-19 spreading faster in Selangor than in Sabah, says Health DG</h5>
						<!-- <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
					</div>
					<div class="card-footer border-0">
						<div class="row">
							<div class="col-6 card-text text-light text-uppercase">
								Nation
							</div>
							<div class="col-6 card-text text-light text-right text-uppercase">
								30 Sept 2020
							</div>
						</div>
					</div>
				</div>
				<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
				<div class="card mb-4">
					<img class="card-img-top img-fluid" src="https://via.placeholder.com/350x200" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title text-uppercase text-light">What happens if you don’t complete the e-Census 2020?</h5>
						<!-- <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
					</div>
					<div class="card-footer border-0">
						<div class="row">
							<div class="col-6 card-text text-light text-uppercase">
								Nation
							</div>
							<div class="col-6 card-text text-light text-right text-uppercase">
								30 Sept 2020
							</div>
						</div>
					</div>
				</div>
				<div class="card mb-4">
					<img class="card-img-top img-fluid" src="https://via.placeholder.com/350x200" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title text-uppercase text-light">Bukit Aman to resubmit papers to AGC on minister's violation of...</h5>
						<!-- <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
					</div>
					<div class="card-footer border-0">
						<div class="row">
							<div class="col-6 card-text text-light text-uppercase">
								Nation
							</div>
							<div class="col-6 card-text text-light text-right text-uppercase">
								30 Sept 2020
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

 <button onClick={() => toggleShow(!show)} className={`navbar-toggler ${show ? '' : 'collapsed'}`} type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded={`${show ? 'false' : 'true'}`} aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>

 <ul className="navbar-nav ml-2 mt-2 mt-lg-0">
          <li className="nav-item">
            <NavLink className="nav-link" to="/" activeStyle={activeStyle} exact>
              <FaHome size={28} />
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink className="nav-link" to="/new" activeStyle={activeStyle}>
              <FaPlus size={28} />
            </NavLink>
          </li>
        </ul>

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

<picture>
<source media='(max-width: 1024px)' srcset='<?php echo get_template_directory_uri()?>/images/demo/work-image-bg--mobile.jpg' class="project__bg--mobile" alt="">
<img src="<?php echo get_template_directory_uri()?>/images/demo/work-image-bg.jpg" class="project__bg--desktop" alt="" />
</picture>

<html></html>

<!DOCTYPE html>
<html>
<body>
​
<h2>My First JavaScript</h2>
​
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
​
<p id="demo"></p>
​
</body>
</html> 
​

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>My Google Chrome™ Extensions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_blank">
</head>
<body>
<b>Generated:</b> Thu, 27 Aug 2020 20:16:47 GMT<br>
<b>User Agent:</b> Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36<br>
<br>
<b>Extensions:</b> 11<ul><li> <a href="https://chrome.google.com/webstore/detail/aapbdbdomjkkjkaonfhkkikfgjllcleb" target="_blank">Google Translate</a> v2.0.9
<br><i>View translations easily as you browse the web. By the Google Translate team.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ajiejmhbejpdgkkigpddefnjmgcbkenk" target="_blank">Clipboard History Pro: best productivity tool</a> v3.5.2
<br><i>Clipboard manager extension for your browser: history of copied text, sync clipboard items, instant paste</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/baohinapilmkigilbbbcccncoljkdpnd" target="_blank">Shortcuts for Google™</a> v22.1.0
<br><i>Choose from 800+ Google™ shortcuts to show up as buttons in a space-saving popup</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/chdafcbnfkfenoeejpaeenpdamhmalhe" target="_blank">Share Extensions</a> v0.1.9
<br><i>Export your favorite Google Chrome™ extensions as BBCode, HTML, Wiki, Markdown or text. Share extensions via Twitter, Google Mail™.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/clngdbkpkpeebahjckkjfobafhncgmne" target="_blank">Stylus</a> v1.5.13
<br><i>Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ghbmnnjooekpmoecnnnilnnbdlolhkhi" target="_blank">Google Docs Offline</a> v1.13.0
<br><i>Edit, create, and view your documents, spreadsheets, and presentations — all without internet access.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jniljaamodclkmphgkgkooplflhkadpg" target="_blank">Gmail Sender Icons</a> v2.1
<br><i>Quickly identify the sender of email messages in Gmail without opening the message.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kniehgiejgnnpgojkdhhjbgbllnfkfdk" target="_blank">SimpleExtManager</a> v1.4.8
<br><i>A simple menu to enable, disable and access options of extensions.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/niloccemoadcdkdjlinkgdfekeahmflj" target="_blank">Save to Pocket</a> v3.0.6.8
<br><i>The easiest, fastest way to capture articles, videos, and more.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pekljbkpgnpphbkgjbfgiiclemodfpen" target="_blank">Da Vinci Tools</a> v2020.6.24
<br><i>The Supermetrics Google Marketing Platform power tools for smart digital marketers and analysts.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/annlhfjgbkfmbbejkbdpgbmpbcjnehbb" target="_blank">Save Code</a> v1.1.2.1
<br><i>Save & organize code snippets that work</i></li>
</ul>
<br>
<b>Disabled Extensions:</b> 163<ul><li> <a href="https://chrome.google.com/webstore/detail/aadahadfdmiibmdhfmpbeeebejmjnkef" target="_blank">Cluster - Window & Tab Manager</a> v2.2.6
<br><i>Window and Tab manager for managing multiple open tabs and windows with simplicity.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/aiiaandmkmekfhembfoghdnfiiiedhhk" target="_blank">Cacher</a> v1.0.8
<br><i>Save code snippets from anywhere on the web. Companion extension to Cacher, the code snippet organizer for pro developers.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ailcmbgekjpnablpdkmaaccecekgdhlh" target="_blank">Workona</a> v2.15.1
<br><i>Organize your work in the browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/akdgnmcogleenhbclghghlkkdndkjdjc" target="_blank">SEOquake</a> v3.8.5
<br><i>SEOquake is a free plugin that provides you with key SEO metrics, along with other useful tools such as SEO Audit and many others</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/alogfnakemilhfnffefhakibpphibafe" target="_blank">LaterTabs</a> v0.1.0
<br><i>Save for tabs for later reading</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/apmmpaebfobifelkijhaljbmpcgbjbdo" target="_blank">Stylus (beta)</a> v1.5.13
<br><i>Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/beaalofkiocejchbpaocbbjhobmambpp" target="_blank">Markd - Save & Tag People on LinkedIn Twitter</a> v3.8.0
<br><i>The quickest way to remember and organise people you find online.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm" target="_blank">Web Developer</a> v0.5.4
<br><i>Adds a toolbar button with various web developer tools.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bhngmgdidjmeidaipaaofefjkehlljof" target="_blank">PPC NegativeKeywords Tool</a> v3.0.46
<br><i>Позволяет собирать слова по клику из поисковых отчетов</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bijakfpegjnjmfdoiloebhaemhomjkon" target="_blank">qSnap: Screen Capture, Screenshot, Annotation</a> v1.4.1.1
<br><i>Get more out of your screen captures! Free - Cross Browser - Multiple Page Screen Capture - Rich Annotation - Awesome!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/blipmdconlkpinefehnmjammfjpmpbjk" target="_blank">Lighthouse</a> v100.0.0.0
<br><i>Lighthouse</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bncbcpnjglcbgoambglmmfoakffngkjg" target="_blank">Sender icons for Gmail™</a> v0.1.1
<br><i>Add a sender icon for all emails in your Gmail inbox.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bnimbjbohdeakocjbldadiggnlmlgmie" target="_blank">Copy Host</a> v1.0
<br><i>This extension allows you to copy hostname of the current tab to your clipboard.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bnohaknhjanaejcegmlbhiknhcfkajbb" target="_blank">Listly</a> v0.4.0
<br><i>The Listly Chrome Extension allows users to quickly add items to their lists on Listly while browsing the web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/boljkhffeonkhcipdflndnljbhigbhhe" target="_blank">Mailto: Set Default Email to Gmail by cloudHQ</a> v1.0.0.3
<br><i>Set Gmail as default email application when clicking on an email address on the internet</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/bpconcjcammlapcogcnnelfmaeghhagj" target="_blank">Nimbus Screenshot & Screen Video Recorder</a> v9.2.7
<br><i>Screen Capture FULL Web page or any part. Edit screenshots. Record screencasts - record video from your screen.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cbfllaanijkpjgnolhfhephemiccnacj" target="_blank">Bublup</a> v2.0.3
<br><i>Save any web page and discover fascinating content.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cejmhmbmafamjegaebkjhnckhepgmido" target="_blank">GistBox Clipper</a> v1.0.6
<br><i>Save code snippets from anywhere on the web. Companion extension to GistBoxApp.com.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cfifjihfoegnccifkcdomdookdckhaah" target="_blank">Clip To WorkFlowy</a> v2.0.8
<br><i>Bookmark websites in WorkFlowy</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/chbmoagfhnkggnhbjpoonnmhnpjdjdod" target="_blank">WMS Everywhere</a> v0.9
<br><i>Unlimited on-demand keyword research data inside Google search results.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/chhjhjenclgckimdcpakckbmdkdaohbp" target="_blank">DomEye: Discover websites from the same owner</a> v1.3.3
<br><i>Reveal other websites on the same server, with the same IP address, Analytics ID, Adsense ID, Amazon affiliate ID or email address.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cjbjepchlgclmpinlbbeinajphohgfod" target="_blank">Screen capture, screenshot share/save</a> v2423.38.46.352
<br><i>Capture a region, visible content of a tab, or a horizontally/vertically scrollable page as a searchable image & bookmark it.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cmbmkopbnnbhdeknahmdkfkjogdlbdjf" target="_blank">WorkFlowy colorful tags</a> v0.2.4
<br><i>Allows to assign color to tags in Workflowy</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cmddjimnbiilckakmjjljdjinelkpine" target="_blank">Element Path Finder</a> v1.6
<br><i>Displays DOM item details (path, id, class name) when mousing over it.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/cnmnalakipnobjijcnnnkbpeejjhhdkn" target="_blank">Save to Bookmark OS</a> v1.7
<br><i>Save bookmarks easily to Bookmark OS</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/daejfbkjipkgidckemjjafiomfeabemo" target="_blank">ObservePoint Tag Debugger</a> v1.20.4
<br><i>Troubleshoot and audit analytics tags, variables and on-click events. Supports Adobe Analytics, Google Analytics, Ensighten and more</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dapjbgnjinbpoindlpdmhochffioedbn" target="_blank">BuiltWith Technology Profiler</a> v3.1
<br><i>Find out what the website you are visiting is built with using this extension.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo" target="_blank">Tampermonkey</a> v4.10
<br><i>The world's most popular userscript manager</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dhpaponoajbgfahgmcbchndpjbooapog" target="_blank">Keyword Modifier</a> v2.1.0
<br><i>Modify your PPC keywords in bulk.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/djfkcofpclibgmphomlbpgndljnffegm" target="_blank">middlespot</a> v4.0.1
<br><i>Desktop The Web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/djjaamgbkmlhpfgodinngfeolfbenehm" target="_blank">Chrome Tools</a> v1.2.5
<br><i>Increase productivity with Chrome tools & shortcuts</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dkpejdfnpdkhifgbancbammdijojoffk" target="_blank">Logitech Smooth Scrolling</a> v6.65.62
<br><i>Buttery-smooth scrolling for Logitech mice and touchpads.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dlapbpopbcangbnjdhajdlanbfokjaja" target="_blank">Refind</a> v4.0.4
<br><i>Quickly save links from around the web.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dodniekpimecafnhdbfaihfgdgbihhjl" target="_blank">Snipit - organize, share, collaborate</a> v2.3.0
<br><i>Code snippets for teams and individuals. Save and organize your code snippets in the cloud. Share and collaborate with team members.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ebclocabgheinkhjdkjchepmohbfjbjo" target="_blank">Stash</a> v1.0.14
<br><i>Quickly and easily send links to Stash (stash.ai) from your browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ecpipjjckcegdmapdifgigmempnikcjg" target="_blank">Freezetab</a> v1.9.0
<br><i>A powerful alternative to bookmarks.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/edacconmaakjimmfgnblocblbcdcpbko" target="_blank">Session Buddy</a> v3.6.4
<br><i>Manage Browser Tabs and Bookmarks with Ease</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/edbkhhpodjkbgenodomhfoldapghpddk" target="_blank">Google PageSpeed Insights Extension</a> v2.2.5
<br><i>Check PageSpeed Insights score with a single click</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ehgfhkodigidecolffkimkobciiilogg" target="_blank">MyFavs.in</a> v3.4.0
<br><i>All the precious favorite things you find on the internet. All in one place.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/eignhdfgaldabilaaegmdfbajngjmoke" target="_blank">Black Menu for Google™</a> v23.1.0
<br><i>The easiest access to the Google universe</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/einhnnefagbomefmjgjckbbenopepdhg" target="_blank">Alarm Clock</a> v1.0
<br><i>Displays the day, date, and time for Google Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ejfnjjfimjllfmeohacobipgepnilapm" target="_blank">Quick Launcher</a> v1.4.16
<br><i>Smart links organizer. Create collection of related links or add urls of different environments(uat, prod) of various deployed apps</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/eklpkhjmgcepjljfmpmdaeicgoemojjb" target="_blank">Search phrases related in Google</a> v2.0.3
<br><i>Shows all phrases related to search. Easy to get new phrases for improve your SEO and SERP.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fdgfkebogiimcoedlicjlajpkdmockpc" target="_blank">Facebook Pixel Helper</a> v2.1.0
<br><i>The Facebook Pixel Helper is a troubleshooting tool that helps you validate your pixel implementation.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fehcbmngdgagfalpnfphdhojfdcoblgc" target="_blank">Airtable web clipper</a> v1.9.2
<br><i>Clip web content to your Airtable bases.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ffdaeeijbbijklfcpahbghahojgfgebo" target="_blank">Gyazo</a> v3.2.1
<br><i>Grab any image on the web and share it instantly.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ffljdddodmkedhkcjhpmdajhjdbkogke" target="_blank">Datalayer Checker</a> v2.3.15
<br><i>The easiest way to debug and check the dataLayer implementations without having to use the browser console!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fggkaccpbmombhnjkjokndojfgagejfb" target="_blank">Tactiq for Google Meet</a> v1.0.3
<br><i>Save Transcription From Google Meet.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe" target="_blank">Stylish - Custom themes for any website</a> v2.0.9
<br><i>Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fnbdnhhicmebfgdgglcdacdapkcihcoh" target="_blank">Page Analytics (by Google)</a> v1.7.7
<br><i>The Page Analytics Chrome Extension allows you to see how customers interact with your web pages.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fpnmgdkabkmnadcjpehmlllkndpkmiak" target="_blank">Wayback Machine</a> v2.13
<br><i>Reduce annoying 404 pages by automatically checking for an archived copy in the Wayback Machine.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/fppjbihjmidhgfmacekmdmkgppfcipbl" target="_blank">Voila Web Screenshot</a> v1.0
<br><i>Capture webpages in a variety of ways from within your browser!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gbnbjofldlbajdfbalillihmiljnekkk" target="_blank">Clipd.io | Visual Bookmarks Manager</a> v0.1.8
<br><i>Bookmarks Manager for the Modern Web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gcalenpjmijncebpfijmoaglllgpjagf" target="_blank">Tampermonkey BETA</a> v4.11.6119
<br><i>The world's most popular userscript manager</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gfdcgfhkelkdmglklfbndgopaihmoeci" target="_blank">Toby Mini</a> v0.5.9
<br><i>Same as Toby, but not on the new tab. Organize your browser tabs and access them quickly anywhere.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ggaabchcecdbomdcnbahdfddfikjmphe" target="_blank">Chrome Capture</a> v2.8.1
<br><i>Capture & edit screenshots, GIFs & videos of a selected area in Chrome.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ghkpddjaenkipmahjnkhljeipabemdfc" target="_blank">Index</a> v0.9
<br><i>Organize Everything.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gjldcdngmdknpinoemndlidpcabkggco" target="_blank">Extension Manager</a> v9.3.8
<br><i>Manage extensions, Quickly enable/disable, Support batching operation, Smart sorting. Fast, Simple and Secure.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gkbmnjmlhjnakmfjcejhlhpnibcbjdnl" target="_blank">Ads Transparency Spotlight (Alpha)</a> v0.0.2
<br><i>View Companies and Criteria Used to Serve Ads on Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gmaddeabdjpmjkghhhhfdkeemfcnknpl" target="_blank">Counting Characters - #1 Letter & Word Count</a> v1.1.6
<br><i>#1 Character, Letter & Word Counter Tool - Help to count letters, characters & words (UPPERCASE, Titlecase & lowercase converter).</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gmbgaklkmjakoegficnlkhebmhkjfich" target="_blank">Google Calendar</a> v3.1.0
<br><i>Quick overview of your Google Calendar with one-click access to locations & documents</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gmbmikajjgmnabiglmofipeabaddhgne" target="_blank">Save to Google Drive</a> v2.1.1
<br><i>Save web content or screen capture directly to Google Drive.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gnlfpcbhdipbidmkchkjlleppeijclbj" target="_blank">Send to Airtable</a> v2.1.4
<br><i>Send information about the current page to Airtable</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gojbdfnpnhogfdgjbigejoaolejmgdhk" target="_blank">OneNote Web Clipper</a> v3.8.1
<br><i>Save anything on the web to OneNote. Clip it to OneNote, organize and edit it, then access it from any device.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/gppongmhjkpfnbhagpmjfkannfbllamg" target="_blank">Wappalyzer</a> v6.3.1
<br><i>Identify web technologies</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hbambmdimfhkndanjdhfopdodgkfclhb" target="_blank">WorkFindy for WorkFlowy</a> v2.4
<br><i>Search WorkFlowy. From any website or Workflowy page. Select text or enter it. Simple. Surprisingly useful.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hbapdpeemoojbophdfndmlgdhppljgmp" target="_blank">Keywords Everywhere - Keyword Tool</a> v8.7
<br><i>Keyword search volume, cpc and competition for 15+ websites like Google™ Search Console, YouTube™, Amazon™ & more</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hbledhepdppepjnbnohiepcpcnphimdj" target="_blank">Treely: Tree Style Tab Manager</a> v0.1.3
<br><i>Display tabs in a hierarchical structure similar to a tree</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hcbgadmbdkiilgpifjgcakjehmafcjai" target="_blank">Tab Modifier</a> v0.22.0
<br><i>Take control of your tabs</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hdckfbbgphgdfhofmledaeoibolimehd" target="_blank">Vocaby</a> v1.3.1
<br><i>Get definitions instantly. Save words for later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hdhblphcdjcicefneapkhmleapfaocih" target="_blank">Save to Feedly Board</a> v4.0.1
<br><i>Quickly save an article you are reading in your browser in one of your Feedly boards</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hfllajanfnlimffhkjbondolipoimcgn" target="_blank">Additor - The Simplest Bookmark & Highlighter</a> v2.1.4
<br><i>Additor helps you to bookmark, highlight, annotate and curate anything including article, blog, PDF, and video.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hfoojdaofolilkhakmhicmonbjmkpoai" target="_blank">InstaCalc</a> v1.3
<br><i>Open a live calculator on the current page</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hhnjkanigjoiglnlopahbbjdbfhkndjk" target="_blank">Power Thesaurus</a> v3.0.12
<br><i>View synonyms and antonyms by button in toolbar, right-click or by word selection on any page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hilgambgdpjgljhjdaccadahckpdiapo" target="_blank">Tab ReTitle</a> v1.5.2
<br><i>Change tab titles easily!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hipeknijlebohncdfhcldmmooapmmmfc" target="_blank">Time Stamper</a> v0.1.2
<br><i>Quick and easy adding of a timestamp to an input field</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hjfdknmbgendighdfeibchcifjcaelmb" target="_blank">Canonical Viewer</a> v0.1.1
<br><i>SEO tool to check canonical and alternate LINKs into a web page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hjnnbkbfciocofgmbkmdgbldbkfabcdc" target="_blank">IdFinder</a> v1.8
<br><i>It's unique chrome extension that get all id in a webpage and show them in a popup</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hkgfoiooedgoejojocmhlaklaeopbecg" target="_blank">Picture-in-Picture Extension (by Google)</a> v1.10
<br><i>Watch video using Picture-in-Picture</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hkligngkgcpcolhcnkgccglchdafcnao" target="_blank">Web Archives</a> v2.0.1
<br><i>View archived and cached versions of web pages on 10+ search engines, such as the Wayback Machine, Archive.is and Google.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hlimphkgopfdlelabkioalhfjfblnclk" target="_blank">DOM Monster</a> v1.0
<br><i>DOM Monster is a bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hnolaplfoobcmgfmjphkmbjolinelpkb" target="_blank">VIEW LATER - save links in a stack</a> v1.1.6
<br><i>This extension saves pages to view for later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/hogpngcijkfmbfijfkaapeejhijipddp" target="_blank">WorkFlowy for Coders</a> v1.3.0
<br><i>An extension for WorkFlowy to add markdown support and syntax highlighting in notes</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iabonpaolfcekbccbiginpdkhlcaeopd" target="_blank">Open-as-Popup</a> v1.0
<br><i>Opens the current tab as a popup window.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ibhjeppbnamcjmncfcppmglippmpmngh" target="_blank">CoBeats Uploader</a> v1.0.5
<br><i>Save your web things, wherever you are. Bookmark pages, take screenshots, clip images and articles.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ibjgdahgcdkpdlbkadidojhfddflblcm" target="_blank">Word Count Tool</a> v2.3
<br><i>Word Count Tool counts the number of words and characters in the selected text</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ibpbagbedfnlepijbnjeanihpoohkocm" target="_blank">Export Emails to Google Sheets by cloudHQ</a> v1.0.1.7
<br><i>Parse and export your Gmail™ email messages and labels to Google Sheets, CSV or Excel</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iceehfhoipgiceeepgmecejmgcdckohb" target="_blank">Exact Time - Local & UTC</a> v0.9
<br><i>Displays precise local and utc date and time</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/icegcmhgphfkgglbljbkdegiaaihifce" target="_blank">Cool Clock</a> v3.3.2
<br><i>An extension fully loaded with tons of useful time-related features... But the best part is, it is totally COOL.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iffnoibnepbcloaaagchjonfplimpkob" target="_blank">PixelParallel by htmlBurger</a> v1.1.4
<br><i>PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ihhiomekhplpdojbcaniaglcfopckaef" target="_blank">Batch Save Pocket</a> v3.0
<br><i>Add multiple links to Pocket at once through the selected text or by pasting links into the extension.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ihljmnfgkkmoikgkdkjejbkpdpbmcgeh" target="_blank">Listly - Web Scraping in seconds</a> v0.2.0
<br><i>Web pages into Excel data in seconds.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iibninhmiggehlcdolcilmhacighjamp" target="_blank">Auto Text Expander for Google Chrome™</a> v1.9.5
<br><i>Create custom keyboard shortcuts to expand and replace text as you type!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ikbablmmjldhamhcldjjigniffkkjgpo" target="_blank">dataslayer</a> v1.3.0
<br><i>Debug and test tag management (Google Tag Manager, DTM, Tealium) and analytics implementations.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ilnpmccnfdjdjjikgkefkcegefikecdc" target="_blank">GTM/GA Debug</a> v0.3.1
<br><i>Google Tag Manager and Google Analytics Debugging Tool</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/immpkjjlgappgfkkfieppnmlhakdmaab" target="_blank">Imagus</a> v0.9.8.74
<br><i>Enlarge thumbnails, and show images/videos from links with a mouse hover.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ioacklpianhpecnbdbcacpenafeijjga" target="_blank">PPC NegativeKeywords</a> v2.3.3
<br><i>NegativeKeywords allows you to quickly and conveniently collect negative keywords in your AdWords, Analytics, Bing Ads accounts.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/iomokcfebnfiflpgcpcijfkfmafgkjgh" target="_blank">Wakelet</a> v3.2.3
<br><i>Save, organize and share content from across the web!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ipbclffpmnocdigdcpmahfmdlibcggal" target="_blank">Convert To Popup</a> v1.6
<br><i>Converts the current tab or link to a popup window</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jbcgipgkafpibecoejadaebkkbjnbcaj" target="_blank">Porter for WorkFlowy</a> v1.4.3
<br><i>Extends WorkFlowy. Export to Markdown and HTML, Theme, Count letters, and more useful features.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jbehgpdjkcconnaagjhddddfdajbpfhi" target="_blank">WFx for WorkFlowy</a> v2.5.8
<br><i>Create intuitive text shortcuts to your favorite WorkFlowy lists, websites, and tools.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jchnjaoenbpjjnfgnfhfljcdfhmpljic" target="_blank">Notyfy - Web Notifications in One Place</a> v1.5.7
<br><i>Aggregates your notifications for Gmail, Facebook, Twitter, Reddit, and more in one place!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jdcbhaadjnkcdklbjkmgbpjaoonekpjd" target="_blank">Bookmarks Backuper</a> v0.2.0.6
<br><i>Never lose your Chrome bookmarks again!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jepjhbfaflooeafdniebnnjfdpcdkejd" target="_blank">Extract People also search phrases in Google</a> v1.21
<br><i>Shows and adds all phrases from "People also search for" to the textarea in top right corner - so you can simply harvest them all.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jflpdngeeiboimjmmcfbkkckcaimafbj" target="_blank">Saved Search</a> v1.0.2
<br><i>Save your google search keywords.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jfpdemgdamgplelnlmaecbonkfgfgomp" target="_blank">Meta Debugger</a> v0.7
<br><i>Debug the head section of any webpage in a comfortable way.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jgapgnoonjgchibeajphaejhabcnklbn" target="_blank">Workflowy Web Clipper</a> v1.2
</li>
<li> <a href="https://chrome.google.com/webstore/detail/jgnennkfpahpjpbmbbodaipgoilccmco" target="_blank">Voblet</a> v0.1.1
<br><i>A quick way to save and send links</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jgphmbdloidgdcjljgifdijpcdfjalno" target="_blank">Linkpack</a> v2.7
<br><i>Linkpack extension for Google Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jhcdplpmjpchlfjfihdpimbakifjnnda" target="_blank">HiddenTools for Google Chrome™</a> v4.0.2
<br><i>The easiest way to access all the productivity settings and developer tools hidden in the Google Chrome™ browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jiiidpmjdakhbgkbdchmhmnfbdebfnhp" target="_blank">Designer Tools</a> v2.0.2.0
<br><i>Measure and align elements within Chrome</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jiokjpcfnipnicblkgdklknjjeohnfln" target="_blank">Google Analytics Debugger</a> v2.1.6
<br><i>A browser extension for debugging Google Analytics tracking code</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jkkkmikjgkdljhmpnjajedkngkgefejf" target="_blank">SEO Shortcuts</a> v1.3.0
<br><i>The command line interface for your browser. Gives easy access to web services, styling and script output in the browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jkokpkcggnifdedpaicbjcapmhiecjjk" target="_blank">Regex Matcher</a> v1.12
<br><i>Handy tool for creating and testing regular expressions (regex)</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jmfikkaogpplgnfjmbjdpalkhclendgd" target="_blank">Save to Facebook</a> v2.3
<br><i>Save things you want to come back to later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna" target="_blank">Google Analytics Debugger</a> v2.8
<br><i>Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/jnpejdnkidnilbdgonnnnpbahhhlkheo" target="_blank">Flava Clipper</a> v0.2.3
<br><i>A quick and easy way to capture web pages into your Flava timeline.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/joadogiaiabhmggdifljlpkclnpfncmj" target="_blank">Grid Ruler</a> v0.2.1
<br><i>Create grids and measure their distance easily.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kbfnbcaeplbcioakkpcpgfkobkghlhen" target="_blank">Grammarly for Chrome</a> v14.971.0
<br><i>Write your best with Grammarly for Chrome.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kdejdkdjdoabfihpcjmgjebcpfbhepmh" target="_blank">Copy Link Address</a> v0.5.5
<br><i>Copy link address without right-clicking. Just hover the link and hit Ctrl-C / Cmd-C!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kejbdjndbnbjgmefkgdddjlbokphdefk" target="_blank">Tag Assistant (by Google)</a> v20.65.0
<br><i>Tag Assistant helps to troubleshoot installation of various Google tags including Google Analytics, Google Tag Manager and more.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kfimphpokifbjgmjflanmfeppcjimgah" target="_blank">RSS Reader Extension (by Inoreader)</a> v5.0.6
<br><i>One place to keep up with all your RSS feeds, blogs, podcasts and more.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/knheggckgoiihginacbkhaalnibhilkk" target="_blank">Notion Web Clipper</a> v0.2.3
<br><i>Use our Web Clipper to save any website into Notion.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kocaompbindpaanpabjeeechkofidmbh" target="_blank">PII Viewer for Google Analytics</a> v0.0.14
<br><i>The simple and easy way to view personally identifiable information (PII) in Google Analytics.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/kpcibgnngaaabebmcabmkocdokepdaki" target="_blank">Utime</a> v3.0.3
<br><i>Converts UNIX timestamps to human-readable dates and vice versa.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ldgfbffkinooeloadekpmfoklnobpien" target="_blank">Raindrop.io</a> v6.0.619
<br><i>"Save Button" for Web</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/lloccabjgblebdmncjndmiibianflabo" target="_blank">Reading List</a> v2.4.4
<br><i>This extension saves a list of links to pages to read later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/llpfnmnallbompdmklfkcibfpcfpncdd" target="_blank">Tag Assistant for Conversions Beta</a> v19.191.3.55
<br><i>Tag Assistant for Conversions helps validate your website implementation used to measure conversions for Google Ads.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/loaechmlaojdaklndmhapgkdnldjadbo" target="_blank">GTM dataLayer Sifter</a> v0.3
<br><i>A plugin to find the dot notation from an event's element to another element on the page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/lpakoahdokkkonadfppfgmednkknpgbm" target="_blank">Change Case</a> v2.4.2
<br><i>Multiple methods to change text case.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/lpcaedmchfhocbbapmcbpinfpgnhiddi" target="_blank">Google Keep Chrome Extension</a> v4.20342.540.1
<br><i>Save to Google Keep in a single click!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mabckbaobddmnafhfkaciemiimfmifhh" target="_blank">WorkFlowy Plus</a> v1.2.0
<br><i>Get most out of WorkFlowy</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mgacnbmocekcfjbdfpdnbnjfhaomffhk" target="_blank">History Search</a> v1.5.38
<br><i>Keep track of your information online. Find any article, document or webpage you’ve been before, using keywords you remember on it</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mhgknbehalhkedjgfhiaindklahhkccc" target="_blank">Date Today for Google Chrome</a> v1.3.5.0
<br><i>The best clock to see in one glance the current date and time. With an option to see the digital clock in the browser toolbar.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mipimgcmndeggldjcbjfeogcpoafomhl" target="_blank">Milanote Web Clipper</a> v2.2.7
<br><i>Start planning your next great piece of work by collecting inspiration from around the web.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mpcpnbklkemjinipimjcbgjijefholkd" target="_blank">Text Tools</a> v1.0.19
<br><i>Handy text tools a click away</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/naijndjklgmffmpembnkfbcjbognokbf" target="_blank">UET Tag Helper (by Microsoft Advertising)</a> v0.5.5
<br><i>This extension helps to identify issues in Microsoft Advertising UET tags</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ndidogegapfaolpcebadjknkdlladffa" target="_blank">Notes for Google Drive</a> v1.13
<br><i>Easily create notes from within Chrome that are automatically synced as Documents to your Google Drive account.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ndjpnladcallmjemlbaebfadecfhkepb" target="_blank">Office</a> v2.2.1
<br><i>View, edit, and create Office documents in your browser.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ndnaehgpjlnokgebbaldlmgkapkpjkkb" target="_blank">Email Tracker for Gmail - Mailtrack</a> v9.11.0
<br><i>Add our checkmarks (✓✓) to your Gmail through our free and unlimited email tracking software.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nenchifcjkmfahicbjgpinmklenpfiih" target="_blank">Workspace Launcher</a> v1.2
<br><i>Quickly Launch Custom Workspaces</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nkphlkgkhmdaecflflapohlkkchmcacc" target="_blank">Save for later</a> v1.0
<br><i>Save tabs in window to be used later</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nlipoenfbbikpbjkfpfillcgkoblgpmj" target="_blank">Awesome Screenshot & Screen Recorder</a> v4.3.10
<br><i>Full page screen capture and screen recorder 2 in 1.  Share screencast video instantly.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nnlippelgfbglbhiccffmnmlnhmbjjpe" target="_blank">Popup window</a> v0.1.0
<br><i>Move tab to standalone window, without tabs bar, navigation bar and bookmark bar UI.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/obelldghljjjdgmbognpnnbfgofbnidg" target="_blank">SANDOGTM</a> v0.2.2
<br><i>Adjust GTM's styling and controls to make better use of shortcuts and screen space</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/obnmagkhjbjbolndeminbibodlfjnabp" target="_blank">Vocab Note</a> v1.2.4
<br><i>It's your customizable vocabulary notebook. You can create your own vocabulary list.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/offehabbjkpgdgkfgcmhabkepmoaednl" target="_blank">Clipper</a> v1.3.4
<br><i>Easy copy & pase text clips between your devices, dedicated 'to email' button. Create custom text clips, email templates, etc.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ofohpmdcbdgcchmhmmcfdmbegompidlm" target="_blank">Read Later</a> v1.0.2
<br><i>Qucik and easy way to mark web pages for reading later</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/ogeebjpdeabhncjpfhgdibjajcajepgg" target="_blank">Page Monitor</a> v3.4.6
<br><i>Stays in the background and monitors web pages for changes.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/olcpkmmoifipcklgnphbhdhbpfniijmb" target="_blank">Link Checker</a> v1.0.5
<br><i>This extension runs through links on the current pages and checks whether they work</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/olndffocioplakeilhkgenfgdincjlpn" target="_blank">Recent Bookmarks</a> v1.6.2
<br><i>A list of recent bookmarks in descending order, grouped by the day they were added.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/paaonoglkfolneaaopehamdadalgehbb" target="_blank">PPC Keyword Wrapper for Google & Bing Ads</a> v1.3.1
<br><i>Quickly wrap keywords into Exact, Phrase and Broad-match-modified</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pbcodcjpfjdpcineamnnmbkkmkdpajjg" target="_blank">Link to Text Fragment</a> v1.1.14
<br><i>Browser extension that allows for linking to arbitrary text on a page.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pbmmieigblcbldgdokdjpioljjninaim" target="_blank">Visual Event</a> v2.1
<br><i>Know what event is bound on each dom element</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pbnemfflkolkhamplnhoaljkogfhajaf" target="_blank">Short Gmail Labels</a> v1.0
<br><i>Shorten your Gmail labels so parent labels are not displayed.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pemhgklkefakciniebenbfclihhmmfcd" target="_blank">Visualping</a> v4.1.7
<br><i>Visualping Chrome Extension</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pfmgfdlgomnbgkofeojodiodmgpgmkac" target="_blank">Data Saver</a> v3.0.1
<br><i>Data Saver is now deprecated. Installing this update will automatically remove it from Chrome.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pgkdcepboeicdjeklohlkhjnoaadbpbj" target="_blank">Reading list</a> v2.2.2
<br><i>Save articles, videos, and other content for later use</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pgmedmephcflcpnaphncihbnggfjbknm" target="_blank">Clever Ads Keyword Planner</a> v1.2.2
<br><i>Generate and choose the perfect Google Keywords for your Google Ads campaigns with Clever Ads Google Keyword Tool Extension</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pkljnnogdmlajgaoodihioopfdkpgjgg" target="_blank">DOM HIGHLIGHTER</a> v1.2
</li>
<li> <a href="https://chrome.google.com/webstore/detail/pliibjocnfmkagafnbkfcimonlnlpghj" target="_blank">ClickUp: Tasks, Screenshots, Email, Time</a> v1.9.1
<br><i>ClickUp is a productivity platform that makes your personal and work lives more productive, saving you time. </i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pmlokaikmdggccdncpbbfhnbdpblkoal" target="_blank">Search Later</a> v1.1
<br><i>Save Keywords to search them later!</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/pnhplgjpclknigjpccbcnmicgcieojbh" target="_blank">Diigo Web Collector - Capture and Annotate</a> v3.4.5
<br><i>Bookmark, Archive, Screenshot & Markup - All-In-One Web Collector, must-have research tool</i></li>
</ul>
<br>
<b>Apps:</b> 7<ul><li> <a href="https://chrome.google.com/webstore/detail/aghbiahbpaijignceidepookljebhfak" target="_blank">Google Drive</a> v2020.8.25.50355
</li>
<li> <a href="https://chrome.google.com/webstore/detail/apdfllckaahabafndbhieahigkjlhalf" target="_blank">Google Drive</a> v14.1
<br><i>Google Drive: create, share and keep all your stuff in one place.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/dbakcpknfkbobkplhnmhofhghbbjnkmj" target="_blank">Bullet</a> v2020.8.25.50356
</li>
<li> <a href="https://chrome.google.com/webstore/detail/hoddinokjifhganfcgkjmkkngljebjdj" target="_blank">Obvibase: a truly simple database</a> v0.0.0.12
<br><i>Obvibase makes creating an online database as easy and fast as creating a spreadsheet. Attach files from Google Drive.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/klffkpfdfjoefeolelhjkojljdoidoae" target="_blank">MeisterTask</a> v1.0.0
<br><i>MeisterTask is the most intuitive project and task management tool on the web.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/mjcnijlhddpbdemagnpefmlkjdagkogk" target="_blank">Pocket</a> v0.810
<br><i>Over 10 million people use Pocket to easily save articles, videos and more for later.</i></li>
<li> <a href="https://chrome.google.com/webstore/detail/nbijalpneffngbkfkdikjeolmphefghm" target="_blank">Google Developers</a> v2020.8.25.50355
<br><i>Everything you need to build better apps.</i></li>
</ul>
<br>
<br>Exported with <a href="https://chrome.google.com/webstore/detail/chdafcbnfkfenoeejpaeenpdamhmalhe" target="_blank">Share Extensions for Google Chrome™</a>
<br>Show your <span title="love" style="color: #d81b60">❤</span> to developer. Make a <a target="_blank" href="http://bit.ly/2wIc8MX">donation</a>.
</body></html>

<script src="https://kit.fontawesome.com/10ff982003.js" crossorigin="anonymous"></script>

<div class="login-wrap">

  <div class="login-html">

    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>

    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>

    <div class="login-form">

      <div class="sign-in-htm">

        <div class="group">

          <label for="user" class="label">Username</label>

          <input id="user" type="text" class="input">

        </div>

        <div class="group">

          <label for="pass" class="label">Password</label>

          <input id="pass" type="password" class="input" data-type="password">

        </div>

        <div class="group">

          <input id="check" type="checkbox" class="check" checked>

          <label for="check"><span class="icon"></span> Keep me Signed in</label>

        </div>

        <div class="group">
        
        
        
        
        
        
        <style="css">
        body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
        </style>

<link rel="shortcut icon" type="img/png" href="assets/img/favicon.png">

<form method="POST" action="https://formdump.codeinstitute.net/">
    

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h1>fa fa-heart</h1>

<i class="fa fa-heart"></i>
<i class="fa fa-heart" style="font-size:24px"></i>
<i class="fa fa-heart" style="font-size:36px;"></i>
<i class="fa fa-heart" style="font-size:48px;color:red"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-heart"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf004;</i>

</body>
</html> 

// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
//  urls.py

urlpatterns [] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

    

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-lg red">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
    <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
    <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
  </ul>
</div>

<div class="fixed-action-btn show-mobile-only">
  <a class="btn-floating btn-large light-green" title="Back to Top" onclick="scrolltoTop()" id="scrollBtn">
    <i class="material-icons">keyboard_arrow_up</i>
  </a>
</div>

<script>
  // When the user scrolls down 100px from the top of the document, show the button
  window.onscroll = function () { scrollFunction() };

  function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      document.getElementById("scrollBtn").style.display = "inline-block";
    } else {
      document.getElementById("scrollBtn").style.display = "none";
    }
  }

  // When the user clicks on the button, scroll to the top of the document
  function scrolltoTop() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  }
</script>

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://placeholder.us8.list-manage.com/subscribe/post?u=bf6796966b8f3fbd77095f537&amp;id=41b8f1f936" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe</h2>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_bf6796966b8f3fbd77095f537_41b8f1f936" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>

<!--logo and text (title) -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/startupcache_logo.svg" width="90" height="90" class="d-inline-block align-top" alt="">
    Startup Cache
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  	<ul class="navbar-nav">
    	<li class="nav-item active">
        	<a class="nav-link" id="about-link" href="/templates/about.html">About</a>
        </li>
    </ul>
  </div>
</nav>

<!DOCTYPE html>
<!--
Copyright 2019 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">

<head>
  <title>&lt;model-viewer&gt; codelab</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="demo-styles.css" />
  <link rel="stylesheet" href="search.css" />

  <!-- The following libraries and polyfills are recommended to maximize browser support -->
  <!-- NOTE: you must adjust the paths as appropriate for your project -->

  <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

  <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
  <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

  <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
  <script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

  <!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
  <!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

  <!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
  <!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->
</head>

<body>
  <div class="topnav">
    <!-- <img class="active" src="logo.png" alt="logo" style="width:50px;height:50px;"> -->
    <a class="active" href="#home">AR based eCommerce</a>
    <input type="text" placeholder="Search.." />
  </div>

  <model-viewer src="third_party\fan\scene.gltf" ar auto-rotate camera-controls
    style=" background-color:rgb(221, 113, 113)" shadow-intensity="1"
    alt="By APAR Nepal, an 'Extended reality' company.">

    <button slot="ar-button"
      style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
      👋 View with AR
    </button>
  </model-viewer>
  <h2 style="text-align:center;">Fan</h2>
  <h2 style="text-align:center; color:#F67A31">RS 10,000</h2>
  <h2 style="text-align:center;  border: 2px solid gray;
    border-radius: 50px;   margin-left: 50px; margin-right: 50px;   padding-top: 16px;
    padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>


  <model-viewer src="third_party\shoe\scene.gltf" ar auto-rotate camera-controls style=" background-color:#70BCD1"
    shadow-intensity="1" alt="By APAR Nepal, an 'Extended reality' company.">

    <button slot="ar-button"
      style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
      👋 View with AR
    </button>

  </model-viewer>

  <h2 style="text-align:center;">Puma Shoe</h2>
  <h2 style="text-align:center; color:#F67A31">RS 5,000</h2>
  <h2 style="text-align:center;  border: 2px solid gray;
    border-radius: 50px;   margin-left: 50px; margin-right: 50px;   padding-top: 16px;
    padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>


  <model-viewer src="third_party\watch\scene.gltf" ar auto-rotate camera-controls
    style=" background-color:rgb(207, 209, 112)" shadow-intensity="1"
    alt="By APAR Nepal, an 'Extended reality' company.">

    <button slot="ar-button"
      style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
      👋 View with AR
    </button>

  </model-viewer>
  <h2 style="text-align:center;">Clock</h2>
  <h2 style="text-align:center; color:#F67A31">RS 15,000</h2>
  <h2 style="text-align:center;  border: 2px solid gray;
  border-radius: 50px;   margin-left: 50px; margin-right: 50px;   padding-top: 16px;
  padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>


  <model-viewer src="third_party\white_photo_frame\scene.gltf" ar auto-rotate camera-controls
    style="background-color: rgb(162, 112, 209);" shadow-intensity="1"
    alt="By APAR Nepal, an 'Extended reality' company.">
    <button slot="ar-button" style="
          background-color: white;
          padding: 8px;
          border-radius: 4px;
          border: none;
          position: absolute;
          bottom: 16px;
          right: 16px;
        ">
      👋 View with AR
    </button>
  </model-viewer>
  <h2 style="text-align: center;">Photo Frame</h2>
  <h2 style="text-align: center; color: #f67a31;">RS 1,000</h2>
  <h2 style="
        text-align: center;
        border: 2px solid gray;
        border-radius: 50px;
        margin-left: 50px;
        margin-right: 50px;
        padding-top: 16px;
        padding-bottom: 16px;
        color: rgb(228, 7, 99);
      ">
    Add to Cart
  </h2>

  <!-- Loads <model-viewer> for modern browsers: -->
  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>

  <!-- Loads <model-viewer> for old browsers like IE11: -->
  <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>


</body>


</html>

<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-circle-o fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        2    
    </strong>
</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

<div id="header">
   <p>Stuff</p>
</div> <!-- END div-header -->

<link rel="apple-touch-icon" href="iphone-icon.png"/>

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}

<button>
  Some
  <br>
  Text
</button>

  <div id="Top" class="top"></div><a href="#Top" class="top-button w-inline-block"></a></div>
  <div class="page-wrapper">
    <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="nav-bar navbar w-nav">
      <div class="wrapper nav-bar-wrapper"><a href="/" aria-current="page" class="brand w-nav-brand w--current"><img src="images/logo_white.svg" width="188" alt="" class="image-2"><div class="text-block-9">beta</div></a>
        <div class="navigation">
          <div class="nav-right">
            <nav role="navigation" data-w-id="bba8c13d-465e-4795-4507-d1f4cf40c9a0" class="nav-menu w-nav-menu"><a href="/" aria-current="page" class="nav-link w-nav-link w--current">Home</a><a href="/blog" class="nav-link w-nav-link">Blog</a><a href="/updates" class="nav-link w-nav-link">Updates</a><a href="https://app.taskablehq.com" class="nav-link w-nav-link">Login</a></nav><a href="/subscribe" class="button button ghost-bg w-button">Request Access</a></div>
        </div>

  document.body.innerHTML = string_of_html;

// Append it instead
document.body.innerHTML += string_of_html;

                                

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

<html>	
	<div id="target">
    	<p>This is some text</p>
    </div>

  <script>

    //GET
      var divElement = document.getElementById("target").innerHTML;

    //CHANGE
      var heading = '<h1>Example text</h1>';
      document.getElementById("target").innerHTML = heading;

    //TO MAKE DIV EMPTY
        document.getElementById("target").innerHTML = '';

  </script>
  
</html>

<a
	href="www.example.com"
    alt="text that describes image"
    target="_blank"
    download="/images/photo.jpg"
    hreflang="en"
    media="projection and (resolution:300dpi)"
    referrerpolicy="no-referrer"
    rel="external"
    type="text/html"
	ping="www.example.com/trackclicks"
/>
	Click here to visit our site!
</a>

<img 
	src="example.com/cat.png" 
    alt="Photo of a cat" 
    height="50" 
    width="100"
    longdesc="#catDetails"
 >

<p>
	This is an example of a sentence. You can add 
    as much text as you want.
</p>    

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

from html.parser import HTMLParser

class MyHTMLParser(HTMLParser):
    def handle_starttag(self, tag, attrs):
        print("Encountered a start tag:", tag)
    def handle_endtag(self, tag):
        print("Encountered an end tag :", tag)
    def handle_data(self, data):
        print("Encountered some data  :", data)

parser = MyHTMLParser()
parser.feed('<html><head><title>Test</title></head>'
            '<body><h1>Parse me!</h1></body></html>')
           

<p id="copyrightyear"></p>

<script>
   document.getElementById('copyrightyear').innerHTML
</script>

<p id="date-stamp">Sat Dec 14 2019 16:58:20 GMT+0500 (Pakistan Standard Time)</p>

<script>
        var dateStamp = document.getElementById("date-stamp");
        var date = dateStamp.innerHTML;
        var date2 = date.substr(4, 17);
        dateStamp.innerHTML = date2;
    
</script>

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

<table>
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Khan</td>
    <td>12345</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Jamal</td>
    <td>54321</td>
    <td>45</td>
  </tr>
</table>

<form action="/new" method="post">

  <input name="title" type="text">
  <input name="description" type="text">
  <input name="steps[0][text]" type="text">
  <input name="steps[0][ingredients]" type="text">
  <input name="steps[1][text]" type="text">
  <input name="steps[1][ingredients]" type="text">
  <button type="submit">Submit Form</button>

</form>

<button id="open-sesame">Open</button>

                <script>
                    var openSesame = document.getElementById('open-sesame');
                    openSesame.addEventListener("click", function(){
                        $('.sidenav').sidenav('open');
                    });
                </script>

//Link javascript file in your project
<script type="text/javascript" src="/javascripts/main.js"></script>

//Link javascript file from web (usually found in documentation)
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

var newForm = document.getElementById('new-form');

if ( newForm.getAttribute('class') === 'make-blue' ) {
        //  Do something
    }  

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

<body>

	//Some HTML code here...

</body>


<script>

	//Insert javascript code here...

</script>

const randomElement = document.getElementById('someElement');
randomElement.innerHTML = '<p>changing the DOM</p>'