@DeivissonLisboa
@cgyeager
Submitted
What are you most proud of, and what would you do differently next time?
Think I got close.
What challenges did you encounter, and how did you overcome them?
Was trying to align image to the center without all the text being centered, fixed by using div wrapper.
What specific areas of your project would you like help with?
Anything that needs improvement.
@DeivissonLisboa
Posted
Hey, nice project. Well done.
I suggest that you be more general with your CSS, so it becomes more scalable. Imagine this component as part of a larger site, where other CSS styles are affecting it. You should set the stage on the body or a higher-level parent to fully leverage the cascading nature of CSS.
Also, Images don't behave well as flex elements. When dealing with this situation, you should wrap them in a div. This will make it easier to center them and set the width of the image.
One feature that you didn't include in your project was the hover state. Note that this component is intended to lead the user to another blog page, so the <h1> should have an <a> tag. This will change the cursor to a pointer and allow you to redirect the user to the other page. Styling the hover state is as simple as:
h1 a:hover {
color: var(--yellow);
}
I hope you find value in theses tip.
@cgyeager
Submitted
What are you most proud of, and what would you do differently next time?
Didn't resort to copy pasting css.
What challenges did you encounter, and how did you overcome them?
Forgot how to vertical align.
What specific areas of your project would you like help with?
Nothing yet, just getting better at css.
@DeivissonLisboa
Posted
Nice project! It has some interesting ways of solving things.
One of the ways i like to center a single element on the body or div is:
body {
display: grid;
place-items: center;
min-height: 100vh;
}