Carlos Castillo
@CharlieCastleWebAll comments
- @nenadmneSubmitted about 2 years ago@CharlieCastleWebPosted about 2 years ago
Hi Nenad! Good work!
Just a few tips:
-
Instead of using
<div id="main-div">
you can use just the<main>
tag. -
Instead of using the h2 tag, I think you should use an h1 tag.
-
According to the design, the card should be centered horizontally and vertically. To do that I use flexbox. The following code should center everything inside the body:
`html, body { height: 100%; }
body { display: flex; align-items: center; justify-content: center; }`
Let me know if you have any doubts or I can help you with other questions!
Marked as helpful1 -
- @CharlesSquirelSubmitted about 2 years ago
I am not sure, if my svg circles should be in this place in HTML structure.
@CharlieCastleWebPosted about 2 years agoHi Karol! Good work keep it up!
In my opinion these circles are not important information in the page, but a design decision. So I think that they should not be implemented in the html file, but as a background in the css as follows:
body { font-family: 'Kumbh Sans', sans-serif; background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
Also I think that the position of the card could be improved, to be more accurate to the design.
Let me know if you need any more information or doubts!
Marked as helpful0 - @arunkanaujia23Submitted over 2 years ago
Can anyone help me with how to Vertical Align the div?
@CharlieCastleWebPosted over 2 years agoHi Arun ! Great work, anyway!
The solution I use to center the main content is:
- Give both the html and body a height of 100%
- On the body selector apply display: flex, align-items:center, justify-content: center
- Then in order to leave the footer at the bottom you'll need to apply margin-top: auto to both the main and footer selectors.
Hope this works, let me know if you need more help
Marked as helpful0 - @neuyannSubmitted over 2 years ago
Still dont really get how to center the main div... Any idea?
@CharlieCastleWebPosted over 2 years agoHi Yann! Great work.
The solution I use to center the main content is:
- Give both the html and boyd a height of 100%
- On the body selector apply display: flex, align-items:center, justify-content: center
- Then in order to leave the footer at the bottom you'll need to apply margin-top: auto to both the main and footer selectors.
Hope this works, let me know if you need more help
Marked as helpful0 - @d3longasSubmitted over 2 years ago
I'm struggling with the hover overlay on the image. I know that i have to use divs, but i don't know how.
@CharlieCastleWebPosted over 2 years agoHi Arthur! Great work!
For the overlay effect one solution could be :
- Create a new div after the image tag.
- Fill it with the green color and eye image
- Position it on top of the image
- On hover play with the opacity of both the image and this new div.
Contact me if you need more help, but that should be a start
2