diff --git a/assets/css/cs1.css b/assets/css/cs1.css
index 33cb193..eee82ee 100644
--- a/assets/css/cs1.css
+++ b/assets/css/cs1.css
@@ -1,50 +1,6 @@
-/* HEader Background */
-:root {
-	--init-x: 0;
-	--init-y: 0;
-	--dest-x: 0;
-	--dest-y: 0;
-	--dest-z: 0;
-}
-#div{
-  font-family: Consolas, Menlo, Monaco, monospace;
-  font-weight: bold;
-	background:url("../img/cs/bla.jpg") no-repeat fixed ;
-    background-size: cover;
-	height: 800px;
-    
-	overflow: hidden;
-    
-}
-.lingo {
-	position: absolute;
-	color: white;
-	transform: translateZ(0);
-	-webkit-animation: flythrough 5s forwards ease-in;
-    animation: flythrough 5s forwards ease-in;
-  transform-origin: center;
-}
-
-#thisSelect {
-	position: absolute;
-	height: 25px;
-	z-index: 0;
-}
-
-@-webkit-keyframes flythrough {
-	0% {opacity: 0; transform: perspective(0px) translate3d(var(--init-x),var(--init-y),0px);}
-	50% {opacity: 0.5;}
-	100% {opacity: 0; transform: perspective(500px) translate3d(var(--dest-x),var(--dest-y), var(--dest-z));}
-}
-
 
-::-webkit-scrollbar ,#thisSelect{
-    
-    display: none;
-  }
  /*Sticky navigation bar  */
 
-
 .sticky {
     position: fixed;
     top: 0;
@@ -59,6 +15,7 @@
     font-family: "Montserrat", sans-serif;
       color: #8d97ad;
     font-weight: 300;
+    
   }
   
   .blog-home5 h1, .blog-home5 h2, .blog-home5 h3, .blog-home5 h4, .blog-home5 h5, .blog-home5 h6 {
@@ -105,7 +62,7 @@
   }
   .card-img
   {
-      height: 400px;
+      height: 500px;
   }
   .blog-home5 .b-h-box:hover .card-img-overlay {
     height: 100%;
@@ -131,7 +88,7 @@
       background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
       transition: all 0.5s ease-in-out;
   }
-  
+
   .blog-home5 .font-14 {
       font-size: 14px;
   }
