Skip to content
OverviewSolutions
11
Comments
3

Felipe Rios

@WolfMozart8280 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Felipe Rios•280
    @WolfMozart8

    Add a ./ to the beginning of the image file path in the HTML. For example, use "./image-amyrobson.png" instead of "image-amyrobson.png". I also recommend that you place the images in a folder, so your project will be more organized.

    That part of code should look like this:

    <img src="./image-amyrobson.png" class="top-avatar" />
    Marked as helpful
  • Felipe Rios•280
    @WolfMozart8

    text-align is for text only, for images you could use margin: 0 auto or put the image into a div container with display: flex and using aling-items: center and justify-content: center.

    #illustration-thank-you {
    width: 10rem;
    margin-top: 3rem;
    margin-bottom: 0;

/*this... or you can use `margin: 0 auto;` (the important thing is the **auto** for the sides left/right)*/
    margin-left: auto;
    margin-right: auto;   
}

    And another option could be:

    /*this is a div that have the image inside*/
.image-container {
    display: flex;
    justify-content: center;
    aling-items: center
}

    Im not sure the $(#card) syntax that you are using (is that JQuery?), but pretty sure you can set those styles with that.

    Marked as helpful
  • Felipe Rios•280
    @WolfMozart8

    Hola En el HTML fíjate que tienes suelto un <body> de más (sin su cierre </body>), HTML generalmente no avisa de este tipo de errores, pero más allá de eso veo todo correcto (me gusta la pequeña animación con hover).

    Lo único que te podría aportar es que te fijes en el archivo style-guide.md, el cual te da algunos estilos de la página como los colores (usualmente en formato hsl como hsl(4, 100%, 67%)), los fonts (generalmente te da una página de google fonts como Roboto), el weight que usan los fonts (400, 700), etc...

    Además, en el index.html del archivo que descargas ya están escritos los textos originales, para que solo los copies, y no tengas que escribirlo todo.

    Así no tendrás que sacar los valores por tu cuenta, además de que el resultado final se verá mucho más similar al diseño original.

    Espero que sea de ayuda :)

    Marked as helpful