Update 2.0

css/main.css

@@ -731,8 +731,7 @@ html.loaded .home-content__main {
 }
 
 .column {
-  z
-    width: 50%;
+  zwidth: 50%;
 }
 
 .grey {

index.html

@@ -51,6 +51,7 @@
 
     <link rel="stylesheet" href="css/base.css">
     <link rel="stylesheet" href="css/main.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
 <!--    <link rel="shortcut icon" href="logo.jpg" type="image/x-icon">-->
 <!--    <link rel="icon" href="logo.jpg" type="image/x-icon">-->
@@ -181,11 +182,11 @@
     </ul>
 </div>
 <div  style="text-align: center;background: linear-gradient(168deg, black 50%, #111111 0);">
-    <span style="font-size: 4em;font-weight: bold">Our Sponsors</span>
+    <span style="font-size: 4em;font-weight: bold">Our Community Partners</span>
 <ul style="display: flex ;list-style: none;flex-wrap: wrap ;justify-content: center">
-    <li style="min-width: 350px "><a href="#"><img src="./images/JavaScript%20frameworks-pana.svg" style="max-width: 40% "></a> <h3 style="color: white">Coding Blocks</h3></li>
-    <li style="min-width: 350px "><a href="#"> <img src="./images/JavaScript%20frameworks-pana.svg" style="max-width: 40%"></a><h3 style="color: white">DevScripts</h3></li>
-    <li style="min-width: 350px "><a href="#"> <img src="./images/JavaScript%20frameworks-pana.svg" style="max-width: 40% "></a><h3 style="color: white">Tesseract</h3></li>
+    <li style="min-width: 350px "><a href="#"><img src="./images/codingBlocks.png" style="max-width: 40%; max-height: 400px; "></a> <h3 style="color: white">Coding Blocks</h3></li>
+    <li style="min-width: 350px "><a href="#"> <img src="./images/devScript.png" style="max-width: 40%;max-height: 400px;"></a><h3 style="color: white">DevScripts</h3></li>
+    <li style="min-width: 350px "><a href="#"> <img src="./images/tesseract-logo-white.png" style="max-width: 40%;max-height: 400px; "></a><h3 style="color: white">Tesseract Coding</h3></li>
 
 </ul>
 </div>
@@ -207,13 +208,12 @@ <h2>About us</h2>
 
 
 </div>
-<div id="contact" style="justify-content: center ;background-color: white;text-align: center">
-    <h1>Contact us</h1>
-
-    <p style="max-width: 50%;margin-left: 25%">
-
-       Email:<a href="mailto:[email protected]" style="color: #1d24fe">[email protected]</a></a>
-    </p>
+<div class="row" data-aos="fade-up">
+    <div class="col-full contact-main">
+        <p>
+            <a href="mailto:[email protected]" class="contact-email"  title="Email" target="_blank" rel="noopener">[email protected]</a>
+        </p>
+    </div>
 </div>
 <div style="background-color: black">
 

js/main.js

@@ -140,3 +140,57 @@
     })();
 })(jQuery);
 
+var paperMenu = {
+	$window: $('#paper-window'),
+	$paperFront: $('#paper-front'),
+	$hamburger: $('.hamburger'),
+	offset: 1800,
+	pageHeight: $('#paper-front').outerHeight(),
+
+	open: function() {
+		this.$window.addClass('tilt');
+		this.$hamburger.off('click');
+		$('#container, .hamburger').on('click', this.close.bind(this));
+		this.hamburgerFix(true);
+		console.log('opening...');
+	},
+	close: function() {
+		this.$window.removeClass('tilt'); 
+		$('#container, .hamburger').off('click');
+		this.$hamburger.on('click', this.open.bind(this));
+		this.hamburgerFix(false);
+		console.log('closing...');
+	},
+	updateTransformOrigin: function() {
+		scrollTop = this.$window.scrollTop();
+		equation = (scrollTop + this.offset) / this.pageHeight * 100;
+		this.$paperFront.css('transform-origin', 'center ' + equation + '%');
+	},
+	//hamburger icon fix to keep its position
+	hamburgerFix: function(opening) {
+			if(opening) {
+				$('.hamburger').css({
+					position: 'absolute',
+					top: this.$window.scrollTop() + 30 + 'px'
+				});
+			} else {
+				setTimeout(function() {
+					$('.hamburger').css({
+						position: 'fixed',
+						top: '30px'
+					});
+				}, 300);
+			}
+		},
+	bindEvents: function() {
+		this.$hamburger.on('click', this.open.bind(this));
+		$('.close').on('click', this.close.bind(this));
+		this.$window.on('scroll', this.updateTransformOrigin.bind(this));
+	},
+	init: function() {
+		this.bindEvents();
+		this.updateTransformOrigin();
+	},
+};
+
+paperMenu.init();