fuill build and mobile etc

ChewyJetpack · Mar 18, 2017 · dbc9d2f · dbc9d2f
1 parent 15870fa
commit dbc9d2f
Show file tree

Hide file tree

Showing 17 changed files with 378 additions and 7 deletions.
diff --git a/_includes/contact-strip.html b/_includes/contact-strip.html
@@ -0,0 +1,10 @@
+<div class="contact-strip">
+    <div class="container">
+      <div class="row">
+          <div class="col-md-12">
+            <h1 class="underline">Get in touch for a free estimate</h1>
+            <a href="/contact" class="btn">Enquire now</a>
+          </div>
+      </div>
+    </div>
+  </div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -21,7 +21,7 @@
       <div class="col-md-4">
         <div class="contact-info">
          +44 (020) 12345678<br>
-         [email protected]
+         <a href="mailto:[email protected]" target="_blank">[email protected]</a>
         </div>
       </div>
     </div>

diff --git a/_includes/head.html b/_includes/head.html
@@ -11,6 +11,11 @@
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
+  <script
+  src="https://code.jquery.com/jquery-3.2.0.min.js"
+  integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
+  crossorigin="anonymous"></script>
+  <script type="text/javascript" src="/assets/js/main.js"></script>
 
   {% if jekyll.environment == 'production' and site.google_analytics %}
   {% include google-analytics.html %}

diff --git a/_includes/header.html b/_includes/header.html
@@ -6,9 +6,10 @@
                 <a href="/" class="logo">
                   <img src="/assets/images/logo.png" alt="Precision Traffic Surveys">
                 </a>
+                <a href="#" class="toggle"><span></span></a>
             </div>
             <div class="col-md-8">
-                <nav>
+                <nav class="main-nav">
                     <ul>
                       {% assign sorted_pages = site.pages | sort:"order" %}
                        {% for node in sorted_pages %}
@@ -30,5 +31,4 @@
             </div>
         </div>
     </div>
-
 </header>
diff --git a/_layouts/contact.html b/_layouts/contact.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {% include head.html %}
+
+  <body>
+
+    {% include header.html %}
+
+
+    <main class="contact-content">
+    	<div class="page-banner banner">
+	    	<div class="container">
+	    		<div class="row">
+	    			<div class="col-md-12">
+	    				<h1>{{ page.title }}</h1>		
+	    			</div>
+	    		</div>
+	    	</div>
+    	</div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">                    
+                    <div class="content-box">
+                        <form action="https://formspree.io/[email protected]"
+                              method="POST">
+                              <div class="container-fluid">
+                                  <div class="row">
+                                      <div class="col-md-3">
+                                          <span>Name:</span>
+                                      </div>
+                                      <div class="col-md-9">
+                                            <input type="text" name="name">
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <div class="col-md-3">
+                                          <span>Email:</span>
+                                      </div>
+                                      <div class="col-md-9">
+                                            <input type="email" name="_replyto">
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <div class="col-md-3">
+                                          <span>Message:</span>
+                                      </div>
+                                      <div class="col-md-9">
+                                            <textarea name="message" id="message" cols="30" rows="10"></textarea>
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <div class="col-md-9 offset-md-3">                                      
+                                            <button type="submit" class="btn">Send</button>
+                                      </div>
+                                  </div>
+                              </div>
+
+                        </form>
+                    </div>
+                </div>
+                <div class="col-md-6">                    
+                    <div class="content-box">
+                        {{ content }}
+                        <div class="contact-link">
+                            +44 (020) 12345678<br>
+                            <a href="mailto:[email protected]" target="_blank">[email protected]</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    {% include footer.html %}
+
+  </body>
+
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -18,7 +18,7 @@ <h2>{{ page.subheading }}</h2>
     <div class="container">
       <div class="row">
           <div class="col-md-4">
-            <img src="http://placehold.it/500x500" alt="">
+            <img src="http://placehold.it/500x500" alt="Precision traffic surveys" class="page-img">
           </div>
           <div class="col-md-8">
             <h1 class="underline">{{ page.content_heading }}</h1>
@@ -28,7 +28,7 @@ <h1 class="underline">{{ page.content_heading }}</h1>
       </div>
     </div>
   </div>
-  
+
   {% include related.html %}
 
 </div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -25,14 +25,16 @@ <h1>{{ page.title }}</h1>
     					{{ content }}
     				</div>
     				<div class="col-md-4">
-    					<img src="{{ page.image }}" alt="{{ page.title }}" />
+    					<img src="{{ page.image }}" alt="{{ page.title }}" class="page-img"/>
     				</div>
     			</div>
     		</div>
     	</div>
     </main>
 
   {% include related.html %}
+
+  {% include contact-strip.html %}
 
     {% include footer.html %}
 

