diff --git a/banner.jpg b/banner.jpg
new file mode 100644
index 0000000..cdc4816
Binary files /dev/null and b/banner.jpg differ
diff --git a/index.html b/index.html
index dab2441..0e9cbbb 100644
--- a/index.html
+++ b/index.html
@@ -1,58 +1,233 @@
+<!DOCTYPE html>
+<html lang="de">
 
-<html>
 <head>
+<meta charset="UTF-8">
 <title>TLC WebView CDS</title>
+<meta name="language" content="de">
+<meta name="author" content="CopterSicht">
+<meta name="date" content="2017-11-13T016:43:53+01:00">
+<meta name="keywords" content="Luftaufnahmen, Luftbild, Filmproduktion">
+<meta name="description" content="CopterSicht Website">
+<meta name="robots" content="index,follow">
+<meta name="audience" content="alle">
+<meta name="page-topic" content="Dienstleistungen">
+<meta name="revisit-after" CONTENT="7 days">
+<meta name="expires" content="0">
+<meta name="viewport"
+	content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta http-equiv="refresh" content="20" >
+
+<!-- Bootstrap core CSS -->
+<link href="bootstrap.min.css" rel="stylesheet">
+
+<!-- Custom styles for this template -->
+<link href="half-slider.css" rel="stylesheet">
+
+<link rel="stylesheet" type="text/css" href="design.css">
 
 </head>
