UI changes alignment changes in the header.

static/css/home.css

@@ -41,68 +41,68 @@ mark {
   background-color: transparent; }
 
 .temp-intro,
-.temp-end {
-  background-color: #414042;
+#footer {
+  background-color: #403e41;
   display: flex;
   justify-content: space-between;
   padding: 15px 0;
   color: #808285;
   font-size: 14px; }
   .temp-intro .temp-name,
-  .temp-end .temp-name {
-    margin-left: 80px; }
+  #footer .temp-name {
+    margin-left: 125px; }
     @media screen and (max-width: 1024px) {
       .temp-intro .temp-name,
-      .temp-end .temp-name {
+      #footer .temp-name {
         margin-left: 20px; } }
     .temp-intro .temp-name mark,
-    .temp-end .temp-name mark {
+    #footer .temp-name mark {
       color: white;
       font-weight: bold;
       letter-spacing: 0.8px; }
   .temp-intro .temp-social,
-  .temp-end .temp-social {
+  #footer .temp-social {
     display: flex;
-    margin-right: 80px; }
+    margin-right: 125px; }
     @media screen and (max-width: 1024px) {
       .temp-intro .temp-social,
-      .temp-end .temp-social {
+      #footer .temp-social {
         margin-right: 20px; } }
     .temp-intro .temp-social li,
-    .temp-end .temp-social li {
+    #footer .temp-social li {
       list-style: none;
       align-self: center;
       padding: 0 10px;
       font-size: 12px; }
   .temp-intro small,
-  .temp-end small {
+  #footer small {
     font-size: 14px; }
     @media screen and (max-width: 1024px) {
       .temp-intro small,
-      .temp-end small {
+      #footer small {
         display: block;
         text-align: center;
         padding: 5px 0; } }
     .temp-intro small:first-child,
-    .temp-end small:first-child {
-      margin-left: 80px; }
+    #footer small:first-child {
+      margin-left: 125px; }
       @media screen and (max-width: 1024px) {
         .temp-intro small:first-child,
-        .temp-end small:first-child {
+        #footer small:first-child {
           margin: 0; } }
     .temp-intro small:last-child,
-    .temp-end small:last-child {
-      margin-right: 80px; }
+    #footer small:last-child {
+      margin-right: 125px; }
       @media screen and (max-width: 1024px) {
         .temp-intro small:last-child,
-        .temp-end small:last-child {
+        #footer small:last-child {
           margin: 0; } }
     .temp-intro small mark,
-    .temp-end small mark {
-      color: #d1d3d4; }
+    #footer small mark {
+      color: #d2d4d5; }
 
 @media screen and (max-width: 1024px) {
-  .temp-end {
+  #footer {
     display: block; } }
 
 #page-header {
@@ -133,7 +133,7 @@ mark {
   #page-header .temp-brand {
     display: flex;
     align-self: center;
-    width: 25%;
+    width: 20%;
     justify-content: center; }
     #page-header .temp-brand figure {
       margin-right: 15px; }
@@ -145,7 +145,7 @@ mark {
       letter-spacing: -0.65px;
       font-family: 'Archivo Black', sans-serif; }
       #page-header .temp-brand h1 mark {
-        color: #27aae1; }
+        color: #28aae2; }
   #page-header #desktop-navigation-menu {
     width: 55%;
     align-self: center;
@@ -160,7 +160,7 @@ mark {
         list-style: none;
         color: #808285; }
         #page-header #desktop-navigation-menu ul li.active {
-          color: #27aae1; }
+          color: #28aae2; }
   #page-header #mobile-hamburger-menu {
     display: none;
     position: relative;
@@ -190,7 +190,7 @@ mark {
         position: absolute; }
       #page-header #mobile-hamburger-menu .icon-line:before {
         top: 200%;
-        background-color: #27aae1;
+        background-color: #28aae2;
         transition: opacity 500ms ease; }
       #page-header #mobile-hamburger-menu .icon-line:after {
         top: 400%;
