diff --git a/src/index.js b/src/index.js
index 13e4739cd..f9ad68078 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,43 @@
 import './less/index.less'
 
 // Your code goes here!
+//#1 load
+window.addEventListener('load', (evt) =>{
+    console.log(`Site ${evt.type} ready! `)
+});
+
+//#2 click log how many times a sign me up buttton has be clicked
+document.querySelectorAll('.btn').forEach(item => {
+item.addEventListener('click', evt => {
+    console.log(`Click count ${evt.detail}`)
+})
+})
+    
+//#3 copy
+window.addEventListener('copy', () => {
+    navigator.clipboard.readText()
+    .then(text => {
+        console.log(`User copied text ${text}`)
+    })
+})
+
+//#4 mousemove
+document.body.addEventListener('mousemove', evt => {
+console.log(evt)    
+})
+
+//#5 keydown
+window.addEventListener('keydown', evt => {
+    if (evt.key == 8) {
+        document.body.innerHTML = 'SORRY THIS BUS HAS LEFT'
+    }
+})
+
+
+//#6 dblclick
+document.body.addEventListener('dblclick', evt => {
+    evt.target.classList.toggle('mirror')
+})
+
+
+
diff --git a/src/less/footer.less b/src/less/footer.less
index 1b3ebe1ba..5f38d837c 100644
--- a/src/less/footer.less
+++ b/src/less/footer.less
@@ -2,11 +2,18 @@
   width: 100%;
   border-top: 2px dashed @silver;
   background: @sandy-beach;
+
+
+
+  
   
   p {
     text-align: center;
     color: @font-color;
     font-size: 1.6rem;
     padding: 20px;
+  
+    
+  
   }
 }
\ No newline at end of file
diff --git a/src/less/global.less b/src/less/global.less
index 56883b027..1ae16b166 100644
--- a/src/less/global.less
+++ b/src/less/global.less
@@ -1,5 +1,10 @@
 * {
   box-sizing: border-box;
+
+  &.mirror {
+    transform: rotateY(180deg);
+  }
+
 }
 
 html {
@@ -26,12 +31,16 @@ h2 {
 h4 {
   font-size: 2.5rem;
   padding-bottom: 10px;
+
 }
 
 p {
   line-height: 1.5;
   font-size: 1.6rem;
   padding-bottom: 10px;
+
+
+  
 }
 
 img {
diff --git a/src/less/navigation.less b/src/less/navigation.less
index 7586c29ac..fccb653f8 100644
--- a/src/less/navigation.less
+++ b/src/less/navigation.less
@@ -5,11 +5,14 @@
   border-bottom: 2px dashed @navigation-border;
   position: fixed;
 
+ 
+
   .nav-container {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+   
 
     @media @mobile {
       flex-wrap: wrap;