@@ -153,4 +110,94 @@
   .top-pad
   {
       padding-top: 100px;
-  }
\ No newline at end of file
+  }
+
+
+  /* mobile devices */
+  @media only screen and (max-width: 768px) 
+  {
+     
+  }
+	
+
+.loader {
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: 9999;
+	background: url('../img/cs/preloader.gif') 50% 50% no-repeat rgb(17, 16, 16);
+}
+
+
+
+/* Launching Page */
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);
+
+.hero {
+	height: 80vh;
+	background: linear-gradient(45deg, rgba(255,175,189,.7), rgba(100,216,243,.7), rgba(234,236,198,.7), rgba(245,146,176,.7), rgba(52,219,216,.7)) 0 0 / 1000% no-repeat, url('../img/cs/head.jpg') 0 0 / cover no-repeat;
+	-webkit-animation: gradientAnimation 40s ease infinite;
+	animation: gradientAnimation 40s ease infinite;
+    
+}
+@-webkit-keyframes gradientAnimation {
+	0%   { background-position: 0% 30%, 0 0;}
+	50%  { background-position: 100% 70%, 0 0;}
+	100% { background-position: 0% 30%, 0 0;}
+}
+@keyframes gradientAnimation {
+	0%   { background-position: 0% 30%, 0 0;}
+	50%  { background-position: 100% 70%, 0 0;}
+	100% { background-position: 0% 30%, 0 0;}
+}
+.hero p {
+	position: relative;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	color: #333;
+    /* text-shadow: 2px 2px  rgb(0,102,161); */
+	font : normal 600 60px/1 'Open Sans', sans-serif;
+	text-align: center;
+	white-space: nowrap;
+    z-index: 3;
+    text-shadow:
+    /* White glow */
+    0 0 7px #fff,
+    0 0 10px #fff,
+    0 0 21px #fff,
+    /* Green glow */
+    0 0 42px rgb(10, 141, 228),
+    0 0 82px rgb(10, 141, 228),
+    0 0 92px rgb(10, 141, 228),
+    0 0 102px rgb(10, 141, 228),
+    0 0 151px rgb(10, 141, 228);
+
+
+}
+.hero p span {
+	display: block;
+	margin-top: 1em;
+	font-size: 30px;
+	font-weight: 300;
+}
+
+.fade-in {
+	opacity: 1;
+	animation-name: fadeInOpacity;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in;
+	animation-duration: 15s;
+}
+
+@keyframes fadeInOpacity {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
\ No newline at end of file
diff --git a/assets/img/cs/head.jpg b/assets/img/cs/head.jpg
new file mode 100644
index 0000000..a99a404
Binary files /dev/null and b/assets/img/cs/head.jpg differ
diff --git a/assets/img/cs/preloader.gif b/assets/img/cs/preloader.gif
new file mode 100644
index 0000000..9222524
Binary files /dev/null and b/assets/img/cs/preloader.gif differ
diff --git a/assets/img/page/bla.jpg b/assets/img/page/bla.jpg
new file mode 100644
index 0000000..81c3707
Binary files /dev/null and b/assets/img/page/bla.jpg differ
diff --git a/assets/js/header.js b/assets/js/header.js
deleted file mode 100644
index 4ea6d22..0000000
--- a/assets/js/header.js
+++ /dev/null
@@ -1,139 +0,0 @@
-const DEBUG_MODE = "FALSE";
-
-var divs = [];
-var counter = 0;
-var maxDivs = 300;
-var bodyH, bodyW, words, lingo;
-
-changeWords();
-
-//initially load n amount of particles
-for(i = 0; i < maxDivs/3; i++) {
-	newLingo();
-}
-
-//add additional particles on a set interval with initial delay
-setTimeout(function(){
-	setInterval(newLingo, 25);
-}, 750);
-
-function newLingo() {
-	var buffer = 0; //as in margins
-
-    var e=document.getElementById("div");
-
-	bodyW = e.clientWidth;
-	bodyH = e.clientHeight;
-	
-	counter++;
-	lingo = getRandomValue(words);
-	
-	//convert less than symbol to HTML compliant
-	var lthan = "<";
-	var regi = new RegExp(lthan, 'g');
-	lingo = lingo.replace(regi, '&lt;');
-	
-	//dynamically add div
-	var div = document.createElement('div');
-	div.id = 'div' + counter;
-	div.classList.add('lingo');
-	div.style.left = getRandomInt(buffer, (bodyW - div.style.width) -buffer) + 'px';
-	div.style.top = getRandomInt(buffer, (bodyH - div.style.height)-buffer) + 'px';
-	div.innerHTML = lingo;
-	
-	//set CSS animation properties
-	div.style.setProperty('--init-x', div.style.left + 'px');
-	div.style.setProperty('--init-y', div.style.top + 'px');
-	var _destZ = getRandomInt(100,600);
-	
-	var quad = getQuandrantForElem(div);
-	if (quad === 1) {
-		div.style.setProperty('--dest-x', -50 + '%');
-		div.style.setProperty('--dest-y', -50 + '%');
-		div.style.setProperty('--dest-z', _destZ + 'px');
-	}
-	if (quad === 2) {
-		div.style.setProperty('--dest-x', 50 + '%');
-		div.style.setProperty('--dest-y', -50 + '%');
-		div.style.setProperty('--dest-z', _destZ + 'px');
-	}
-	if (quad === 3) {
-		div.style.setProperty('--dest-x', -50 + '%');
-		div.style.setProperty('--dest-y', 50 + '%');
-		div.style.setProperty('--dest-z', _destZ + 'px');
-	}
-	if (quad === 4) {
-		div.style.setProperty('--dest-x', 50 + '%');
-		div.style.setProperty('--dest-y', 50 + '%');
-		div.style.setProperty('--dest-z', _destZ + 'px');
-	}
-	
-	//add the div to the document and divs array
-	// document.body.appendChild(div);	
-    document.body.appendChild(div);
-	divs.push(div.id);
-	log('divs count: ' + divs.length);
-	log('width of word ' + lingo.length + ' width of div ' + div.clientWidth + ' height of div ' + div.clientHeight);
-	if (divs.length > maxDivs) {
-		//if the amount of divs is more than the max allowed specified above, delete the most recent first div applied to the document and divs array
-		log('removing element: ' + divs[0]);
-		var elem = document.getElementById(divs[0]);
-		elem.parentNode.removeChild(elem);
-		divs.shift();
-		log('shifted count: ' + divs.length + ' first Index: ' + divs[0]);
-	}
-}
-
-function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
-function getRandomValue(array) {
- return array[Math.floor(Math.random()*array.length)];
-}
-
-// This should be refined and improved for accuracy.
-function getQuandrantForElem(elem) {
-	var result = 0;
-	//the average width to word ratio is 8.75 (based on font-size). All elements (divs) have a height of 19
-	var divDim = {'X' : elem.style.left.slice(0,-2), 'Y' : elem.style.top.slice(0,-2)};
-	var buffer = 50;
-	
-	if (divDim.X >= (bodyW/2) - buffer) {
-		if (divDim.Y >= (bodyH/2)) {
-			result = 4;
-		}
-		if (divDim.Y <= (bodyH/2)) {
-			result = 2;
-		}
-	}
-	
-	if (divDim.X <= (bodyW/2) - buffer) {
-		if (divDim.Y >= (bodyH/2)) {
-			result = 3;
-		}
-		if (divDim.Y <= (bodyH/2)) {
-			result = 1;
-		}
-	}
-
-	return result;
-}
-
-function changeWords() {
-	var _index = document.getElementById("thisSelect").value;
-	switch (_index) {
-		case "0":
-			words = ['function()','Debug.Print()',"for(i=0;i<length;i++)",'var i', 'ASCII', 'Math.random()', 'abs()', 'block', 'bool', 'hasDedidcatedThread()', 'setup.exe', 'var me = new Person()', 'terminate()', 'abort()', 'acos()', 'asin()', 'ceil()', 'floor()', 'isalpha()', 'remove()', 'toupper()', 'modf()', '<html></html>', '$.ajax({})', 'int64', '$query', 'AI', 'crypt()','===', '!==', 'empty()', 'operators', 'threading()', 'session_start', '$_GET["paramater"]', '$POST["password"]', 'hypertext', "color: black;", "font-family: Consolas", 'array_push()', 'array.push', 'array_map()', 'array_diff()', 'base64_decode', 'bcmod', 'bcpow', 'CachingIterator::count', 'new Date()', 'session_encode', 'shuffle()', 'sin', 'sizeOf', 'socket_bind', 'socket_accept', 'socket_sendto', 'DateTime::setDate'];
-			break;
-		case "1":
-			words = ['0', '1'];
-			break;
-	}
-}
-
-function log(text) {
-	if (DEBUG_MODE === "TRUE") console.log(text);
-}
\ No newline at end of file
diff --git a/assets/js/scroll.js b/assets/js/scroll.js
index 850eb13..2ce9949 100644
--- a/assets/js/scroll.js
+++ b/assets/js/scroll.js
@@ -9,14 +9,7 @@ window.onscroll = function() {myFunction()};
         
       } else {
         navbar.classList.remove("sticky");
-
-        
-      }
-      var scroll = $(window).scrollTop();
-      if (scroll > 800) {
-        $("#featured-title").css("display" , "block");
-	  }
-      else{
-        $("#featured-title").css("display" , "none");
+       
       }
