ionic generate page pages/contact

<div class="ion-text-center">
    <ion-card-title>Center Any Component</ion-card-title>
    <ion-button color="primary" routerLink="/page-name">Go To Page</ion-button>
</div>

<ion-list>
    <ion-item routerLink="/page1">
        <ion-icon slot="start" name="man" color="danger"></ion-icon>
        <ion-label>Menu One</ion-label>
    </ion-item>
    <ion-item routerLink="/page2">
        <ion-icon slot="start" name="book" color="danger"></ion-icon>
        <ion-label>Menu Two</ion-label>
    </ion-item>
    <ion-item routerLink="/page3">
        <ion-icon slot="start" name="heart" color="danger"></ion-icon>
        <ion-label>Menu Three</ion-label>
    </ion-item>
</ion-list>

(click)="showInterstitialAd()"

showInterstitialAd(){
  this.admobFreeService.showInterstitialAd();
}

setTimeout(() => {
  this.admobFreeService.showBannerAd();
}, 5000);

private admobFreeService: AdmobfreeService,

import { AdmobfreeService } from '../service/admobfree.service';

AdMobFree,
AdmobfreeService,

import { AdMobFree } from '@ionic-native/admob-free/ngx';
import { AdmobfreeService } from './service/admobfree.service';

  showBannerAd() {
    let bannerConfig: AdMobFreeBannerConfig = {
        isTesting: true, // Remove in production
        autoShow: true,
        bannerAtTop: false,
        id: "ca-app-pub-3940256099942544/6300978111"
    };
    this.admobFree.banner.config(bannerConfig);
  
    this.admobFree.banner.prepare().then(() => {
        // success
    }).catch(e => alert(e));
  }

  showInterstitialAd() {
    this.admobFree.interstitial.isReady().then(() => {
      this.admobFree.interstitial.show().then(() => {
      })
        .catch(e =>alert("show "+e));
    })
      .catch(e =>alert("isReady "+e));
  }

private admobFree: AdMobFree,
public platform: Platform

import {
  AdMobFree,
  AdMobFreeBannerConfig,
  AdMobFreeInterstitialConfig
} from '@ionic-native/admob-free/ngx';
import { Platform } from '@ionic/angular';

ionic generate service service/admobfree

if (window.location.pathname !== "/home") {
  this.router.navigateByUrl("home");
}

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>About Us</ion-title>
        <!-- Menu Icon -->
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
		<!-- Back icon -->
        <ion-buttons slot="end">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

ionic cordova build --release android

# location of keystore
storeFile=app.keystore

# Key alias
keyAlias=alias_name

# Store password
storePassword=Password1

# Key password
keyPassword=Password1

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

ionic cordova build android --prod –-release

ionic cordova run android --device --livereload

ionic cordova run android --emulator --livereload

(click)="showInterstitialAd()"

showInterstitialAd() {
  this.admobFree.interstitial.isReady().then(() => {
    this.admobFree.interstitial.show().then(() => {
    })
      .catch(e =>alert("show "+e));
  })
    .catch(e =>alert("isReady "+e));
}

platform.ready().then(() => {
  this.admobFree.interstitial.config(this.interstitialConfig);
  this.admobFree.interstitial.prepare()
    .then(() => { }).catch(e => alert(e));
});

this.admobFree.on('admob.interstitial.events.CLOSE').subscribe(() => {
  this.admobFree.interstitial.prepare()
    .then(() => {}).catch(e => alert(e));
});

interstitialConfig: AdMobFreeInterstitialConfig = {
    isTesting: true, // Remove in production
    autoShow: false,
    id: "ca-app-pub-3940256099942544/1033173712"
};

private platform: Platform

import { Platform } from '@ionic/angular';

setTimeout(() => {
  this.showBannerAd();
}, 3000);

showBannerAd() {
  let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true,
      bannerAtTop: false,
      id: "ca-app-pub-3940256099942544/6300978111"
  };
  this.admobFree.banner.config(bannerConfig);

  this.admobFree.banner.prepare().then(() => {
      // success
  }).catch(e => alert(e));
}

