Toast in home screen.

static/css/home.css

@@ -606,4 +606,53 @@ section .description p {
   font-size: 18px;
 }
 
+.toast {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background-color: #403e41;
+  z-index: 10;
+  width: 300px;
+  height: 200px;
+  padding: 10px;
+  transition: transform 500ms ease;
+}
+.toast.hide {
+  transform: translateY(145px);
+}
+.toast.hide .close-toast {
+  transform: rotate(180deg);
+}
+.toast header {
+  font-size: 16px;
+  letter-spacing: 1px;
+  font-weight: bold;
+  padding: 10px 0;
+  text-align: center;
+  color: white;
+}
+.toast .close-toast {
+  position: absolute;
+  top: 20px;
+  left: 10px;
+  color: white;
+  font-size: 30px;
+  cursor: pointer;
+  display: flex;
+  transition: tranform 500ms ease;
+}
+.toast .close-toast img {
+  width: 20px;
+  height: 20px;
+}
+.toast ul {
+  width: 80%;
+  margin: 0 auto;
+}
+.toast ul li {
+  color: white;
+  text-decoration: underline;
+  font-size: 14px;
+}
+
 /*# sourceMappingURL=home.css.map */

static/images/down-chevron.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<path d="M413.974,71.026C368.171,25.225,307.274,0,242.5,0S116.829,25.225,71.026,71.026C25.225,116.829,0,177.726,0,242.5   s25.225,125.671,71.026,171.474C116.829,459.775,177.726,485,242.5,485s125.671-25.225,171.474-71.026   C459.775,368.171,485,307.274,485,242.5S459.775,116.829,413.974,71.026z M242.5,455C125.327,455,30,359.673,30,242.5   S125.327,30,242.5,30S455,125.327,455,242.5S359.673,455,242.5,455z" fill="#fff"/>
+	<polygon points="242.5,299.791 135.589,193.228 114.411,214.476 242.5,342.148 370.589,214.476 349.411,193.228  " fill="#fff"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

static/js/common.js

@@ -22,4 +22,5 @@ function show_menu() {
 	hamburger_menu.classList.toggle('active');
 	document.body.classList.toggle('non-scrollable');
 	mobile_menu.classList.toggle('show');
-}
+}
+

static/js/home.js

@@ -105,11 +105,9 @@ owl.owlCarousel({
 	responsive: {
 		0: {
 			items: 1,
-			stagePadding: 100,
 		},
 		600: {
 			items: 1,
-			stagePadding: 100,
 		},
 		1000: {
 			items: 3
@@ -161,3 +159,13 @@ $('#branches-carousel-right-btn').click(function () {
     "use strict";
     branches_carousel_Btn.trigger('prev.owl.carousel', [300]);
 });
+
+
+var toast = document.querySelector('.toast');
+var close_toast = document.querySelector('.close-toast');
+
+close_toast.addEventListener('click', hide_toast);
+
+function hide_toast() {
+	toast.classList.toggle('hide');
+}

static/scss/common.scss

@@ -389,4 +389,4 @@ mark {
 			}
 		}
 	}
-}
+}

static/scss/home.scss

@@ -652,3 +652,61 @@ section {
 }
 
 
+.toast {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	background-color: #403e41;
+	z-index: 10;
+	width: 300px;
+	height: 200px;
+	padding: 10px;
+	transition: transform 500ms ease;
+
+	&.hide {
+		transform: translateY(145px);
+
+		.close-toast {
+			transform: rotate(180deg);
+		}
+	}
+
+	header {
+		font-size: 16px;
+		letter-spacing: 1px;
+		font-weight: bold;
+		padding: 10px 0;
+		text-align: center;
+		color: white;
+	}
+
+	.close-toast {
+		position: absolute;;
+		top: 20px;
+		left: 10px;
+		color: white;
+		font-size: 30px;
+		cursor: pointer;
+		display: flex;
+		transition: tranform 500ms ease;
+		
+
+		img {
+			width: 20px;
+			height: 20px;
+		}
+	}
+
+	ul {
+		width: 80%;
+		margin: 0 auto;
+
+		li {
+			color: white;
+			text-decoration: underline;
+			font-size: 14px;
+		}
+	}
+}
+
+

templates/home.html

@@ -6,6 +6,13 @@
 {% endblock stylesheets %}
 
 {% block content %}
+<section class="toast">
+	<header>ANNOUNCEMENTS</header>
+	<div class="close-toast"><img src="{% static 'images/down-chevron.svg' %}" alt=""></div>
+	<ul>
+		<li><a href="{% static 'files/gbm-notice-17-18.pdf' %}" target="_blank">General Body Meeting Notice 2017-2018 (Click to View/Download)</a></li>
+	</ul>
+</section>
 <div class="temp-intro-home">
 		<div class="temp-name">Welcome to <mark>BCB</mark></div>
 		<!-- <ul class="temp-social">
@@ -186,10 +193,9 @@
 	</section>
 	<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> -->
+		<p>
+			Weekly Holidays: Sunday, 2nd and 4th Saturdays.		
+		</p>
 		<div class="owl-carousel owl-branches">
 			<div class="owl-item-branches">
 				<figure>
@@ -272,7 +278,7 @@
 						2.00 pm - 5.00 p.m
 					</div>
 					<div class="person-info">16th Main, 4th Block, Bangalore - 011</div>
-					<div class="person-info">PH :</div>
+					<div class="person-info">PH : 2574 0777</div>
 				</div>
 			</div>
 		</div>