Formulario de contacto y web personal

[clear thicket]

voy a probar crear un hilo ....

[clear pelican]

ok

[clear thicket]

pues mira, este esta mejor...

no habia visto este opción de crear un hilo antes

¿has podido mirar en el inspector de accesibilidad del navegador? Quizas te puede decir si estan bien o no.

[clear pelican]

eh

no se que es el inspector

buscare

[next heart]

Perdonen que me meta. @clear thicket Como puedo tener la linea puesta sin que haga nada probe poninedo // la frase // y no va.

[clear thicket]

El inspector es una herramienta que ofrecen los navegadores impresdinible para los desarrolladores.

[clear pelican]

mirare en las configuraciones

[clear thicket]

¡oye! te has metido en el hilo que no era! 😆

[next heart]

Ya perdon 😦

Pero sabria como hacerlo?

[clear pelican]

al parecer mi navegador no tiene eso

[next heart]

prueba este atajo

[clear thicket]

¿que navegador usas?

[next heart]

no se si en tu navegador sera lo mismo

[clear pelican]

brave

[clear thicket]

hmmm, no lo tengo installado ahora mismo pero estoy seguro que lo tienes. Quizas tienes que activar herramientas del desarrollador desde configuracion o preferencias.... voy a preguntar a google....

[next heart]

yo tmb uso brave

dale a Mas herramientas

Y luego a esto

[clear pelican]

listo

gracias

abri esto

[clear thicket]

@clear pelican estas apunto de desubrir un mundo nuevo....

[clear pelican]

🙀

el momento mas esperado del año

[clear thicket]

Las herramientas del desarrollador son muy potentes y ayudan muchismo

[clear pelican]

busco un tuto?

[clear thicket]

si tienes tiempo y ganas, si. Lo principal es el inspector de css - selecciones un elemento en tu web y puedes ver todos los estilos que has aplicado y ademas puedes modificarles directamente para ver como quedan los cambios. Esto te puede ayudar solucionar problemas. Luego aplicas los cambios en tu código.

[clear pelican]

ok

pero desde tu punto de vista

el fondo queda bien con el amarillo de los button y header verde?

[clear thicket]

para serte sincero no me gusta demasiado. Sobre todo el amarillo. No me parece un color que llama la atencion. El verde tampoco me convence demasiado por creo que es un color que tienes en tu logo, ¿no?

[clear pelican]

buscare paletas de colores

[clear thicket]

(Me he gustado eso de los hilos - a ver si empezamos a usarlo con mas preguntas y asi limpiar un poco el canal)

[clear pelican]

que combinen bien

[clear thicket]

Pureba con el header en la naraja o el rojo del logo (el rojo quizas seria demasiado)

luego usa el rojo para los botones

[clear pelican]

💀

[clear thicket]

solo son sugerencias. Tema de accesibilidad aparte, lo importante es que te gusta a ti y que sientes que el diseño representa lo que intentes tramitir

[clear pelican]

vale, gracias por la ayuda chris

[clear thicket]

👍

[clear pelican]

uff este background me gusto

pero no combina con nada

😦

[clear thicket]

En la captura no veo el header ni el botón así que no sè que has cambiado. Pero como te he comentado antes, tienes que buscar algo que te gusta a ti.
Creo que el diseño en generalal falta estructura.
El texto superior es demasiado ancho y no se ajusta al ancho de las cajas de tus proyectos. Y la caja de contacto tampoco se ajusta…. Hay que intentar crear una relación entre los elementos y definir las zonas.

Ahora mismo no estoy en n mi ordenador así que no puedo hacer mucho para explicarme mejor…

[clear pelican]

creo saber a que te refieres

el texto de sobre mi

es muy ancho

eso es?

[clear thicket]

Para empezar, si

[clear pelican]

no entendi fue lo de las cajas

de contacto

[clear thicket]

Entiendo que quizás no quieres añadir una foto tuyo ya que eres menor pero le falta una imagen y una sección “hero”.

[clear pelican]

que quede asi?

[clear thicket]

La caja de contacto no se aliña con ningún otro elemento

[clear thicket]

Eso sería a mejor aunque habrá que darle algo de relleno, al menos en el desktop para que se siente tan solitario

Pero vas bien encaminado

[next heart]

prueba hacer algo asi

[clear thicket]

Me gusta el color del título

[clear pelican]

que opinan si hago un archivo html como una seccion y que un boton los envie

para que no quede volando el form ahi

[clear pelican]

se ve bien

[next heart]

probe unos cuantos y este es el que mas me convencio

[clear thicket]

Yo creo que es necesario crear otro HTML para eso

[clear pelican]

si

como cuando envia un correo

que manda a otra seccion de la pagina

la de send es la otra seccion

podria crear una que mande a la zona de enviar formulario

[clear thicket]

Yo lo mantendría todo en la misma página pero eso ya es otra tema.

[clear pelican]

el problema es como acomodo el form

[clear pelican]

asi se ve re feo

[clear pelican]