diff --git a/_sass/_partials/_contact.scss b/_sass/_partials/_contact.scss
@@ -0,0 +1,66 @@
+.contact-strip {	
+	padding:50px 0;
+	color:$white;
+	background: url('images/contact-banner.jpg') center center / cover no-repeat; 
+	text-align:center;
+	h1.underline {
+		&:after {
+			left:50%;
+			transform:translateX(-50%);
+		}
+	}
+}
+
+.contact-content {
+	padding-bottom:100px;
+	.page-banner {
+		background:none;
+	}
+	.content-box {
+		background:$white;
+		padding:30px;
+	}
+	background: url('images/contact-bg.jpg') center center / cover no-repeat; 
+}
+
+input, textarea {
+	margin-bottom:15px;
+	line-height:30px;
+	padding:5px 10px;
+	border:solid 1px $grey_med;
+	border-width:1px 1px 1px 10px;
+	transition:border-color 0.2s;
+	font-family: Lato, sans-serif;
+	&:focus {
+		border-color:$electric;
+	}
+}
+
+textarea {
+	width:100%;
+	line-height:1.5;
+}
+
+.contact-link {
+	color:$brand-color;
+	font-size:22px;
+	font-weight:700;
+}
+
+
+
+@media screen and (max-width: 991px) {
+	.contact-link {
+		font-size:16px;
+	}
+}
+
+@media screen and (max-width: 767px) {
+	input {
+		width:100%;
+	}
+	form span {
+		display: block;
+		margin-bottom:10px;
+	}
+}
diff --git a/_sass/_partials/_footer.scss b/_sass/_partials/_footer.scss
@@ -9,4 +9,16 @@ footer {
 			text-transform: uppercase;
 		}
 	}
+}
+
+@media screen and (max-width: 767px) {
+	footer {
+		text-align: center;
+		.logo {
+			max-width: 200px;
+			margin:0 auto;
+			display:block;
+			margin-bottom:30px;
+		}
+	}
 }
diff --git a/_sass/_partials/_header.scss b/_sass/_partials/_header.scss
@@ -1,8 +1,12 @@
 header {
+	background:$white;
 	.logo {
 		padding:30px 0;
 		display: block;
 	}
+	.toggle {
+		display:none;
+	}
 	nav {
 		float:right;
 		height:100%;
@@ -28,6 +32,7 @@ header {
 					font-weight:600;
 					vertical-align:bottom;
 					font-size: 16px;
+					transition:background 0.3s;
 					span {
 						display: inline-block;
 						padding:30px 15px;
@@ -42,4 +47,113 @@ header {
 			}
 		}
 	}
+}
+
+.toggle {
+	display:block;
+	height:30px;
+	width:40px;
+	position:absolute;
+	top:50%;
+	transform:translateY(-50%);
+	right:15px;
+	transition:all 0.3s;
+	&:before, &:after, span {
+		width:100%;
+		height:4px;
+		background:$brand-color;
+		position:absolute;
+		left:50%;
+		transform:translateX(-50%);
+		content:"";
+		display:block;
+	}
+	&:before {
+		top:0;
+		transition:all 0.3s;
+	}
+	&:after {
+		top:26px;
+		transition:all 0.3s;
+	}
+	span {
+		top:50%;
+		transform:translate(-50%, -50%);
+		transition:all 0.3s;
+	}
+	&.active-toggle {
+		transform:rotate(180deg) translateY(50%);
+		span {
+			opacity:0;
+		}
+		&:before {
+			transform:rotate(-45deg);
+			left:0;
+			top:50%;
+		}
+		&:after {
+			transform:rotate(45deg);
+			left:0;
+			top:50%;
+		}
+	}
+}
+
+@media screen and (max-width: 767px) {
+	body {
+		padding-top:89px;
+	}
+	header {
+		height:89px;
+		position:fixed;
+		width:100%;
+		top:0;
+		left:0;
+		z-index:2;
+		.logo {
+			max-width:200px;
+			padding:15px 0;
+		}
+		nav {
+			position:fixed;
+			top:89px;
+			width:100%;
+			left:0;
+			transition:all 0.3s;
+			height:0;
+			overflow:hidden;
+			background: $brand-color;
+			ul {
+				width:100%;
+				padding:0;
+				display: flex;
+				height:auto;
+				flex-direction:column-reverse;
+				li {
+					float:none;
+					width:100%;
+					padding:0px;
+					height:auto;
+					display:block;
+					a {
+						padding:15px;
+						display:block;
+						width:100%;
+						text-align:center;
+						font-size:22px;
+						span {
+							display:inline;
+						}
+					}
+				}
+			}
+			&.active-nav {
+				height:calc(100% - 89px);
+			}
+		}
+		.toggle {
+			display: block;
+		}
+	}
+
 }