index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="generator" content="GitLab Pages">
	<title>Buildicipate</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
	<link rel="stylesheet" href="../assets/css/style.css">
	<link rel="stylesheet" href="../assets/css/mobile.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>

<body>
	<header id="header">
		<div class="row">
			<div class="logo" id="logo"></div>
			<div class="hamburger">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
			<nav></nav>
		</div>
		<div id="projectlogo"></div>
		<div id="projectname"></div>
	</header>
	<div class="content">

		<h1>Why Buildicipate?</h1>

		
		<div class="row">
			<div class="col-md">
				<li>
					A real world digital 3D platform (Digital Twin) of Stuttgart for citizens and government to build, play,
					explore and engage in city development process.
				</li>
				<li>
					Complimanting traditional citizen particiaption in city development process using visually rich digital city
					environment and interaction.
				</li>
				<li>Enhancing the digital participation platform with game elements to bring out more creativity and sense of
					there importance in the city development process.
				</li>
			</div>
			<div class="col-md">
				<img src="bp1.jpg">

			</div>
		</div>
		<h1>Our Idea</h1>
		<h4>The Smart Participation Game in Four Easy Steps</h4>
		<div class="container px-4 py-5" id="icon-grid">

			<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
				<div class="col d-flex align-items-start">
					<svg xmlns="http://www.w3.org/2000/svg" width="1.75em" height="1.75em" fill="currentColor" class="bi bi-calendar-minus text-muted flex-shrink-0 me-3" viewBox="0 0 16 16">
						<path d="M5.5 9.5A.5.5 0 0 1 6 9h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z"/>
						<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
					  </svg>
					<div>
						<h4 class="fw-bold mb-0">PLAN</h4>
						<p>Public/private sector, Real Estate</p>
					</div>
				</div>
				<div class="col d-flex align-items-start">
					<svg xmlns="http://www.w3.org/2000/svg" width="1.75em" height="1.75em" fill="currentColor" class="bi bi-hammer text-muted flex-shrink-0 me-3" viewBox="0 0 16 16">
						<path d="M9.972 2.508a.5.5 0 0 0-.16-.556l-.178-.129a5.009 5.009 0 0 0-2.076-.783C6.215.862 4.504 1.229 2.84 3.133H1.786a.5.5 0 0 0-.354.147L.146 4.567a.5.5 0 0 0 0 .706l2.571 2.579a.5.5 0 0 0 .708 0l1.286-1.29a.5.5 0 0 0 .146-.353V5.57l8.387 8.873A.5.5 0 0 0 14 14.5l1.5-1.5a.5.5 0 0 0 .017-.689l-9.129-8.63c.747-.456 1.772-.839 3.112-.839a.5.5 0 0 0 .472-.334z"/>
					  </svg>
					<div>
						<h4 class="fw-bold mb-0">BUILD</h4>
						<p>Developer Teams configue the application</p>
					</div>
				</div>
				<div class="col d-flex align-items-start">
					<svg xmlns="http://www.w3.org/2000/svg" width="1.75em" height="1.75em" fill="currentColor" class="bi bi-caret-right-square text-muted flex-shrink-0 me-3" viewBox="0 0 16 16">
						<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
						<path d="M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z"/>
					  </svg>
					<div>
						<h4 class="fw-bold mb-0">PLAY</h4>
						<p>Any Citizens – Young adults</p>
					</div>
				</div>
				<div class="col d-flex align-items-start">
					<svg xmlns="http://www.w3.org/2000/svg" width="1.75em" height="1.75em" fill="currentColor" class="bi bi-star text-muted flex-shrink-0 me-3" viewBox="0 0 16 16">
						<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
					  </svg>
					<div>
						<h4 class="fw-bold mb-0">REWARD</h4>
						<p>Decision makers give awards to the best planning </p>
					</div>
				</div>
			</div>
		</div>
		<!-- <p>
			<ol type="I">
				<li>
					<b>PLAN</b> (Public/private sector, Real Estate)
				</li>
				<li>
					<b>BUILD</b> (Game Developer)
				</li>
				<li>
					<b>PLAY</b> (Any Citizens – Young adults)
				</li>
				<li>
					<b>REWARD</b> (Decision makers give awards to the best planning)
				</li>
			</ol>
		</p> -->


		<h1> Example of HFT Stuttgart in Game Engine</h1>
		<video controls width="100%">

			<source src="Media1.mp4" type="video/mp4">

			Sorry, your browser doesn't support embedded videos.
		</video>

		<h1>List of external links</h1>

		<p>
			<ul>
				<li><a href="https://stadtlabor.podigee.io">HFT Stadtlabor</a></li>
				<li><a
						href="https://stadtlabor.podigee.io/5-05-vergessen-in-der-stadt-wie-die-stadtplanung-menschen-mit-demenz-helfen-kann">Vergessen
						in der Stadt</a></li>
			</ul>
		</p>

	</div>

	<div class="footer content mb-0">
		<h1 class="mt-2">Our Team</h1>
	</div>
	<div class="legal"></div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
	</script>
	<script src="../settings.js"> </script>
	<script src="../main.js"> </script>
</body>

</html>