juliancruzsanchez · February 18, 2018 05:50 · Feb 18, 2018 · Feb 16, 2018 · Feb 16, 2018 · Feb 16, 2018
diff --git a/earth-presentation.markdown b/earth-presentation.markdown
@@ -1,4 +1,7 @@
 Earth Presentation
 ------------------
 
-A fun little earth presentation, thing.
+
+A [Pen](https://codepen.io/juliancruzsanchez/pen/paWdOW) by [Julian Cruz Sanchez](https://codepen.io/juliancruzsanchez) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/juliancruzsanchez/pen/paWdOW/license).
diff --git a/script.js b/script.js
@@ -1,16 +1,21 @@
+planets = [
+	{
+		'name': 'Mars',
+        "mass":"11",
+    "id":"mars"
+
+	},
+	{
+		'name': 'Earth',
+    "mass":"11"
+	}
+]
+var desc = document.getElementById("planet-info");
+var name = document.getElementById("title");
 function myFunction() {
-  var earth = document.getElementById("earth");
-  var mars = document.getElementById("mars");
+  name.innerHTML = planets[1].name;
+    desc.innerHTML = planets[1].mass;
 
-  var x = document.getElementById("title");
-  if (x.innerHTML === "Earth") {
-    x.innerHTML = "Mars";
-    mars.style.display = "block";
-
-    earth.style.display = "none";
-  } else {
-    x.innerHTML = "Earth";
-    earth.style.display = "block";
-    mars.style.display = "none";
-  }
-}
+    planets[1].id.style.display = "block";
+    mars.id.style.display = "none";
+  }
diff --git a/earth-presentation.markdown b/earth-presentation.markdown
@@ -1,7 +1,4 @@
 Earth Presentation
 ------------------
 
