optimised html, js files.

static/scss/_colors.scss

@@ -1,14 +1,14 @@
 // colors
 
-$dark_blue: #2b3990;
-$blue: #27aae1;
-$dark_brown: #414042;
-$brown: #58595b;
-$dark_gray: #808285;
-$gray: #a7a9ac;
-$light_gray: #d1d3d4;
-$lightest_gray: #efefef;
-$white_shade: #f9f9f9;
+$dark_blue: hsl(232, 54%, 37%);
+$blue: hsl(198, 76%, 52%);
+$dark_brown: hsl(270, 2%, 25%);
+$brown: hsl(220, 2%, 35%);
+$dark_gray: hsl(216, 2%, 51%);
+$gray: hsl(216, 3%, 66%);
+$light_gray: hsl(200, 3%, 83%);
+$lightest_gray: hsl(0, 0%, 94%);
+$white_shade: hsl(0, 0%, 98%);
 
 // font size
 $paragraph_size: 16px;

static/scss/home.scss

@@ -30,7 +30,7 @@ mark {
 }
 
 .temp-intro,
-.temp-end {
+#footer {
 	background-color: $dark_brown;
 	display: flex;
 	justify-content: space-between;
@@ -100,7 +100,7 @@ mark {
 
 }
 
-.temp-end {
+#footer {
 
 	@media screen and (max-width: 1024px) {
 		display: block

templates/home.html

@@ -386,10 +386,10 @@
 			</ul>
 		</div>
 	</section>
-	<div class="temp-end">
+	<footer id="footer">
 		<small>copyright &copy; 2018 <mark>Webtrigon</mark></small>
 		<small>Powered By <mark>Webtrigon Mini</mark></small>
-	</div>
+	</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>