jorgefelipecunha · ArthurLuizS · Jun 30, 2022 · Jun 30, 2022
diff --git a/Images/fundo-sonic.png b/Images/fundo-sonic.png
diff --git a/Images/montada.png b/Images/montada.png
diff --git a/Images/sonic/TrVX.mp4 b/Images/sonic/TrVX.mp4
diff --git a/Images/sonic/eggman/doutor-eggman.gif b/Images/sonic/eggman/doutor-eggman.gif
diff --git a/Images/sonic/eggman/eggman-hehe.gif b/Images/sonic/eggman/eggman-hehe.gif
diff --git a/Images/sonic/eggman/eggman-running.gif b/Images/sonic/eggman/eggman-running.gif
diff --git a/Images/sonic/fundo.html b/Images/sonic/fundo.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html><html><head><style>body, html {
+  margin: 0;
+  background-color: #000;
+  font-size: 15px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+}
+
+.media-container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  max-width: 100%;
+}
+
+.link-left {
+  display: block;
+  color: #fff;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.link-right {
+  margin-top: 5px;
+  color: #06a0ea;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.media-url {
+  display: block;
+  position: relative;
+}
+
+.media-url__h-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width:100%;
+  height: 100%;
+  opacity: 0;
+  display: none;
+}
+
+.media-url__media {
+  width: 100vw;
+  max-height: calc(100vh - 60px);
+}
+
+@media only screen and (min-width: 768px) {
+  .media-url__media {
+    max-width: 100vw;
+    max-height: 70vh;
+    min-height: 550px;
+    width: auto;
+  }
+}
+
+.media-url:before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+  border: 1px solid rgba(255,255, 255, 0.1);
+}
+</style><meta name="viewport" content="width=device-width,initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic-ext" rel="stylesheet"><link rel="mask-icon" href="/GIFER.svg" color="#2fa0e7"><link rel="shortcut icon" href="https://gifer.b-cdn.net/icons/16x16.png"><link rel="icon" type="image/png" sizes="16x16" href="https://gifer.b-cdn.net/icons/16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="https://gifer.b-cdn.net/icons/32x32.png"><link rel="icon" type="image/png" sizes="48x48" href="https://gifer.b-cdn.net/icons/48x48.png"><link rel="icon" type="image/png" sizes="192x192" href="https://gifer.b-cdn.net/icons/192x192.png"><!-- google tag manager--><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-N5CMB25');</script><title>sonic the hedgehog GIF on GIFER</title><meta property="og:description" content=""><meta property="og:title" content="sonic the hedgehog GIF on GIFER"><meta property="og:site_name" content="GIFER"><meta name="description" content=""><meta name="twitter:site" content="@gifer"><meta name="twitter:domain" content="gifer.com"><meta name="twitter:title" content="sonic the hedgehog GIF on GIFER"><meta name="twitter:description" content=""><meta property="og:url" content="https://gifer.com/TrVX"><meta property="og:image" content="https://i.gifer.com/fetch/w300-preview/e6/e6072f2803207d5ab95e3fc4a30e539d.gif"><script>(function () {
+
+  function handleStart() {
+    var el = document.getElementsByClassName('media-url__h-image')[0];
+    el.setAttribute('src', el.getAttribute('data-src'));
+    el.style.display = 'inline';
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var el = document.getElementsByClassName('media-url')[0];
+    el.addEventListener('touchstart', handleStart, false);
+  });
+})();
+</script></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N5CMB25" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div class="media-container" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="representativeOfPage" content="true"><meta itemprop="name" content="sonic the hedgehog GIF on GIFER"><meta itemprop="caption" content="sonic the hedgehog GIF on GIFER"><meta itemprop="width" content="500"><meta itemprop="height" content="350"><div class="media-wrap"><a class="link-left" href="https://gifer.com/">GIFER</a><a class="media-url" itemprop="url" href="https://gifer.com/TrVX"><video class="media-url__media" loop autoplay muted playsinline width="100%"><source src="https://i.gifer.com/TrVX.mp4" itemprop="contentUrl" type="video/mp4"></video><img class="media-url__h-image" data-src="https://i.gifer.com/TrVX.gif"></a><a class="link-right" href="https://gifer.com/gifs/sonic the hedgehog">See all sonic the hedgehog GIFs<img style="height: 24px; margin-left: 5px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ItCh0LvQvtC5XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSI0LjQgLTAuNSA5LjYgMjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgNC40IC0wLjUgOS42IDI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6d2hpdGU7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTYuNSwyMC41bC0yLjEtMi4xTDkuOCwxM0w0LjQsNy43bDIuMS0yLjFMMTQsMTNMNi41LDIwLjV6Ii8+PC9zdmc+"></a></div></div></body></html>
diff --git a/Images/sonic/obstaculos/obstaculo.gif b/Images/sonic/obstaculos/obstaculo.gif
diff --git a/Images/sonic/obstaculos/obstaculo1.gif b/Images/sonic/obstaculos/obstaculo1.gif
diff --git a/Images/sonic/obstaculos/obstaculo4.gif b/Images/sonic/obstaculos/obstaculo4.gif
diff --git a/Images/sonic/obstaculos/obstaculo5.gif b/Images/sonic/obstaculos/obstaculo5.gif
diff --git a/Images/sonic/obstaculos/obstaculo6.gif b/Images/sonic/obstaculos/obstaculo6.gif
diff --git a/Images/sonic/obstaculos/obstaculo8.gif b/Images/sonic/obstaculos/obstaculo8.gif
diff --git a/Images/sonic/obstaculos/pixel-knuckles.jpg b/Images/sonic/obstaculos/pixel-knuckles.jpg
diff --git a/Images/sonic/obstaculos/porco-espinho.gif b/Images/sonic/obstaculos/porco-espinho.gif
diff --git a/Images/sonic/recompensas/esmeraldas.gif b/Images/sonic/recompensas/esmeraldas.gif
diff --git a/Images/sonic/recompensas/sonic-anel.gif b/Images/sonic/recompensas/sonic-anel.gif
diff --git a/Images/sonic/sonic/sonic-game-over.gif b/Images/sonic/sonic/sonic-game-over.gif
diff --git a/Images/sonic/sonic/sonic-over.gif b/Images/sonic/sonic/sonic-over.gif
diff --git a/Images/sonic/sonic/sonic-running.gif b/Images/sonic/sonic/sonic-running.gif
diff --git a/Images/sonic/sonic/sonic-running1.gif b/Images/sonic/sonic/sonic-running1.gif
diff --git a/Images/sonic/sonic/sonic-speed.gif b/Images/sonic/sonic/sonic-speed.gif
diff --git a/Images/sonic/sonic/sonic-transformation.gif b/Images/sonic/sonic/sonic-transformation.gif
diff --git a/Images/sonic/sonic/sonic-wait.gif b/Images/sonic/sonic/sonic-wait.gif
diff --git a/Images/sonic/tails/sonic-fox.gif b/Images/sonic/tails/sonic-fox.gif
diff --git a/Images/sonic/tails/sonic-mania-tails-the-fox (1).gif b/Images/sonic/tails/sonic-mania-tails-the-fox (1).gif
diff --git a/Images/sonic/tails/tails-fasted.gif b/Images/sonic/tails/tails-fasted.gif
diff --git a/Images/sonic/tails/tails-over.gif b/Images/sonic/tails/tails-over.gif
diff --git a/Images/sonic/tails/tails-running.gif b/Images/sonic/tails/tails-running.gif
diff --git a/Images/sonic/tails/tails-sonic-helper.gif b/Images/sonic/tails/tails-sonic-helper.gif
diff --git a/Images/sonic/tails/tails-transform.gif b/Images/sonic/tails/tails-transform.gif
diff --git a/css/style.css b/css/style.css
@@ -1,34 +1,222 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital@1&display=swap');
+
 *{
-    margin:0;
+    margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
+footer{
+    border: 1px solid lightcyan;
+   border-radius: 20px;
+}
+
+
+#container{
+    font-family: Space;
+    background-color: red;
+    border: 1px solid red;
+    height: 100vh;
+   position: relative;
+   margin: 0 auto;
+   display: flex;
+   overflow: hidden;
+
+
+}
+#montada{
+    width: 100%;
+}
+
+#start{
+    display: inline-block;
+    align-items: center;
+    background-color: transparent;
+    backdrop-filter: blur(5px);
+    justify-content: center;
+    flex-grow: column;
+    border: 1px dashed lightcyan;
+    width: 500px;
+    height: 300px;
+    z-index: 10;
+    position: absolute;
+    bottom: 25vh;
+    left: 30%;
+
+}
+#menu{
+    display: flex;
+    font-size: 30px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: end;
+
+    height: 55%;
+    flex: 2;
+    text-shadow: 1px 1px cyan;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+}
+#botao{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45%;
+    flex-direction: column;
+}
+#play{
+    height: 100%;
+    font-size: 50px;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    background-color: transparent;
+    border: hidden;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+}
+#play:hover span{
+    cursor: pointer;
+    background-color: cyan;
+    opacity: .6;
+}
+
+#contador{
+
+    position: absolute;
+    right: 20px;
+    margin-top: 30px;
+
+    background-color: lightblue;
+    opacity: .8;
+
 
