From 8a9babe544ae25a635be4263bf91cb1142ffa360 Mon Sep 17 00:00:00 2001 From: JhonJBautista Date: Mon, 17 Aug 2020 12:42:23 -0500 Subject: [PATCH 1/3] Maquetado Html, Estilos a encabezado --- css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++ css/style.css | 84 +++++++++ img/icons8-github-48.png | Bin 0 -> 885 bytes img/icons8-instagram-48.png | Bin 0 -> 666 bytes img/icons8-twitter-48.png | Bin 0 -> 811 bytes index.html | 47 +++++ 6 files changed, 480 insertions(+) create mode 100644 css/normalize.css create mode 100644 css/style.css create mode 100644 img/icons8-github-48.png create mode 100644 img/icons8-instagram-48.png create mode 100644 img/icons8-twitter-48.png create mode 100644 index.html diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..87d541a --- /dev/null +++ b/css/style.css @@ -0,0 +1,84 @@ +* { + font-family: 'Poppins', sans-serif; + src: url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"); + font-weight: 500; + +} + +main { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: 20px; +} + +main header { + display: flex; + justify-content: space-between; +} + +main header h1 { + position: relative; + top: 150px; +} + +.circulo{ + background-color: #1A46E5; +} + +.circulo__diminuto{ + width: 49px; + height: 49px; + border-radius: 100%; + position: relative; + top: 99px; + left: -40px; + +} + +.circulo__pequeño{ + width: 97px; + height: 97px; + border-radius: 100%; + position: relative; + top: 16px; + left: -60px; +} + +.circulo__mediano{ + width: 195px; + height: 195px; + border-radius: 100%; + position: relative; + top: 26px; + left: -48px; + +} + +.circulo__grande{ + width: 335px; + height: 335px; + border-radius: 100%; + position: relative; + top: -222px; +} + +main section{ + display: flex; + justify-content: space-around; +} + +section .rect_player { + width: 467px; + height: 582px; + border: 5px solid black; + border-radius: 20px; + + +} + + + +footer { + +} \ No newline at end of file diff --git a/img/icons8-github-48.png b/img/icons8-github-48.png new file mode 100644 index 0000000000000000000000000000000000000000..e2ee9289dd87b07e43dccc66ba39603d003935aa GIT binary patch literal 885 zcmV-*1B(2KP)GK~!jg?U_qRRY4rae^<@&W>HDBxFwp4=&|S_wNL^Rp`8nNMXRJY z^sp9DLC~h8$F&yKwt}EVV9_p$AT)`nOrppLDT_*>NGp=OE#{oMjC0P+oHO^f@P6>; z!kL-x`~G*%%=ynbP(T5b8wrP83xPGjN?-*rAD9J90lomkz)Ro>a2x0aG7j}4VFu6& zbRo>x!~k#Vuqcf z1UR2#w<+Fl2y8d#*JMI=j_`lsF>cQhJ`zBW zM*E69NHqh?HA0s>GS|oemo)`vx9pYaaN9t5}?CCF9Xz@lHM^S>;dXxn6C#O z8fp!p-{Svbn<1$m-H2MI#(=v9*a1AS)Hr2o9>j6-okXw^QRwxBh_o4Sw_6&|0OP6>6hRb*zi60QI4__B8=Wxj^*y+G37J;_HY&b?2yY=w zKrvuq@C`&)y5bV#C79U^5ywSUC!HhRU3L0WlJuXPq^tUzs{ijkReh?VMvWRZZW0>6 zbD$5L07GD$(}s4eKJd)WQ3@7-^8yHG*)L$eNaDAFjS7fMTL*3xAs__#$ky_bU#O7m zXP^yC0td1FSuObn)#Q9+ld-v{V*O{NEbO!#n*;7U%PkKbU`7+zr`mi!z`TVi;ETAo zsS$9hATa{AfkmJT+_BcReLL32cia<=fD6w_c5zF&2f#&K#i*(sWWqtp_A+B%%BTQiy zM>|7A(ueFagn%)os+4G8_W481ZZiPB+P>>fR{M@~l_Fq_sVcR2?J-Yj0Vhc3)`~SJeK9963Mg= z*}kvh67fkBG=cf46#D6(ljD!|{C^-o^;0X3^?>BxPNG&`~Uy|07*qoM6N<$f(I}! Ai~s-t literal 0 HcmV?d00001 diff --git a/img/icons8-twitter-48.png b/img/icons8-twitter-48.png new file mode 100644 index 0000000000000000000000000000000000000000..0bb5f45b752b75f6ecebeca5ccf72c25197e2b29 GIT binary patch literal 811 zcmV+`1JwM9P)k#DgX)pC?b(^>>9!5# z3xAlYsjmO;U;VGDsVZ8uXi)||IDm^7z+2qH39P~RI@;*0yD&#)qYocz*b{6(drBMK z*o)tiKXlmhzfI@l6DbS(-dPkzPw2E|wGG2X?# zf56f-C#PbSE@Em<;wR%-M)7I3Io9@!xTD93igz(HhXD5FB>c57F6Lt!E@5%p(NM}m zFR`i#@nbZe_tor$FVk>q(%Ep14$3wzmgXcrY5$-t>Fi34hX$|_BO3_d_X5QKi4kee zdh2Z94mM$29RcK({}o#|oU@(=8+(C&u>_;5wE0)g0enR=kNWV-a8Xua5a%L0j|aGq zwb+rNy)=eY@2JmA6LP(Xf!C}(O%og+4C94fTO+J|-y1K}3gZFX#vx1)R=ZcrE3Ke*~g*n zjtl#My4a)q9#7hmMxt%Qt|;QNg?|)Q^^QgYsIX8N`DF*NJ&X7sg{V8RTG%I-A^w%H zC2g1$B?(U2A6dl1DCMurkJNX-Rh7lc9mva@5nrK*Enz)&I1lj^Hu~~lsc5?){3Fhl zpK%ob7cBli%*tDQoNlbdPGNJOr})>hZD%tDaV%%?Z-j-jP$mjTde3tf{}6ME65Sp( zzF)}CymS7HaFCFhHsR8tGx|I^vhGNDj{;@{;fQ1>b_)|jQ*>axu<{i>MSc)wv!9w3 zoyJ&U;ksFX@OL*002ovPDHLkV1jEdeM0~M literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..5ebea50 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + Document + + +
+
+
+
+

Platzi Game

+
+
+
+
+
+

Player 1

+ +
2.0
+ + + +
+
+

Player 2

+ +
2.1
+
+ +
+
+
+
+
+

Made by @JhonJBautistaB

+ GitHub + Twitter + Instagram +
+ + \ No newline at end of file From 419a8614e258a6346d90d07aeea764f3c29fffe5 Mon Sep 17 00:00:00 2001 From: JhonJBautista Date: Mon, 17 Aug 2020 13:56:11 -0500 Subject: [PATCH 2/3] Ajustes Estilos en cajas de players --- css/style.css | 40 ++++++++++++++++++++++++++++++---------- index.html | 17 +++++++++-------- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 87d541a..209baaa 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,6 @@ -* { - font-family: 'Poppins', sans-serif; - src: url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"); - font-weight: 500; - +h1, h2 { + font-family: "Poppins"; + text-align: center; } main { @@ -42,7 +40,7 @@ main header h1 { border-radius: 100%; position: relative; top: 16px; - left: -60px; + left: -40px; } .circulo__mediano{ @@ -68,17 +66,39 @@ main section{ justify-content: space-around; } -section .rect_player { - width: 467px; +main section .rect_player { + width: 45%; height: 582px; border: 5px solid black; border-radius: 20px; - - + display: grid; + justify-content: center; +} + +main section .rect_player1{ + background-color: #43D8C9; } +main section .rect_player2 { + background-color: #FFBD11; +} + +.boton { + width: 120px; + height: 120px; + border-radius: 100%; + background-color: #1A46E5; +} + +main section .player { + /* width: 10%; */ + height: 250px; + border: 3px solid black; + border-radius: 15px; +} + footer { } \ No newline at end of file diff --git a/index.html b/index.html index 5ebea50..9647c11 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + @@ -19,19 +20,19 @@

Platzi Game

-
-

Player 1

+
+

Player 1

-
2.0
- +
+
-
-

Player 2

+
+

Player 2

-
2.1
-
+
+
From c3789cdf4fb2eeecf65c8bb72851a38ac91b2764 Mon Sep 17 00:00:00 2001 From: JhonJBautista Date: Mon, 17 Aug 2020 14:43:39 -0500 Subject: [PATCH 3/3] Cambiando de Flex a Grid --- css/style.css | 22 ++++++++++++++++++++-- index.html | 8 ++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 209baaa..ef79576 100644 --- a/css/style.css +++ b/css/style.css @@ -72,7 +72,13 @@ main section .rect_player { border: 5px solid black; border-radius: 20px; display: grid; - justify-content: center; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + gap: 1px 1px; + grid-template-areas: "titulo titulo" + "cargando boton" + "player player"; + } main section .rect_player1{ @@ -83,20 +89,32 @@ main section .rect_player2 { background-color: #FFBD11; } +.titulo_player { + grid-area: titulo; + +} +.cargando { + grid-area:cargando; + +} .boton { width: 120px; height: 120px; border-radius: 100%; background-color: #1A46E5; + grid-area: boton; + } -main section .player { +.player { /* width: 10%; */ height: 250px; border: 3px solid black; border-radius: 15px; + grid-area: player; + } footer { diff --git a/index.html b/index.html index 9647c11..c93657b 100644 --- a/index.html +++ b/index.html @@ -21,16 +21,16 @@

Platzi Game

-

Player 1

- +

Player 1

+
-

Player 2

- +

Player 2

+