From 324968cd89015cf099d7eba3a0c2bc27de2077fc Mon Sep 17 00:00:00 2001 From: Cesar Salas Date: Mon, 17 Aug 2020 11:16:07 -0500 Subject: [PATCH] Reto de frontend completado --- .DS_Store | Bin 0 -> 8196 bytes icons/github.png | Bin 0 -> 876 bytes icons/insta.png | Bin 0 -> 848 bytes icons/twitter.png | Bin 0 -> 811 bytes index.html | 159 +++++++++++++ style.css | 585 ++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 744 insertions(+) create mode 100644 .DS_Store create mode 100644 icons/github.png create mode 100644 icons/insta.png create mode 100644 icons/twitter.png create mode 100644 index.html create mode 100644 style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..530b861c3aea9793ccbfbdbf3a07d673d8c482e5 GIT binary patch literal 8196 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..1fdf81f --- /dev/null +++ b/index.html @@ -0,0 +1,159 @@ + + + + Reto Frontend + + +

Platzi Game

+
+
+
+
+
+ +
+

Jugador 1

+
+
+

100%

+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+

Jugador 2

+
+
+

100%

+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ed1a277 --- /dev/null +++ b/style.css @@ -0,0 +1,585 @@ +body{ + background-color: aliceblue; + min-height: 100vh; + display: grid; + place-items: center; + font-family: poppins; + font-weight: bold; +} +.header{ + width: 100%; +} +footer{ + width: 100%; + text-align: right; + font-family: poppins; + font-size: 20px; + padding-top: 5%; +} +.icon{ + width: 20px; + height: 20px; +} +.title{ + text-align: center; + font-size: 40px; + padding-top: 5%; +} +.circle1{ + position: absolute; + background-color: #1A46E5; + border-radius: 90px; + width: 120px; + height: 120px; + top: 30px; + left: -40px; +} +.circle2{ + position: absolute; + background-color: #1A46E5; + border-radius: 90px; + width: 50px; + height: 50px; + top: 10px; + left: 80px; +} +.circle3{ + position: absolute; + background-color: #1A46E5; + border-radius: 90px; + width: 180px; + height: 180px; + top: -100px; + left: 980px; +}.circle4{ + position: absolute; + background-color: #1A46E5; + border-radius: 90px; + width: 30px; + height:30px; + top: 100px; + left: 1160px; +} +.content1{display: flex;} +.content2{ + display: flex; + margin-left: 5%; + margin-right: 5%; +} +.jugador{ + width: 350px; + height: 420px; + border: solid 3px #000; + border-radius: 15px; + background-color: #43D8C9; + padding-left: 5%; + padding-right: 5%; +} +.jugador1{ + background-color: #43D8C9; +} +.jugador2{ + margin-left: 5%; + background-color: #FFBD11; + +} +.nombreJugador{ + text-align: center; + font-size: 25px; + color: #fff; +} + + +.play{ + width: 50%; + place-self: center; + text-align: right; + +} +.botonPlay{ + background-color: #1A46E5; + width: 90px; + height: 90px; + color: #fff; + font-size: 20px; + border: solid 3px #000; + border-radius: 90px; + box-shadow: 1px 5px 0 1px #000; + font-weight: bold; +} +.vida{width: 50%;} +.textVida{ + text-align: center; + color: #fff; + font-size: 18px; +} +.barraVida{ + width: 100%; + height: 25px; + border-radius: 90px; + background-color: #000; +} +#porcentaje-vida-j1 { + height: 25px; + border-radius: 90px; + width: 100%; + background-color: #FF89BB; +} +#porcentaje-vida-j2 { + height: 25px; + border-radius: 90px; + width: 100%; + background-color: #FF89BB; +} +.avatar{ + place-self: center; + text-align: center; + background-color: #fff; + border:solid 3px #000; + margin-top: 10%; + width: 100%; + height: 40%; + border-radius: 10px; +} + + +/* Primer Jugador */ +.j1-ojo-1{ + position: relative; + top: 10px; + left: 120px; + background-color:#14868f; +} +.j1-ojo-2{ + position: relative; + top: -20px; + left: 100px; + background-color:#1cb6aa; +} +.j1-ojo-1-1{ + width: 30px; + height: 30px; + border-radius: 90px; +} +.j1-ojo-1-2{ + position: relative; + top: 5px; + left: 5px; + width: 20px; + height: 20px; + background-color:#fff; + border-radius: 90px; +} +.j1-ojo-1-3{ + position: relative; + top: 6px; + left: 9px; + width: 8px; + height: 8px; + background-color:#162d3b; + border-radius: 90px; +} +.j1-tentaculo{ + width: 5px; + height: 35px; +} +.j1-tentaculo-1{ + position: relative; + top: 0px; + left: 3px; + background-color: #14868f; +} +.j1-tentaculo-2{ + position: relative; + top: 0px; + left: 1px; + background-color: #1cb6aa; +} +.j1-cuerpo{ + position: relative; + top: -20px; + left: 93px; + width: 40px; + height: 40px; + background-color: #1cb6aa; + border-radius: 90px; +} + +.j1-pierna{ + position: relative; + width: 15px; + height: 35px; + border-radius: 90px; +} +.j1-pierna-1{ + top:-73px; + left: 107px; + transform: rotate(-45deg); + background-color: #1cb6aa; +} +.j1-pierna-2{ + top:-36px; + left: 98px; + transform: rotate(90deg); + background-color: #117e84; +} +.j1-brazo-1{ + position: relative; + top: 10px; + left: 120px; + width: 30px; + height: 15px; + border-radius: 90px; + background-color: #117e84; +} +.j1-brazo-2{ + position: relative; + top: -120px; + left: 90px; + width: 15px; + height: 23px; + border-radius: 80px; + background-color: #5ec3c0; + transform: rotate(30deg); +} +.j1-mano{ + position: relative; + top: -49px; + left: 18px; + width: 17px; + height: 17px; + background-color: #1cb6aa; + border-radius: 90px; +} +.j1-dedo{ + position: relative; + top: -1px; + left: 1px; + width: 7px; + height: 12px; + background-color: #5ec3c0; + border-radius: 80px; +} +.j1-pistola-cuerpo{ + position: relative; + top: -25px; + left: 20px; + width: 35px; + height: 35px; + background-color: #182e3b; + border-radius: 90px; +} +.j1-cacha{ + position: relative; + top:-25px; + left:22px; + width: 10px; + height: 10px; + background-color: #182e3b; + border-radius: 80px; +} +.j1-punta{ + position: relative; + top:-55px; + left: 55px; + width: 25px; + height: 3px; + background-color: #182e3b; + +} +.j1-punta-circulo{ + position:relative; + top: -3px; + left: 20px; + width: 9px; + height: 9px; + background-color: #182e3b; + border-radius: 90px; +} +.j1-lazer{ + position: relative; + width: 3px; + background-color: #e55241; + border-radius: 90px; +} +.j1-lazer-1{ + top: -157px; + left: 188px; + height: 20px; +} +.j1-lazer-2{ + top: -182px; + left: 180px; + height: 30px; +} +.j1-piso{ + position: relative; + top:-140px; + left: 70px; + width: 120px; + height: 15px; + background-color: rgb(17,126,132,0.5); + border-radius: 90px; +} + + +/* Jugador 2 */ +.cara{ + position: relative; + top: -55px; + left: 120px; + width: 30px; + height: 43px; + background-color: #f2bf9b; + border-radius: 18px; +} + +.ceja{ + position: relative; + width: 6px; + height: 2px; + background-color: #000; + border-radius: 90px; +} +.cejas-1{ + top: 12px; + left: 3px; + transform: rotate(20deg); +} +.cejas-2{ + top: 10px; + left: 15px; + transform: rotate(-30deg); +} +.ojo{ + position: relative; + width: 3px; + height: 3px; + background-color: #000; + border-radius: 90px; +} +.ojo-1{ + top: 12px; + left: 4px; +} +.ojo-2{ + top: 9px; + left: 16px; +} +.nariz{ + position: relative; + top: 7px; + left: 8px; + width: 7px; + height: 10px; + background-color: #de6c6f; + border-radius: 30px; +} +.boca{ + position: relative; + top: 9px; + left: 15px; + width: 14px; + height: 16px; + background-color: #182f3b; + border-radius: 10px; +} +.boca-dientes{ + position: relative; + top: 0px; + left: -2px; + width: 12px; + height: 4px; + background-color: #fff; + transform: rotate(-25deg); +} +.boca-lengua{ + position: relative; + top: 5px; + left: 5px; + width: 8px; + height: 8px; + background-color: #b81055; + border-radius: 50px; +} +.boca-contorno{ + position: relative; + top: -17px; + left: -4px; + width: 12px; + height: 14px; + border-radius: 30px; + border: solid 4px #f2bf9b; +} + +.cuerpo{ + position: relative; + top: 5px; + left: 125px; + width: 40px; + height: 40px; + border-radius: 80px; + background-color: #e2523c; +} +.cuerpo-1{ + position: relative; + top: 53px; + left: 128px; + width: 28px; + height: 28px; + background-color: #000; + border-radius: 80px; +} +.brazo{ + position: relative; + width: 30px; + height: 12px; + background-color: #e0003c; +} +.brazo-1{ + top:70px; + left:97px; +} +.brazo-2{ + top: 48px; + left: 145px; + border-radius: 90px; +} +.pierna{ + position: relative; + width: 12px; + background-color: #000; + border-radius: 90px; +} +.pierna-1{ + height: 30px; + top: -40px; + left: 123px; + transform: rotate(30deg); +} +.pierna-2{ + height: 20px; + top: -70px; + left: 147px; + transform: rotate(-50deg); +} +.pierna-2-1{ + height: 20px; + top: 8px; + left: -5px; + transform: rotate(50deg); +} + +.pistola{ + position: relative; + width: 65px; + height: 30px; + background-color: #152f3d; + border-radius: 5px; + top: -130px; + left: 38px; +} +.adorno-1{ + position: relative; + width: 25px; + height: 3px; + background-color: #396273; + border-radius: 90px; + top: 3px; + left: 5px; +} +.adorno-2{ + position: relative; + width: 25px; + height: 3px; + background-color: #396273; + border-radius: 90px; + top: 6px; + left: 5px; +} +.adorno-3{ + position: relative; + width: 5px; + height: 5px; + background-color: #011b29; + border-radius: 10; + top: 0; + left: -5; +} +.adorno-4{ + position: relative; + width: 5px; + height: 5px; + background-color: #011b29; + border-radius: 10; + top: 3px; + left: -5; +} +.adorno-5{ + position: relative; + width: 25px; + height: 10px; + background-color: #fff; + border-radius: 30px; + top: 2px; + left: 30px; +} +.cacha{ + position: relative; + width: 12px; + height: 20px; + background-color: #15303b; + border-radius: 30px; + top: -5px; + left: 48px; +} +.mano{ + position: relative; + width: 20px; + height: 20px; + background-color: #e4917b; + border-radius: 30px; + top: -35px; + left: 45px; +} +.dedo-1{ + position: relative; + width: 6px; + height: 10px; + background-color: #f0bfa2; + border-radius: 30px; + top: 1px; + left: 15px; +} +.dedo-2{ + position: relative; + width: 8px; + height: 8px; + background-color: #e68f80; + border-radius: 30px; + top: -2px; + left: -12px; +} +.brazo-2-1{ + top: -70px; + left: 125; + transform: rotate(-45deg); +} +.mano-2{ + position: relative; + width: 20px; + height: 20px; + background-color: #e4917b; + border-radius: 30px; + top: -98px; + left: 140px; +} +.piso{ + position: relative; + top:-25px; + left: 40px; + width: 120px; + height: 15px; + background-color: rgb(17,126,132,0.5); + border-radius: 90px; +} \ No newline at end of file