diff --git a/CSS Platzi GAme b/CSS Platzi GAme new file mode 100644 index 0000000..d2b7488 --- /dev/null +++ b/CSS Platzi GAme @@ -0,0 +1,161 @@ +# challenge-prework-frontend +馃幃 Platzi Game css + +body { + margin: 0; + padding-left: 0; + border: 0; + background: #E5E5E5 +} + +.ellipse { + width: 10px; + width: 60px; + height: 36px; + left: -230px; + top: 933px; + font-size: 24px; + line-height: 36px +} + +h1{ + display: block; + position: absolute; + width: 368px; + height: 90px; + left: 536px; + top: 103px; + font-family:Poppins; + font-style: normal; + font-size: 60px; + line-height: 90px; + + +} +.container{ + text-align: center; + width: 0px; + height: 0px; + left: 0px; + top: 0px; +} + +.player{ + position: center;; +} + +#first-player{ + position: absolute; + width: 467px; + height: 582px; + left: 182px; + top: 269px; + background: #43D8C9; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + + +.player__card--title{ + text-align: center; + height: 54px; + left: 346px; + top: 308px; + font-size: 36px; + line-height: 54px; + color: #FFFFFF; +} + +.player_info-action{ + width: 215px; + height: 50px; + left: 231px; + top: 465px; + background: #1A46E5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 30px; +} + +.player_info-acction_life{ + width: 108px; + height: 44px; + left: 234px; + top: 468px; + background: #ff89bb; + border-radius: 30px 0px 0px 30px ; +} + +.player_info-acction_life_percentage span{ + width: 66px; + height: 45px; + left: 313px; + top: 420px; + font-size: 30px; + line-height: 45px; + color: #F7f7f7; +} + +.player_info-action_life_rect{ + width: 370px; + height: 231px; + left: 231px; + top: 572px; + background: #ffffff; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + +.player__info-action__play{ + position: absolute; + width: 120px; + height: 120px; + left: 481px; + top: 407px; + background:#1A46E5 ; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 100px; +} + +.playeer_info-action_play--text{ + width: 81px; + height: 54px; + left: 502px; + top: 440px; + font-family:Poppins; + font-style: normal; + font-weight: bold; + font-size: 36px; + line-height: 54px; +} + +.player_image{ + position: relative; + width: 2090px; + height: 17700px; + left: 520px; + top: 599px; +} + +#second-player{ + position: absolute; + width: 467px; + height: 582px; + left: 791px; + top: 269px; + background: #FFBD11; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + +footer { + bottom: 0; +} + +#container-footer-all{ + align-items: flex-end; +} diff --git a/Platzi Game/css/Ellipse 27.png b/Platzi Game/css/Ellipse 27.png new file mode 100644 index 0000000..2701b23 Binary files /dev/null and b/Platzi Game/css/Ellipse 27.png differ diff --git a/Platzi Game/css/Player1.png b/Platzi Game/css/Player1.png new file mode 100644 index 0000000..73eed3b Binary files /dev/null and b/Platzi Game/css/Player1.png differ diff --git a/Platzi Game/css/Player2.png b/Platzi Game/css/Player2.png new file mode 100644 index 0000000..60b1fd3 Binary files /dev/null and b/Platzi Game/css/Player2.png differ diff --git a/Platzi Game/css/github .png b/Platzi Game/css/github .png new file mode 100644 index 0000000..9232a90 Binary files /dev/null and b/Platzi Game/css/github .png differ diff --git a/Platzi Game/css/instagram.png b/Platzi Game/css/instagram.png new file mode 100644 index 0000000..49928ce Binary files /dev/null and b/Platzi Game/css/instagram.png differ diff --git a/Platzi Game/css/mainPlay.css b/Platzi Game/css/mainPlay.css new file mode 100644 index 0000000..bd5aa86 --- /dev/null +++ b/Platzi Game/css/mainPlay.css @@ -0,0 +1,161 @@ +body { + margin: 0; + padding-left: 0; + border: 0; + background: #E5E5E5 +} + +.ellipse { + width: 10px; + width: 60px; + height: 36px; + left: -230px; + top: 933px; + font-size: 24px; + line-height: 36px +} + +h1{ + display: block; + position: absolute; + width: 368px; + height: 90px; + left: 536px; + top: 103px; + font-family:Poppins; + font-style: normal; + font-size: 60px; + line-height: 90px; + + +} +.container{ + text-align: center; + width: 0px; + height: 0px; + left: 0px; + top: 0px; +} + +.player{ + position: center;; +} + +#first-player{ + position: absolute; + width: 467px; + height: 582px; + left: 182px; + top: 269px; + background: #43D8C9; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + + +.player__card--title{ + text-align: center; + height: 54px; + left: 346px; + top: 308px; + font-size: 36px; + line-height: 54px; + color: #FFFFFF; +} + +.player_info-action{ + width: 215px; + height: 50px; + left: 231px; + top: 465px; + background: #1A46E5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 30px; +} + +.player_info-acction_life{ + width: 108px; + height: 44px; + left: 234px; + top: 468px; + background: #ff89bb; + border-radius: 30px 0px 0px 30px ; +} + +.player_info-acction_life_percentage span{ + width: 66px; + height: 45px; + left: 313px; + top: 420px; + font-size: 30px; + line-height: 45px; + color: #F7f7f7; +} + +.player_info-action_life_rect{ + width: 370px; + height: 231px; + left: 231px; + top: 572px; + background: #ffffff; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + +.player__info-action__play{ + position: absolute; + width: 120px; + height: 120px; + left: 481px; + top: 407px; + background:#1A46E5 ; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 100px; +} + +.playeer_info-action_play--text{ + width: 81px; + height: 54px; + left: 502px; + top: 440px; + font-family:Poppins; + font-style: normal; + font-weight: bold; + font-size: 36px; + line-height: 54px; +} + +.player_image{ + position: relative; + width: 2090px; + height: 17700px; + left: 520px; + top: 599px; +} + +#second-player{ + position: absolute; + width: 467px; + height: 582px; + left: 791px; + top: 269px; + background: #FFBD11; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + +footer { + text-align: right; + position: absolute; + bottom: 0; +} + +#container-footer-all{ + +} + diff --git a/Platzi Game/css/twitter.png b/Platzi Game/css/twitter.png new file mode 100644 index 0000000..41e2968 Binary files /dev/null and b/Platzi Game/css/twitter.png differ diff --git a/Platzi Game/indexPlay.html b/Platzi Game/indexPlay.html new file mode 100644 index 0000000..16178b9 --- /dev/null +++ b/Platzi Game/indexPlay.html @@ -0,0 +1,72 @@ + + + + + + Platzi Game + + + +
+ stylesheet +
+
+