-<body text="#000000" bgcolor="#d3d3d3" link="#FF0000" alink="#FF0000" vlink="#FF0000">
- <link rel="stylesheet" type="text/css" href="design.css">
-<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
-<meta http-equiv="refresh" content="20" >
- <div id="h1">
-&nbsp TLC WebView CDS
-
-</div>
-   <div id="tabelle">
-        <table width="100%" cellpadding="0" cellspacing="0">
-         <tr>
-          <td><div id="h3"><a href="data/TLC01.jpg"><img src="data/TLC01.jpg" alt="TLC01" width="328" height="246" /></a>  </div></td>
-          <td><div id="h3"><a href="data/TLC02.jpg"><img src="data/TLC02.jpg" alt="TLC02" width="328" height="246" /></a> </div></td>
-          <td><div id="h3"><a href=""><img src="data/TLC03.gif" alt="TLC03" width="328" height="246" /></a>  </div></td>
-          <td><div id="h3"><a href="data/TLC04.jpg"><img src="data/TLC04.jpg" alt="TLC04" width="328" height="246" /></a>  </div></td>
-         </tr>
-         <tr>
-          <td><div id="h3"> TLC01 - Salmenkopf, Freistett <p> </p> <button data-clipboard-text="https://services.schuttercloud.com/data/TLC01.jpg">Copy direct link to clipboard</button> </div></td>
-          <td><div id="h3"> TLC02 - Salmenkopf, Freistett <p> </p> <button data-clipboard-text="https://services.schuttercloud.com/data/TLC02.jpg">Copy direct link to clipboard</button> </div></td>
-          <td><div id="h3"> TLC03 - not used yet <p> </p> <button data-clipboard-text="https://services.schuttercloud.com">Copy direct link to clipboard</button>  </div></td>
-          <td><div id="h3"> TLC04 - Demo <p> </p> <button data-clipboard-text="https://services.schuttercloud.com/data/TLC04.jpg">Copy direct link to clipboard</button> </div></td>
-         </tr>
-         <tr>
-          <td><div id="h3"><a href=""><img src="data/TLC05.gif" alt="TLC05" width="328" height="246" /></a>  </div></td>
-          <td><div id="h3"><a href=""><img src="data/TLC06.gif" alt="TLC06" width="328" height="246" /></a>  </div></td>
-          <td><div id="h3"><a href=""><img src="data/TLC07.gif" alt="TLC07" width="328" height="246" /></a>  </div></td>
-          <td><div id="h3"><a href=""><img src="data/TLC08.gif" alt="TLC08" width="328" height="246" /></a>  </div></td>
-         </tr>
-         <tr>
-          <td><div id="h3"> TLC05 - not used yet <p> </p> <button data-clipboard-text="https://services.schuttercloud.com">Copy direct link to clipboard</button> </div></td>
-          <td><div id="h3"> TLC06 - not used yet <p> </p> <button data-clipboard-text="https://services.schuttercloud.com">Copy direct link to clipboard</button> </div></td>
-          <td><div id="h3"> TLC07 - not used yet <p> </p> <button data-clipboard-text="https://services.schuttercloud.com">Copy direct link to clipboard</button> </div></td>
-          <td><div id="h3"> TLC08 - not used yet <p> </p> <button data-clipboard-text="https://services.schuttercloud.com">Copy direct link to clipboard</button> </div></td>
-         </tr>
-        </table>
-   </div>
-   
-
-<div id="h2">
-<a href="https://services.schuttercloud.com/slider.html">Slider</a>
-<br><br>
-Version 0.3 <br> <br>
-<a href="https://coptersicht.de/index.php/impressum/">Impressum</a>
-</p>
-</div>
-
-
-
-    <script src="clipboard.min.js"></script>
+
+<body>
+  
+<!-- Navigation -->
+	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+		<div class="container">
+			<a class="navbar-brand" href="https://coptersicht.de/">CopterSicht</a>
+			<button class="navbar-toggler" type="button" data-toggle="collapse"
+				data-target="#navbarResponsive" aria-controls="navbarResponsive"
+				aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+			<div class="collapse navbar-collapse" id="navbarResponsive">
+				<ul class="navbar-nav ml-auto">
+					<li class="nav-item active"><a class="nav-link" href="https://coptersicht.de/">Home
+							<span class="sr-only">(current)</span>
+					</a></li>
+					<li class="nav-item"><a class="nav-link"
+						href="https://coptersicht.de/index.php/kontakt/">Kontakt</a></li>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</nav>
+
+	<header>
+		<div id="carouseIndicators" class="carousel slide"
+			data-ride="carousel">
+			<div class="carousel-inner" role="listbox">
+				<!-- Slide One - Set the background image for this slide in the line below -->
+				<div class="carousel-item active"
+					style="background-image: url('banner.jpg')">
+					<div class="carousel-caption d-none d-md-block"></div>
+				</div>
+				<!-- Slide Two - Set the background image for this slide in the line below -->
+				<div class="carousel-item"
+					style="background-image: url('img/2img.jpg')">
+					<div class="carousel-caption d-none d-md-block"></div>
+				</div>
+				<!-- Slide Three - Set the background image for this slide in the line below -->
+				<div class="carousel-item"
+					style="background-image: url('img/3img.jpg')">
+					<div class="carousel-caption d-none d-md-block"></div>
+				</div>
+				<!-- Slide Three - Set the background image for this slide in the line below -->
+				<div class="carousel-item"
+					style="background-image: url('img/4img.jpg')">
+					<div class="carousel-caption d-none d-md-block"></div>
+				</div>
+				<!-- Slide Three - Set the background image for this slide in the line below -->
+				<div class="carousel-item"
+					style="background-image: url('img/5img.jpg')">
+					<div class="carousel-caption d-none d-md-block"></div>
+				</div>
+				<!-- Slide Three - Set the background image for this slide in the line below -->
+				<div class="carousel-item"
+					style="background-image: url('img/6img.jpg')">
+					<div class="carousel-caption d-none d-md-block"></div>
+				</div>
+			</div>
+			<!-- Slide Three - Set the background image for this slide in the line below -->
+			<div class="carousel-item"
+				style="background-image: url('img/7img.jpg')">
+				<div class="carousel-caption d-none d-md-block"></div>
+			</div>
+			<!-- Slide Three - Set the background image for this slide in the line below -->
+			<div class="carousel-item"
+				style="background-image: url('img/8img.jpg')">
+				<div class="carousel-caption d-none d-md-block"></div>
+			</div>
+			<!-- Slide Three - Set the background image for this slide in the line below -->
+			<div class="carousel-item"
+				style="background-image: url('img/9img.jpg')">
+				<div class="carousel-caption d-none d-md-block"></div>
+			</div>
+			<!--
+			
+			<a class="carousel-control-prev" href="#carouselExampleIndicators"
+				role="button" data-slide="prev"> <span
+				class="carousel-control-prev-icon" aria-hidden="true"></span> <span
+				class="sr-only">Previous</span>
+			</a> <a class="carousel-control-next" href="#carouselExampleIndicators"
+				role="button" data-slide="next"> <span
+				class="carousel-control-next-icon" aria-hidden="true"></span> <span
+				class="sr-only">Next</span>
+			</a>
+			-->
+		</div>
+	</header>
+
+	<div class="container-fluid">
+
+ <div class="row">
+ 
+        <div class="col-sm">
+            <a href="./data/TLC01.jpg"">
+                <img width="100%" src="./data/TLC01_resized.jpg" alt="TLC01"/>
+            </a>
+            <div class="location">TLC01 - Salmenkopf, Freistett</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" data-clipboard-text="https://services.schuttercloud.com/data/TLC01.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+        
+        <div class="col-sm">
+            <a href="./data/TLC02.jpg"">
+                <img width="100%" src="./data/TLC02_resized.jpg" alt="TLC02"/>
+            </a>
+            <div class="location">TLC02 - Salmenkopf, Freistett</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" data-clipboard-text="https://services.schuttercloud.com/data/TLC02.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+        
+        <div class="col-sm">
+            <a href="./data/TLC03.jpg"">
+                <img width="100%" src="./data/TLC03_resized.jpg" alt="TLC03"/>
+            </a>
+            <div class="location">TLC03 - not used yet</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" disabled data-clipboard-text="https://services.schuttercloud.com/data/TLC03.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+        
+        <div class="col-sm">
+            <a href="./data/TLC04.jpg"">
+                <img width="100%" src="./data/TLC04_resized.jpg" alt="TLC04"/>
+            </a>
+            <div class="location">TLC04 - Demo</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" disabled data-clipboard-text="https://services.schuttercloud.com/data/TLC04.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+    </div> <!-- end of row -->
+    
+    <!-- second row:
+    
+           <div class="col-sm">
+            <a href="./data/TLC05.jpg"">
+                <img width="100%" src="./data/TLC05_resized.jpg" alt="TLC05"/>
+            </a>
+            <div class="location">TLC05 - Salmenkopf, Freistett</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" data-clipboard-text="https://services.schuttercloud.com/data/TLC05.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+        
+        <div class="col-sm">
+            <a href="./data/TLC02.jpg"">
+                <img width="100%" src="./data/TLC02_resized.jpg" alt="TLC02"/>
+            </a>
+            <div class="location">TLC02 - Salmenkopf, Freistett</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" data-clipboard-text="https://services.schuttercloud.com/data/TLC02.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+        
+        <div class="col-sm">
+            <a href="./data/TLC03.jpg"">
+                <img width="100%" src="./data/TLC03_resized.jpg" alt="TLC03"/>
+            </a>
+            <div class="location">TLC03 - not used yet</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" disabled data-clipboard-text="https://services.schuttercloud.com/data/TLC03.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+        
+        <div class="col-sm">
+            <a href="./data/TLC04.jpg"">
+                <img width="100%" src="./data/TLC04_resized.jpg" alt="TLC04"/>
+            </a>
+            <div class="location">TLC04 - Demo</div>
+            <div class="text-center">
+                <button type="button" id="buttonID" class="btn btn-dark" disabled data-clipboard-text="https://services.schuttercloud.com/data/TLC04.jpg">Copy direct link to clipboard</button>
+            </div>
+        </div>
+        
+      
+      
+       uncommend here-->
+       
+    </div>
+    
+</div>	
+
+
+<script type="text/javascript">/* jshint browser: true */</script>
+<script src="browser.flow.js"></script>
+
+
+<script type="text/javascript">
+</script>
+
+ <script src="clipboard.min.js"></script>
     <script>
     var btns = document.querySelectorAll('button');
     var clipboard = new Clipboard(btns);
