diff --git a/css/style.css b/css/style.css
index e69de29b..46674892 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,83 @@
+body{
+ /* background-image: url('https://i1.wp.com/textureshot.com/wp-content/uploads/2018/11/Background-image-for-website-SF-Wallpaper.jpg?fit=1024%2C576&ssl=1');
+ background-size: 120%;
+ background-repeat: no-repeat;
+ background-attachment: fixed; */
+ font-family: Candara, Helvetica, sans-serif;
+ margin: 0;
+}
+
+.fromElem{
+ font-style: italic;
+ text-align: right;
+}
+
+.subjElem{
+ font-weight: bold;
+ text-align: right;
+}
+
+img{
+ width: 40px;
+}
+
+#mainHeader{
+ background: rgba(0, 0, 0, 0.678);
+ color: white;
+ font-size: 40px;
+ text-align: center;
+ margin: 0px 0px 15px;
+ padding: 10px;
+}
+
+.title{
+ background: transparent;
+}
+
+.dateElem{
+ font-size: 15px;
+ border: 1px solid black;
+ background: rgba(255, 255, 255, 0.849);
+ margin-left: auto;
+ margin-right: auto;
+ margin-block-end: 10px;
+ padding: 10px;
+ box-align: center;
+ text-align: left;
+ width: 650px;
+ height: auto;
+ box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.582);
+ transition-duration: 400ms;
+ border-radius: 5px;
+}
+
+#inboxCount{
+ background: white;
+ box-shadow: 4px 4px 4px rgb(0, 0, 0);
+ border: 1px solid black;
+ margin-left: auto;
+ margin-right: auto;
+ margin-block-end: 10px;
+ text-align: center;
+ padding: 8px;
+ width: 75px;
+ border-radius: 5px;
+}
+
+.dateElem:hover{
+ background: rgb(255, 255, 255);
+}
+
+#particles-js {
+ position: fixed;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ background-color: #2d7191;
+ background-image: url("");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 50% 50%;
+ }
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..27eb6708 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,164 @@
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
-
+
+ // LETS BUILD SOME ELEMENTS
+ function createElem(elem, label, inside){
+ var elemBox = document.createElement(elem);
+ elemBox.className = label;
+ elemBox.innerHTML = inside;
+
+ return elemBox;
+ }
+
+ // LIST THE FIRST 10 EMAILS AND BODIES
+ var list = [];
+
+ for(i=0; i<10; i++){
+
+ list.push(window.geemails[i]);
+
+ var dateBox = createElem('div', 'dateElem', list[i].date);
+ main.appendChild(dateBox);
+
+ var senderBox = createElem('div', 'fromElem', 'From: ' + list[i].sender);
+ dateBox.appendChild(senderBox);
+
+ var subjBox = createElem('div', 'subjElem', list[i].subject);
+ dateBox.appendChild(subjBox);
+
+ var bodyBox = createElem('p', 'bodyElem', list[i].body);
+ dateBox.appendChild(bodyBox);
+ bodyBox.style.display = 'none';
+
+ dateBox.addEventListener('click', showBody);
+ }
+
+ // CREATING NEW MESSAGES
+ function generate(){
+
+ var newMessage = getNewMessage();
+
+ // increase inbox number
+ counter++;
+ inboxCount.innerHTML = 'Inbox: ' + counter;
+
+ // so I can pull a random element from the list of emails
+ var randNum = Math.floor(Math.random()*list.length);
+
+ // repeated code from the original first 10 emails
+ list.push(window.geemails[randNum]);
+
+ var dateBox = createElem('div', 'dateElem', newMessage.date);
+ main.appendChild(dateBox);
+
+ var senderBox = createElem('div', 'fromElem', 'From: ' + newMessage.sender);
+ dateBox.appendChild(senderBox);
+
+ var subjBox = createElem('div', 'subjElem', newMessage.subject);
+ dateBox.appendChild(subjBox);
+
+ var bodyBox = createElem('p', 'bodyElem', newMessage.body);
+ bodyBox.style.display = 'none';
+ dateBox.appendChild(bodyBox);
+
+ dateBox.addEventListener('click', showBody);
+ }
+
+ // SHOW AND HIDE THE BODY
+ function showBody(){
+ var show = this.querySelector('.bodyElem');
+ if(show.style.display == 'block'){
+ show.style.display = 'none';
+ }else{
+ show.style.display = 'block';
+ }
+ }
+
+ // INBOX COUNTER
+ var counts = createElem('div', 'counter', 'Inbox: ' + list.length);
+ inboxCount.appendChild(counts);
+ var counter = 10;
+
+ // RECURRING MESSAGE GENERATOR
+ setInterval(generate, 10000);
+
+ // PARTICLES
+ particlesJS("particles-js", {
+ particles: {
+ number: { value: 80, density: { enable: true, value_area: 800 } },
+ color: { value: "#ffffff" },
+ shape: {
+ type: "circle",
+ stroke: { width: 0, color: "#000000" },
+ polygon: { nb_sides: 5 },
+ image: { src: "img/github.svg", width: 100, height: 100 }
+ },
+ opacity: {
+ value: 0.5,
+ random: false,
+ anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
+ },
+ size: {
+ value: 3,
+ random: true,
+ anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
+ },
+ line_linked: {
+ enable: true,
+ distance: 150,
+ color: "#ffffff",
+ opacity: 0.4,
+ width: 1
+ },
+ move: {
+ enable: true,
+ speed: 6,
+ direction: "none",
+ random: false,
+ straight: false,
+ out_mode: "out",
+ bounce: false,
+ attract: { enable: false, rotateX: 600, rotateY: 1200 }
+ }
+ },
+ interactivity: {
+ detect_on: "canvas",
+ events: {
+ onhover: { enable: true, mode: "repulse" },
+ onclick: { enable: true, mode: "push" },
+ resize: true
+ },
+ modes: {
+ grab: { distance: 400, line_linked: { opacity: 1 } },
+ bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
+ repulse: { distance: 200, duration: 0.4 },
+ push: { particles_nb: 4 },
+ remove: { particles_nb: 2 }
+ }
+ },
+ retina_detect: true
+});
+
};
+
+
+
+
+
+ 
+ GeeMail
+
+
+
- Build Me!
+
+
+
+