Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Position

37/55
Recursos

Aportes 2224

Preguntas 111

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🙏

Reto completadoo !!!

aqui mi desafio

Reto completado 😁

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.





Vamos por la mitad!

Aquí dejo mi aporte

![](

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;
}

Reto cumplido 🔥.

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

Reto cumplido 👌

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

He aquí mi reto!

![](

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;
}```

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

HTML

CSS

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

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

Hola compañeros comparto ejercicio Saludos ✌🏻


Listo 😄

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

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

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

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

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;
}

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)

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

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

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;
}

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;
}

👋🏼 ¡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;
}

Mine

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;
}```

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;
}

Mi solucion al reto:

CSS

HTML – usé a metodología BEM

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

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;
}

Aquí el reto…

<!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;
}


Desafío
Al fin se pudo :’)

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

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

Reto con algo de ayuda:v

Reto completado!!

Logrado!!!

<<!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;
}
>

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”:

Reto realizado.

.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;
}

mi ejemplo bendicones.

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

HTML

CSS

Resultado:

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

Qué tal? 😄

Lo he conseguido!!!

Aquí paso los codigos

![](

Desafío terminado

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;
}```

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

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.

Acá mi reto completado 😃

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;
}

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

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

Me quedó algo así:

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

Código:

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%;
}


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:

Skipper humilde

mi trabajo

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

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;
}



Me inspire de algunos usuarios 👉🏻👈🏻

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?

Reto completado 😃

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>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;

}



Tambien hice el de Dorime!!

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

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
.

Reto listo! Me acordé de Yu-Gi-Oh!

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  font-size: 62.5%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
main {
  height: 100vh;
}
.card {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 300px;
  border: 10px solid #405454;
  background-color: #9c825a;
  border-radius: 25px;
}
.card__title {
  margin: 1rem;
  padding: 1rem;
  position: relative;
  bottom: 4rem;
  color: #0d092a;
  background-color: #9c825a;
  border: 5px solid #405454;
  border-radius: 25px;
  font-weight: bold;
  box-shadow: 10px 10px 26px -6px rgba(0, 0, 0, 0.52);
  text-align: center;
}
.card__title h2 {
  font-size: 2.25rem;
}
.card__image {
  margin-bottom: 4rem;
}
.card__image figure {
  width: 100%;
  padding: 1.25rem;
}
.card__image figure > img {
  width: inherit;
  border: 5px solid #44443c;
}
.card__description {
  margin: 0 1rem 3rem 1rem;
  padding: 1rem;
  background-color: #c9c0af;
  border: 5px solid #7d654f;
}
.card__description h3 {
  font-size: 1.5rem;
}
.card__description hr + h3 {
  text-align: right;
  margin-top: 0.75rem;
}
.card__description p {
  margin-bottom: 3rem;
  font-size: 1.25rem;
}

![](

Mi reto con mi ídola 😄 kate

Dejo mi aporte platzinautas 😃

Asi me quedo. Me guie con los aportes de varios compañeros y la clase del profesor.

No me salió la parte superior 😦, aún necesito practicar más

Hola, aquí está mi trabajo 💚
.

.

Me costó hacerlo solo con absolute y relative, pero al fin reto completado.

Esto fue lo que construí.
.

Codigo HTML
.

Codigo CSS
.