+      
     }
diff --git a/index.html b/index.html
index 79662b8..ff81ff2 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" class="no-js">
 
 <head>
     <meta charset="utf-8">
@@ -28,7 +28,30 @@
 
     <!-- FontAwesome -->
     <script src="https://kit.fontawesome.com/fad9328fa6.js" crossorigin="anonymous"></script>
-    
+    <!-- jQuery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   
+    <style>
+		/* This only works with JavaScript, 
+		   if it's not present, don't show loader */
+		.no-js #loader { display: none;  }
+		.js #loader { display: block; position: absolute; left: 100px; top: 0; }
+	</style>
+	
+	
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+	
+	
+	
+	<script>
+		jQuery(document).ready(function ($) {
+    $(window).load(function () {
+        setTimeout(function(){
+            $('.loader').fadeOut('slow', function () {
+            });
+        },3000); // set the time here
+    });  
+});
+	</script>	
 
     <!--[if lt IE 9]>
         <script src="javascript/html5shiv.js"></script>
@@ -38,7 +61,10 @@
 </head>
 
 <body class="header-fixed page no-sidebar header-style-2 topbar-style-2 menu-has-search">
-    
+    <!-- preload icon -->
+    <div class="loader"></div>
+  
+
     <div id="wrapper" class="animsition">
     <div id="page" class="clearfix">
         <!-- Header Wrap -->
@@ -78,18 +104,15 @@
                 </div>
             </div><!-- /#top-bar -->
 
