Position

🙏

ErikSuarez

Reto completadoo !!!

MGuedez

aqui mi desafio

Santiago Quintero Guarin

Reto completado 😁

Jhean Carlos Pacheco Bermúdez

Valores de position
Static: Posición por defecto de los elementos, conservan la posición y espacio de donde son colocados (estáticos). No se puede usar top, right, bottom y left en esta posición.
Absolute: Permanecen en la posición de donde fueron colocados pero pierden su espacio físico (se sobreponen a los elementos que ocupan dicho espacio), se los puede posicionar mediante las propiedades top, right, bottom y left.
Importante: Al aplicar las propiedades top, right, bottom y left se tomará de referencia al contenedor más cercano con posición relativa.
Relative: Conservan su posición original y espacio físico pero se los puede posicionar mediante las propiedades top, right, bottom y left sin perder dicho espacio físico.
Fixed: Pierden su espacio físico y permanecen de forma fija (siguen el scroll, se colocan al lado izquierdo del viewport), se los puede posicionar mediante las propiedades de top, right, bottom y left.
Sticky: Conservan su espacio físico pero cuando el scroll los alcanza lo siguen (sin perder dicho espacio físico), es muy usado para barras de navegación y se lo puede posicionar con las propiedades top, right, bottom y left.

Héctor Alonso Padilla Ramírez

Leidy Johana Alarcon Moya

Vamos por la mitad!

Obed Ulises Orta Aguilar

Aquí dejo mi aporte

Captura de pantalla 2020-12-15 223523.png

Angel Eduardo Ramos Mena

![](

judit-castedo-valero

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <main class="main">
        <div class="container">
            <figure>
                <img src="./img/one-piece.jpg" alt="Imagen de one piece">
            </figure>
            <div class="description">
                <h1 class="description-title">One Piece</h1>
                <p class="description-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!</p>
            </div>
        </div>
    </main>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid red; */
}

.container {
    background-color: #f5f2f2;
    position: relative;
    height: 550px;
    border-radius: 1rem;
    overflow: hidden;
}

.container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.description {
    background-color: white;
    width: 80%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2rem;
    padding: 2rem;
    -webkit-box-shadow: -3px 5px 5px 0px rgba(219,219,219,1);
    -moz-box-shadow: -3px 5px 5px 0px rgba(219,219,219,1);
    box-shadow: -3px 5px 5px 0px rgba(219,219,219,1);
}

.description-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1.3rem;
}

.description-text {
    font-size: 1.7rem;
    line-height: calc(1.7rem + 20%);
    text-align: justify;
}

DavidMarioLC

Reto cumplido 🔥.

Luis Alférez

Hice este ejercicio basandome en el ejercicio de Santiago y su Picachu 😄

rokujs

Reto cumplido 👌

Anthony Ismael Manotoa Moreno

Platzi Team

Me tardé como una hora pero al fin lo logré 😄

Néstor Raúl Guzmán Díaz

He aquí mi reto!

![](

Gabriel Francisco Erazo Merino

Esta es mi página web, cualquier feedback es bien recibido gracias 😃

Este es mi código html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafío Position</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <div class="title-box">Texto ejemplo</div>
        <div class="content-box">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quas fugit, commodi asperiores inventore velit, consequuntur quis tempora obcaecati unde dicta quia praesentium recusandae ducimus, facere in ea expedita natus?
                Natus nostrum atque magnam expedita consectetur repellat magni reiciendis voluptas accusantium unde quos error dolores, totam neque eligendi recusandae maiores animi ullam laudantium ducimus iure eos! Cupiditate obcaecati eius molestias.
                Vero magni placeat eos voluptas autem eum ut eius dolorem odio, laudantium tempora nostrum! Cumque maxime, atque laboriosam     cupiditate itaque, voluptate alias ad ab, deleniti dolor aliquam? Consequuntur, voluptas quos!
        </div>
    </main>
</body>
</html>```
Este es mi código CSS

{
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
font-size: 62.5%;
}

main div {
border: 0.2rem black solid;
}

.title-box {
border-radius: 0.5rem;
background-color: red;
font-size: 1.8rem;
margin: auto;
padding: 2rem;
text-align: center;
width: 15rem;
position: relative;
top: 3rem;
}

.content-box {
font-size: 1.6rem;
background-color: gainsboro;
margin: auto;
border-radius: 5rem;
width: 50rem;
padding: 7.5rem 5rem;
}```

Alex Ryzsard Ocsa López

Reto cumplido.
Pdta: Se le puede hacer muchas mejoras.

HTML

CSS

santigo171

Reto completado: intenté aplicar todo lo visto en la clase mas conocimientos previos de Flexbox:

Screen Shot 2020-09-19 at 11.17.16 AM.png

Código:
https://drive.google.com/drive/folders/1lc3CqFDwpzs9i1xLW3UVqixONwWuVgjQ?usp=sharing
Entra al link y descárgalo si lo quieres ver.

Davermx

Hola compañeros comparto ejercicio Saludos ✌🏻

Tonatiuh Jiménez Sánchez

Listo 😄

Carol Natalia Ramirez Gil

Siguiendo con la temática de Genshin Impact, hice una tarjeta con background image, header y footer.

Jorge Alejandro Niglia

Una forma más rápida de escribir los 4 div con class: “box” y un id diferente en VSC es tipear: div>.box#item$*4 y luego la tecla tab. El signo $ inicia en 1 y sube de a 1 en cada linea generada.
Esto genera lo siguiente:
<div>
<div class=“box” id=“item1”></div>
<div class=“box” id=“item2”></div>
<div class=“box” id=“item3”></div>
<div class=“box” id=“item4”></div>
</div>
Espero sea de ayuda

Luis Alberto Ducuara Blandón

Me costó pero por fin ¡¡¡Reto Cumplido!!!

Efraín Hernández García

Aqui mi parte del reto, agregué algunas cosas más para practicar lo aprendido hasta ahora

Manuel Hermoso

Aquí está mi reto completado!

Vista mobile:

no es la gran cosa pero se va aprendiendo 😄

mi codigo:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto Position Avatar</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="card">
        <div class="card__title">
            <h2>Avatar</h2>
            <p>The Last Airbender </p>
        </div>
        <div class="card__content">
            <p>Choose your favorite book</p>
            <ul class="card__content-img">
                <li>
                    <figure>
                        <img class="element-image" src="pics/waternation.png" alt="water element image">
                        <figcaption class="element-figcaption"><a id="water" target="_blank"  href="https://avatar.fandom.com/wiki/Book_One:_Water">Water</a></figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img class="element-image" src="pics/earthnation.png" alt="earth element image">
                        <figcaption class="element-figcaption"><a id="earth" target="_blank" href="https://avatar.fandom.com/wiki/Book_Two:_Earth">Earth</a></figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img class="element-image" src="pics/firenation.png" alt="fire element image">
                        <figcaption class="element-figcaption"><a id="fire" target="_blank"  href="https://avatar.fandom.com/wiki/Book_Three:_Fire">Fire</a></figcaption>
                    </figure>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    font-size: 62.5%;
}

