Skip to content
OverviewSolutions
11
Comments
3
Felipe Rios
@WolfMozart8

All comments

  • Felipe Rios•280
    @WolfMozart8Posted 9 months ago

    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
    0
  • adamawalters•20
    @adamawaltersSubmitted about 1 year ago

    I created an interactive rating component using HTML, CSS, and JavaScript.

    Question:

    I run code on thankyou.js (the thank you page) to align the items within the card container to the center. The code is: $('#card').css('text-align', 'center');

    This works on the paragraph and headers within the card but not the image, which is still left-aligned. Could you please help me understand why?

    Thank you!

    Interactive rating component (please help)

    1
    Felipe Rios•280
    @WolfMozart8Posted about 1 year ago

    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
    0
  • zuluaga0905•10
    @zuluaga0905Submitted over 1 year ago

    Me costó un poco hacer esto, ya que estoy empezando en el desarrollo Front-end. ¿Me recomiendan algo con lo qué mejorar?

    Código Qr

    2
    Felipe Rios•280
    @WolfMozart8Posted over 1 year ago

    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
    2