Snippets Collections
<?php

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

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

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

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

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

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

        	return $s;
    	}

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

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

			return $dta;
    	}

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

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

			return $s;
		}

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

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

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

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

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

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

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

<body>

	<?php

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    <!-- WEB CONTENTS GOES HERE -->
    
    

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

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

docker-compose down

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

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

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

docker build . -t django-app

echo "Code Build...."

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

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

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

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

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

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

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

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

COPY html/* /var/www/html/

WORKDIR /var/www/html

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

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

COPY . /app

WORKDIR /app

RUN pip install -r requirements.txt

ENV PORT 5000

EXPOSE 5000

ENTRYPOINT [ "python" ]

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

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

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

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

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

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

        updateCounter();
    });
}

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

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

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

    $events_query = new WP_Query($args);

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

    <div class="events-wrap">

    <?php

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

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

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

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

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

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

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

</div>

<!-- STYLE -->

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

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

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

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

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

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

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

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

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

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

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

    <h1>HTML Forms</h1>

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

        <p>Select your age:</p>

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

        <br><br>

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

        <br><br>

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

        <br><br>

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

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

    </form>

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

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

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

  $result = curl_exec($ch);

  return $result;
}

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

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

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

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

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

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

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

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

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

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


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

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

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

  </body>

  </html>

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

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

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

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

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

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


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


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

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

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

        </body>

        </html>

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

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


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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

c
Copy code
#include <stdlib.h>

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

    let horas = laHora.getHours();

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


    let minutos = laHora.getMinutes();

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


    let segundos = laHora.getSeconds();

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


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

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

    setTimeout(digital, 1000);


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

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




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

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

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

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

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

h1 {
    color: #333333;
}

p {
    color: #666666;
}

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

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

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

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

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

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

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

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

// Correct
const PI = 3.14159265359;

// Incorrect
const PI;
PI = 3.14159265359;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<h2>JavaScript in Body</h2>

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

::placeholder {
    text-align: center;
}

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

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

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



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

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

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

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

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



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

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

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

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

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

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

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

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


    // Impresión del formulario.

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

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

    formulario.appendChild(salton);


    formulario.appendChild(calculo);
    formulario.appendChild(borro);
    document.getElementById("formContent").appendChild(formulario);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Para clase ordenador</title>
    <link rel="stylesheet" href="assets/calculadoraIMC.css">
</head>
<body>   
    <aside id="formularioIMC">
        <button type="button" onclick="formularioIMC()">Generar calulo</button>
        <div id="formContent">            
       </div>
       </aside>
    <script src="assets/calculadoraIMC.js"></script>    
</body>
 
</html>
<!DOCTYPE html>
<html>

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

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

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

		a {
			color: #10a2f7
		}

		* {
			box-sizing: border-box
		}

		body,
		h2 {
			margin: 0
		}

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

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

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

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

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

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

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

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

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

		.bee-image {
			overflow: auto
		}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<html>

​

<head>

    <style>

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

        html {

            height: 0%;

            margin: 0;
10
            padding: 0;

        }

​

        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

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

        }

​

        img {

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

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

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

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

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

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

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

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

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

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

                <table class="meldung">
                    <tr>

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


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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


/ rotate /

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

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

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


/ position /

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

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

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


/ opacity /

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

.opacity:hover {
    opacity: 1;
}

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


/ jiggle /

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

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

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

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

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

<!-- End of WeekEnd Deals -->

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

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

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

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

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

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

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

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

<!-- End of product slider -->

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


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


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

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

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

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

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


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

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

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

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

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

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

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

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


<!-- End of Shop microwaves -->


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

<!-- End of bottom banner -->

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

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

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


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

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

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

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

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

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

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

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

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

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

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

    public void deleteInstructor(int id) {

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

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

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

    public Instructor getInstructor(int id) {

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

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


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

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

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


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

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

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

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

    // getters and setters omitted for brevity
}

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

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

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

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

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

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

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

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

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

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


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

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

addVideoBtn.addEventListener('click', addVideo);

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

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

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

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

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

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

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

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

  return videoItem;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* center sanckbar*/  
<div class="flex justify-around items-center pd-3 gap-1 position-fixed bottom-5 left-40  rounded-s bg-green-8 text-color-grey-0 ">
      <span>Can't send photo.Retry in 5 second</span>
      <button class="bg-none text-color-grey-0 text-s" id="toast_center">
              <i class="fas fa-times-circle"></i>
      </button>
</div>
/* right snackbar*/
<div class="flex justify-around items-center pd-3 position-fixed rounded-s  bottom-5 right-5 bg-green-8 text-color-grey-0 gap-1">
       <span>Can't send photo.Retry in 5 second</span>
       <button class="bg-none text-color-grey-0 text-s" id="right_center">
             <i class="fas fa-times-circle"></i>
       </button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text">
</div>
<div class="input-group-two">
    <input type="text">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>