All comments

• 

  lostsoul-akk• 30

  @lostsoul-akk

  Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  Having taken the chance to try and complete this challenge is something that I feel proud of.

  What challenges did you encounter, and how did you overcome them?

  I encountered a challenge in shading the card's background to get the black view as shown in the challenge that was presented.

  What specific areas of your project would you like help with?

  I'd like some help in doing the shade at the back of the card.

  

  A responsive web page of a blog card preview

  1

  50

  

  Gabriel Crispim• 400

  @sirbiel100

  Posted 5 months ago

  Hello!

  I see you need help in the shades, so here it goes some advices.

  In the 'box-shadow' property you can add 4 values before the color: X position (horizontally), Y position (Vertically), blur and distance the shadow gonna have.

  If you see on the preview, the shadow is to the right and to the bottom so you have to change the first two axis (X, Y):

  It would be something like: box-shadow: 8px 9px 0 0 black;

  Since the box-shadow doesn't have a blur and don't have a huge distance from the box, the two last values are not necessary.

  I hope I could help! 😁

  Happy coding!

  Marked as helpful

  0
• 

  syyedmuhammadabdullah• 180

  @syyedmuhammadabdullah

  Submitted 12 months ago

  need help regarding the image position

  

  FAQ Accordion

  1

  30

  

  Gabriel Crispim• 400

  @sirbiel100

  Posted 12 months ago

  Hello Sayed!! Congrats for your solution, it looks really nice!

  I saw that you need help with your image position, so let me help you on that:

  • The best way I found to not overflow the illustration image was: 1 - You have to create a section for your images

  <section class="FaqSection>
  
    <section class= "imagesSection">
        <img src="./path/illustration-image.png">
        <img src="./path/background-image.png">
        <img src="./path/box-image.png">
    </section> 
  
    <section>
      //Rest of the code here
    </section>
  
  </section>
  

  • Now you create a DIV inside the image section to put the images that you dont want to overflow:

  <section class="FaqSection>
  
    <section class= "imagesSection">
        <div class="overflowHiddenDiv"
            <img src="./path/illustration-image.png">
            <img src="./path/background-image.png">
        </div>
        <img src="./path/box-image.png">
    </section> 
  
    <section>
      //Rest of the code here
    </section>
  
  </section>
  

  • And in your css you cand add on that div a overflow hidden to it:

  .overflowHiddenDiv{
      overflow: hidden;
      // Rest of the code
  }
  

  So in that way your both images won't be overflowing and your box image will be overflowing.

  I hope that was helpfull!

  0
• 

  _nehal💎• 6,710

  @NehalSahu8055

  Submitted over 1 year ago

  Any feedback will help me to improve. Thank you.

  

  NFT Preview Card

  1

  40

  

  Gabriel Crispim• 400

  @sirbiel100

  Posted over 1 year ago

  Hello

  Congrats for your coding!

  I could see that you did not put hover effects and the 'eye' image when the hover is activated. If you have doubts or you don't know what 'hover' and '::after' is I want to recomend you this website: https://www.w3schools.com/css

  You gonna learn a lot!

  Good programming

  1

  This comment has received 1 replyShow