-.game {
+}
+.Pontuacao{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 200px;
+    height: 60px;
+    padding: 10px;
+    border-radius: 50px 50px 20px 20px;
+    z-index: 2;
+}
+.pipe-game {
+    position: absolute;
+    bottom: 0;
+    width: 100px;
+    height: 90px;
+    animation: eggmanRobot-animation 2.5s infinite linear;
+}
+#anel{
+    position: absolute;
+    bottom: 120px;
+    width: 100px;
+    height: 100px;
+    animation: pipe-animation 15s infinite linear;
+}
+#back{
+    background-color: rgb(110, 156, 255);
+
+    height: 50% ;
+    width: 100%;
+    position: absolute;
+    margin-top: 30px;
+    margin-bottom:30% ;
+    flex: 2;
+
+
+
+}
+#img1 {
+    position: center;
+    height: 100vh;
+
     width: 100%;
+    position: absolute;
+    margin-bottom:50% ;
+  /*  animation: clouds-animation 4s infinite linear; */
+    animation-delay: 0s;
+    background-repeat: repeat-x;
+    animation: clouds-animation 10s infinite linear;
+    z-index: 1;
+
+}
+
+#img2{
+    position: center;
+    height: 100vh;
+
+    width: 100%;
+    position: absolute;
+    margin-bottom:50% ;
+    animation: clouds-animation-2 10s infinite linear;
+    animation-delay: -5s;
+    background-repeat: repeat-x;
+    z-index: 0;
+}
+#parado{
     height: 100vh;