@@ -65,5 +240,18 @@ Version 0.3 <br> <br>
     </script>
 
 
-</body>
+  	<!-- Footer -->
+	<footer class="py-5 bg-dark">
+		<div class="container">
+			<p class="m-0 text-center text-white">Copyright &copy; CopterSicht 2018</p>
+			<button type="button" class="btn btn-link"
+				onclick="window.location.href='https://coptersicht.de/index.php/agb/'">AGB</button>
+			<button type="button" class="btn btn-link"
+				onclick="window.location.href='https://coptersicht.de/index.php/impressum/'">Impressum</button>
+            <button type="button" class="btn btn-link"
+				onclick="window.location.href='https://coptersicht.de/index.php/datenschutzerklaerung/'">Datenschutzerklärung</button>
+		</div>
+		<!-- /.container -->
+	</footer>
+  </body>
 </html>
diff --git a/robots.txt b/robots.txt
index d754a8a..87339e0 100644
--- a/robots.txt
+++ b/robots.txt
@@ -1,2 +1,2 @@
 User-Agent: *
-Disallow: 
\ No newline at end of file
+Disallow: /data/


TLC01 - Salmenkopf, Freistett	TLC02 - Salmenkopf, Freistett	TLC03 - not used yet	TLC04 - Demo

TLC05 - not used yet	TLC06 - not used yet	TLC07 - not used yet	TLC08 - not used yet