A mi también me gustaría sigerir una página llamada Material Palette donde tu puedes combinar dos colores y te entrega toooda una pelata de colores con sus códigos hexadecimal para usar:
.
.
Yo aún sigo pensando en qué colores debería usar… 🤔
Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento antes de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 151
Preguntas 3
A mi también me gustaría sigerir una página llamada Material Palette donde tu puedes combinar dos colores y te entrega toooda una pelata de colores con sus códigos hexadecimal para usar:
.
.
Yo aún sigo pensando en qué colores debería usar… 🤔
Les recomiendo mucho figma, es fácil de utilizar y puedes llevar tu diseño muy fácil, me ayudó a diseñar y construir mi portafolio😃
https://platzi.com/clases/figma/
Por cierto mi portafolio todavía no esta terminado pero me gustaría recibir algo de feedback 😄
https://brandonargel.github.io/
Va mi identificación de elementos.
Verrrdaderamente, así me sentí:
Hace un tiempo hice este proyecto con lo que aprendí de Estefany en Platzi Master 😄.
Me gustó la idea 1 e hice algo muy similar 😄
Este será mi proyecto para practicar grid 😃, es una mini biografía de unos de mis mangas favoritos
Punto de partida
Resumen:
Inspiracion:
Hacer una lista de todo lo que se necesita
Hacer un bosquejo y plasmar las ideas
Espero lograr el siguiente objetivo:
Encontré éste sitio, es muy interesante: https://gridcritters.com/
No es mucho pero pues al menos es mío
TABLET:
CEL:
Hola❤ este fue mi proceso creativo y la idea final
Moodboard:
Elementos:
Idea final:
puedes construir sus paletas de colores utilizando https://coolors.co
Mi moodboard
Este es mi Borrador …
Por ahora. 😄
Como cuando uno no tiene ni idea de lo que quiere… y dispara con una metralleta a ver a qué le da… vamo a ver qué sale de todo esto 🤘
Hace tiempo hice una lista con muchos sitios para elegir una paleta de colores, espero que les sea de utilidad:
Comparto el moodboard:
Y el bosquejo que realicé a partir de los elementos:
iniciando mi blog
Les dejo éste sitio para que, no vayan a pesar tanto sus imágenes ( https://tinypng.com/ ).
Les dejo mi proyecto para grid, me inspire en la correinte Bauhaus
Aquí mi moodboard:
Mi borrador (no soy bueno con el dibujo… 😛)
Bueno, admito que el diseño no es lo mio, pero ahi vamos xdd
aqui esta mi MoodBoard:
y aqui ya esta el resutado final ig?
espero les guste ^^
Mi diseño
¡Empecemos!
Hola a todos, la verdad me inspiré en muchas revistas de fotografía de animales y en layout grids bastante interesantes.
Conceptos
layout inspiration
Grid inicial
Aqui mis elementos: Ya con ansías
Este es mi MoodBoard:
.
Y este es mi diseño:
Voy con ganas ❤️
Trabajo mi humilde trabajo
Ahi vamos aprendiendo bastante de CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: 'EB Garamond', serif;
background-color: #e5dedf;
}
.container {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(8, 1fr);
text-align: center;
padding: 10px;
}
.menu {
grid-column: 5 / 13;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.menu a {
font-weight: 500;
font-size: 1.5rem;
text-decoration: none;
color: #fffcfc;
}
.services {
font-size: 2.5rem;
color: #fffcfc;
}
.cure {
grid-column: 2 / 3;
grid-row: 1;
align-self: center;
}
.ourservices {
grid-column: 7 / 11;
grid-row: 2;
}
.working {
grid-column: 12 / 14;
grid-row: 3;
font-size: 1.5rem;
align-self: center;
color: #a1a08e;
}
.book {
grid-column: 15 / 17;
font-size: 1.5rem;
align-self: center;
}
.picture img {
height: 100%;
width: 100%;
object-fit: cover;
border: 2px solid black;
box-shadow: 0 4px 8px 0 #00243a, 0 6px 20px 0 #00243a;
}
.item1 {
grid-column: 3 / 7;
grid-row: 4 / 9;
}
.item2 {
grid-column: 6 / 12;
grid-row: 3 / 8;
}
.item2 img {
opacity: .8;
}
.item3 {
grid-column: 11 / 14;
grid-row: 4 / 6;
}
.item4 {
width: 150%;
height: 150%;
background-color: #929a75;
border-radius: 100%;
position: relative;
left: 25vw;
top: 15vh;
z-index: -1;
box-shadow: 0 4px 8px 0 #00243a, 0 6px 20px 0 #00243a;
}
.item4::after {
content: '';
width: 5px;
height: 5px;
background-color: #485131;
position: absolute;
border-radius: 100%;
left: 45%;
top: 10%;
}
.item4::before {
content: '';
width: 5px;
height: 5px;
background-color: #485131;
position: absolute;
border-radius: 100%;
left: 40%;
top: 40%;
}
.item5 {
width: 200%;
height: 200%;
background-color: #929a75;
border-radius: 100%;
position: relative;
left: 55vw;
top: 38vh;
z-index: -1;
box-shadow: 0 4px 8px 0 #00243a, 0 6px 20px 0 #00243a;
}
.item5::after {
content: '';
width: 5px;
height: 5px;
background-color: #485131;
position: absolute;
border-radius: 100%;
left: 60%;
top: 80%;
}
.item5::before {
content: '';
width: 5px;
height: 5px;
background-color: #485131;
position: absolute;
border-radius: 100%;
left: 70%;
top: 60%;
}
una página que muestra que colores están presentes en una imagen, espero les sirva
https://pinetools.com/es/obtener-colores-imagen
planificación
Pretendo realizar una composición en la que juego con diferentes tamaños y orientaciones de letras:
Quiero utilizar algunos bordes de ciertas cuadrículas que hacen parte de otras cuadrículas. Así mismo, girar la composición en la pantalla. Tener un alto contraste entre tipografía y fondo en un color vivo. Posiblemente aprezcan 1 o 2 imágenes / vectores de deportistas (corriendo, o previo a correr o un escalando).
El mensaje central será: “NUNCA PARES DE APRENDER”. Como textos secundarios ubicados en vértices estratégicos, aparecerán conceptos tales como: reinventarse, explorar nuevas posibilidades, cambiar de carrera, transformación digital, descubrir habilidades, desarrollar nuevas competencias, aprender haciendo, generar nuevas conexiones. | Disciplina, autogestión, constancia, concentración, empoderamiento. | Platzi
Como referente opté por algunas piezas visuales desarrolladas por Paula Scher.
Tengo mi idea con lo siguiente, espero salga como la tengo en mente, ademas lo hago con mi videojuego favorito!
aprovechando que es octubre voy a poner esta obra maestra de los point & clicks como referencia a ver como termina todo
;
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"item1 item2 item3"
"item4 item5 item5";
background-color: #3c3a42;
}
.item{
padding: 20px;
}
.container__item-card {
height: 100%;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 14px;
margin: 0;
}
.container__item-card h2{
height: 20%;
font-size: 2.4rem;
}
.container__item-card figure{
margin: 20px;
}
.container__item-card p {
font-weight: 900;
color: #382b43;
font-size: 3rem;
}
.container__item-card img{
width: 200px;
object-fit: contain;
border-radius: 10px;
}
.container__item-card-imgs{
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.item-5{
grid-area: item5;
}
Hola a todos!!! 😃
les comparto mi lista…
Comparto pagina CSS Gradient para Paleta de colores:
Tematica:Dog´s breed
Figuras principales: circulos, rectangulos, cuadros
Imagenes:puppy dogs
Tipografía:yakone 700 ,poppins 400,500
Paleta de colores:
.dark-primary-color { background: #7B1FA2; }
.default-primary-color { background: #9C27B0; }
.light-primary-color { background: #E1BEE7; }
.text-primary-color { color: #FFFFFF; }
.accent-color { background: #448AFF; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #757575; }
.divider-color { border-color: #BDBDBD; }
Si quieren generar paletas de colores apartir de images les recomiendo esta pagina:
Entro en desesperacion por que no se que hacer
debo ser original o que kmrglmñrqemñlrh mñlrEHHRW
Proceso de imi proyecto
Lo hice en notion.
Aquí mi idea:
Identificación de elementos terminada:
Comparto mi proceso.
Recursos para grid design
![](
Aquí va el mío
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.