eso lo estaba pensando y colocar un hola mundo o algo asi con el efecto maquina de escribir

[clear thicket]

Lo de la máquina de escribir esta bastante visto pero debes tener un “hero”

Mi consejo es empezar dese arriba. Ya tienes tu header, siempre puedes ajustar los colores. Ahora concéntrate en crear un “hero” con alguna línea que llama la atención, un foto o imagen , y un botón de acción (ej “contáctame”)

[clear pelican]

@clear thicket

mejor?

el boton lo cambiare

[clear thicket]

me gusta. Creo que algo más de padding en los inputs y textarea le vendria bien

el boton amarillo con el fondo oscuro no queda mal

donde no se veia bien era con el fondo blanco por el tema de falta de contraste.

[clear pelican]

ahi tiene 5 px de padding

le pongo 10?

[clear thicket]

si, no cuesta nada probar

[clear pelican]

funciono

se ve mejor

[clear thicket]

Quizas tambien intentar juntar mas los labels (me imagino que son labels) con cada input, dejando un poco de margen por encima.

[clear pelican]

ok

[clear thicket]

es decir, acerca cada label a su input pero deja el hueco por encoma

si, queda mejor con mas padding

[clear pelican]

asi?

[clear thicket]

si

mejor, ¿no?

[clear pelican]

bastante

[clear thicket]

acabo de ver este video https://www.youtube.com/watch?v=bFIIHOI5QoE y me acordé de ti. Aunque esta en inglés, recomiendo que sigas el canal de DesignCourses ya que muchos de sus videos son sencillos refactorización de diseños y su forma de explicarlo es muy visual.

[clear thicket]

la separación y el espacio "blanco" es muy útil en el diseño - ayuda separar elementos y lo ahce mas faciln para el usuario.

[clear pelican]

muchas gracias

[clear thicket]

ahora se nota que son 3 elementos individuales

[clear pelican]

si, es mas legible por asi decirlo

ahora debo encontrar el color para el button

[clear thicket]

¿los labels estan en bold o con un font-weight alto?

[clear pelican]

ninguno

[clear thicket]

vale, será el fuente...

[clear pelican]

montserrat

font family

[clear thicket]

prueba dandole font-weight: 300;

solo para verlo...

pero vamos, no es tan importante

[clear pelican]

ahiesta con el font

weight

[clear thicket]

esta igual - séra que no lo tienes instalado. Da igual, no es tan importante ahora mismo

Creo que el color oscuro no funciona para el botón.

[clear pelican]

segun un video que vi eso depende si la fuente lo tiene o no

hay fuentes que tienen distintos weight y otros no

segun el video

[clear thicket]

Pero de todas formas habrá que pensar en los colores al nivel página. Este color lo debes usar mas veces para que tenga sentido. Y no olvidamos el tema de usabilidad

[clear pelican]

se ve un poco feo

[clear thicket]

exacto. -¿de donde estas sacando el fuente?

[clear pelican]

google fonts

[clear thicket]

¿como lo estas importando?

[clear pelican]

@import

con la url

y luego font-family: 'Montserrat', sans-serif;

[clear thicket]

¿me puedes enseñar el url que estas usando para impotarlo?

[clear pelican]

claro

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

[clear thicket]

vale, eso lo explica

con este url puedes ver que solo estas importando 700 - eso es bastante "bold". Lo suyo es que imporatas varios "weights"

un segundo....

¿lo has importado tu o has copiado de un tutorial?

[clear pelican]

importado

yo

[clear thicket]

excelente

entonces te comento que cuando importas un fuente de google fonts puedes seleccionar varios "weights". No ahce falta importarles todo pero yo suelo importar uno "fino" de 300, uno de uso general de 400 o 550 y luego uno para textos "bold" de 600 o 700 - con un total de 3 suele ser sufficiente.

[clear pelican]

agarro varios weights?

[clear thicket]

para que no tengas que volver a google fonts las puedes añadir directamente...

[clear thicket]

Por ejemplo asi: @300;500;700&
exacto

[clear pelican]

funciono

[clear thicket]