-        <!-- Featured Title -->
-        <div  class="featured-title clearfix" id="div">
-            <div id="featured-title-inner" class="container clearfix">
-                <div class="featured-title-inner-wrap" >                    
-                    <select id="thisSelect" onchange="changeWords()">
-                        <option value="0" selected>Words</option>
-                        <option value="1" >Binary</option>
-                    <select>                      
-                </div>
-            </div><!-- /#featured-title-inner -->                       
-        </div><!-- End Featured Title -->
-
+        <!-- Hero landing -->
+        <div class="hero ">
+                <p class="fade-in" >IEEE COMPUTER SOCIETY 
+                    <span>SBC IDUKKI</span>
+                </p>
+            </div>
+            
+        </div>
+        
         <!-- Navbar Sticky -->
         <div id="featured-title" class="featured-title clearfix">
             <div id="featured-title-inner" class="container clearfix">
@@ -124,7 +147,7 @@ <h1 class="feautured-title-heading">
 
                             <div class="themesflat-content-box clearfix" data-margin="0 18px 0 0" data-mobilemargin="0 0 0 0">
                                 <div class="top-pad">
-                                    
+
                                 </div>
                                 <div class="themesflat-headings style-1 clearfix">
                                     <h2 class="heading"><span class="sspan">O</span>verview</h2>
@@ -150,8 +173,7 @@ <h2 class="post-title">
                                 <div class="post-content post-excerpt margin-bottom-43">
                                     <p class="line-height-27 letter-spacing-005">IEEE Computer Society is the leading provider of technical information, community services and personalized services to the world's computing and computer science professionals. IEEE Computer Society strives to be essential to the global technical community and computer professionals everywhere and be universally recognized for the contributions of technical professionals in researching, developing, and applying technology to improve global conditions.</p>
                                 </div>
-
-
+                             
 
                                <!-- ICONBOX -->
                                 <div class="row-iconbox">
@@ -276,7 +298,30 @@ <h5 class="heading"><a href="">Certification</a></h5>
                                 </div><!-- /.container -->
                                 </div>
                                 <!-- END ICONBOX -->
-
+                                     <!-- ABOUT -->
+                              <div class="row-about">
+                                <div class="container-fluid">
+                                    <div class="row equalize sm-equalize-auto">
+                                        <div class="col-md-6 half-background style-1">
+                                            
+                                        </div><!-- /.col-md-6 -->
+                                        <div class="col-md-6 bg-light-grey">
+                                            <div class="themesflat-spacer clearfix" data-desktop="64" data-mobile="60" data-smobile="60"></div>
+                                            <div class="themesflat-content-box clearfix" data-margin="0 25% 0 4.5%" data-mobilemargin="0 0 0 4.5%">
+                                                <div class="themesflat-headings style-1 clearfix">
+                                                    <h2 class="heading">About IEEE  CS SB GECI</h2>
+                                                    <div class="sep has-width w80 accent-bg margin-top-11 clearfix"></div>                                               
+                                                    <p class="sub-heading margin-top-30">IEEE Student Branch Government Engineering College Idukki, active since the first of December 2019, has opened a world of opportunities, to each and everyone who aspires to learn and evolve. Our main motive is to help students grow in a way that helps the entire community to develop alongside. The team spirit and cooperation that was shown towards us to date by our members, is responsible for the numerous milestones we have achieved so far.</p>
+                                                </div>
+                                                <div class="themesflat-spacer clearfix" data-desktop="26" data-mobile="35" data-smobile="35"></div>
+                                                
+                                            </div><!-- /.themesflat-content-box --> 
+                                            <div  id="whyieee" class="themesflat-spacer clearfix" data-desktop="75" data-mobile="60" data-smobile="60"></div>
+                                        </div><!-- /.col-md-6 -->
+                                    </div><!-- /.row -->
+                                </div><!-- /.container-fluid -->
+                            </div>
+                            <!-- END ABOUT --> 
                                 <!--UPCOMING EVNTS-->
                                 <div class="blog-home5 py-5">
                                     <div class="container">
@@ -355,7 +400,7 @@ <h5 class="card-title my-3 font-weight-normal">IEEE Xtreme Orientation</h5>
                                     </div>
                                   </div>
 
-                            
+                              
 
 
 
@@ -511,7 +556,7 @@ <h2 class="widget-title margin-bottom-30"><span>Contact</span></h2>
 
 <a id="scroll-top"></a>
 <!-- header Script -->
-<script src="assets/js/header.js" type="text/javascript"></script>
+
 <!-- Sticky navbar -->
 <script src="assets/js/scroll.js" type="text/javascript"></script>