@@ -224,9 +224,9 @@ mark {
         transition: opacity 500ms ease; } }
 
 .temp-contact-info {
-  background-color: #f9f9f9;
-  border-top: 1px solid #d1d3d4;
-  color: #58595b; }
+  background-color: #fafafa;
+  border-top: 1px solid #d2d4d5;
+  color: #57595b; }
   .temp-contact-info ul {
     display: flex;
     width: 80%;
@@ -238,7 +238,7 @@ mark {
       width: 10%; }
     .temp-contact-info ul li {
       list-style: none;
-      border-left: 2px solid #d1d3d4;
+      border-left: 2px solid #d2d4d5;
       font-size: 14px;
       display: flex;
       justify-content: center;
@@ -258,7 +258,7 @@ mark {
             .temp-contact-info ul li.active .contact-content {
               display: block; } }
       .temp-contact-info ul li:last-child {
-        border-right: 2px solid #d1d3d4; }
+        border-right: 2px solid #d2d4d5; }
       .temp-contact-info ul li img {
         width: 10%;
         align-self: center; }
@@ -271,21 +271,21 @@ mark {
         .temp-contact-info ul li .contact-content span {
           display: block; }
           .temp-contact-info ul li .contact-content span:last-child {
-            color: #27aae1; }
+            color: #28aae2; }
         .temp-contact-info ul li .contact-content a {
           display: block;
-          color: #27aae1; }
+          color: #28aae2; }
 
 section h3 {
   font-size: 36px;
   font-family: 'Archivo Black', sans-serif;
   line-height: 1.2;
-  color: #414042; }
+  color: #403e41; }
   @media screen and (max-width: 1024px) {
     section h3 {
       text-align: center; } }
   section h3 mark {
-    color: #27aae1; }
+    color: #28aae2; }
 section p {
   color: #808285;
   font-size: 16px;
@@ -305,7 +305,7 @@ section .description {
     line-height: 1.8; }
 
 #home {
-  box-shadow: 0 8px 20px -6px #a7a9ac;
+  box-shadow: 0 8px 20px -6px #a6a8ab;
   display: flex; }
   @media screen and (max-width: 1024px) {
     #home {
@@ -355,7 +355,7 @@ section .description {
       opacity: 0; }
   #home button {
     border: none;
-    background-color: #27aae1;
+    background-color: #28aae2;
     color: white;
     padding: 20px 30px;
     outline: none;
@@ -392,7 +392,7 @@ section .description {
       width: 100%; } }
 
 #about {
-  background-color: #efefef;
+  background-color: #f0f0f0;
   display: block;
   margin-bottom: 225px; }
   @media screen and (max-width: 1024px) {
@@ -459,7 +459,7 @@ section .description {
       #service p {
         width: 90%; } }
   #service .owl-service {
-    width: 85%;
+    width: 82%;
     margin: 0 auto;
     display: block; }
     @media screen and (max-width: 1024px) {
@@ -467,8 +467,9 @@ section .description {
         width: 100%; } }
     #service .owl-service li {
       list-style: none;
-      background-color: #efefef;
-      width: 90%; }
+      background-color: #f0f0f0;
+      width: 90%;
+      margin: 0 auto; }
       #service .owl-service li .inner-contents {
         padding-top: 20px; }
         #service .owl-service li .inner-contents img {
@@ -484,7 +485,7 @@ section .description {
         #service .owl-service li .inner-contents .title {
           text-align: center;
           padding-top: 20px;
-          color: #414042;
+          color: #403e41;
           font-size: 14px;
           font-weight: bold; }
   #service .service-carousel-btn {
@@ -494,11 +495,11 @@ section .description {
     #service .service-carousel-btn i {
       font-size: 16px;
       padding: 0 10px;
-      color: #27aae1;
+      color: #28aae2;
       cursor: pointer; }
 
 #testimonial {
-  background-color: #efefef;
+  background-color: #f0f0f0;
   padding: 20px 0; }
   #testimonial h3 {
     text-align: center;
@@ -512,20 +513,23 @@ section .description {
         width: 90%; } }
   #testimonial .owl-testimonial {
     width: 80%;
-    margin: 0 auto; }
+    margin: 0 auto;
+    height: 55vh; }
     @media screen and (max-width: 1024px) {
       #testimonial .owl-testimonial {
         width: 100%; } }
     #testimonial .owl-testimonial .owl-item-testimonial {
       display: flex;
-      width: 95%;
+      width: 97%;
       background-color: white;
-      margin: 50px auto; }
+      margin: 50px 0; }
       @media screen and (max-width: 1024px) {
         #testimonial .owl-testimonial .owl-item-testimonial {
-          width: 90%; } }
+          width: 90%;
+          margin: 50px auto; } }
       #testimonial .owl-testimonial .owl-item-testimonial figure {
-        width: 250px; }
+        width: 250px;
+        height: 300px; }
         @media screen and (max-width: 1024px) {
           #testimonial .owl-testimonial .owl-item-testimonial figure {
             width: 350px; } }
