more colofon

sdhoek · Mar 27, 2018 · 04c35a5 · 04c35a5
1 parent 37034bd
commit 04c35a5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 52 deletions.
diff --git a/src/app/colofon/colofon.component.css b/src/app/colofon/colofon.component.css
@@ -4,35 +4,57 @@
  margin-bottom: 50px;
 }
 
+img.camera{
+ width: 75px;
+ z-index: 401;
+ position: absolute;
+ margin: 15px;
+ left: 0;
+ cursor: pointer;
+}
+
+.logo-title{
+ z-index: 401;
+ position: relative;
+}
+
+.logo-title span{
+ color: #fff;
+ position: absolute;
+ top: 23px;
+ font-size: 25px;
+ left: 78px;
+}
+
+.side-menu{
+ position: absolute;
+ z-index: 401;
+ color: #fff;
+ top: 97px;
+ left: -200px;
+ background: #101010de;
+ padding: 0 15px;
+ transition: left 0.5s;
+}
+
+.active .side-menu{
+ left: 15px;
+ transition: left 0.5s;
+}
+
+.side-menu h3{
+ font-weight: normal;
+ cursor: pointer;
+}
+
+.side-menu h3:hover{
+ color: #ddd;
+}
+
 .intro{ 
  padding-bottom: 30px;
 }
 
-img.camera{
- margin-top: 60px;
- width: 150px;
- max-width: 100%;
- animation: bounce 0.5s infinite alternate;
- -webkit-animation: bounce 0.5s infinite alternate;
- }
-
- @keyframes bounce {
- from {
- transform: translateY(0px);
- }
- to {
- transform: translateY(-3px);
- }
- }
- @-webkit-keyframes bounce {
- from {
- transform: translateY(0px);
- }
- to {
- transform: translateY(-3px);
- }
- }
-
 h1{
  position: relative;
  padding-bottom: 13px;

diff --git a/src/app/colofon/colofon.component.html b/src/app/colofon/colofon.component.html
@@ -1,8 +1,14 @@
 <div class="container">
+
+ <div class="sidebar"> <img routerLink="../" class="camera" src="../assets/[email protected]" title="Onbegluurd.nl" />
+
+ </div>
+
  <div class="intro">
- <img class="camera" src="../assets/[email protected]" />
+ <!-- <img class="camera" src="../assets/[email protected]" /> -->
  <h1>Colofon</h1>
  <h2>Waarom</h2>
+ <p>De locaties van de camera's hebben we uit verschillende bronnen betrokken, die onder een open data licentie beschikbaar zijn:</p>
  <h2>Data</h2>
  <h3>Camera-locaties</h3>
  <p>De locaties van de camera's hebben we uit verschillende bronnen betrokken, die onder een open data licentie beschikbaar zijn:</p>

diff --git a/src/app/colofon/colofon.component.spec.ts b/src/app/colofon/colofon.component.spec.ts
diff --git a/src/app/router/city-picker.component.html b/src/app/router/city-picker.component.html
@@ -31,7 +31,7 @@ <h2>Den Haag</h2>
 
  <div class="colofon">
  <p>Gemaakt door <a href="https://geogap.nl/">Geogap</a>, <a href="http://geoloep.nl">Geoloep</a> en 
- <a href="https://webmapper.net/">Webmapper</a> op basis van open data <span class="link" routerLink="../colofon">Colofon</span></p>
+ <a href="https://webmapper.net/">Webmapper</a> op basis van open data. <span class="link" routerLink="../colofon">Colofon</span></p>
  </div>
 
 </div>