-    border-bottom: 100px solid rgb(24,174,24);
-    margin: 0 auto;
     position: relative;
+    margin: 0 auto;
+    display: flex;
     overflow: hidden;
-    background: linear-gradient(#87CEEB, #E0F6FF);
 }
-
-.pipe-game {
+.game{
+    background-color: white transparent; 
+
+    position: absolute;
+    height: 50%;
+    width: 100%;
+    bottom: 18vh;
+    flex: 2;
+    z-index: 2;
+}
+/*daqui pra baixo refatorar*/
+.sonic{
+    width:100px;
+    position: absolute;
+    bottom: 0;
+    margin-left: 70px;
+    animation: sonic-jump;
+}
+.sonic-2{
+    width:100px;
     position: absolute;
     bottom: 0;
-    width: 80px;
-    animation: pipe-animation 1.5s infinite linear;
+    margin-left: 170px;
+    animation: sonic-jump;
+}
+.sonic-transformation{
+    width:100px;
+    height: 100px;
+    position: absolute;
+    bottom: 180px;
 }
 
-.super-mario{
-    width:150px;
+.tails{
+    width: 90px;
+    margin-left:  -30px;
     position: absolute;
+    bottom: 250px;
+}
+.eggman{
+    width: 200px;
+    margin-top: 100px;
+    float: right;
+    position: static;
+    margin-right: 40px;
+
+}
+.eggmanHehe{
+    position: absolute;
+    width: 200px;
+    margin-left: 200px;
     bottom: 0;
 }
 
-.jump-mario {
-    animation: mario-animation 500ms ease-out;
+.jump-sonic {
+    animation: sonic-animation 500ms ease-out;
 }
 
 .cloud-game{
@@ -37,6 +225,22 @@
     animation: clouds-animation 20s infinite linear;
 }
 
+@keyframes clouds-animation {
+    from{
+        right: -100%;
+    }
+    to{
+        right:  100%;
+    }
+}
+@keyframes clouds-animation-2 {
+    from{
+        right: -100%;
+    }
+    to{
+        right:  100%;
+    }
+}
 @keyframes pipe-animation {
     from {
         right: -80px;
@@ -45,17 +249,15 @@
         right: 100%;
     }
 }
-
-@keyframes clouds-animation {
-    from{
-        right: -550px;
+@keyframes eggmanRobot-animation {
+    from {
+        right: 10px;
     }
     to{
-        right:  100%;
+        right: 100% ;
     }
 }
-
-@keyframes mario-animation{
+@keyframes sonic-animation{
     0% {
         bottom:0;
     }