All comments

• 

  Nenad Cosovic• 360

  @nenadmne

  Submitted almost 2 years ago

  

  QR code

  2

  40

  

  P

  Carlos Castillo• 360

  @CharlieCastleWeb

  Posted almost 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 helpful

  1
• 

  P

  Karol• 210

  @CharlesSquirel

  Submitted almost 2 years ago

  I am not sure, if my svg circles should be in this place in HTML structure.

  

  Profile Card Component CSS only

  1

  20

  

  P

  Carlos Castillo• 360

  @CharlieCastleWeb

  Posted almost 2 years ago

  Hi 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 helpful

  0

  This comment has received 1 replyShow
• 

  Arun Kanaujia Patel• 170

  @arunkanaujia23

  Submitted over 2 years ago

  Can anyone help me with how to Vertical Align the div?

  

  QR code component With HTML/CSS

  3

  60

  

  P

  Carlos Castillo• 360

  @CharlieCastleWeb

  Posted over 2 years ago

  Hi 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 helpful

  0
• 

  Yann• 190

  @neuyann

  Submitted over 2 years ago

  Still dont really get how to center the main div... Any idea?

  

  CSS flex basic html & css

  1

  30

  

  P

  Carlos Castillo• 360

  @CharlieCastleWeb

  Posted over 2 years ago

  Hi 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 helpful

  0
• 

  Arthur de Oliveira• 10

  @d3longas

  Submitted 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.

  

  NFT preview card using raw css

  2

  40

  

  P

  Carlos Castillo• 360

  @CharlieCastleWeb

  Posted over 2 years ago

  Hi 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