Skip to content
OverviewSolutions
12
Comments
3

Arturo Torres Flores

@Arturo9314México320 points

Hi, I'm Arturo, I from Mexico, I have a math degree and I have great interested in full-stack developed, AI and Robotic. My english is intermediate, I search sites to get hands on experience.

Latest solutions

View more solutions

Latest comments

  • Arturo Torres Flores•320
    @Arturo9314

    Hi, your project is on the right track, could change the color using the property filter.

    https://developer.mozilla.org/en-US/docs/Web/CSS/filter

    Here is a filter generator, to get a color through this property, however this filter applies to the entire image, it is useful for the Hover.

    https://codepen.io/sosuke/pen/Pjoqqp

    On footer section, as you use the img tag you could create a copy, open it in a text editor and set the attribute fill to #FFFF, insted "#2D314D" to just change the color of the letters.

    On the other hand, you could use svg tag on your html and fill the path: https://css-tricks.com/almanac/properties/f/fill/

    Marked as helpful
  • Arturo Torres Flores•320
    @Arturo9314

    Hola, luce excelente, si me permites a continuación te dejo algunos consejos: -En la carpeta design, hay una imagen llamada active-states. Un reto interesante es intentar hacer un diseño dinámico y en esa imagen te muestran algunas partes de la página que se deben ver diferentes llevando a cabo una acción, para este caso, tanto al elemento h1 dentro de la clase "content", el elemento span de clase "three" y la imagen de clase "img", al momento de pasar el cursor sobre ellos, deberían cambiar de color. Para el h1 y el span basta con utilizar la pseudo-clase "hover" y cambiar el color del texto: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

    Para el caso de la imagen, lo más sencillo es utilizar un over lay fade effect, el cual consiste en agregar una sección o div que cubra la imagen, darle la propiedad de opacity en 1 para que este oculto y a la pseudo-clase hover ponerle la opacidad más baja: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade Suerte y que sigas aprendiendo :D

  • Arturo Torres Flores•320
    @Arturo9314

    Hola, yo igual estoy comenzando, te recomiendo OpenBootCamp es en español y gratuito, tiene un curso de HTML y CSS que te va a venir bien, es importante seguir haciendo proyectos y agarrar experiencia. Freecodecamp también tiene contenido muy útil ya que es una especie de proyecto guado (un curso en español viejo y uno nuevo en inglés sobre diseño web responsivo) también te pudede ayudar el contenido en Twitter. https://twitter.com/midudev/status/1571866515518930944?s=20&t=iO8KAiB2mQfwEf0_rwI5vA

    Marked as helpful