Organization Chart

<!DOCTYPE html>
<html>
<head>
	<title>Organization Chart | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Organization Chart">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="index,follow">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" type="text/css">
</head>
<body class="container">
<div class="row">	
	<div class="col-lg-12 mt-5">
		<div id="chart_div"></div>
	</div>	
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

                                    
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');
  data.addColumn('string', 'ToolTip');

  // For each orgchart box, provide the name, manager, and tooltip to show.
  data.addRows([
    [{v:'SAID', f:'SAID<div style="color:red; font-style:italic">President</div>'},
     '', 'The President'],
    [{v:'ANAS', f:'ANAS<div style="color:red; font-style:italic">Vice President</div>'},
     'SAID', 'VP'],
    ['ADIL', 'SAID', ''],
    ['BADR', 'ANAS', 'BADR Sponge'],
    ['FOUAD', 'BADR', '']
  ]);

  // Create the chart.
  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  // Draw the chart, setting the allowHtml option to true for the tooltips.
  chart.draw(data, {allowHtml:true});
}
Timeline style03

Timeline style03

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Input range slider HTML style02

Input range slider HTML style02

Form login with background image changed style01

Form login with background image changed style01

Form login et créer un compte style01

Form login et créer un compte style01

Css Page grid layout

Css Page grid layout

Convertir une div en image

Convertir une div en image

Carousel Bootstrap4

Carousel Bootstrap4

Calculatrice style01

Calculatrice style01

Bootstrap4 datepicker

Bootstrap4 datepicker

Background overlay

Background overlay

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery