Service page UI and functionality fixes.

static/css/common.css

@@ -144,7 +144,7 @@ mark {
   top: 0;
   left: 0;
   background-color: white;
-  z-index: 5;
+  z-index: 100;
   transition: height 500ms linear;
 }
 @media screen and (max-width: 1024px) {

static/css/home.css

@@ -336,89 +336,89 @@ section .description p {
   cursor: pointer;
 }
 
-#testimonial {
+#branches {
   background-color: #f0f0f0;
   padding: 20px 0;
 }
-#testimonial h3 {
+#branches h3 {
   text-align: center;
   padding: 20px 0;
 }
-#testimonial p {
+#branches p {
   text-align: center;
   width: 50%;
   margin: 0 auto;
 }
 @media screen and (max-width: 1024px) {
-  #testimonial p {
+  #branches p {
     width: 90%;
   }
 }
-#testimonial .owl-testimonial {
+#branches .owl-branches {
   width: 80%;
   margin: 0 auto;
   height: 55vh;
 }
 @media screen and (max-width: 1024px) {
-  #testimonial .owl-testimonial {
+  #branches .owl-branches {
     width: 100%;
   }
 }
-#testimonial .owl-testimonial .owl-item-testimonial {
+#branches .owl-branches .owl-item-branches {
   display: flex;
   width: 97%;
   background-color: white;
   margin: 50px 0;
 }
 @media screen and (max-width: 1024px) {
-  #testimonial .owl-testimonial .owl-item-testimonial {
+  #branches .owl-branches .owl-item-branches {
     width: 90%;
     margin: 50px auto;
   }
 }
-#testimonial .owl-testimonial .owl-item-testimonial figure {
-  width: 250px;
-  height: 300px;
+#branches .owl-branches .owl-item-branches figure {
+  width: 500px;
+  height: 255px;
 }
 @media screen and (max-width: 1024px) {
-  #testimonial .owl-testimonial .owl-item-testimonial figure {
+  #branches .owl-branches .owl-item-branches figure {
     width: 350px;
   }
 }
-#testimonial .owl-testimonial .owl-item-testimonial figure img {
+#branches .owl-branches .owl-item-branches figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-#testimonial .owl-testimonial .owl-item-testimonial .description {
+#branches .owl-branches .owl-item-branches .description {
   margin: 0 20px;
   padding: 10px 0;
 }
-#testimonial .owl-testimonial .owl-item-testimonial .description .person-name,
-#testimonial .owl-testimonial .owl-item-testimonial .description .person-info {
+#branches .owl-branches .owl-item-branches .description .person-name,
+#branches .owl-branches .owl-item-branches .description .person-info {
   font-size: 14px;
   font-weight: bold;
 }
-#testimonial .owl-testimonial .owl-item-testimonial .description .person-info {
+#branches .owl-branches .owl-item-branches .description .person-info {
   padding: 2px 0;
   color: #808285;
 }
-#testimonial .owl-testimonial .owl-item-testimonial .description .person-name {
+#branches .owl-branches .owl-item-branches .description .person-name {
   color: #28aae2;
   padding-top: 20px;
 }
-#testimonial .owl-testimonial .owl-item-testimonial blockquote {
+#branches .owl-branches .owl-item-branches blockquote {
   font-size: 16px;
   color: #808285;
-  line-height: 1.8;
+  line-height: 1.3;
 }
-#testimonial .testimonial-carousel-btn {
+#branches .branches-carousel-btn {
   text-align: center;
   padding-bottom: 30px;
   position: relative;
   z-index: 2;
 }
-#testimonial .testimonial-carousel-btn i {
+#branches .branches-carousel-btn i {
   padding: 10px;
   background-color: #d2d4d5;
   color: #57595b;

static/css/service.css

@@ -57,12 +57,15 @@
 .service-content .scene-container {
   overflow: hidden;
   width: 70%;
+  background-color: #f0f0f0;
 }
-.service-content iframe {
+.service-content object {
   overflow-x: hidden;
   display: none;
+  width: 100%;
+  height: 100%;
 }
-.service-content iframe.active {
+.service-content object.active {
   display: block;
 }
 .service-content ul {
@@ -74,7 +77,7 @@
 }
 .service-content ul li {
   list-style: none;
-  padding: 25px 0;
+  padding: 10% 0;
   border-bottom: 1px solid #808285;
   color: #403e41;
   text-align: center;

static/js/about.js

@@ -0,0 +1,32 @@
+var owl = $('.owl-team');
+owl.owlCarousel({
+	loop: true,
+	margin: 0,
+	autoplay: true,
+	autoplayTimeout: 3000,
+	autoplayHoverPause: true,
+	responsiveClass: true,
+	responsive: {
+		0: {
+			items: 1
+		},
+		600: {
+			items: 1
+		},
+		1000: {
+			items: 4,
+		}
+	}
+});
+
+var team_carousel_Btn = $('.owl-team');
+owl.owlCarousel();
+$('#team-carousel-left-btn').click(function () {
+    "use strict";
+    team_carousel_Btn.trigger('next.owl.carousel', [300]);
+});
+
+$('#team-carousel-right-btn').click(function () {
+    "use strict";
+    team_carousel_Btn.trigger('prev.owl.carousel', [300]);
+});

static/js/common.js

@@ -0,0 +1,13 @@
+window.addEventListener('scroll', page_scroll);
+var page_header = document.getElementById('page-header');
+
+function page_scroll() {
+    'use strict';
+    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+    
+	if (40 + winScroll < page_header.offsetTop) {
+		page_header.classList.remove('minimize');
+	} else {
+		page_header.classList.add('minimize');
+	}
+}

static/js/home.js

@@ -34,12 +34,6 @@ document.addEventListener('DOMContentLoaded', page_loaded);
 function page_scroll() {
 	'use strict';
 	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-
-	if (40 + winScroll < page_header.offsetTop) {
-		page_header.classList.remove('minimize');
-	} else {
-		page_header.classList.add('minimize');
-	}
 	
 	if (-120 + winScroll >= about_description_animate.offsetTop) {
 		about_description_animate.classList.add('show');
@@ -147,7 +141,7 @@ $('#service-carousel-right-btn').click(function () {
     service_carousel_Btn.trigger('prev.owl.carousel', [300]);
 });
 
-var owl = $('.owl-testimonial');
+var owl = $('.owl-branches');
 owl.owlCarousel({
 	loop: true,
 	margin: 0,
@@ -169,48 +163,14 @@ owl.owlCarousel({
 	}
 });
 
-var testimonial_carousel_Btn = $('.owl-testimonial');
+var branches_carousel_Btn = $('.owl-branches');
 owl.owlCarousel();
-$('#testimonial-carousel-left-btn').click(function () {
+$('#branches-carousel-left-btn').click(function () {
     "use strict";
-    testimonial_carousel_Btn.trigger('next.owl.carousel', [300]);
+    branches_carousel_Btn.trigger('next.owl.carousel', [300]);
 });
 
-$('#testimonial-carousel-right-btn').click(function () {
+$('#branches-carousel-right-btn').click(function () {
     "use strict";
-    testimonial_carousel_Btn.trigger('prev.owl.carousel', [300]);
+    branches_carousel_Btn.trigger('prev.owl.carousel', [300]);
 });
-
-var owl = $('.owl-team');
-owl.owlCarousel({
-	loop: true,
-	margin: 0,
-	autoplay: true,
-	autoplayTimeout: 3000,
-	autoplayHoverPause: true,
-	responsiveClass: true,
-	responsive: {
-		0: {
-			items: 1
-		},
-		600: {
-			items: 1
-		},
-		1000: {
-			items: 4,
-		}
-	}
-});
-
-var team_carousel_Btn = $('.owl-team');
-owl.owlCarousel();
-$('#team-carousel-left-btn').click(function () {
-    "use strict";
-    team_carousel_Btn.trigger('next.owl.carousel', [300]);
-});
-
-$('#team-carousel-right-btn').click(function () {
-    "use strict";
-    team_carousel_Btn.trigger('prev.owl.carousel', [300]);
-});
-

static/js/service.js

@@ -1,5 +1,5 @@
 var service_tabs = document.querySelectorAll('.service-content .side-content li');
-var scenes = document.querySelectorAll('.scene-container iframe');
+var scenes = document.querySelectorAll('.scene-container object');
 
 for (var i = 0; i < service_tabs.length; i++) {
     service_tabs[i].addEventListener('click', change_tabs);

static/scss/common.scss

@@ -114,7 +114,7 @@ mark {
 	top: 0;
 	left: 0;
 	background-color: white;
-	z-index: 5;
+	z-index: 100;
 	transition: height 500ms linear;
 
 	@media screen and (max-width: 1024px) {

static/scss/home.scss

@@ -347,7 +347,7 @@ section {
 	}
 }
 
-#testimonial {
+#branches {
 	background-color: $lightest_gray;
 	padding: 20px 0;
 
@@ -366,7 +366,7 @@ section {
 		}
 	}
 
-	.owl-testimonial {
+	.owl-branches {
 		width: 80%;
 		margin: 0 auto;
 		height: 55vh;
@@ -375,7 +375,7 @@ section {
 			width: 100%;
 		}
 
-		.owl-item-testimonial {
+		.owl-item-branches {
 			display: flex;
 			width: 97%;
 			background-color: white;
@@ -387,8 +387,8 @@ section {
 			}
 
 			figure {
-				width: 250px;
-				height: 300px;
+				width: 500px;
+				height: 255px;
 
 				@media screen and (max-width: 1024px) {
 					width: 350px;
@@ -426,12 +426,12 @@ section {
 			blockquote {
 				font-size: $paragraph_size;
 				color: $dark_gray;
-				line-height: 1.8;
+				line-height: 1.3;
 			}
 		}
 	}
 
-	.testimonial-carousel-btn {
+	.branches-carousel-btn {
 		text-align: center;
 		padding-bottom: 30px;
 		position: relative;

static/scss/service.scss

@@ -36,11 +36,14 @@
     .scene-container {
         overflow: hidden;
         width: 70%;
+        background-color: $lightest_gray;
     }
 
-    iframe {
+    object {
         overflow-x: hidden;
         display: none;
+        width: 100%;
+        height: 100%;
 
         &.active {
             display: block;
@@ -56,7 +59,7 @@
 
         li {
             list-style: none;
-            padding: 25px 0;
+            padding: 10% 0;
             border-bottom: 1px solid $dark_gray;
             color: $dark_brown;
             text-align: center;

templates/about.html

@@ -106,4 +106,8 @@
         <i class="fas fa-chevron-right" id="team-carousel-left-btn"></i>
     </div>
 </section>
-{% endblock content %}
+{% endblock content %}
+
+{% block scripts %}
+<script src="{% static 'js/about.js' %}"></script>
+{% endblock scripts %}

templates/base.html

@@ -65,7 +65,7 @@
         </footer>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="{% static 'OwlCarousel-plugins/owl.carousel.min.js' %}"></script>
-        <script src="{% static 'js/home.js' %}"></script>
+        <script src="{% static 'js/common.js' %}"></script>
         {% block scripts %}
         {% endblock scripts %}
     </body>

templates/home.html

@@ -26,7 +26,7 @@
 						<a href="#service">SERVICES</a>
 					</li>
 					<li>
-						<a href="#testimonial">TESTIMONIAL</a>
+						<a href="#branches">BRANCHES</a>
 					</li>
 					<li>
 						<a href="#enquiry">ENQUIRY</a>
@@ -79,7 +79,9 @@
 				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
 				enim ad minim veniam.
 			</p>
-			<button type="button">OUR SERVICES<i class="fas fa-chevron-right"></i></button>
+			<a href="/service">
+				<button type="button">OUR SERVICES<i class="fas fa-chevron-right"></i></button>
+			</a>
 		</div>
 	</section>
 	<section id="about">
@@ -197,14 +199,14 @@
 			<i class="fas fa-chevron-right" id="service-carousel-left-btn"></i>
 		</div>
 	</section>
-	<section id="testimonial">
-		<h3>TESTIMONIALS</h3>
+	<section id="branches">
+		<h3>BRANCHES</h3>
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
 			dolore magna aliqua. Ut enim ad minim veniam.
 		</p>
-		<div class="owl-carousel owl-testimonial">
-			<div class="owl-item-testimonial">
+		<div class="owl-carousel owl-branches">
+			<div class="owl-item-branches">
 				<figure>
 					<img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
 				</figure>
@@ -216,12 +218,12 @@
 						labore et dolore magna aliqua.
 						Ut enim ad minim veniam.
 					</blockquote>
-					<div class="person-name">John Doe</div>
-					<div class="person-info">CEO</div>
-					<div class="person-info">Big Bank Ltd.</div>
+					<div class="person-name">Nagarabjavi</div>
+					<div class="person-info">Bangalore</div>
+					<div class="person-info">Karnataka</div>
 				</div>
 			</div>
-			<div class="owl-item-testimonial">
+			<div class="owl-item-branches">
 				<figure>
 					<img src="{% static 'images/boardroom-photography-London.jpg' %}" alt="">
 				</figure>
@@ -233,12 +235,12 @@
 						labore et dolore magna aliqua.
 						Ut enim ad minim veniam.
 					</blockquote>
-					<div class="person-name">John Doe</div>
-					<div class="person-info">CEO</div>
-					<div class="person-info">Big Bank Ltd.</div>
+					<div class="person-name">Nagarabjavi</div>
+					<div class="person-info">Bangalore</div>
+					<div class="person-info">Karnataka</div>
 				</div>
 			</div>
-			<div class="owl-item-testimonial">
+			<div class="owl-item-branches">
 				<figure>
 					<img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
 				</figure>
@@ -250,12 +252,12 @@
 						labore et dolore magna aliqua.
 						Ut enim ad minim veniam.
 					</blockquote>
-					<div class="person-name">John Doe</div>
-					<div class="person-info">CEO</div>
-					<div class="person-info">Big Bank Ltd.</div>
+					<div class="person-name">Nagarabjavi</div>
+					<div class="person-info">Bangalore</div>
+					<div class="person-info">Karnataka</div>
 				</div>
 			</div>
-			<div class="owl-item-testimonial">
+			<div class="owl-item-branches">
 				<figure>
 					<img src="{% static 'images/boardroom-photography-London.jpg' %}" alt="">
 				</figure>
@@ -267,15 +269,32 @@
 						labore et dolore magna aliqua.
 						Ut enim ad minim veniam.
 					</blockquote>
-					<div class="person-name">John Doe</div>
-					<div class="person-info">CEO</div>
-					<div class="person-info">Big Bank Ltd.</div>
+					<div class="person-name">Nagarabjavi</div>
+					<div class="person-info">Bangalore</div>
+					<div class="person-info">Karnataka</div>
+				</div>
+			</div>
+			<div class="owl-item-branches">
+				<figure>
+					<img src="{% static 'images/corporate-people-photography.jpg' %}" alt="">
+				</figure>
+				<div class="description">
+					<blockquote>
+						Lorem ipsum dolor sit amet, con-
+						sectetur adipiscing elit, sed do
+						eiusmod tempor incididunt ut
+						labore et dolore magna aliqua.
+						Ut enim ad minim veniam.
+					</blockquote>
+					<div class="person-name">Nagarabjavi</div>
+					<div class="person-info">Bangalore</div>
+					<div class="person-info">Karnataka</div>
 				</div>
 			</div>
 		</div>
-		<div class="testimonial-carousel-btn">
-			<i class="fas fa-chevron-left" id="testimonial-carousel-right-btn" ></i>
-			<i class="fas fa-chevron-right" id="testimonial-carousel-left-btn"></i>
+		<div class="branches-carousel-btn">
+			<i class="fas fa-chevron-left" id="branches-carousel-right-btn" ></i>
+			<i class="fas fa-chevron-right" id="branches-carousel-left-btn"></i>
 		</div>
 	</section>
 	<section id="enquiry">
@@ -342,3 +361,7 @@
 		</div>
 	</section>
 {% endblock content %}
+
+{% block scripts %}
+<script src="{% static 'js/home.js' %}"></script>
+{% endblock scripts %}

templates/partials/navigation.html

@@ -3,22 +3,22 @@
 {% block navigation %}
 <header id="page-header">
     <div class="inner-header">
-        <div class="temp-brand">
+        <a href = "/" class="temp-brand">
             <figure>
                 <img src="{% static 'images/logo-icon.png' %}" alt="">
             </figure>
             <h1><mark>Fundz</mark>in</h1>
-        </div>
+        </a>
         <nav id="desktop-navigation-menu">
             <ul>
                 <li {% if menu == 'Home' %} class="active" {% endif %}>
                     <a href="/">HOME</a>
                 </li>
                 <li {% if menu == 'About' %} class="active" {% endif %}>
-                    <a href="/">ABOUT</a>
+                    <a href="/about">ABOUT</a>
                 </li>
                 <li {% if menu == 'Service' %} class="active" {% endif %}>
-                    <a href="/">SERVICES</a>
+                    <a href="/service">SERVICES</a>
                 </li>
                 <li>
                     <a href="/">TESTIMONIAL</a>

templates/service.html

@@ -16,7 +16,7 @@
 <section class="service-content">
     <ul class="side-content">
         <li data-tab = "sales" class="active">Sales &amp; Trading</li>
-        <li data-tab = "financial" >Financial Advisors</li>
+        <li data-tab = "financial">Financial Advisors</li>
         <li data-tab = "investment">Investment Planning</li>
         <li data-tab = "tax">Tax Consultants</li>
         <li data-tab = "loan">Financial Advisors</li>
@@ -24,13 +24,27 @@
         <li data-tab = "planning">Investment Planning</li>
     </ul>
     <div class="scene-container">
-        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" class = "active" data-scene-target = "sales"></iframe>
-        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "financial"></iframe>
-        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "investment"></iframe>
-        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "tax"></iframe>
-        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "loan"></iframe>
-        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "consultant"></iframe>
-        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "planning"></iframe>
+        <object data="{% static 'files/sample-1.pdf' %}" type="application/pdf" style="width:100%; height:100%;" class="active" data-scene-target = "sales">
+            <embed src="{% static 'files/sample-1.pdf' %}" type="application/pdf" />
+        </object>
+        <object data="{% static 'files/sample-2.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "financial">
+            <embed src="{% static 'files/sample-2.pdf' %}" type="application/pdf" />
+        </object>
+        <object data="{% static 'files/sample-1.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "investment">
+            <embed src="{% static 'files/sample-1.pdf' %}" type="application/pdf" />
+        </object>
+        <object data="{% static 'files/sample-2.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "tax">
+            <embed src="{% static 'files/sample-2.pdf' %}" type="application/pdf" />
+        </object>
+        <object data="{% static 'files/sample-1.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "loan">
+            <embed src="{% static 'files/sample-1.pdf' %}" type="application/pdf" />
+        </object>
+        <object data="{% static 'files/sample-2.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "consultant">
+            <embed src="{% static 'files/sample-2.pdf' %}" type="application/pdf" />
+        </object>
+        <object data="{% static 'files/sample-1.pdf' %}" type="application/pdf" style="width:100%; height:100%;" data-scene-target = "planning">
+            <embed src="{% static 'files/sample-1.pdf' %}" type="application/pdf" />
+        </object>
     </div>
 </section>
 {% endblock content %}