diff --git a/css/style.css b/css/style.css
index e69de29b..14817597 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,67 @@
+body{
+background-color: teal;
+color: whitesmoke;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+text-align: center;
+margin-top: 30px;
+margin-bottom: 100px;
+margin-right: 100px;
+margin-left: 100px;
+background-image: url(https://media.giphy.com/media/xTsn2dbnc5dfO/giphy.gif)
+
+}
+
+
+
+.dates {
+    
+    color: whitesmoke;
+    border: 1px dotted white;
+    margin: 2px;
+    padding: 70px;
+    border-radius: 50px;
+    box-shadow: 8px 8px greenyellow;
+    background-image: url(https://data.whicdn.com/images/247143683/original.gif);
+    margin-top: 50px
+    
+    
+  }
+
+  
+  
+  .dates:hover{
+    background-color: black;
+    color: greenyellow;
+    box-shadow: 3px 3px aqua;
+    font-size: 30px
+    
+    
+  
+    
+  }
+  
+
+
+  .whosend{
+  color: aqua;
+  
+
+  }
+
+.bod{
+color: pink;
+display: none; 
+transition: 1s;
+
+}
+
+  .Subs{
+    margin-bottom: 5px;
+    color: purple;
+  }
+
+  .inboxCounter{
+    text-align: left;
+
+  }
+
diff --git a/index.html b/index.html
index a8a1aad9..725add72 100644
--- a/index.html
+++ b/index.html
@@ -4,15 +4,190 @@
 		<link href="css/style.css" rel="stylesheet" media="screen">
     <script>
       window.onload = function(){
-        // ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE. 
-        // We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
-        
-      };
-    </script>
+		  
+        //window.onclick = myFunction;
+        //document.getElementsByTagName('dates')[0];
+			    // console.log (geemails.length);
+                //getting first 10 messages//			
+
+
+
+				for( i=0; i < geemails.length; i++){
+				 // 1
+				 var emailBox = document.createElement('div');
+				 emailBox.className = "emails";
+				 //emailBox.addEventListener('click', showBody);
+				 
+				 main.appendChild(emailBox);
+
+
+				 var dateBox = document.createElement('div');
+				 dateBox.className = "dates";
+				 dateBox.innerHTML = geemails[i].date;
+				 //Box.addEventListener('click',subs);
+				 emailBox.appendChild(dateBox);
+
+							 
+				 var subjectBox = document.createElement('div');
+                 subjectBox.className = "Subs";
+                 subjectBox.innerHTML = geemails[i].subject;
+				 //subjectBox.addEventListener('click',subs);
+                 dateBox.appendChild(subjectBox);
+
+
+                 var senderBox = document.createElement('div');
+                 senderBox.className = "whosend";
+                 senderBox.innerHTML = geemails[i].sender;
+				 subjectBox.appendChild(senderBox);
+
+               
+                 var bodyBox = document.createElement('div');
+                 bodyBox.className = "bod";
+                 bodyBox.innerHTML = geemails[i].body;
+				 //bodyBox.addEventListener('click', showBody);
+				 senderBox.appendChild(bodyBox);
+				}
+
+				// 2
+
+				var superClickBox = document.getElementsByClassName("emails");
+
+				for (var i =0; i<superClickBox.length; i++){
+					superClickBox[i].addEventListener('click', showNewBod);
+		     	//console.log(window.geemails[i]); 
+				}
+					function showNewBod(){
+						var bodChild = this.querySelectorAll('.bod')[0];
+						if (bodChild.style.display === 'block'){
+						bodChild.style.display = 'none';
+						}else{
+						bodChild.style.display = 'block';
+						}
+							}
+					// 3
+					var allEmails = geemails.length;
+					var emailCount =  document.createElement('div');
+						emailCount.id = "countCalculator";	
+						emailCount.innerHTML = allEmails;
+						inboxCounter.appendChild(emailCount);
+
+			
+					
+
+				//setInterval(getNewMessage, 1000);
+				//var testNewMessages = getNewMessage();
+	
+					
+			  
+			  	// email counter //
+
+							function wtf(){
+								var wtf2 = getNewMessage();
+	  			
+					 var newEmailBox = document.createElement('div');
+				     newEmailBox.className = "emails";
+				     main.appendChild(newEmailBox);
+
+
+					 var newDateBox = document.createElement('div');
+					 newDateBox.className = "dates";
+					 newDateBox.innerHTML = "date:"+ wtf2.date; 
+					 newEmailBox.appendChild(newDateBox);
+
+					 var newSubjectBox = document.createElement('div');
+					 newSubjectBox.className = "subs";
+					 newSubjectBox.innerHTML = "Subject:"+ wtf2.subject;
+					 newDateBox.appendChild(newSubjectBox); 
+
+					 var newSenderBox = document.createElement('div');
+					 newSenderBox.className = "whoSend";
+					 newSenderBox.innerHTML = "Sender:" + wtf2.sender;
+					 newSubjectBox.appendChild(newSenderBox);
+
+					 var newBodyBox = document.createElement('div');
+					 newBodyBox.className = "bod";
+					 newBodyBox.innerHTML = "body:" + wtf2.body;
+					 newSenderBox.appendChild(newBodyBox);
+
+
+					 //emailCount.innerHTML = ++allEmails;
+
+					newEmailBox.addEventListener('click', showNewBod);
+					function showNewBod(){
+
+						var bodChild = this.querySelectorAll('.bod')[0];
+						if (bodChild.style.display === 'block'){
+						bodChild.style.display = 'none';
+						}else{
+						bodChild.style.display = 'block';
+						}
+							}
+							emailCount.innerHTML = ++allEmails;
+
+
+							}
+
+					//  var openBody = document.getElementsByClassName('emails');
+
+					//  for(i=0; openBody.length; i++){
+					// 	 //openBody[i].addEventListener('click', showBody);
+
+					//  }
+            			
+					 
+
+					 //var genInbox = document.getElementById('inboxCounter');
+
+					// genBox.innerHTML = 'inboxCounter:'+ geemails.length++
+					 //console.log(genDateBox);	
+	
+
+			    	// var allEamils = geemails.length;
+					// var emailCount =  document.createElement('div');
+					// emailCount.className = "countCalculator";	
+					// emailCount.innerHTML = allEamils;
+					// inboxCounter.appendChild(emailCount);
+
+					//emailCount.innerHTML = ++allEmails;
+					// }
+					setInterval(wtf,3000);
+					//console.log(windows.geemails);
+
+
+					};
+
+
+
+
+
+	</script>
 	</head>
+
+
+	
 	<body>
-		<div class="container" id="main">
-			Build Me!
+		
+			
+		<img src="https://thumbs.gfycat.com/UnhealthyLargeChital-size_restricted.gif" width="15%" alt="neon" id="icon">
+		<header id= "top"><h1>GEE-MAILS-DESU</h1>
+		</header>
+	
+      </div>
+
+
+		
+
+		<div id="main">
+			
+			
+		<div id="inboxCounter">INBOX-DESU
+		
+		</div>	
+			
+		
+
+
+
 		</div>
 	</body>
 </html>
\ No newline at end of file