Continuando con la fase de ubicación y alineamiento

MI tema fue perspectiva.

El camino es una grilla con perspectiva 3d 😃

Quise hacer un pixel art y este fue el resultado:

Comparto mi práctica. Que buen curso 💚

No quedó como quería pero igual aprendí bastante. Tema: diseño conceptual casa Gabo.

No soy muy bueno con esto del diseño, pero… pues este es el mío xD Necesito aprender a diseñar cosas bonitas jajaja
.

Les comparto mi proyecto, hice algo muy simple.
Dejo el enlace a la pagina y el repositorio en Github por si quieren ver el código.

Repositorio
Pagina

Pues así quedó el proyecto:

![](

Tuve problemas con los bordes, pero fue lo mejor que pude hacer por el momento.
Gran curso!

les comparto lo que hice, quise hacer algo distinto antes de realizar mi proyecto.

Acá les dejo con mi proyecto (en imagen porque aún no es responsive y porque apenas es el “hero” de todo mi portfolio 😅)

El curso ha estado bien, pero siento que quedé como a medias ☹ en la clase de “Fase de creatividad” me emocioné y pensé que nos iba a guíar a un proyecto más grande. Entiendo que obviamente parte de nosotros ya hacer cosas más complicadas pero no me lo esperaba así.

Me habría gustado además ver como aprender a usar Grid desde una perspectiva “mobile first”, siendo que es ahora lo estándar, pero en fin… Como curso de Fundamentos de CSS Grid ha estado cool!

He terminado, fue interesante porque antes de este curso, pensaba que sabia usar grid
Y solo era una pequeña parte que conocía, ahora tengo mejor base como para usar esta gran herramienta a un muy buen nivel

Este es mi Github

Me salió a un 96% del modelo inicial, cambie unas partes porque no me convencían del todo.

Próximamente subiré su versión moblie

Gracias Teff!!!

Me inspire en un diseño que vi en Pinterest y así me quedo

Excelente display grid

Les comparto mis dos ejercicios que hice gracias a este gran curso. Recibo feedback de ustedes para mejorar 😄

Mi diseño es similar al de la platzi conf del año pasado

Por aquí mi resultado y con muchas ganas de seguir aprendiendo! Me sirvió mucho este curso 😃

Buscando alternativas para llegar al resultado q quería, encontré un super referente de quien quiero seguir aprendiendo: Jen Simmons https://labs.jensimmons.com/

Les comparto mi diseño terminado. Mi tema fue música:

Este fue uno de los resultados de mi proyecto.

Practicar y practicar para seguir mejorando 😄

Este es mi diseño, lo voy a utilizar para hacer mi blog personal de música próximamente :3

Proyecto terminado 😄

Usando CSS GRID y ayuda con Flexbox también y algo de conocimientos de diseño.

Recursos usados

Diseño en Photoshop

Les comparto mi diseño.

Les comparto mi ejercicio. 😃

Vamos al siguiente curso.

Bien

Tal vez muy sencillo pero es el primero que maqueto de esta forma 😄

Así quedó mi proyecto

:root{
    --color-1:#F23D5E;
    --color-2:#F285A2;
    --color-3:#469CA6;
    --color-4:#04BF9D;
    --color-5:#F20505;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: 'Roboto Condensed', sans-serif;
}
main{
    width: 100%;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
}
main section{
    display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(14, 40px);
    gap: 3px;
}
.box-color-1{
    background-color: var(--color-4);
}
.box-color-2{
    background-color: var(--color-2);
}
.box-color-3{
    background-color: var(--color-1);
}
.box-small-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.box-small{
    width: 25px;
    height: 25px;
}
.box-1{
    grid-column: 7 / 8;
}
.box-2{
    grid-column: 6 / 7;
}
.box-2 div{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.box-3{
    grid-column: 7 / 8;
    grid-row: 2 / 3;
}
.box-4{
    grid-column: 8 / 9;
    grid-row: 2 / 3;
}
.box-5{
    grid-column: 7 / 8;
    grid-row: 3 / 4;
}
.box-6{
    grid-column: 8 / 9;
    grid-row: 3 / 4;
}
.box-7{
    grid-column: 6 / 7;
    grid-row: 3 / 4;
}
.box-8{
    grid-column: 10 / 12;
    grid-row: 9 / 10;
}
.box-9{
    grid-column: 8 / 9;
    grid-row: 11 / 12;
}
.box-10{
    grid-column: 2 / 4;
    grid-row: 9/11;
}
.box-11{
    grid-column: 1 / 2;
    grid-row: 8 / 9;
}
.box-12{
    grid-column: 2 / 3;
    grid-row: 8 / 9;
}
.box-13{
    grid-column: 2 / 3;
    grid-row: 7 / 8;
    justify-content: end;
}
.box-13 div{
    grid-column: 2/3;
    grid-row: 2/3;
}
.box-14{
    grid-column: 8 / 9;
    grid-row: 12 / 13;
    justify-content: end;
}
.box-14 div{
    grid-column: 1/2;
}
.box-15{
    grid-column: 3 / 4;
    grid-row: 11 / 12;
    justify-content: end;
}
.box-15 div{
    grid-column: 2/3;
}
.box-16{
    grid-column: 4 / 6;
    grid-row: 13 / 15;
}
.image-1{
    background-color: #F20505;
    grid-column: 6 / 12;
    grid-row: 4 / 9;
    background-position: top 0px left -200px;
    background-size: 600px;
}
.image-2{
    background-color: #F20505;
    grid-column: 8 / 10;
    grid-row: 9 / 11;
    background-size: 600px;
    background-position: bottom -111px left -285px;
}
.image-3{
    background-color: #F20505;
    grid-column: 4 / 8;
    grid-row: 9 / 13;
    background-size: 600px;
    background-position: bottom -27px left -120px;
}
.image-4{
    background-color: #F20505;
    grid-column: 3 / 6;
    grid-row: 6 / 9;
    background-size: 600px;
    background-position: bottom -188px left -76px;
}
.background{
    background-image: url("pexels-erik-mclean-7360387.jpg");
    background-repeat: no-repeat;
}
.frase{
    grid-column: 1 / 6;
    grid-row: 3/5;
    color: #F23D5E;
    font-size: 3rem;
    font-weight: bold;
    text-align: end;
}
.autor{
    grid-column: 1 / 6;
    grid-row: 5/6;
    align-self: end;
    font-size: 1.6rem;
    text-align: end;
} 

Mi aporte.

Publiqué mi proyecto usando GitHub Pages:
https://patugarte.github.io/cinnema-magazine/

Así quedó 😄

El sistema de grillas:

Dejo también el repositorio de GitHub por si alguien quiere mirar el código.

Tema: Calamardo

No se cual es la política de Platzi sobre publicar enlaces de libros en comentarios, lo digo por posible violaciones a derechos de autor…si se puede me lo hacen saber para compartir un par de libros muy útiles para practicar layouts con css grid

Código
El código aun lo voy a mejorar para quitar malas prácticas y hacerlo más limpio.

Aqui me proyecto final :

Este fue mi proyecto final:

Mi proyecto terminado. Cambie la paleta de colores y un poco la ubicación del contenido.

Siempre me han gustado los espacios que contengan algo de naturaleza, esa fue mi inspiración.

Resultado:

Grilla:

Realice el hongo de Mario Bros “Toad”.

Espero les agrade.
…
Codigo - Github

…

Así me va quedando mi pagina:

Mi diseño:

amigos, le puse una frase que me gusta.

Hola a todos, acá está mi reto personal usando Grid:

Comparto mi reto

Mi proyecto fue hacer una especie de mood board basado en matcha 😃

También dejo por aquí el link al repositorio de github:
https://github.com/JAlvarezV94/matcha-grid

Comparto mi proyecto, fue un buen curso 😃

Aquí mi trabajo final, el ejemplo lo saqué de esta página
![](

uff un gusto trabajar con grid, pero a mi máquina de creatividad le cuesta seguirle el paso, y ya no da para hacer la seccion de projectos por ahora, aún así me gustó

Hace algun tiempo otro estudiante lo hizo y quise hacerlo de dos formas diferentes

CSS

:root {
    --red-cloth: #fd0001;
    --hair-shoes: #9b4f00;
    --skin: #fed291;
    --black: #000000;
    --azul: #4c00df;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
main {
    display: flex;
}
.container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template: repeat(16, 5vh) / repeat(13, 3vw);
    margin-left: 20px;
    margin-top: 20px;
    grid-template-areas: 
        ".   .   .   r1  r1  r1  r1  r1  r1  .   .   .   ."
        ".   .   r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  ."
        ".   .   b1  b1  b1  p1  p1  p1  b11 p2  .   .   ."
        ".   b2  p3  b3  p4  p4  p4  p4  b12 p5  p5  p5  ."
        ".   b4  p6  b5  b5  p7  p7  p7  p7  b13 p8  p8  p8"
        ".   b6  b6  p9  p9  p9  p9  p9  b14 b14 b14 b14 ."
        ".   .   .   p10 p10 p10 p10 p10 p10 p10 p10 .   ."
        ".   .   r3  r3  a1  r4  r4  r4  r4  .   .   .   ."
        ".   r5  r5  r5  a2  r6  r6  a3  r7  r7  r7  .   ."
        "r8  r8  r8  r8  a4  a4  a4  a4  r9  r9  r9  r9  ."
        "p11 p11 r10 a5  y1  a6  a6  y2  a7  r11 p12 p12 ."
        "p13 p13 p13 a8  a8  a8  a8  a8  a8  p14 p14 p14 ."
        "p15 p15 a9  a9  a9  a9  a9  a9  a9  a9  p16 p16 ."
        ".   .   a10 a10 a10 .   .   a11 a11 a11 .   .   ."
        ".   b7  b7  b7  .   .   .   .   b8  b8  b8  .   ."
        "b9  b9  b9  b9  .   .   .   .   b10 b10 b10 b10 .";
}
.r {
    background-color: var(--red-cloth);
}
.s {
    background-color: var(--skin);
}
.br {
    background-color: var(--hair-shoes);
}
.bl {
    background-color: var(--black);
}
.a {
    background-color: var(--azul);
}
.y {
    background-color: #f3ff01;
}
.red01 {
    grid-area: r1;
}
.red02 {
    grid-area: r2;
}
.red03 {
    grid-area: r3;
}
.red04 {
    grid-area: r4;
}
.red05 {
    grid-area: r5;
}
.red06 {
    grid-area: r6;
}
.red07 {
    grid-area: r7;
}
.red08 {
    grid-area: r8;
}
.red09 {
    grid-area: r9;
}
.red10 {
    grid-area: r10;
}
.red11 {
    grid-area: r11;
}
.brown01 {
    grid-area: b1;
}
.brown02 {
    grid-area: b2;
}
.brown03 {
    grid-area: b3;
}
.brown04 {
    grid-area: b4;
}
.brown05 {
    grid-area: b5;
}
.brown06 {
    grid-area: b6;
}
.brown07 {
    grid-area: b7;
}
.brown08 {
    grid-area: b8;
}
.brown09 {
    grid-area: b9;
}
.brown10 {
    grid-area: b10;
}
.skin01 {
    grid-area: p1;
}
.skin02 {
    grid-area: p2;
}
.skin03 {
    grid-area: p3;
}
.skin04 {
    grid-area: p4;
}
.skin05 {
    grid-area: p5;
}
.skin06 {
    grid-area: p6;
}
.skin07 {
    grid-area: p7;
}
.skin08 {
    grid-area: p8;
}
.skin09 {
    grid-area: p9;
}
.skin10 {
    grid-area: p10;
}
.skin11 {
    grid-area: p11;
}
.skin12 {
    grid-area: p12;
}
.skin13 {
    grid-area: p13;
}
.skin14 {
    grid-area: p14;
}
.skin15 {
    grid-area: p15;
}
.skin16 {
    grid-area: p16;
}
.black01 {
    grid-area: b11;
}
.black02 {
    grid-area: b12;
}
.black03 {
    grid-area: b13;
}
.black04 {
    grid-area: b14;
}
.blue01 {
    grid-area: a1;
}
.blue02 {
    grid-area: a2;
}
.blue03 {
    grid-area: a3;
}
.blue04 {
    grid-area: a4;
}
.blue05 {
    grid-area: a5;
}
.blue06 {
    grid-area: a6;
}
.blue07 {
    grid-area: a7;
}
.blue08 {
    grid-area: a8;
}
.blue09 {
    grid-area: a9;
}
.blue10 {
    grid-area: a10;
}
.blue11 {
    grid-area: a11;
}
.yellow01 {
    grid-area: y1;
}
.yellow02 {
    grid-area: y2;
}
.container2 {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template: repeat(16, 5vh) / repeat(13, 3vw);
    margin-left: 20px;
    margin-top: 20px;
}
.red201 {
    grid-column: 4 / 10;
}
.red202 {
    grid-column: 3 / 13;
}
.red203 {
    grid-column: 3 / 5;
    grid-row: 8 / 9;
}
.red204 {
    grid-column: 6 / 10;
    grid-row: 8 / 9;
}
.red205 {
    grid-column: 2 / 5;
    grid-row: 9 / 10;
}
.red206 {
    grid-column: 6 / 8;
    grid-row: 9 / 10;
}
.red207 {
    grid-column: 9 / 12;
    grid-row: 9 / 10;
}
.red208 {
    grid-column: 1 / 5;
    grid-row: 10 / 11;
}
.red209 {
    grid-column: 9 / 13;
    grid-row: 10 / 11;
}
.red210 {
    grid-column: 3 / 4;
    grid-row: 11 / 12;
}
.red211 {
    grid-column: 10 / 11;
    grid-row: 11 / 12;
}
.skin201 {
    grid-column: 6 / 9;
    grid-row: 3 / 4;
}
.skin202 {
    grid-column: 10 / 11;
    grid-row: 3 / 4;
}
.skin203 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}
.skin204 {
    grid-column: 5 / 9;
    grid-row: 4 / 5;
}
.skin205 {
    grid-column: 10 / 13;
    grid-row: 4 / 5;
}
.skin206 {
    grid-column: 3 / 4;
    grid-row: 5 / 6;
}
.skin207 {
    grid-column: 6 / 10;
    grid-row: 5 / 6;
}
.skin208 {
    grid-column: 11 / 14;
    grid-row: 5 / 6;
}
.skin209 {
    grid-column: 4 / 9;
    grid-row: 6 / 7;
}
.skin210 {
    grid-column: 4 / 12;
    grid-row: 7 / 8;
}
.skin211 {
    grid-column: 1 / 3;
    grid-row: 11 / 12;
}
.skin212 {
    grid-column: 11 / 13;
    grid-row: 11 / 12;
}
.skin213 {
    grid-column: 1 / 4;
    grid-row: 12 / 13;
}
.skin214 {
    grid-column: 10 / 13;
    grid-row: 12 / 13;
}
.skin215 {
    grid-column: 1 / 3;
    grid-row: 13 / 14;
}
.skin216 {
    grid-column: 11 / 13;
    grid-row: 13 / 14;
}
.brown201 {
    grid-column: 3 / 6;
    grid-row: 3 / 4;
}
.brown202 {
    grid-column: 2 / 3;
    grid-row: 4 / 7;
}
.brown203 {
    grid-column: 4 / 5;
    grid-row: 4 / 6;
}
.brown204 {
    grid-column: 5 / 6;
    grid-row: 5 / 6;
}
.brown205 {
    grid-column: 3 / 4;
    grid-row: 6 / 7;
}
.brown206 {
    grid-column: 2 / 5;
    grid-row: 15 / 16;
}
.brown207 {
    grid-column: 9 / 12;
    grid-row: 15 / 16;
}
.brown208 {
    grid-column: 1 / 5;
    grid-row: 16 / 17;
}
.brown209 {
    grid-column: 9 / 13;
    grid-row: 16 / 17;
}
.black201 {
    grid-column: 9 / 10;
    grid-row: 3 / 5;
}
.black202 {
    grid-column: 10 / 11;
}
.black203 {
    grid-column: 9 / 13;
}
.blue201 {
    grid-column: 5 / 6;
    grid-row: 8 / 11;
}
.blue202 {
    grid-column: 8 / 9;
    grid-row: 9 / 11;
}
.blue203 {
    grid-column: 6 / 8;
    grid-row: 10 / 12;
}
.blue204 {
    grid-column: 4 / 5;
}
.blue205 {
    grid-column: 9 / 10;
}
.blue206 {
    grid-column: 4 / 10;
}
.blue207 {
    grid-column: 3 / 11;
}
.blue208 {
    grid-column: 3 / 6;
}
.blue209 {
    grid-column: 8 / 11;
}
.yellow201 {
    grid-column: 5 / 6;
    grid-row: 11 / 12;
}
.yellow202 {
    grid-column: 8 / 9;
    grid-row: 11 / 12;
}

practicando
(https://static.platzi.com/media/user_upload/Captura de pantalla (12)-518eceae-9b01-47e9-8602-2fee843920a3.jpg)

Intenté hacer el diseño que cree en figma, y me acerqué mucho al resultado 😃

Dejo por aquí mi proyecto 💚

En general he aprendido mucho, de paso poner en practica muchos conceptos, mi humilde resultado:

No es muy lindo (mi fuerte no es el diseño), pero bueno, lo importante es aprender y prácticar

https://codepen.io/Londrack/pen/oNZZrxa

Aca mi aporte

Que cosa tan hermosa hemos logrado clase a clase Estefy 💜
Me ha gustado mucho el resultado y sobretodo lo que hemos estado aprendiendo.

Comparto el código en CodePen: https://codepen.io/ijcode1/pen/NWpJRKM

Buenas, este es mi intento de ser un front siendo back jaja, siempre tuve la mente cerrada hacia CSS, hasta que me decidí aprenderlo, aún me falta detalles que pulir, pero todo se puede lograr con práctica y dedicación.
PD: también necesito clases de diseño, por si alguien recomiende alguno, gracias!

Hice algo un poco diferente espero les guste

Les comparto mi resultado, fue acerca de las maravillas del mundo, usando un hover para descubrí el texto.

Mi práctica

por lo pronto realice el mismo proyecto del curso

Comparto página para crear cualquier figura geometrica que desees.
Se utiliza la propiedad de clip-path 👍
https://bennettfeely.com/clippy/

Listo y responsivo
Repositorio:
https://grettsam.github.io/CSSGridLayout/

Así quedo mi proyecto, lo único que tiene flex son los cuadros grises, no le coloque responsive, porque literal me tocaba rehacer la página 😅.
-La página se ve bien de 700px en adelante.

ghPages: https://crisleoco2004.github.io/WebGrid/

Mi tarea. Se alargó el círculo jeje

Este fue mi resultado 😃

Mi proyecto fue con la temática de mi series favoritas :3

Les comparto mi proyecto 😁

Aqui les dejo mi reto

Con esta clase, mejoré un poco lo que estaba haciendo de mi proyecto, y aunque sigue sin gustarme el resultado final, pero no por el tema de del udo e implementación de css-grid, sino porque hasta ahorita, veo que como diseñador no doy una, pero ya seguiré practicando.

<body>
    <div class="container">
        <div class="second-background"></div>
        <div class="imagen-ilustrativa">
            <img src="./assets/img/web_ilustration.jpg" alt="">
        </div>
        <div class="profile-pic">
            <img src="./assets/img/pic-profile.png" alt="profile-pic">
        </div>
        <div class="titulo-principal">
            <h1 >harngalf</h1>
        </div>        
        <div class="about-me"> 
            <img src="" alt="">
            <h2>About me...</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus nisi ipsum labore consectetur quae suscipit sed doloribus quod. Nobis qui fuga illum quibusdam sequi dolorem exercitationem saepe pariatur magnam explicabo. </p>
        </div>
        <div class="cards-container">
            <div class="card-uno">
                <img src="" alt="">
                <h2>Titulo</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias adipisci pariatur enim mollitia repudiandae maiores ratione eligendi porro eos. Ipsa, hic rem eveniet tenetur ipsam animi eos ipsum tempore a.</p>
            </div>
            <div class="card-dos">
                <img src="" alt="">
                <h2>Titulo</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente praesentium rem, possimus repellat provident iste itaque ipsam mollitia modi! Hic nisi exercitationem enim molestias aperiam porro explicabo sapiente quia tempora.</p>
            </div>
            <div class="card-tres">
                <img src="" alt="">
                <h2>Titulo</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente praesentium rem, possimus repellat provident iste itaque ipsam mollitia modi! Hic nisi exercitationem enim molestias aperiam porro explicabo sapiente quia tempora.</p>
            </div>
        </div>        
    </div>
    
</body>

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&display=swap');
/*  font-family: 'Comfortaa', cursive;  */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&family=Source+Code+Pro:wght@200;300;400;500;700&display=swap');
/*   font-family: 'Comfortaa', cursive;
font-family: 'Source Code Pro', monospace;   */
* {
    margin: 0;
    padding: 0;
}

:root {
    --dark-gray: #84888c;
    --light-gray: #babcbf;
    --very-light-gray: #f2f2f2;
    --navy: #161853;
    --blue: #292C6D;
    --intense-liht-blue: #164df2;
    --light-blue: #486cd9;
    --gray-blue: #5a73bf;
    --ligth-green-blue: #3df2e0;
    --very-light-blue: #f8fcff; 
    --ligh-pink: #FAEDF0;
    --dark-pink: #EC255A;
}
body {
    font-family: 'Source Code Pro', monospace;
    background-image: radial-gradient(circle, #f8fcff, #bedbf8, #8bb8f1, #6293e7, #486cd9);
    height: 100vh;    
    margin: 25px;
    
}

.container {
    display: grid;
    grid-template: repeat(10, minmax(50px, 90px)) /  repeat(10, minmax(50px, 1fr));
    
    
}
.second-background {
    grid-area: 2 / 3 / 11 / 10;
    background-color: var(--ligh-pink);
}
.profile-pic img {
    width: 60%;
}
.profile-pic {
    grid-area: 1 / 2 / 3 / 6 ;
    border-radius: 50%;
    
}
.titulo-principal {
    grid-area: 2 / 3 / 2 / 10;
   
    font-size: 50px;
    color: var(--gray-blue);
}
.titulo-principal h1 {
    text-align: end;
}
.imagen-ilustrativa {
    grid-area: 3 / 5 / 7 / 11;
  
}
.imagen-ilustrativa img {
    width: 100%;
}
.about-me {
    grid-area: 3 / 1 / 6 / 5;
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
}
.cards-container {
    grid-area: 4 / 1 / 11 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px;
    justify-items: center;
    
}

.card-uno {
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
    
}

.card-dos {
    
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
}
.card-tres {
    
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
}

Hice mi proyecto sobre uno de los deportistas que mas admiro 🏎

Está genial el diseño y como pensando fuera de la caja podemos crear grandes cosas con CSS GRID.

Mi aporte 💪

Así me quedo

Pues cambié de diseño como “100 veces” mientras hacia el codigo, al final lo dejé asi, fue mas retante de lo que creía, por cierto les recomiendo mucho la trilogia de Bioshock, es una obra de arte!

comparto mi practica CSS Grid https://acamilolopezv.github.io/Css-grid/

Comparto mi Proyecto ⭐

• Inspiración
  

  

• Resultado Final
  

  

• Enlace al código en Github Aquí

• Enlace a la DEMO Aquí

Con la Grid 😊

(Se descuadra todo el diseño si cambio las dimensiones de la pantalla)

RESULTADO

Mi trabajo honesto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MODELO GRID</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;700&family=Inter:wght@400;500;700&family=Lato:wght@300&family=Open+Sans:wght@300;500;800&family=Roboto:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
        <div class="item-5"></div>
        <div class="item-6">
            <p>CSS GRID</p>
        </div>
        <div class="item-7"></div>
        <div class="item-8">
            <p>MarjoryJes</p>
        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --aqua: #70d6ff;
    --pink: #ff70a6;
    --salmon: #ff9770;
    --melon: #ffd670;
    --yellow: #e9ff70;
}
html {
    font-size: 62.5%;
}
body {
    font-family: 'Roboto', sans-serif;
    background-image: radial-gradient(circle, #e9ff70, #fce361, #ffc85f, #ffae66, #ff9770);
    height: 100vh;
}
.container {
    display: grid;
    grid-template: repeat(10, 1fr) / repeat(10, 1fr);
    height: 95vh;
}
.item-1 {
    background: var(--aqua);
    grid-column:  1 / 2;
    grid-row: 5 / 10;
    border-radius: 15px;
}
.item-2 {
    background: var(--pink);
    grid-column: 1 / 4;
    grid-row: 7 / 9;
    opacity: 50%;
    border-radius: 15px;
}
.item-3 {
    background: var(--melon);
    grid-column: 5 / 8;
    grid-row: 6 / 11;
    border-radius: 15px;
    box-shadow: 3px 5px 8px rgb(17, 16, 16);
}
.item-4 {
    border: 4px solid var(--aqua);
    grid-column: 6 / 9;
    grid-row: 5 / 8;
    border-radius: 15px;
    opacity: 50%;
}
.item-5 {
    border: 4px solid var(--pink);
    grid-column: 7 / 10;
    grid-row: 3 / 9;
    border-radius: 15px;
}
.item-6 {
    font-size: 5rem;
    grid-column: 6 / 9;
    grid-row: 3 / 5;
    display: grid;
    justify-items: end;
    align-items: center;
    color: grey;
}
.item-7 {
    background: var(--yellow);
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    border-radius: 15px;
    box-shadow: rgb(17, 16, 16) 3px 5px 8px;
}
.item-8 {
    font-size: 2rem;
    display: grid;
    grid-column-start: 4;
    grid-row:  2 / 4;
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    justify-items: center;
    align-items: center;
    color:#696969;
}

No había podido terminar el reto porque no tenía un tema en mente, pero tiempo después lo pude finalizar.
Fue muy divertido hacerlo 😸

Usando una paleta de colores tomando referencia de una imagen.

Resultado final del proyecto

Se logró un 90% 😃