p {
    font-size: 1.6rem;
}

h2 {
    font-size: 2.4rem;
}


body {
    background-color: rgb(96, 156, 255);
    background-image: url("./pics/appa.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;
    
}

.card {
    background: radial-gradient(circle, rgba(0, 213, 255, 0) 73%, rgba(9,9,121,1) 96%, rgba(2,0,36,1) 100%);
    margin-top: 5rem;
    font-family: monospace;
    width: 100vw;
}

.card__title {
    background-color: blueviolet;
    width: 20rem;
    height: 5rem;
    margin: 0 auto; 
    border-radius: 2.3rem;
    position: relative;
    top: 2rem;
    border: 0.1rem black solid;
}

.card__title h2, .card__title p {
    text-align: center;
}

.card__content {
    text-align: center;
    padding: 3.5rem 1rem 1rem;
    background-color: whitesmoke;
    width: 35rem;
    height: auto;
    margin: 0 auto;
    border-radius: 2.3rem; 
    border: 0.1rem black solid;
}


.card__content-nav {
    list-style-type: none; 
}

.card__content-img li {
    display: inline-block;
    margin-top: 2rem;
} 

.element-image {
    width: 10rem;
    height: auto;
}

.element-figcaption {
    margin-bottom: 2rem;
}

.card__content-nav li {
    display: inline-block;
    margin-left: 2.5rem;
    margin-right: 2rem;
}

#water, #earth, #fire {
    font-size: 1.6rem;
    text-decoration: none;
    border-radius: 20%;
    color: black;
}

#water {
    background-color: #13a4a433;
}

#water:hover {
    background-color: #13a4a4;
}

#earth {
    background-color: #7e540649;
}

#earth:hover {
    background-color: #7e5406
}

#fire {
    background-color: #eb17087e;
}

#fire:hover {
    background-color: #eb1708;
}

Juan Esteban Galvis

Faltó explicar “fixed” y “sticky”

Ambas sirven para que el contenido se quede en su posición mientras haces scroll (Por ejemplo una sección de redes sociales que te persiga por la página mientras haces scroll)

La diferencia es que fixed desde el inicio tiene ese efecto, mientras que sticky te empieza a seguir cuando llegas con el scroll a su posición antes estará en sy posición natural.

Ah y al modificar la position aparte de top, left, right y bottom también se activa z-index para establecer digamos el orden en el eje z de los elementos (Como capas o cual va encima y cual debajo por así decirlo)

Jose Alberto Sanchez Nava

Heriberto Cartas Barrera

Listo aquí está el mío:

Con su respectivo código:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reto</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="div__contenedor">
    <header>
      <p>Texto ejemplo</p>
    </header>
    <main>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, hic modi quia quod laborum beatae saepe excepturi quasi vel consectetur, mollitia, ab inventore minima cupiditate recusandae nulla molestiae harum laboriosam.
      </p>
    </main>
</div>
</body>
</html>

HTML.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}
.div__contenedor {
  width: 100vw;
  height: 100vh;
  background-color: purple;
  font-family:Arial, Helvetica, sans-serif;
}

header p {
  width: 35%;
  padding: 2rem;
  background-color: red;
  margin: 0 auto;
  font-size: 1.3rem;
  text-align: center;
  border-radius: 1rem;
  position:relative;
  top: 13rem;
  
}

main p {
  width: 60%;
  min-height: 1rem;
  padding: 8rem 5rem;
  background-color: lightgray;
  margin: 10rem auto;
  font-size: 1.3rem;
  text-align:justify;
  border-radius: 3rem;
}

CSS

Ivan Sarjanovich

hace 10 meses

Me ha ayudado mucho esta imagen para decorar la forma de los bordes de mi tarea. Espero les sirva tambien 😃

Eduardo Rodriguez

Reto completado

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Challenge</title>
    <link rel="stylesheet" href="./styles/reto_position.css">
</head>
<body>
    <div class="card">
        <div class="card-top">
            <p>TESLA</p>
        </div>
        <div class="card-bottom">
            <p>Model Y</p>
            <figure>
                <img src="./pics/tesla.png" alt="">
            </figure>
        </div>
        <div class="card-button">
            <p>ORDEN PERSONALIZADA</p>
        </div>
    </div>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
 
.card{
    margin: 0 auto;
    width: 500px;
    height: 500px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* background-color: teal; */
}

.card-top{
    font-family: tesla;
    color: #F4F6F7;
    font-size: 1.2rem;
    text-align: center;
    position:relative;
    left: 150px;
    top: 30px;
    background: rgb(71,71,71);
    background: radial-gradient(circle, rgba(71,71,71,1) 0%, rgba(34,34,48,1) 35%, rgba(54,54,54,1) 100%);
    border-radius: 10px;
    border: 2px white dashed;
    padding: 20px;
    width: 200px;
    z-index: 999;
}

.card-top p{
    color: #F4F6F7;
}
.card-bottom{

    font-weight: bold;
    color:#393c41;
    text-align: center;
    position:relative;
    background-image: url('../pics/tesla_baack.jpg');
    background-size: cover;
    border-radius: 10px;
    border:1px #242424 solid;
    padding:50px;
    width: 500px;
}
.card-button{
    background-color: #333439;
    display:inline-block;
    color: white;
    padding:15px;
    border-radius: 50px;
    position: relative;
    bottom: 120px;
    left:25px;
}

