Make site responsive

helfi92 · Feb 6, 2017 · 97085c4 · 97085c4
1 parent 5755c11
commit 97085c4
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 74 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,19 +1,47 @@
 body{
 	font-size:16px;
 	color: #dfdfdf;
+	background-color: #063647; 
 }
+
+h3{
+	padding-bottom:15px;
+}
+
 section{
 	padding-top: 3rem;
 	padding-bottom: 6rem;
 }
 
-h3{
-	padding-bottom:15px;
+.section-1 {
+	background: #063647;
+}
+
+.section-2 {
+	background-color: #052D3D;
+}
+
+.section-3 {
+	background-color: #0E282E;
+}
+
+.section-4 {
+	background-color: #6589A9;
+	padding: 1.5rem 1.5rem 1.5rem;
+}
+
+a.nav-item {
+	color: #dfdfdf;
+}
+
+a.nav-item:hover {
+	color: #fff;
 }
 
 .avatar{
 	height:200px;
-	border-radius: 50%;	
+	border-radius: 50%;
+	margin-top: 30px;
 }
 
 .intro-description{
@@ -23,7 +51,7 @@ h3{
 .social-container img{
 	max-width:100%;
 	max-height:175px;
-	padding-bottom:15px;
+	margin-bottom:15px;
 }
 
 .project-figure {
@@ -41,20 +69,12 @@ h3{
 	border: 2px solid rgba(7, 59, 79, 0.5);
 }
 
-.section-2 {
-	background: #063647;
-}
-
-.section-3 {
-	background-color: #052D3D;
-}
-
-.section-4 {
-	background-color: #0E282E;
+.section-4 a {
+	color: #fff;
 }
 
-.section-5 {
-	background-color: #6589A9;
+.section-4 a:hover {
+	color: #dfdfdf;
 }
 
 .title {
@@ -74,3 +94,26 @@ h3{
 #contact {
 	position: relative;
 }
+
+.intro {
+	text-align: justify;
+	width: 80%;
+	margin: 0 auto;
+}
+
+.love {
+	color: #fff;
+}
+
+.void-background {
+	background-color: transparent; 
+}
+
+@media screen and (max-width: 768px) {
+	.nav-menu {
+		background-color: #063647;
+	}
+	.nav-toggle:hover {
+		background-color: transparent;
+	}
+}
diff --git a/assets/img/box.png b/assets/img/box.png
diff --git a/assets/img/favicon.png b/assets/img/favicon.png
diff --git a/assets/img/phone.jpeg b/assets/img/phone.jpeg
diff --git a/assets/img/profile.jpg b/assets/img/profile.jpg
diff --git a/assets/img/watch.jpg b/assets/img/watch.jpg
diff --git a/controller.js b/controller.js
@@ -1,9 +1,11 @@
-var navigation_elems = document.querySelectorAll(".nav a");
-
-for(var i = 0 ; i < navigation_elems.length ; i++){
-	navigation_elems[i].addEventListener("click",function(event){
-		document.querySelector(".nav .active").classList.remove("active");
-		this.parentElement.classList.add("active");
-	})
-}		
+window.onload = () => {
+  const navMenu = document.querySelector('.nav-menu');
+  const navItems = document.querySelectorAll('.nav-item');
+  const hamburger = document.querySelector('.nav-toggle');
+
+  const toggle = e => e.classList.toggle('is-active');
+  const toggleNav = ({ target }) => Array.from(navMenu.classList).includes('is-active') ? toggle(navMenu) : null;
 
+  hamburger.addEventListener('click', () => toggle(navMenu, 'is-active'));
+  Array.from(navItems).forEach(e => e.addEventListener('click', toggleNav));
+}
diff --git a/index.html b/index.html
@@ -10,47 +10,41 @@
 	<!-- external libraries-->
 	<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
 
+	<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
 	<meta name="author" content="Hassan Ali">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 	<body>
 		<!-- Navbar -->
-		<nav class="nav container">
+		<nav class="nav container void-background">
 			<!-- This "nav-menu" is hidden on mobile -->
 			<!-- Add the modifier "is-active" to display it on mobile -->
-			<div class="nav-left nav-menu">
-				<span class="nav-item">
-					<a href="#about">About</a>
-				</span>
-				<span class="nav-item">
-					<a href="#projects">Projects</a>
-				</span>
-				<span class="nav-item">
-					<a href="#social">Social</a>
-				</span>
-				<span class="nav-item">
-					<a href="#contact">Contact</a>
-				</span>
-			</div>
-
-			<div class="nav-center">
-				<a class="nav-item">
+
+			<div class="nav-left">
+				<a href="http://medium.com/@hassanwalcott/" class="nav-item">
 					<span class="icon">
 						<i class="fa fa-medium"></i>
 					</span>
 				</a>
-				<a class="nav-item">
+				<a href="http://github.com/helfi92" class="nav-item">
 					<span class="icon">
 						<i class="fa fa-github"></i>
 					</span>
 				</a>
-				<a class="nav-item">
+				<a href="https://twitter.com/helfiwalcott" class="nav-item">
 					<span class="icon">
 						<i class="fa fa-twitter"></i>
 					</span>
 				</a>				
 			</div>
 
+			<div class="nav-right nav-menu">
+				<a class="nav-item" href="#about">About</a>
+				<a class="nav-item" href="#projects">Projects</a>
+				<a class="nav-item" href="#social">Social</a>
+				<a class="nav-item" href="#contact">Contact</a>
+			</div>
+
 			<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
 			<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
 			<span class="nav-toggle">
@@ -61,30 +55,20 @@
 		</nav>
 
 		<!-- About Me -->
-		<section id="about" class="section-2">
+		<section id="about" class="section-1">
 			<div class="container has-text-centered">
 				<!-- Source: https://flic.kr/p/pAZBNK -->
 				<img class="avatar" src="http://hassanali.me/images/my-picture.png">
 			</div>
 			<div class="container"></br>
-				<div class="columns">
-					<div class="column is-6 has-text-centered">
-						<p>
-							tique. Ut eleifend eros nulla id vestibulum suspendisse, ornare id massa laudantium, a urna a, urna commodo velit condimentum, porta egestas semper. Vestibulum viverra velit. Curabitur erat os nulla id vestibulum suspendisse, ornare id massa laudantium, a urna a, urna commodo velit condimentum, porta egestas semper
-						</p>
-					</div>
-
-					<div class="column is-6 has-text-centered">
-						<p>
-							tique. Ut eleifend eros nulla id vestibulum suspendisse, ornare id massa laudantium, a urna a, urna commodo velit condimentum, porta egestas semper. Vestibulum viverra velit. Curabitur erat os nulla id vestibulum suspendisse, ornare id massa laudantium, a urna a, urna commodo velit condimentum, porta egestas semper
-						</p>
-					</div>
-				</div>
+				<p class="intro">
+					tique. Ut eleifend eros nulla id vestibulum suspendisse, ornare id massa laudantium, a urna a, urna commodo velit condimentum, porta egestas semper. Vestibulum viverra velit. Curabitur erat os nulla id vestibulum suspendisse, ornare id massa laudantium, a urna a
+				</p>
 			</div>
 		</section>
 
 		<!-- Projects -->
-		<section  class="section-3">
+		<section  id="projects" class="section-2">
 			<div class="container">
 				<div class="has-text-centered">
 					<h3 class="title is-3">Projects</h3>
@@ -96,7 +80,7 @@ <h3 class="title is-3">Projects</h3>
 							<article>
 								<div>
 									<figure class="image project-figure">
-										<img src="https://static.pexels.com/photos/28094/pexels-photo-28094.jpg" alt="Image">
+										<img src="assets/img/watch.jpg" alt="Image">
 									</figure>
 								</div>
 								<div>			
@@ -113,7 +97,7 @@ <h3 class="title is-3">Projects</h3>
 							<article>
 								<div>
 									<figure class="image project-figure">
-										<img src="https://static.pexels.com/photos/105254/pexels-photo-105254.jpeg" alt="Image">
+										<img src="assets/img/phone.jpeg" alt="Image">
 									</figure>
 								</div>
 								<div>			
@@ -129,38 +113,34 @@ <h3 class="title is-3">Projects</h3>
 		</section>
 
 		<!-- Social -->
-		<section id="social" class="section-4">
+		<section id="social" class="section-3">
 			<div class="container">
 				<div class="has-text-centered">					
 					<h3 class="title is-3">Let's Socialize</h3>
 				</div>
 				<div class="social-container columns">
-					<div class="column is-4 has-text-right">
+					<div class="column is-4 has-text-centered">
 						<a target="_blank" href="https://ca.linkedin.com/in/hassan-ali-6132468a"><img class="" src="assets/img/linkedin.png"></a>
 					</div>
 					<div class="column is-4 has-text-centered">
 						<a target="_blank" href="https://www.instagram.com/helfiwalcott/"><img class=""  src="assets/img/instagram.png"></a>
 					</div>
-					<div class="column is-4 has-text-left">
+					<div class="column is-4 has-text-centered">
 						<a target="_blank" href="https://www.facebook.com/Hassan.Helfi"><img class="" src="assets/img/facebook.png"></a>
 					</div>
 				</div>
 			</div>
 		</section>	
 
 		<!-- Contact -->
-		<section id="contact" class="section-5">
-			<div class="container has-text-centered">
-				<div>
-					<h3 class="title is-3">Contact</h3>
-				</div>
-				<div>
-					Hassan Ali</br><a href="mailto:hassanali.mail.mcgill.com">[email protected]</a>
+		<section id="contact" class="section-4">
+			<div class="container">
+				<div class="content has-text-centered">
+					<p>
+						Made with <strong><i class="fa fa-heart-o love" aria-hidden="true"></i></strong> by <a href="https://helfi92.github.io/about.html">Hassan Ali</a>
+					</p>
 				</div>
 			</div>
-			<div class="thumbs-up is-hidden-mobile">
-				<i class="fa fa-thumbs-o-up fa-6" aria-hidden="true"></i>
-			</div>
 		</section>
 
 		<!-- Scripts  -->