@jwoods9695
Submitted
for some reason the images arent registering in the github site idk
@WolfMozart8
@jwoods9695
Submitted
for some reason the images arent registering in the github site idk
@WolfMozart8
Posted
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
@adamawalters
Submitted
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!
@WolfMozart8
Posted
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
@zuluaga0905
Submitted
Me costó un poco hacer esto, ya que estoy empezando en el desarrollo Front-end. ¿Me recomiendan algo con lo qué mejorar?
@WolfMozart8
Posted
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