Jorge Arroyo

Aquí mi reto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alineación FC Barcelona</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <div class="container">
            <div class="background">
                <figure class="imgBck">
                <img src="./Images/camp-nou.png">
                </figure>
            </div>
            <div class="card">
                <figure class="imgCrd">
                    <img src="./Images/soccer-field.png" alt="">
                </figure>
            </div>
            <div class="logo">
                <figure class="imgLogo">
                    <img src="./Images/barcelona-logo.png" alt="FC Barcelona" width="36" height="38">
                </figure>
            </div>
            <div>
                <h3 class="title">FC Barcelona</h3>
            </div>
            <div>
                <p class="jugador1">Ter Stegen</p>
            </div>
            <div>
                <p class="jugador2">Jordi Alba</p>
            </div>
            <div>
                <p class="jugador3">Clément Lenglet</p>
            </div>
            <div>
                <p class="jugador4">Gerard Piqué</p>
            </div>
            <div>
                <p class="jugador5">Sergiño Dest</p>
            </div>
            <div>
                <p class="jugador6">Sergio Busquets</p>
            </div>
            <div>
                <p class="jugador7">Frenkie de Jong</p>
            </div>
            <div>
                <p class="jugador8">Coutinho</p>
            </div>
            <div>
                <p class="jugador9">Ousmane Dembélé</p>
            </div>
            <div>
                <p class="jugador10">Lionel Messi</p>
            </div>
            <div>
                <p class="jugador11">Antoine Griezmann</p>
            </div>
        </div>
    </main>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}

main {
    font-family: Arial, Helvetica, sans-serif;
    width: 100vw;
    height: 100vh;
    display: inline-block;
    justify-content: center;
    align-items: center;
    background-color: rgb(105, 106, 112);
}

.background {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
    opacity: 60%;
}

.card {
    position: absolute;
    top: 1.7rem;
    left: 35rem;
    border: 2px solid;
    border-radius: 0.5rem;
    border-color: lightblue;
    opacity: 30%;
}

.logo {
    width: 30rem;
    height: 5rem;
    position: absolute;
    top: 1.7rem;
    left: 0.5rem;
    padding: 0.5rem;
    padding-left: 1rem;
    background-color: rgb(97, 29, 206);
    border: 0.1rem solid;
    border-radius: 0.5rem;
    border-color: lightblue;
    opacity: 50%;
}

.title {
    position: absolute;
    top: 2.5rem;
    left: 7.5rem;
    font-size: 3rem;
    font-weight: bold;
    color: aliceblue; 
    opacity: 80%;
}

.jugador1,
.jugador2,
.jugador3,
.jugador4,
.jugador5,
.jugador6,
.jugador7,
.jugador8,
.jugador9,
.jugador10,
.jugador11 {
    width: 18rem;
    height: 2.5rem;
    position: absolute;
    top: 8rem;
    left: 6rem;
    padding-top: 0.25rem;
    padding-left: 3rem;
    background-image: linear-gradient(to right, rgb(29, 23, 66) , rgba(105, 88, 214, 0.6));
    font-size: 1.4rem;
    font-weight: bold;
    color: ghostwhite;
    opacity: 75%;
}

.jugador2 {
    top: 11rem;
}
.jugador3 {
    top: 14rem;
}
.jugador4 {
    top: 17rem;
}
.jugador5 {
    top: 20rem;
}
.jugador6 {
    top: 23rem;
}
.jugador7 {
    top: 26rem;
}
.jugador8 {
    top: 29rem;
}
.jugador9 {
    top: 32rem;
}
.jugador10 {
    top: 35rem;
}
.jugador11 {
    top: 38rem;
}

Mario Barceló Sospedra

👋🏼 ¡Hola! Aquí está mi solución al reto. He intentado usar solo lo que hemos aprendido hasta ahora, aunque solo he usado Flexbox para centrar elementos más fácilmente. El Bulbasaur es un iFrame de Giphy. Dejo el código.👇🏼

CodePen: https://codepen.io/mariobarcelodev/pen/KKgMape
GitHub: https://github.com/MarioBarceloDev/CursosPlatzi/tree/main/Curso_Definitivo_de_HTML_y_CSS/CSS/bulbasaurCard

Dato: Para poner un gif en los comentarios he subido el gif a Imgur, he copiado el enlace de compartir, le he dado en esta caja a Imagen y he pegado el link y le he añadido la extensión .gif)

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulbasaur Card</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected];700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="card">
          <div class="name">Bulbasaur</div>
          <div class="card-container">
            <div class="bulbasaur"><iframe src="https://giphy.com/embed/HH2bb3Pjq5IB2" width="150" height="153" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
            <p class="description">Desde que nace, crece alimentándose de los nutrientes que contiene la semilla de su lomo.</p>
            <div class="type">
                <div class="grass">Planta</div>
                <div class="poison">Veneno</div>
            </div><!-- .type -->
          </div><!-- .card-container -->  
        </div><!-- .card -->
      </div><!-- .container -->
</body>
</html>

CSS