@@ -544,25 +548,24 @@ section .description {
           padding: 2px 0;
           color: #808285; }
         #testimonial .owl-testimonial .owl-item-testimonial .description .person-name {
-          color: #27aae1;
+          color: #28aae2;
           padding-top: 20px; }
       #testimonial .owl-testimonial .owl-item-testimonial blockquote {
         font-size: 16px;
         color: #808285;
-        font-weight: bold;
         line-height: 1.8; }
   #testimonial .testimonial-carousel-btn {
     text-align: center;
     padding-bottom: 30px; }
     #testimonial .testimonial-carousel-btn i {
       padding: 10px;
-      background-color: #d1d3d4;
-      color: #58595b;
-      margin: 0 8px;
+      background-color: #d2d4d5;
+      color: #57595b;
+      margin: 0 12px;
       cursor: pointer; }
 
 #enquiry {
-  background: linear-gradient(#27aae1, #2b3990); }
+  background: linear-gradient(#28aae2, #2b3991); }
   #enquiry h3 {
     text-align: center;
     color: white;
@@ -571,7 +574,7 @@ section .description {
     width: 50%;
     margin: 0 auto;
     text-align: center;
-    color: #f9f9f9;
+    color: #fafafa;
     line-height: 1.8; }
     @media screen and (max-width: 1024px) {
       #enquiry p {
@@ -594,22 +597,22 @@ section .description {
       #enquiry form fieldset input:nth-child(even) {
         float: right; }
     #enquiry form fieldset ::-webkit-input-placeholder {
-      color: #f9f9f9; }
+      color: #fafafa; }
       @media screen and (max-width: 1024px) {
         #enquiry form fieldset ::-webkit-input-placeholder {
           padding-left: 13px; } }
     #enquiry form fieldset ::-moz-placeholder {
-      color: #f9f9f9; }
+      color: #fafafa; }
       @media screen and (max-width: 1024px) {
         #enquiry form fieldset ::-moz-placeholder {
           padding-left: 13px; } }
     #enquiry form fieldset :-ms-input-placeholder {
-      color: #f9f9f9; }
+      color: #fafafa; }
       @media screen and (max-width: 1024px) {
         #enquiry form fieldset :-ms-input-placeholder {
           padding-left: 13px; } }
     #enquiry form fieldset :-moz-placeholder {
-      color: #f9f9f9; }
+      color: #fafafa; }
       @media screen and (max-width: 1024px) {
         #enquiry form fieldset :-moz-placeholder {
           padding-left: 13px; } }
@@ -645,7 +648,7 @@ section .description {
         width: 90%; } }
   #contact .inner-container {
     display: flex;
-    width: 85%;
+    width: 80%;
     margin: 40px auto;
     padding: 20px 0;
     justify-content: space-between; }
@@ -669,12 +672,12 @@ section .description {
         padding: 15px 0; }
         #contact .inner-container .description-container li address {
           font-size: 16px;
-          color: #58595b;
+          color: #57595b;
           font-family: open-sans;
           font-style: normal;
           line-height: 1.8; }
         #contact .inner-container .description-container li label {
-          color: #58595b;
+          color: #57595b;
           font-weight: bold;
           font-size: 16px; }
         #contact .inner-container .description-container li address,
@@ -684,7 +687,7 @@ section .description {
           display: flex;
           font-size: 16px; }
           #contact .inner-container .description-container li .contact-content li {
-            color: #58595b;
+            color: #57595b;
             padding: 0 15px 0 0; }
             #contact .inner-container .description-container li .contact-content li i {
               font-size: 18px; }

static/js/home.js

@@ -60,7 +60,7 @@ function page_loaded() {
 			event.preventDefault();
 			
 			$('html, body').animate({
-				scrollTop: $($.attr(this, 'href')).offset().top - 730
+				scrollTop: $($.attr(this, 'href')).offset().top - 780
 			}, 500);
 		});
 
@@ -108,7 +108,7 @@ $(document).on('click', 'a[href^="#"]', function (event) {
 	event.preventDefault();
   
 	$('html, body').animate({
-	    scrollTop: $($.attr(this, 'href')).offset().top
+	    scrollTop: $($.attr(this, 'href')).offset().top - 100
 	}, 500);
 });
 
@@ -163,7 +163,8 @@ owl.owlCarousel({
 			items: 1
 		},
 		1000: {
-			items: 2
+			items: 2,
+			stagePadding: -10
 		}
 	}
 });

static/scss/home.scss