private admobFree: AdMobFree

import { AdMobFree, AdMobFreeBannerConfig,AdMobFreeInterstitialConfig, AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free/ngx';

AdMobFree

import { AdMobFree } from '@ionic-native/admob-free/ngx';

npm install @ionic-native/admob-free

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-2387490687776151~80XXXXXXX9"

ionic cordova resources android

ionic login

ionic cordova platform add android

// Exit App on back button click from Home page
this.platform.backButton.subscribeWithPriority(0, () => {
  if (window.location.pathname == "/home") {
    navigator['app'].exitApp();
  }
});

// Set new Home page
this.router.navigateByUrl("home");

private router: Router

import { Router } from '@angular/router';

<ion-icon name="home" size="large"></ion-icon>

<ion-card>
    <ion-grid>
        <ion-row class="ion-text-center">
            <ion-col size="4" routerLink="/page1">
                <ion-icon name="home" color="danger" size="large"></ion-icon>
                <p>Home</p>
            </ion-col>
            <ion-col size="4" routerLink="/page2">
                <ion-icon name="bag-add" color="danger" size="large"></ion-icon>
                <p>About</p>
            </ion-col>
            <ion-col size="4" routerLink="/page3">
                <ion-icon name="chatbox" color="danger" size="large"></ion-icon>
                <p>Contact</p>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-card>

<ion-list>
  <ion-item>
      <ion-card-title>List title here</ion-card-title>
  </ion-item>
  <ion-item>
      <ion-label>Item One</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Two</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Three</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Four</ion-label>
  </ion-item>
</ion-list>

<audio src="/assets/audio/audio.mp3" controls></audio>

<br>

<div style="width: 100%; border-top: 1px solid #d4d4d4; margin: 8px 0;"></div>

<a href="https://google.com">Open Google</a>

<ion-button color="primary" routerLink="/page-name">Go To Page</ion-button>

<ion-img src="/assets/images/profile.jpg"></ion-img>

let input = document.getElementById('search');
input.addEventListener("keyup", search);

function search() {
    let inputVal = input.value;
    // input = input.toLowerCase();
    let li = document.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toLowerCase().includes(inputVal)) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<p>
  This is come text content. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab cumque nemo facere id aut ut perferendis alias dolorum tenetur quo!  
</p>

<ion-card style="box-shadow: none;">

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Card content goes here...
    Card content goes here...
    Card content goes here...
  </ion-card-content>
</ion-card>

HEIGHT : 1% ~ 1vh
WIDTH  : 1% ~ 1vw

ionic serve

cd directoryName

ionic generate page home

ionic start

npm install -g @ionic/cli

npm --version

node --version

<ion-card>

      <iframe height="315" width="100%" src="https://www.youtube-nocookie.com/embed/ky91CTgmZ0g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
  </ion-card>

Hello, 
I can work on your website.
I have experience in working with html, css, bootstrap, jquery, animations, javascript.
I already have developed many templates.
I deliver work with excellent code quality.
If you will work with me for a project then you will find me a long term partner. 
we can negotioate on price over chat.
thank you.

<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

<label>[text* your-name placeholder "Your name"] </label>

<label>[email* your-email placeholder "Your email"] </label>

<label>[textarea* your-message placeholder "Your message"] </label>

[submit "Submit"]

@inject HttpClient httpClient

@if (States != null)
{

<select id="SearchStateId" name="stateId" @onchange="DoStuff" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}


@code {
[Parameter] public string InitialText { get; set; } = "Select State";
private KeyValue[] States;
private string selectedString { get; set; }
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private void DoStuff(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    Console.WriteLine("It is definitely: " + selectedString);
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}

<div tabindex="0">I need keyboard focus!</div>

<button accesskey="b">Important Button</button>

<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>

First, make sure you have the Emmet extension installed. Once you have it, Ctrl + Shift + P to go to the command pallete and search “Emmet balance Outward”.
That should select all the inner HTML and the wrapping tag. If you’re looking to only select the inner HTML, then choose Emmet Balance Inward.
Now you’ll likely want to make a shortcut to one or both of these. File > Preferences > Keyboard Shortcuts. Search for the Emmet command and associate your key combination of choice.

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

<style>
.divider_wrapper {
    padding-bottom: 30px;
    padding-top: 60px;
}
.divider {
    position: relative;
    margin-top: 0px;
    height: 1px;
}
.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right,transparent,#aaa,transparent);
}
.div-arrow-down:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -7px;
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: white;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
</style>
<div class="divider_wrapper">
  <div class="divider div-transparent div-arrow-down">
  </div>
</div>

<!-- Tab links -->
		<div class="tab">
			<button class="tablinks tab-font" onclick="openCity(event, 'footer')">Footer</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'projects')">Projects</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'disclaimer')">disclaimer</button>
		</div>

		<!-- Tab content -->
		<div id="projects" class="tabcontent">
			<h2>Projects</h2>
			<h3>Hey, If your reading this you obviously wanna find out about more of my projects</h3>
		</div>

		<div id="footer" class="tabcontent">
			<h3><a href="./index.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Home</strong></a></h3>
            <h3><a href="./pages/about.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>About</strong></a></h3>
			<h3><a href="./pages/projects.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Projects</strong></a></h3>
            <h3><a href="#" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Contact</strong></a></h3>
            <p class="copyright">&copy;2020 WHY?</p>
		</div>

		<div id="disclaimer" class="tabcontent">
			<h2>Disclaimer</h2>
			<p><strong>THIS IS JUST A JOKE!
                <br>
                <br>
                I dont truely think this of python, I think python is a great language and would love to learn,<br>
                all of the acusations above are comepletely false and should not be followed.<br>
                Please respect what i am doing and dont hate on the joke.</strong>
			</p>
		</div>
            
 <!-- CSS -->
 		<style>
              .-link {
    color: rgb(0, 0, 0);
    text-decoration: none;
}
  