* {
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
}
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card {
    border: 10px solid #FDE265;
    border-radius: 5px;
    width: 300px;
    height: 400px;
    background-color: #CBDB96;
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.13);
    box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.13);
}
.name {
    font-size: 20px;
    color: #333;
    margin: 0 auto;
    border: 2px solid #666666;
    border-radius: 5px;
    display: inline-block;
    background-color: white;
    padding: 5px 8px;
    position: relative;
    bottom: 26px;
    left: 80px;
}
.card-container {
    padding: 0 20px;
}
.bulbasaur {
    text-align: center;
    margin-top: -22px;
    margin-bottom: 15px;
}
.description{
    border: 2px solid #F1F1ED;
    background-color: #F1F1ED;
    border-radius: 5px;
    text-align: left;
    padding-top: 8px;
    padding-right: 26px;
    padding-bottom: 10px;
    padding-left: 26px;
    margin-bottom: 15px;
}
.type{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.grass {
    display: inline-block;
    text-align: center;
    background-color: #9BCC51;
    border: 2px solid #9BCC51;
    border-radius: 5px;
    padding: 5px 15px;
}
.poison {
    display: inline-block;
    text-align: center;
    background-color: #B97EC9;
    border: 2px solid #B97EC9;
    border-radius: 5px;
    padding: 5px 15px;
}

Luis Esteban Martinez Fuentes

Mine

Engelbert Fanor Juár

hice lo que pude

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 {
    width: 50%;
    height: 70px;
    margin: 0 auto;
    background-color: red;
    border-radius: 10px;
    border: 1px black solid;
    position: relative;
    top: 35px;
    padding: 20px 40px;

}

p {
    
    width: 80%;
    height: 70vh;
    background-color: grey;
    border-radius: 50px;
    padding: 55px 30px;
    margin: 0 auto;
}```

Andres Condezo Monge

Reto completado

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/styles.css">
  <title>Posición</title>
</head>
<body>
  <main>
    <div class="parent">
      <div class="box" id="one"></div><img id="img" src="https://d3ui957tjb5bqd.cloudfront.net/uploads/2016/11/Stranger-Things-poster-by-The-Sonnyfive.jpg" alt=""></div>
      <div class="box" id="two">
      </div>
      <div class="box" id="three">
        <h3>STRANGER THINGS</h3>
      </div>
      <div class="box" id="four">
        <p>Desde 2014 / 55min. / Drama, Fantasía, Suspense <br>
        Dirigida por Matt Duffer, Ross Duffer<br>
        Reparto Millie Bobby Brown, Winona Ryder<br>
        Nacionalidad EE.UU.<br>
        Canal original Netflix</p>
      </div>
      <div class="box" id="five"></div>
      <div class="box" id="six">WATCH TRAILER</div>
    </div>
  </main>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main{
  background-color: #CB3E38;
  width: 100vw;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
}
.parent{
  display: inline-block;
}
.box{
  display: inline-block;
}
#one{
  position: relative;
  /*bottom: 35px;*/
  width: 315px;
}
#img{
  width: 315px;
  position: relative;
  bottom: -160px;
  z-index: 2;
}
#two{
  background-color: #353138;
  position: relative;
  width: 885px;
  height: 350px;
  bottom: -100px;
  left: -300px;
  z-index: 1;
}
#three{
  position: relative;
  z-index: 3;
}
h3{
  position: relative;
  font-weight: bold;
  font-size: 35px;
  bottom: 280px;
  left: 676px;
  color: #E9E5AB;
  z-index: 3;
}
#four{
  position: relative;
  z-index: 3;
}
p{
  color: white;
  font-size: 18px;
  position: relative;
  left: 360px;
  bottom: 150px;
  z-index: 3;
}
#five{
  background-color: #E9E5AB;
  width: 212px;
  height: 61px;
  left: 310px;
  bottom: 50px;
  position: relative;
  z-index: 4;
}
#six{
  color: #352128;
  font-weight: bold;
  font-size: 18px;
  left: 124px;
  bottom: 72px;
  position: relative;
  z-index: 5;
}

Jose Daniel Molina

Mi solucion al reto:

CSS

HTML – usé a metodología BEM

Manuel Valentino Murga Vásquez

En que creen que podría mejorar el código? con respecto a buenas practicas o hacerlo mas simple

Captura de pantalla 2020-09-18 181343.png

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title></title>
  </head>
  <body>
    <div class="contenedor">
      <div class="titulo"><h1>Vegeta</h1></div>
      <div class="cuerpo">
        <figure>
          <img src="vegeta.png" alt="vegeta" class="personaje">
        </figure>
        <div class="elegir">
          <p>Elegir</p>
        </div>
        <br>
        <div class="elegir">
          <p>Siguiente</p>
        </div>
      </div>
    </div>
  </body>
</html>

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  background-color: #E2FCF5;
}

.contenedor{
  width: 400px;
  height: 200px;
  position: relative;
  left: 30%;
}
h1{
  color: white;
  text-align: center;
  position: relative;

}

.personaje{
  top: 25px;
  position: relative;
  left: 140px;
  width: 30%;
  height: 30%;
}
.titulo {
    border-radius: 10px;
    position: relative;
    left: 25%;
    top: 25px;
    border: 2px solid white;
    background-color: black;
    width: 200px;
    height: 50px;
}
.cuerpo {
    border-radius: 10px;
    border: 2px solid grey;
    background-color: #25FABE;
    width: 400px;
    height: 450px;
}
.elegir{
  top: 20px;
  position: relative;
  left: 50px;
  border-radius: 10px;
  border: 2px solid white;
  background-color: black;
  width: 300px;
  height: 30px;
}
.elegir p{
  color: white;
  text-align: center;
}

Raúl Martín Landa Ochoa

Aquí el reto…

luismigeel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>TABLON CSS</title>
</head>
<body>
    <main class="contenedor">
        <div class="caja" id="uno"></div>
        <div class="caja" id="dos"></div>
        <div class="caja" id="tres"></div>
        <div class="caja" id="cuatro"></div>
        <div class="caja" id="cinco"></div>
        <div class="caja" id="seis"></div>
        <div class="caja" id="siete"></div>
    </main>
</body>
</html>```

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{
font-size: 62.5%;
}

.contenedor{
background-color: #F2D95C;
width: 20rem;
height: 50rem;
border: 0.5rem solid black;
margin: 5rem auto;
border-radius: 0%;

}

#uno{
width: 8rem;
height: 10rem;
border: .3rem solid #F21313;
border-radius: 50%;
position: relative;
left: 3rem;
top: 6rem;
}

#dos{
width: 1.2rem;
height: 1.2rem;
background-color: blue;
border-radius: 50%;
position: relative;
left: 5rem;
bottom: 2rem;
}

#tres{
width: 5rem;
height: 5rem;
border: .3rem solid #F21313;
border-radius: 50%;
position: relative;
left: 12rem;
}

#cuatro{
width: 1rem;
height: 1rem;
background-color: blue;
border-radius: 50%;
position: relative;
left: 14rem;
bottom: 2rem;
}

#cinco {
width: 10rem;
height: 5rem;
border-bottom: .6rem solid blue;
border-radius: 40%;
transform: rotate(-5deg);
position: relative;
left: 6rem;
}