-
-A [Pen](https://codepen.io/juliancruzsanchez/pen/paWdOW) by [Julian Cruz Sanchez](https://codepen.io/juliancruzsanchez) on [CodePen](https://codepen.io).
-
-[License](https://codepen.io/juliancruzsanchez/pen/paWdOW/license).
+A fun little earth presentation, thing.
diff --git a/earth-presentation.markdown b/earth-presentation.markdown
@@ -0,0 +1,7 @@
+Earth Presentation
+------------------
+
+
+A [Pen](https://codepen.io/juliancruzsanchez/pen/paWdOW) by [Julian Cruz Sanchez](https://codepen.io/juliancruzsanchez) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/juliancruzsanchez/pen/paWdOW/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<body>
+  <div class="split left">
+    <div id="mars" class="centered">
+      <div class="intro"><img src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2015/564382d629067.png" height=120px width=120px/></div>
+    </div>
+
+    <!-- This is earth -->
+    <div class="centered" id="earth">
+      <div class="intro">
+        <div id="world"></div>
+      </div>
+    </div>
+  </div>
+  <div class="split right">
+    <center>
+      <p class="text switch" onclick="myFunction()">Change Planet</p>
+    </center>
+    <div class="centered text">
+      <h1 id="title" class="planet-title">Earth</h1>
+      <p class="planet-info"></p>
+    </div>
+  </div>
+</body>
diff --git a/script.js b/script.js
@@ -0,0 +1,16 @@
+function myFunction() {
+  var earth = document.getElementById("earth");
+  var mars = document.getElementById("mars");
+
+  var x = document.getElementById("title");
+  if (x.innerHTML === "Earth") {
+    x.innerHTML = "Mars";
+    mars.style.display = "block";
+
+    earth.style.display = "none";
+  } else {
+    x.innerHTML = "Earth";
+    earth.style.display = "block";
+    mars.style.display = "none";
+  }
+}
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,296 @@
+@import "compass/css3";
+body {
+  padding: 0;
+  margin: 0;
+}
+.mars {
+  &:before {
+    @include box-shadow(inset -30px 0 0 -10px rgba(0, 0, 0, 0.3));
+    @include border-radius(50%);
+
+    content: " ";
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background: transparent;
+
+    z-index: 50;
+  }
+
+  &:after {
+    @include border-radius(6px);
+    @include animation(the-awesome-animation 14s linear 0s infinite);
+
+    content: " ";
+    position: absolute;
+
+    top: 0px;
+    left: 0px;
+
+    width: 18px;
+    height: 12px;
+
+    background: none;
+    z-index: 10;
+  }
+}
+
+.split {
+  height: 100%;
+  width: 50%;
+  position: fixed;
+  z-index: 1;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+button {
+  background-color: none;
+}
+.text {
+  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+}
+
+.top {
+  opacity: 0.7;
+}
+
+.planet-title span {
+  display: none;
+}
+
+/* Control the left side */
+.left {
+  left: 0;
+  background-color: #06121e;
+}
+
+/* Control the right side */
+.right {
+  right: 0;
+  background: #f7f8f7;
+}
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+p {
+  display: block;
+  overflow-wrap: break-word;
+}
+
+.intro {
+  position: relative;
+  display: inline-block;
+  font-size: 0;
+
+  width: 120px;
+  height: 120px;
+
+  &:before {
+    @include border-radius(50%);
+    @include animation(intro-animation 0.75s cubic-bezier(0.3, 1.8, 0.7, 1) normal forwards);
+
+    content: " ";
+    position: absolute;
+
+    top: -48px;
+    left: -48px;
+
+    width: 200px;
+    height: 200px;
+
+    border: solid 8px #f9f9f9;
+  }
+}
+
+#world {
+  @include transform(translateZ(0));
+  @include border-radius(50%);
+
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  width: 120px;
+  height: 120px;
+
+  background: #2f7db4;
+
+  &:before {
+    @include box-shadow(inset -30px 0 0 -10px rgba(0, 0, 0, 0.3));
+    @include border-radius(50%);
+
+    content: " ";
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background: transparent;
+
+    z-index: 50;
+  }
+
+  &:after {
+    @include border-radius(6px);
+    @include animation(the-awesome-animation 14s linear 0s infinite);
+
+    content: " ";
+    position: absolute;
+
+    top: 0px;
+    left: 0px;
+
+    width: 18px;
+    height: 12px;
+
+    background: none;
+    z-index: 10;
+  }
+}
+
+@include keyframes(the-awesome-animation) {
+  0% {
+    @include box-shadow((
+
+      -253px 16px 0 0 rgba(white, 0.8), 
+      -213px 41px 0 1px rgba(white, 0.8), 
+      -191px -1px 0 0 rgba(white, 0.8), 
+      -160px 59px 0 -2px rgba(white, 0.8), 
+      -226px 83px 0 3px rgba(white, 0.8), 
+      -109px 32px 0 0 rgba(white, 0.8), 
+      -90px 89px 0 1px rgba(white, 0.8), 
+      -160px 110px 0 -2px rgba(white, 0.8), 
+
+      -53px 16px 0 0 rgba(white, 0.8), 
+      -13px 41px 0 1px rgba(white, 0.8), 
+      9px -1px 0 0 rgba(white, 0.8), 
+      40px 59px 0 -2px rgba(white, 0.8), 
+      -26px 83px 0 3px rgba(white, 0.8), 
+      91px 32px 0 0 rgba(white, 0.8), 
+      110px 89px 0 1px rgba(white, 0.8), 
+      40px 110px 0 -2px rgba(white, 0.8), 
+
+
+
+      0 10px 0 3px #81c763, 
+      6px 10px 0 3px #81c763,  
+      3px 20px 0 -4px #81c763,  
+      3px 24px 0 -2px #81c763,  
+      9px 24px 0 -2px #81c763,
+
+      -20px 50px 0 -2px #81c763, 
+      30px 78px 0 2px #81c763, 
+      74px 108px 0 -2px #81c763,
+      60px 32px 0 -3px #81c763, 
+      85px 69px 0 0 #81c763, 
+      100px 0 0 0 #81c763, 
+
+      140px 42px 0 0 #81c763, 
+      143px 32px 0 -4px #81c763,
+
+      220px 10px 0 3px #81c763, 
+      226px 10px 0 3px #81c763,  
+      223px 20px 0 -4px #81c763,  
+      223px 24px 0 -2px #81c763,  
+      229px 24px 0 -2px #81c763,
+
+      200px 50px 0 -2px #81c763, 
+      250px 78px 0 2px #81c763, 
+      294px 108px 0 -2px #81c763,
+      280px 32px 0 -3px #81c763, 
+      305px 69px 0 0 #81c763, 
+      300px 0 0 0 #81c763, 
+
+      360px 42px 0 0 #81c763, 
+      363px 32px 0 -4px #81c763  
+    ));
+  }
+
+  100% {
+    @include box-shadow((
+
+      -53px 16px 0 0 rgba(white, 0.8), 
+      -13px 41px 0 1px rgba(white, 0.8), 
+      9px -1px 0 0 rgba(white, 0.8), 
+      40px 59px 0 -2px rgba(white, 0.8), 
+      -26px 83px 0 3px rgba(white, 0.8), 
+      91px 32px 0 0 rgba(white, 0.8), 
+      110px 89px 0 1px rgba(white, 0.8), 
+      40px 110px 0 -2px rgba(white, 0.8), 
+
+      147px 16px 0 0 rgba(white, 0.8), 
+      187px 41px 0 1px rgba(white, 0.8), 
+      209px -1px 0 0 rgba(white, 0.8), 
+      240px 59px 0 -2px rgba(white, 0.8), 
+      174px 83px 0 3px rgba(white, 0.8), 
+      291px 32px 0 0 rgba(white, 0.8), 
+      310px 89px 0 1px rgba(white, 0.8), 
+      240px 110px 0 -2px rgba(white, 0.8), 
+
+
+
+      -220px 10px 0 3px #81c763, 
+      -214px 10px 0 3px #81c763,  
+      -217px 20px 0 -4px #81c763,  
+      -217px 24px 0 -2px #81c763,  
+      -211px 24px 0 -2px #81c763,
+
+      -240px 50px 0 -2px #81c763, 
+      -190px 78px 0 2px #81c763, 
+      -146px 108px 0 -2px #81c763,
+      -160px 32px 0 -3px #81c763, 
+      -135px 69px 0 0 #81c763, 
+      -120px 0 0 0 #81c763, 
+
+      -80px 42px 0 0 #81c763, 
+      -77px 32px 0 -4px #81c763,
+
+      0 10px 0 3px #81c763, 
+      6px 10px 0 3px #81c763,  
+      3px 20px 0 -4px #81c763,  
+      3px 24px 0 -2px #81c763,  
+      9px 24px 0 -2px #81c763,
+
+      -20px 50px 0 -2px #81c763, 
+      30px 78px 0 2px #81c763, 
+      74px 108px 0 -2px #81c763,
+      60px 32px 0 -3px #81c763, 
+      85px 69px 0 0 #81c763, 
+      100px 0 0 0 #81c763, 
+
+      140px 42px 0 0 #81c763, 
+      143px 32px 0 -4px #81c763
+    ));
+  }
+}
+
+@include keyframes(intro-animation) {
+  0% {
+    @include scale(0);
+  }
+
+  100% {
+    @include scale(1);
+    transform: translatey(0px);
+  }
+  50% {
+    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
+    transform: translatey(-20px);
+  }
+  100% {
+    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
+    transform: translatey(0px);
+  }
+}
diff --git a/styles b/styles
@@ -0,0 +1,2 @@
+<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
+<link href="https://raw.github.com/daneden/animate.css/master/animate.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
		<link href="https://raw.github.com/daneden/animate.css/master/animate.css" rel="stylesheet" />