Platzi Game

+
+
+
+
+

Player 1

+
+
+
+ 100% +
+
+

Play

+
+
+
+
stylesheet
+
+
+
+
+
+
+

Player 2

+
+
+
+ 100% +
+
+

Play

+
+
+
stylesheet
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 03623b7..0000000 --- a/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# 馃幃 Challenge Frontend 01 - -Platzi Game - -## 馃幃 Contenido - -1. [Descripci贸n](#1-descripci贸n) -2. [Mockups](#2-mockups) -3. [Requerimientos](#3-requerimientos) -4. [Tecnolog铆as](#4-tecnolog铆as) -5. [Recursos](#5-recursos) -6. [Pasos a seguir](#6-pasos-a-seguir) -7. [Licencia](#7-licencia) - -## 1. Descripci贸n - -Platzi Game es un juego en el que compiten 2 personajes. Cada personaje comienza el juego con una vida del `100%` pero la ir谩 perdiendo cada que su oponente presione el bot贸n `Play`, ya que este bot贸n resta la vida del oponente de forma aleatoria. Una vez la vida de uno de los jugadores llega a `0%` se abrir谩 un modal que mostrar谩 un gif, el nombre del ganador y un bot贸n para volver a comenzar el juego. - -**Consideraciones:** - -* El bot贸n `Play` inicialmente estar谩 deshabilitado para el jugador 2 y habilitado para el jugador 1 (qui茅n comenenzar谩 a jugar siempre). -* Una vez el jugador 1 presione el bot贸n `Play`, este se debe deshabilitar y habilitarse el bot贸n de `Play` del jugador 2, qui茅n ahora tiene turno de jugar. Una vez el jugador 2 termine de jugar, se debe deshabilitar su bot贸n `Play`, habilitar el del jugardor 1 y as铆 sucesivamente. - -## 2. Mockups - -* Enlace de Figma 馃憠馃徏 [Aqu铆](https://www.figma.com/file/sZMkmbI0AcehmKu9p3vfM8/Challenge-Frontend-01-Platzi-Master?node-id=0%3A1) - -### Pantalla principal - - - - - -### Modal - - - - - -## 3. Requerimientos - -1. Hacer la maquetaci贸n de los dos dise帽os dados (pantalla principal y modal). En el footer de la pantalla principal donde dice @pepito_01, debe ir tu nombre de usuario en GitHub y los enlaces correspondientes a tus redes sociales (m铆nimo una). -2. Hacer los dos personajes de las cards con CSS. Puedes escoger 2 personajes de este [enlace](https://dribbble.com/shots/3189737-My-Game-Characters). -3. La barra de progreso debe mostrar visualmente (color rosado) el estado de la vida del personaje y tambi茅n su equivalente en porcentaje. -4. El bot贸n `Play` debe restar la vida del oponente de forma aleatoria y deshabilitarse en caso de no tener el turno para jugar. El bot贸n deshabilitado debe cambiar de color para indicar visualmente qui茅n es el que tiene el turno. -5. En cuanto la vida de uno de los dos jugadores llegue a `0%`, debe aparecer el modal. -6. El modal debe contener un Gif aleatorio (para esto se debe consumir la API de Giphy) con un texto que indique qui茅n fue el ganador y un bot贸n `Play again` que cerrar谩 el modal y resetear谩 las vidas de los personajes para volver a jugar. - -## 4. Tecnolog铆as - -1. HTML. -2. CSS (o cualquier preprocesador de tu elecci贸n). -3. JavaScript (o cualquier Framework o Librer铆a de tu elecci贸n). - -## 5. Recursos - -1. Colores: #1A46E5 (azul), #43D8C9 (verde), #FFBD11 (amarillo), #FF89BB (rosado), #FFFFFF (blanco) y #000000 (negro). -2. [Fuente Poppins](https://fonts.google.com/specimen/Poppins?query=poppins) -3. [脥conos de redes sociales](https://icons8.com/icons) -4. [Imagen de los personajes](https://dribbble.com/shots/3189737-My-Game-Characters) -5. [Video gu铆a para hacer los personajes con CSS](https://www.youtube.com/watch?v=hEZrW-fVnGs&feature=youtu.be) -5. [Gu铆a de inicio r谩pido de API | Giphy](https://developers.giphy.com/docs/api#quick-start-guide) -6. [Curso de Fundamentos de JavaScript | Platzi](https://platzi.com/clases/fundamentos-javascript-2017/) -7. [Curso de Frontend Developer | Platzi](https://platzi.com/clases/frontend-developer/) - -## 6. Pasos a seguir - -1. Hacer un "Fork" de este proyecto. -2. Revolver el reto. -3. Crear un Pull Request hacia este repositorio. - -## 7. Licencia - -challenge-frontend-01 se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT). diff --git a/html b/html new file mode 100644 index 0000000..8837180 --- /dev/null +++ b/html @@ -0,0 +1,74 @@ +# 馃幃 Challenge Frontend 01 + + + + + + + Platzi Game + + + +
+ stylesheet +
+
+

Platzi Game

+
+
+
+
+

Player 1

+
+
+
+ 100% +
+
+

Play

+
+
+
+
stylesheet
+
+
+
+
+
+
+

Player 2

+
+
+
+ 100% +
+
+

Play

+
+
+
stylesheet
+
+
+
+
+
+
+ + + +