Emily Aguilar

Desafío
Al fin se pudo :’)

María Lucía Paciello

hace 2 meses

¡Hola! Así quedó el desafío
¡Gracias!

Salaxer

para hacer mi reto, utilice dos ayudas extras para estilizarlo,boxshadow y flexbox, son dos simuladores muy utiles.

Cristian Manuel Zabala Aldana

Reto con algo de ayuda:v

Jason Martinez

Reto completado!!

Paola Pastran Bernal

hace 4 meses

Logrado!!!

Juan Torrealba

Captura de Pantalla 2021-03-13 a la(s) 16.35.42.png

<<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index,follow" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Desafío Position | Batman</title>
</head>
<body>
    <main class="batMain">
        <h1 class="batMain__title">Desafío Position | Batman</h1>
        <section class="batMain__container">
            <div class="batMain__card batMain__card--purpe">
                <div class="card__title batMain__title--purpe">El Guasón</div>
                <div class="card__img">
                    <img src="./img/guason.jpg" alt="">
                </div>
                <div class="card__description"><b class="batRoll">Peligroso</b> | Manejo de navajas y bombas.</div>
            </div>
            <div class="batMain__card batMain__card--blue">
                <div class="card__title batMain__title--blue">Batman</div>
                <div class="card__img">
                    <img src="./img/batman.jpg" alt="">
                </div>
                <div class="card__description"><b class="batRollBat">Héroe</b> | Manejo de tecnología y artes marciales.</div>
            </div>
            <div class="batMain__card batMain__card--red">
                <div class="card__title batMain__title--red">Pein</div>
                <div class="card__img">
                    <img src="./img/pain.jpg" alt="">
                </div>
                <div class="card__description"><b class="batRoll">Peligroso</b> | Manejo de armas y artes marciales.</div>
            </div>
        </section>
    </main>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
html {
    font-size: 62.5%;
}
.batMain {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    align-items: center;
    align-content: center;
}
.batMain__container {
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.batMain__title {
    font-size: 4.5rem;
    text-align: center;
    margin: 60px auto;
    font-weight: 100;
    text-transform: uppercase;
    color: #dcdcdc;
    letter-spacing: 2px;
}
.batMain__card {
    width: 300px;
    height: 580px;
    border-radius: 10px;
    border: solid 1px #000;
}
.card__title {
    font-size: 2.5rem;
    color: rgb(206, 206, 206);
    width: 70%;
    padding: 10px;
    position: relative;
    top: -2%;
    left: 15%;
    border-radius: 10px;
    text-transform: uppercase;
}
.card__img {
    padding: 15px;
}
.card__img img {
    width: 100%;
}
.card__description {
    font-size: 1.5rem;
    color: rgb(206, 206, 206);
    padding: 15px;
}
.batMain__card--purpe {
    background: #1b0c37; 
}
.batMain__card--red {
    background: #260601; 
}
.batMain__card--blue {
    background: #061c2d; 
}
.batMain__title--purpe {
    background: #0f0422; 
}
.batMain__title--red {
    background: #0c0200; 
}
.batMain__title--blue {
    background: #010f1a; 
}
.batRollBat {
    color: #4f4fbd;
}
.batRoll {
    color: #ae2525;
}
>

Jorge Mac

Les dejo mi ejercicio. He intentado hacer algo similar a la presentación de planes de Platzi:

Os dejo el código:

Archivo “index.html”:

-Archivo “style.css”:

Yeisson Stik Gutierrez Rivera

Reto realizado.

screencapture-file-C-Users-stik-Desktop-Nueva-carpeta-index-html-2020-08-26-15_20_33.png

.figure_contain{
  border: 1px red solid;
  border-radius: 20px;
  color: white;
  background-image: url('./2ffd731492e92fd5de5d785569b245af.jpg');
  background-repeat: no-repeat;
  background-position: center;
  width: 280px;
  height: 300px;
  margin: 80px auto;
  box-shadow: 9px 14px 14px 3px #c50606;
}

.figure_contain div{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 80px;
  background-color: orange;
  border-radius: 20px;
  position: relative;
  top: -40px;
  margin: 0 auto;
  box-shadow: 1px 13px 11px 6px #332f2f;
}

Jhaider Jordan

Sebastián Restrepo Ochoa

Edward Cabrera

Daniel Andres sanchez forero

mi ejemplo bendicones.

Juan Carlos Alfaro Arias

Sugiero que a futuro primero haga el ejercicio el profesor y despues dejar como “reto” que los alumnos lo hagan con alguna variante, por mi parte estoy aprendiendo desde cero y es un poco dificil los retos que dejan como este

vivs

Captura de pantalla 2021-06-05 015419.png

Nicolás Cualangelo

HTML

CSS

Resultado:

Sergio Alejandro Saldaña Rangel

Traté de hacer las bases de HTML para el juego de Pokémon. Cuando pase por el Curso práctico de JS le daré la lógica 💚.

Puedes ver el proyecto aquí https://magnus-alex.github.io/pokemon-battle-project/
Y también si quieres descargar los assets que usé y echarle una mirada al código, aquí te lo dejo https://github.com/Magnus-Alex/pokemon-battle-project

Jael Castillo

Qué tal? 😄

Raúl Martínez Quintela

Lo he conseguido!!!

Aquí paso los codigos

Carmen Valenzuela

![](

Julio Loarte Huerto

Desafío terminado

Braian Gabriel Molina Aguilar

Reto completado !! (y)

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html{
	font-size: 62.5%;
}

.padre{
	width: 500px;
	height: 650px;
	background-color: #F1F1F5;
	margin: 100px auto;
}

/*[TITULO] INICIO*/
.titulo {
	background-color: #4B0082;
	width: 450px;
	height: 100px;
	position: relative;
	border-radius: 2rem;
	left: 2.5rem;
	bottom: 3rem;
}
/*TEXTO*/
.titulo{
	text-align: center;
	padding-top: 2rem;
}
.titulo h2{
	color: white;
	font-size: 2rem;
}

.titulo h1{
	color: #4FC6D4;
	font-size: 4rem;
}
/*[TITULO] FIN*/

.box{
	background-color: #D2D5EC;
	display: inline-block;
	width: 400px;
	height: 80px;	
}
/*[1] LAVE SUS MANOS - INICIO*/
#paso-1{
	position: relative;
	left: 7rem;
	top: 2rem;
	border-bottom-right-radius: 4rem;
	border-top-left-radius: 5rem;
	border-bottom-left-radius: 5rem;
	padding-left: 9rem;
	padding-top: 1.2rem;
}

#paso-1 img{
	width: 90px;
	position: absolute;
	right: 32rem;
	bottom: -0.5rem;
}

