up

public/assets/css/style.css

@@ -19,8 +19,8 @@ p {
 }
 
 .content{
-  padding-left: 25%;
-  padding-right: 25%;
+  padding-left: 10%;
+  padding-right: 10%;
 }
 
 .content ul {

public/home/index.html

@@ -6,7 +6,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 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">
 </head>
@@ -32,11 +33,11 @@
 		<video controls width="100%">
 
 			<source src="Media1.mp4" type="video/mp4">
-		
+
 			Sorry, your browser doesn't support embedded videos.
 		</video>
 
-		
+
 		<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.
@@ -54,24 +55,87 @@
 
 		<h1>Our Idea</h1>
 		<h4>The Smart Participation Game in Four Easy Steps</h4>
+		<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+			<div class="feature col">
+				<div class="feature-icon bg-primary bg-gradient">
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#collection"></use>
+					</svg>
+				</div>
+				<h2>PLAN</h2>
+				<p>Public/private sector, Real Estate</p>
+				<a href="#" class="icon-link">
+					Call to action
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#chevron-right"></use>
+					</svg>
+				</a>
+			</div>
+			<div class="feature col">
+				<div class="feature-icon bg-primary bg-gradient">
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#people-circle"></use>
+					</svg>
+				</div>
+				<h2>BUILD</h2>
+				<p>Game Developer</p>
+				<a href="#" class="icon-link">
+					Call to action
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#chevron-right"></use>
+					</svg>
+				</a>
+			</div>
+			<div class="feature col">
+				<div class="feature-icon bg-primary bg-gradient">
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#toggles2"></use>
+					</svg>
+				</div>
+				<h2>PLAY</h2>
+				<p>Any Citizens – Young adults</p>
+				<a href="#" class="icon-link">
+					Call to action
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#chevron-right"></use>
+					</svg>
+				</a>
+			</div>
+			<div class="feature col">
+				<div class="feature-icon bg-primary bg-gradient">
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#toggles2"></use>
+					</svg>
+				</div>
+				<h2>REWARD</h2>
+				<p>Decision makers gives awards to the best planning (can be real award or ingame awards)</p>
+				<a href="#" class="icon-link">
+					Call to action
+					<svg class="bi" width="1em" height="1em">
+						<use xlink:href="#chevron-right"></use>
+					</svg>
+				</a>
+			</div>
+		</div>
 		<p>
 			<ol type="I">
 				<li>
-				 <b>PLAN</b> (Public/private sector, Real Estate)
+					<b>PLAN</b> (Public/private sector, Real Estate)
 				</li>
 				<li>
-				 <b>BUILD</b> (Game Developer)
+					<b>BUILD</b> (Game Developer)
 				</li>
 				<li>
-				 <b>PLAY</b> (Any Citizens – Young adults)
+					<b>PLAY</b> (Any Citizens – Young adults)
 				</li>
 				<li>
-				 <b>REWARD</b> (Decision makers gives awards to the best planning (can be real award or ingame awards))
+					<b>REWARD</b> (Decision makers gives awards to the best planning (can be real award or ingame
+					awards))
 				</li>
 			</ol>
 		</p>
-			
-		
+
+
 
 
 		<h1>List of external links</h1>
@@ -87,11 +151,13 @@
 
 	</div>
 
-	<div class="footer">
+	<div class="footer content">
 		<h1>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="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>