@@ -39,7 +39,7 @@ mark {
 	font-size: $other_size;
 
 	.temp-name {
-		margin-left: 80px;
+		margin-left: 125px;
 
 		@media screen and (max-width: 1024px) {
 			margin-left: 20px;
@@ -54,7 +54,7 @@ mark {
 
 	.temp-social {
 		display: flex;
-		margin-right: 80px;
+		margin-right: 125px;
 
 		@media screen and (max-width: 1024px) {
 			margin-right: 20px;
@@ -78,7 +78,7 @@ mark {
 		}
 
 		&:first-child {
-			margin-left: 80px;
+			margin-left: 125px;
 
 			@media screen and (max-width: 1024px) {
 				margin: 0;
@@ -86,7 +86,7 @@ mark {
 		}
 
 		&:last-child {
-			margin-right: 80px;
+			margin-right: 125px;
 
 			@media screen and (max-width: 1024px) {
 				margin: 0;
@@ -142,7 +142,7 @@ mark {
 	.temp-brand {
 		display: flex;
 		align-self: center;
-		width: 25%;
+		width: 20%;
 		justify-content: center;
 
 		figure {
@@ -643,7 +643,7 @@ section {
 	}
 
 	.owl-service {
-		width: 85%;
+		width: 82%;
 		margin: 0 auto;
 		display: block;
 
@@ -655,6 +655,7 @@ section {
 			list-style: none;
 			background-color: $lightest_gray;
 			width: 90%;
+			margin: 0 auto;
 
 			.inner-contents {
 				padding-top: 20px;
@@ -720,6 +721,7 @@ section {
 	.owl-testimonial {
 		width: 80%;
 		margin: 0 auto;
+		height: 55vh;
 
 		@media screen and (max-width: 1024px) {
 			width: 100%;
@@ -727,16 +729,18 @@ section {
 
 		.owl-item-testimonial {
 			display: flex;
-			width: 95%;
+			width: 97%;
 			background-color: white;
-			margin: 50px auto;
+			margin: 50px 0;
 
 			@media screen and (max-width: 1024px) {
 				width: 90%;
+				margin: 50px auto;
 			}
 
 			figure {
 				width: 250px;
+				height: 300px;
 
 				@media screen and (max-width: 1024px) {
 					width: 350px;
@@ -774,7 +778,6 @@ section {
 			blockquote {
 				font-size: $paragraph_size;
 				color: $dark_gray;
-				font-weight: bold;
 				line-height: 1.8;
 			}
 		}
@@ -788,7 +791,7 @@ section {
 			padding: 10px;
 			background-color: $light_gray;
 			color: $brown;
-			margin: 0 8px;
+			margin: 0 12px;
 			cursor: pointer;
 		}
 	}
@@ -916,7 +919,7 @@ section {
 
 	.inner-container {
 		display: flex;
-		width: 85%;
+		width: 80%;
 		margin: 40px auto;
 		padding: 20px 0;
 		justify-content: space-between;

templates/home.html

@@ -237,8 +237,8 @@
 			</li>
 		</ul>
 		<div class="service-carousel-btn">
-			<i class="fas fa-chevron-left" id="service-carousel-left-btn"></i>
-			<i class="fas fa-chevron-right" id="service-carousel-right-btn"></i>
+			<i class="fas fa-chevron-left" id="service-carousel-right-btn"></i>
+			<i class="fas fa-chevron-right" id="service-carousel-left-btn"></i>
 		</div>
 	</section>
 	<section id="testimonial">
@@ -318,8 +318,8 @@
 			</div>
 		</div>
 		<div class="testimonial-carousel-btn">
-			<i class="fas fa-chevron-left" id="testimonial-carousel-left-btn"></i>
-			<i class="fas fa-chevron-right" id="testimonial-carousel-right-btn"></i>
+			<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>
 	</section>
 	<section id="enquiry">
@@ -346,7 +346,6 @@
 		</p>
 		<div class="inner-container">
 			<figure>
-				<!-- Wrong image have been rendered for now, need to change it to map image. -->
 				<img src="{% static 'images/map.png' %}" alt="">
 			</figure>
 			<ul class="description-container">
@@ -388,7 +387,7 @@
 	</section>
 	<footer id="footer">
 		<small>copyright &copy; 2018 <mark>Webtrigon</mark></small>
-		<small>Powered By <mark>Webtrigon Mini</mark></small>
+		<small>Digitalized By <mark>Webtrigon Mini</mark></small>
 	</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>