#paso-1-hijo{
	background-color: #4FC6D4;
	width: 5rem;
	height: 4rem;
	padding-left: 1.5rem;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	position: absolute;
	bottom: 2rem;
	right: 39rem;
}
/*TEXTO*/
#paso-1 h3{
	font-size: 2rem;
	color: purple;
}
#paso-1 p{
	font-size: 1.4rem;
	color: darkblue;
	font-weight: bold;
}
#paso-1-hijo p{
	color: white;
	font-size: 3rem;
}
/*[1] LAVE SUS MANOS - FIN*/

/*[2] USE CUBREBOCAS - INICIO*/
#paso-2{
	position: relative;
	top: 6rem;
	left: 3rem;
	border-bottom-left-radius: 4rem;
	border-top-right-radius: 5rem;
	border-bottom-right-radius: 5rem;
	padding-right: 10rem;
	padding-top: 1.2rem;
}

#paso-2 img{
	width: 90px;
	position: absolute;
	left: 32rem;
	bottom: -0.5rem;
}

#paso-2-hijo{
	background-color: #4FC6D4;
	width: 5rem;
	height: 4rem;
	padding-right: 1.1rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	position: absolute;
	bottom: 2rem;
	left: 39rem;
}

/*TEXTO*/
#paso-2 h4{
	font-size: 2rem;
	color: purple;
	text-align: right;
}
#paso-2 p{
	font-size: 1.4rem;
	color: darkblue;
	font-weight: bold;
	text-align: right;
}
#paso-2-hijo p{
	color: white;
	font-size: 3rem;
}
/*[2] USE CUBREBOCAS - INICIO*/

/*[3] CONTROL DE TEMPERATURA - INICIO*/
#paso-3{
	position: relative;
	left: 7rem;
	top: 10rem;
	border-bottom-right-radius: 4rem;
	border-top-left-radius: 5rem;
	border-bottom-left-radius: 5rem;
	padding-left: 9rem;
	padding-top: 1.2rem;
}

#paso-3 img{
	width: 90px;
	position: absolute;
	right: 32rem;
	bottom: -0.5rem;
}

#paso-3-hijo{
	background-color: #4FC6D4;
	width: 5rem;
	height: 4rem;
	padding-left: 1.5rem;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	position: absolute;
	bottom: 2rem;
	right: 39rem;
}
/*TEXTO*/
#paso-3 h5{
	font-size: 2rem;
	color: purple;
}
#paso-3 p{
	font-size: 1.4rem;
	color: darkblue;
	font-weight: bold;
}
#paso-3-hijo p{
	color: white;
	font-size: 3rem;
}
/*[3] CONTROL DE TEMPERATURA - FIN*/

/*[4] PAGO CON TARJETA - INICIO*/
#paso-4{
	position: relative;
	top: 14rem;
	left: 3rem;
	border-bottom-left-radius: 4rem;
	border-top-right-radius: 5rem;
	border-bottom-right-radius: 5rem;
	padding-right: 10rem;
	padding-top: 1.2rem;
}

#paso-4 img{
	width: 90px;
	position: absolute;
	left: 32rem;
	bottom: -0.5rem;
}

#paso-4-hijo{
	background-color: #4FC6D4;
	width: 5rem;
	height: 4rem;
	padding-right: 1.1rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	position: absolute;
	bottom: 2rem;
	left: 39rem;
}

/*TEXTO*/
#paso-4 h6{
	font-size: 2rem;
	color: purple;
	text-align: right;
}
#paso-4 p{
	font-size: 1.4rem;
	color: darkblue;
	font-weight: bold;
	text-align: right;
}
#paso-4-hijo p{
	color: white;
	font-size: 3rem;
}
/*[4] PAGO CON TARJETA - FIN*/

.footer{
	background-color: #4B0082;
	width: 500px;
	height: 40px;
	position: relative;
	top: 19rem;
}