luego en tu codigo defines cual quiers usar.
Por ejemplo en el "body" añades `font-weight: 500'

yo pondria algo menos "fuerte" en el body para que el texto en general no sea tan pesado. Luego usas el de 700 solo para titulos o algun texto que quieres destacar.

[clear pelican]

ok

gracias

[clear thicket]

al tema de colores para tu boton, este verde o azul quedan bien con tu fondo - prueba con uno de ellos o incluso on un gradient....

el tema entonces seria ver que color de texto se vea bien encima de este color

[clear pelican]

eso seria con color:?

porque con color no me da

[clear thicket]

no, con background

igual que lo has puesto con un fondo oscuro, prueba con uno de estes colores

[clear pelican]

pero hace esto

[clear thicket]

¿me puedes enseñar el css para este botón?

¿que estas usando para generar la página?

[clear pelican]

pero ese no es un boton

es un h1

[clear thicket]

es verddad, perdona, refiero al botón de enviar del formulario

usé la captura para explicarte a que colores referia

[clear pelican]

aaah

o el amarillo

[clear thicket]

exacto - prueba el botón de enviar con el azul o con el verde

ambos colores quedan bien con tu color de fondo

el tema es como hacer que se vea bien el texto.

pero hay un truco CSS que se puede hacer para que el propio navegador procure usar un color de texto con un buen contraste.

[clear thicket]

un poco flojo pero no esta mal

por cierto, metele algo de padding en cada lado

eso se puede hacer con padding-inline: 20px; si no conoces este propiedad es un padding que solo afecta los laterales (en realidad es un poco mas complicado que eso pero por ahora sirve)

por supuesto tambien se puede con un padding normal

[clear thicket]

me gustaba mas azul - se tiene que poder ver bien con el fondo azul

[clear pelican]

mejor?

o mas claro u oscuro

[clear thicket]

mas claro si puede ser

algo como #2DAAE0

pero vamos, en general a mi me gusta - se ve bien con tu fondo

[clear thicket]

a mi me gusta eso pero si te parece demasiado, vuelve con tu azul anterior

quizas es demasiado "Twitter" 😉

[clear pelican]

jajajaj

[clear thicket]

Diseño formulario de contacto y web personal

Formulario de contacto y web personal

(estoy explorando las posbilidades de este sistema de hilo)

(por cierto, no soy español así que perdona si cometo fallos de ortografia etc.)

[clear thicket]

otra cosa es que no esta bien alineado a la izquierda, si puedes, quitale el margin lateral.

[clear pelican]

ya lo arregle con margin auto

[clear thicket]

pero vamos, este ya son detalles sin demasiado importancia ahora mismo

no debe tener margin a no ser que lo quieres en medio

[clear pelican]

lo tengo 10px auto para que se separe del input

pregunta el boton regresar asi esta bien ubicado o lo cambio?

[clear thicket]

vale, si solo definies un valor el margin seria por todos los lados.
Si solo quieres un margin superior hay dos (tres) formas de hacerlo:

margin-top: 10px; < solo se aplica al margen superior
margin: 10px 0 0 0; < se definan en el siguiente de arriba, derecha, inferior y izquierda
margin-block: 10px 0; < solo se defina los margenes superior y inferior

Lo mas facil de entender es el primero ya que solo estas aplicando un margen superior.

[clear pelican]

ok, me sera util

gracias

[clear thicket]

asi queda bien

¿que te parece en general? Has avanzado bastante, ¿no creas?

[clear pelican]

si, la verdad me parece que si a comparacion que antes

muchas gracias por la ayuda chris

[clear thicket]

de nada, no dudas en preguntarme. Siga con los cambios, tengo ganas de ver si creas un "hero section" y como vuelves a usar el color azul del botón 😉

[next heart]

Que cambio de lo primero todo blanco a ahora muy bien hecho. ☺️🙌

[clear pelican]

gracias

[next heart]

por si quieres echarle un ojo a mi web para crear la tuya esta en mi biografia

[clear pelican]

esta linda

un tip en los <a> y buttons, colocales un transition duration de 0.5s, lo que hace es suavizar el efecto :hover

[next heart]

No me di cuenta pero ahora que ando en movil no se pone el responsive

[next heart]

lo estuve pensando porque esta tarde me lo dijo un amigo pero no he tenido tiempo estuve muy ocupado

[clear thicket]

@clear pelican ¿Has solucionado el tema del flex?

[clear pelican]

eso parece

no se si soy yo o es que la imagen no esta alineada a la misma altitud del texto

[clear thicket]

Al contenedor añade align-items: center

Lo que si veo es que hay mucho espacio entre ellos.
¿Estás definiendo una anchura maximo a tu diseño?

¿Me puedes enseñar una captura de todo?

[clear pelican]

ya voy

[clear thicket]

El código no, la web

[clear pelican]

ok

[clear pelican]

le quite el flex direction al #hero y se juntaron, le coloque un gap a #hero__container y funciona para lo que dices

[clear thicket]

Te sobra un nivel de HTML.
Puedes quitar el div hero_container, y aplica sus estilos al section con is hero

[clear pelican]

si lo quito la imagen deja de estar al lado

[clear thicket]

Dame un momento….

Ahora cambia el código de #hero_container > div, #hero_container img

por este:

#hero > div, #hero img

[clear pelican]

quedo asi

[clear thicket]

Vale, ahora aplica el margin: 0!auto; al #hero

[clear pelican]

quedo asi

[clear thicket]

¿Me pones el código css del hero?

[clear thicket]

No has puesto el margin

[clear pelican]

era en #hero?

el teclado se esta quedando sin bateria, por eso las letras

[clear thicket]

(Ya puedes quitar el estilo hero__container)

[clear thicket]

Si

[clear pelican]

quedo asi

chris debo irme

[clear thicket]

Vale

[clear pelican]

me ayudas luego pero gracias 🙂

[clear thicket]

Mañana seguimos si quieres