.-link-title {
    color: #000000;
    text-decoration: none;
    padding-left: 5rem;
}

.tablinl {
    padding: 5px
}

.tab-font {
    font-weight: bold;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
		</style>

<div class="container-fluid" style="background: #1f52a3;">
	<div class="row">
		<div class="col-2"></div>
		<div class="col-8">
			<a href="/205CDE/Assignment/home.php"><h1 style="text-align: center; color: #e6e8eb; margin: 20px 0;">U Chen Daily</h1></a>
		</div>
		<div class="col-2 d-flex justify-content-center align-items-center"><a href="/205CDE/Assignment/manageNews.php" target="_blank" class="btn btn-outline-light">LOGIN</a></div>
	</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="/205CDE/Assignment/home.php"><i class="fas fa-home" style="font-size: 30px; color: #1f52a3;"></i></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item dropdown" style="margin: 0 15px;">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<?php
						$newsCategoryArr = array(
						'All', 'Nation', 'World',
						'Sport', 'Entertainment',
						);
						foreach($newsCategoryArr as $newsType){
							echo "<a class=\"dropdown-item\" href=\"/205CDE/Assignment/news$newsType.php\" target=\"_blank\">$newsType</a>";
						}
					?>
				</div>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/aboutUs.php" target="_blank">About Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/contactUs.php" target="_blank">Contact Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/faqs.php" target="_blank">FAQs</a>
			</li>
			<!-- <li class="nav-item"> -->
			<!-- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> -->
			<!-- </li> -->
		</ul>
		<!-- <form class="form-inline my-2 my-lg-0"> -->
		<!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> -->
		<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
		<!-- </form> -->
	</div>
</nav>

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	
    <!-- U Chen CSS -->
	<link rel="stylesheet" href="homeStyle.css">
	
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
	
	<!-- Font Awesome Icons -->
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Admin</title>
		<script>
			
		</script>
	</head>
	<body>
		<!--using external files-->
		<?php require('header.html'); ?>
		<div class="container" style="margin: 20px;">
			<div class="row">
				<div class="col-sm"><h3 style="color: #1f52a3;">Manage News</h3></div>
			</div>
		</div>
		<div class="container-fluid bg-light" style="padding: 30px 10px;">
			<div class="row bg-light" style="margin: 0 35px;">
				<div class="col-6">
					<h5>All News</h5>
				</div>
				<div class="col-6 d-flex justify-content-end">
					<button type="button" class="btn btn-primary" style="background: #1f52a3;" data-toggle="modal" data-target="#addNewsModal"><i class="fas fa-plus" style="font-size: 20px;"></i> Add News</button>
				</div>
			</div>
			
			<!--add news modal START-->
			<!-- Modal -->
			<div class="modal fade bd-example-modal-lg" id="addNewsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Add News</h5>
							<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>-->
						</div>
						<form action="/205CDE/Assignment/admin.php" method="post">
							<div class="modal-body">
								<div class="form-group">
									<label for="inputNewsTitle">News Title:</label>
									<input type="text" class="form-control" name="txtNewsTitle" id="inputNewsTitle" aria-describedby="emailHelp" placeholder="Enter news title">
								</div>
								<div class="form-group">
									<label for="selectNewsCategory">News Category:</label>
									<select class="form-control" name="selectNewsCategory" id="selectNewsCategory">
										<?php
											$newsCategoryArr = array(
											'--Select news category--' => "",
											'Nation' => 1,	'World' => 2,
											'Sport' => 3,	'Lifestyle' => 4,
											'Food' => 5,	'Tech' => 6,
											'Education' => 7
											);
											foreach($newsCategoryArr as $newsType => $newsNum){
												echo "<option value=\"$newsType\">$newsType</option>";
											}
										?>
									</select>
								</div>
								<div class="form-group">
									<label for="inputNewsDetails" class="col-form-label">News Details:</label>
									<textarea class="form-control" name="txtNewsDetails" id="inputNewsDetails" rows="10"></textarea>
								</div>
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
								<button type="submit" class="btn btn-primary" name="btnAddNews" style="background: #1f52a3;">Add</button>
								<input type="hidden" name="submitted" value="true"/>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!--add news modal END-->
			<!--connect & insert news into database START-->
			<?php			
				if (isset($_POST['submitted'])){
					//connect database
					$dbc = mysqli_connect('localhost', 'root', '');
					//select database
					mysqli_select_db($dbc, 'news');
					
					$problem = FALSE;
					
					if(!empty($_POST['txtNewsTitle']) && !empty($_POST['selectNewsCategory']) && !empty($_POST['txtNewsDetails'])){
						$newsTitle = trim($_POST['txtNewsTitle']);
						$newsDetails = trim($_POST['txtNewsDetails']);
						$newsCategory = trim($_POST['selectNewsCategory']);
						}else{
						echo '<p>Error! Please enter title and details select category!</p>';
						$problem = TRUE;
					}
					
					if(!$problem){
						$query = "INSERT INTO news (news_title, news_details, news_category, news_datetime) 
						VALUES ('$newsTitle', '$newsDetails', '$newsCategory', NOW())";
						if(mysqli_query($dbc, $query)){
							echo '<p>Added successfully!</p>';
							}else{
							echo '<p>Error! '.mysqli_error($dbc).'</p>';
							echo '<p>Query: '.$query.'</p>';
						}
					}
					mysqli_close($dbc);
				}
			?>
			<!--connect & insert news into database END-->
			<!--news table START-->
			<div class="card-deck" style="margin: 15px 50px;">
				<table class="table table-hover bg-light">
					<thead class="thead-light">
						<tr>
							<th scope="col">News ID</th>
							<th scope="col">News Datetime</th>
							<th scope="col">News Title</th>
							<th scope="col">News Details</th>
							<th scope="col">News Category</th>
							<th scope="col">Edit/Delete</th>
						</tr>
					</thead>
					<tbody>
						<!--select news from database START-->
						<?php
							$dbc = mysqli_connect('localhost', 'root', '');
							mysqli_select_db($dbc, 'news');
							
							$query = 'SELECT * FROM news ORDER BY news_id ASC';
							
							if($r = mysqli_query($dbc, $query)){
								while($row = mysqli_fetch_array($r)){
									echo "<tr>
									<th scope=\"row\">{$row['news_id']}</th>
									<td>{$row['news_datetime']}</td>
									<td>{$row['news_title']}</td>
									<td>{$row['news_details']}</td>
									<td>{$row['news_category']}</td>
									<td>
									<button type=\"button\" class=\"btn btn-info\"><i class=\"fas fa-edit\" style=\"font-size: 20px;\"></i></button>
									<button type=\"button\" class=\"btn btn-danger\"><i class=\"fas fa-trash\" style=\"font-size: 20px;\"></i></button>
									</td>
									</tr>";
								}
								}else{
								echo '<p>Error! '.mysqli_error($dbc).'</p>';
							}
							
							mysqli_close($dbc);
						?>
						<!--select news from database END-->
					</tbody>
				</table>
			</div>
			<!--news table END-->
		</div>
	</body>
</html>

border-radius: ArI ArD AbD AbI;

<button type="button" class="btn btn-primary">Blue</button>
<button type="button" class="btn btn-secondary">Grey</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-warning">Yellow</button>
<button type="button" class="btn btn-info">Ligth blue</button>
<button type="button" class="btn btn-light">White</button>
<button type="button" class="btn btn-dark">Black</button>

<button type="button" class="btn btn-link">White with blue text</button>

$sgbd=new mysqli("localhost", $user, $pass, "productos");
if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
    echo "Connection successful";
}

  <input type="text">

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