.footer p{
	color: white;
	text-align: center;
	font-size: 1.5rem;
	padding-top: 1.2rem;
}```

Carlos Andres Perez Zapata

Aqui va mi reto, me costo demasiado 😦
y no logre centrar la imagen. Alguien me podría ayudar?

Michael Steven Viloria García

Yo lo hice de esta forma, no hallaba la forma de colocar los textos centrados como sobrepuestos a la imagen y me guie en los demas que completaron el reto y busque por fuentes externas ya que no le entendi hoy al profesor pero buena clase.

rocioag

Acá mi reto completado 😃

Fabiola Vanesa Castro Juárez

Reto Completado 😃😁

Código HTML 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="description" content="Contiene el reto de la clase de position css"/>
  <meta name="robots" content="index,follow"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Reto Position</title>
  <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,[email protected],400;0,700;1,400;1,700&family=Montserrat:[email protected];700&family=Satisfy&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
  <main>
    <section class="sectionCriatura1">
      <div class="occamyTitle" >
        <h2>Occamy</h2>
      </div>
      <div class="occamyContainer">
        <figure class="ocamyImageContainer">
          <img class="occamyImage"
          src="./img/occamy.png" 
          alt="occamy image"
          />
        </figure>
      </div>
      <div class="occamyDetailContainer">
        <p>
          <strong>Color de piel</strong>
          <br/>
          <span>Turquesa</span>
        </p>
        <br/>
        <p>
          <strong>Pelaje</strong>
          <br/>
          <span>P&uacute;rpura</span>
        </p>
        <br/>
        <p>
          <strong>Relacionado con</strong>
          <br/>
          <i>Serpiente</i>
        </p>
        <br/>
        <p>
          <strong>Altura Media</strong>
          <br/>
          4,5 metros (Variable)
        </p>
        <br/>
        <p>
          <strong>Mortalidad</strong>
          <br/>
          Mortal
        </p>
        <br/>
        <p>
          <strong>Descripci&oacute;n</strong>
          <br/>
          <br/>
          <span>El occamy se encuentra en el Lejano Oriente y en la India. Es una criatura serpentina de cuerpo emplumado, dos patas con alas, que pueden alcanzar hasta cuatro metros y medio de largo. No obstante, es coranáptico, y puede crecer o encoger mágicamente para adaptarse al espacio del que dispone en su entorno.Se alimenta principalmente de las ratas y pájaros, aunque de vez en cuando caza monos. El occamy es agresivo con todos los que se le acercan, en especial si percibe que son una amenaza para sus huevos, cuya cáscara está hecha de la más suave y pura plata.</span>
        </p>
        <br/>
        <p>
          <strong>Calificaci&oacute;n del Ministerio de Magia</strong>
          <br/>
          Bestia XXXX
        </p>
        <br/>
        <p>
          <strong>Estatus</strong>
          <br/>
          Existente
        </p>
      </div>
    </section>
    <section class="sectionCriatura2">
      <div class="dementorTitle">
        <h2>Dementor</h2>
      </div>
      <div class="dementorContainer">
        <figure class="dementorImageContainer">
          <img class="dementorImage"
          src="./img/dementor.png" 
          alt="dementor image"
          />
        </figure>
      </div>
      <div class="dementorDetailContainer">
        <p>
          <strong>Descripci&oacute;n</strong>
          <br/>
          <br/>
          <span>Los dementores son humanoides altos y delgados. Tienen cabezas parecidas a calaveras con bocas anchas sin dientes y cuencas oculares vacías. Su piel es grisácea y costrosa. Los dementores tradicionalmente se envuelven en túnicas negras andrajosas con una capucha echada hacia atrás sobre su rostro, debido a su temor a la luz del sol. Tienen una sociedad caótica y primitiva donde gana el más duro. Estos se reproducen en grandes grupos, al rodearse de las grandes cantidades de una niebla especial que exudan y creando nuevos individuos, ya completamente formados. Al realizar el Beso de un Dementor, un Dementor sellará sus labios sobre los de otro ser y succionará su alma, que absorberá y destruirá para alimentarse de la felicidad y la magia que contiene. Los dementores son lo único en el universo que se sabe que destruye por completo un alma, en lugar de simplemente enviarla a la otra vida o, en el peor de los casos, dividirla.</span>
        </p>
        <br/>
        <p>
          <strong>Calificaci&oacute;n del Ministerio de Magia</strong>
          <br/>
          Bestia XXXXXX
        </p>
        <br/>
        <p>
          <strong>Mortalidad</strong>
          <br/>
          Inmortal
        </p>
        <br/>
        <p>
          <strong>Estatus</strong>
          <br/>
          Existente
        </p>
        <br/>
        <p>
          <strong>Habilidades M&aacute;gicas</strong>
          <br/>
          <ul>
            <li>Planear y volar</li>
            <li>Absorci&oacute;n m&aacute;gica</li>
            <li>Absorci&oacute;n de emociones</li>
            <li>Beso del Dementor</li>
          </ul>
        </p>
      </div>
    </section>
  </main>
</body>
</html>

Código CSS 👇

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
}
main{
  display: flex;
  flex-shrink: 0;
}
section{
  display: inline-block;
}
p{
  font-size: 1.5rem;
}
h2{
  font-size: 4rem;
}
.sectionCriatura1, .sectionCriatura2{
  width: 50vw;
  height: 100vh;
}
.sectionCriatura1{
  background-color: rgba(134, 130, 135, 0.857);
}
.occamyTitle{
  width: 25%;
  margin: 0 auto;
  font-family: 'Satisfy', cursive;
  background-color:#A167A5;
  border-radius: 10px;
  text-align: center;
  position: relative;
  top: 10px;
  z-index: 2;
}
.ocamyImageContainer{
  width: 80%;
  position: relative;
  left: 350px;
  bottom: 100px;
  z-index: 1;
}
.occamyImage{
  width: 60%;
  height: 400px;
}
.occamyDetailContainer{
  background-color: rgba(229, 205, 238, 0.857);
  font-family: 'Montserrat', sans-serif;
  text-align: justify;
  border-radius: 10px;
  position: relative;
  bottom: 405px;
  padding: 8px;
  color: rgb(197, 82, 168);
  width: 80%;
  margin: 0 auto;
}
.sectionCriatura2{
  background-image: url('https://i.pinimg.com/originals/07/6d/7a/076d7a413f496139186aa9e96397bcef.jpg');
  background-size: 100% 100vh; 
  background-repeat: no-repeat;
}
.dementorTitle{
  width: 30%;
  margin: 0 auto;
  font-family: 'Courier Prime', monospace;
  background-color: gray;
  border-radius: 10px;
  text-align: center;
  position: relative;
  top: 60px;
  z-index: 2;
}
.dementorImageContainer{
  width: 80%;
  position: relative;
  left: 350px;
  top: 300px;
  z-index: 1;
}
.dementorImage{
  width: 60%;
  height: 350px;
}
.dementorDetailContainer{
  background-color: #42535F;
  font-family: 'Courier Prime', monospace;
  text-align: justify;
  border-radius: 10px;
  position: relative;
  bottom: 310px;
  padding: 8px;
  color: white;
  width: 90%;
  margin: 0 auto;
}
.dementorDetailContainer ul{
  font-size: 1.5rem
}
.dementorDetailContainer li{
  list-style: none;
}

Elkin Daniel Torres Poveda

Listo reto terminado ❤️
Ejemplos de cada position -> https://developer.mozilla.org/es/docs/Web/CSS/position

Eduard Godi

No se si sea una de las formas para hacer el ejercicio, pero me costo 😦 espero poder mejorar!

Nicolas Ruiz Acosta

Me quedó algo así:

Al pasar el maose sobre la imágen hace una transición de 1 segundo quedando así:

Código:

Diego Manuel Ramos Fajardo

Azahel Caballero

Mi aporte

* {
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


section{
    width: 30%;
    margin: 0 auto;

}

figure{
    background-color: burlywood;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

h2{ 
    background-color: cadetblue;
    text-align: center;
    padding: 1.3rem;
    width: 30%;
    border-radius: 4px;
    top: 1.5rem;
    position: relative;
    margin: 0 auto;
}

ul{  
    background-color: darkcyan;
    text-align: center;
    padding: 1.2rem;
    border-radius: 4px;
    margin: 0 auto;
    top: 1.5rem;
    position: relative;
    width: 90%;
}

Juan Roberto González León

hace 8 meses

Hola
no se como poner el código aquí para que los revisen y comenten:
tuve problemas porque creo que falto una explicación mayor acerca de la relación entre los elementos y su propiedad Position, pero al final entendiendo las lecturas recomendadas pude hacer esto:

Aldahir Zamora

hace 2 meses

Skipper humilde

DANIEL STEVEN RODRIGUEZ VERANO

mi trabajo

Alejandra Acosta

hace 9 meses

Hice un card sencillo basandome en uno que encontré en internete, lo hice con scss porque se me hace más fácil 😃

Abril Darynka Tapia Sosa

Mi solución (sencilla) para el reto

*{
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
html{
    font-size: 62.5%;
}

section{
    font-size: 1rem;
    width: 60rem;
    margin: auto;
    padding-top: 15rem;
}
section > article{
    border-radius: 5rem;
}
article.title{
    font-size: 1.8rem;
    border: 2px solid brown;
    position: relative;
    top: 2.5rem;
    margin: auto;
    width: 18rem;
    height: 5rem;
    text-align: center;
    background-color: brown;
    color: aliceblue;
    justify-content: center;
    align-items: center;
    display: flex;
    font-weight: 600;
}
article.content{
    padding: 3rem;
    font-size: 1.6rem;
    border: 2px solid green;
}

Leonardo García Gutiérrez

Yael Manuel Flores Cornejo

Me inspire de algunos usuarios 👉🏻👈🏻

Screen Shot 2021-03-15 at 4.02.21 a.m..png

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-16">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto POSITIONS reloaded</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
            <section id="seccion-pequeña">
                <p>Pikachu</p>
            </section>

            <section id="seccion-principal">
                <img src="https://i.pinimg.com/originals/2d/cb/c9/2dcbc9e32e07fd72f2a9339808fe612e.png" alt="Pikachu en 2D..." id="pikachu">
                <p>Pikachu (ピカチュウ) es una de las criaturas de la franquicia Pokémon. Este personaje hizo su primera aparición en los videojuegos Pokémon Rojo y Azul (Verde en Japón), siendo el pokémon número 25 de la lista de pokémon registrada en el pokédex nacional. Al igual que todos los pokémon, Pikachu lucha en batallas fundamentales en el anime, manga y videojuegos de la serie. Pikachu es el pokémon más conocido de la historia ya que es el acompañante del protagonista de la serie, Ash Ketchum y la mascota representante de la franquicia Pokémon.</p>
            </section>

    </main>
</body>
</html>

CSS:

*
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html
{
    font-size: 62.5%;
}

body
{
    background-color: #FFC300;
}

main
{
align-items: center;
min-width: 50rem;
max-width: 100rem;
}

#seccion-pequeña
{
    position: relative;
    display: flex;
    align-items: center;
    background-color: #8B0000;
    width: min-content;
    height: 32px;
    padding: 1rem;
    border-radius: 20px;
    margin: auto;
    font-size: 1.7rem;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    border: 3px black solid;
    z-index: 1;
    top: 14px;
}

#seccion-pequeña p
{
    color: antiquewhite;
}

#seccion-principal
{
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: coral;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0rem;
    max-width: 420px;
    margin: 0rem auto;
    border: 3px black solid;
    border-radius: 5px;
    padding: 16px 18px;
}

#pikachu
{
    width: 150px;
}

Algo que me quedo en duda es ¿cómo puedo colocar todo el contenido en el centro de la pantalla?

Brandon Pineda

hace 5 meses

Reto completado 😃

Opera Captura de pantalla_2022-01-07_211857_127.0.0.1.png

Alvar Buenfil

Captura de Pantalla 2022-02-27 a la(s) 23.34.55.png

Daniela Yáñez

hace 4 meses

Reto completado

Fabian Florez

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicion</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="contenedor-titulo">
            <h1 class="titulo">Albert Einstein</h1>
        </div>
        <figure class="card__figure">
            <img src="https://cutt.ly/pchJAHW" alt="Albert-Einstein">
        </figure>
        <p class="card__frase">"Nunca pares de 		  aprender"</p>
        <p class="card__frase">- 1879 -</p>
    </div>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}
html{
    font-size: 62.5%;
}
body {
    background-color:#E9F5DB;
}
.card {
    background-color: #B5C99A;
    border-radius: 2rem;
    width: 40rem;
    height: 45rem;
    margin: 10rem auto;
    box-shadow: inset 0.2rem 0.2rem #97A97C;
}
.card__figure{
    width: 100%;
}
.card__figure img{
    position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 24rem;
    /* border-radius: 2rem; */
}
.contenedor-titulo {
    background-color: #97A97C;
    position: relative;
    width: 70%;
    height: 15%;
    border-radius: 1rem;
    top:-5%;
    left: 50%;
    transform: translate(-50%);
}
.contenedor-titulo h1 {
    color:white;
    font-size: 3.9rem;
    text-align: center;
}
.card__frase{
    color:#718355;
    position: relative;
    top: 10%;
    font-size: 2.9rem;
    text-align: center;

}

wadocode

Edison Alberto Rodriguez Velez

Mateo Hoya Acevedo

Tambien hice el de Dorime!!

Julian Andres Perez Pineda

Uf lo logre, aunque no quedo tan genial como los de mis compañeros :C, seguire practicando.

Jose David Nicomedes Herrera Soto

Desafío Completado
.
El código lo pueden ver en el siguiente link: https://github.com/DaverSoGT/Curso-Definitivo-HTML-y-CSS/tree/clasePosition/clasePosicion/Desafio
.

Andres Fernando Saa Montaño