for some reason the images arent registering in the github site idk
Felipe Rios
@WolfMozart8All comments
- @jwoods9695Submitted 8 months ago@WolfMozart8Posted 8 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 helpful0 - @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!
@WolfMozart8Posted about 1 year agotext-align
is for text only, for images you could usemargin: 0 auto
or put the image into a div container withdisplay: flex
and usingaling-items: center
andjustify-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 helpful0 - @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?
@WolfMozart8Posted over 1 year agoHola 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 helpful2