list.insertAdjacentHTML('beforebegin', myDiv);

myDiv.appendChild(image);

image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

onsubmit="return false;"

<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Home</title>
	</head>
	<style>
		@media only screen and (min-width: 893px) {
		.card-img-top{
		width: 100%;
		height: 15vw; 
		object-fit: cover;
		}
		}
		
		.card-body{
		background: #1f52a3;
		}
		
		.card-footer{
		background: #1f52a3;
		}
		
		.h5{
		color: #1f52a3;
		}
		
		.card-text{
		font-size: 12px;
		}
	</style>
	<body class="bg-light">
		<!--using external files-->
		<?php require('header.php'); ?>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--4 latest news START-->
		<div class="container-fluid bg-light" style="padding: 40px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-6">
					<h5 style="color: #1f52a3;">Latest News</h5>
				</div>
				
				<div class="col-6 d-flex justify-content-end">
					<a href="" class="btn btn-link font-weight-bold" style="color: #1f52a3;">MORE NEWS <i class="fas fa-angle-double-right" style="font-size: 18px;"></i></a>
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 latest news END-->
		<!--4 nation news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Nation News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Nation" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php	
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 nation news END-->
		<!--4 world news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">World News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="World" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 world news END-->
		<!--4 entertainment news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0; margin-bottom: 40px;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Entertainment News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Entertainment" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 entertainment news END-->
		<!--using external files-->
		<?php require('footer.html'); ?>
	</body>
</html>				

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

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

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

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

<html></html>

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

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

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

<div class="login-wrap">

  <div class="login-html">

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

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

    <div class="login-form">

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

        <div class="group">

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

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

        </div>

        <div class="group">

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

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

        </div>

        <div class="group">

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

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

        </div>

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

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

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

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

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

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

<h1>fa fa-heart</h1>

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

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

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

</body>
</html> 

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


// settings.py

STATIC_URL = '/static/'

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

// views.py

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

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

    

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

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

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

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

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

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

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://placeholder.us8.list-manage.com/subscribe/post?u=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>

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

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

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

<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>

<!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>

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>