Skip to content
OverviewSolutions
29
Comments
4
Gabriel Crispim
@sirbiel100

All comments

  • Dylan Heslop•1,570
    @dylan-dot-cSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    Glad I was able to make the background icons flexible and using the HTML template tag to help making the js code better.

    I would definitely upgrade the js code because it's not as efficient as I would like it to be.

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

    Making it more accessible and optimizing the js code.

    Responsive Time Tracking Dashboard | HTML CSS JS

    1
    Gabriel Crispim•430
    @sirbiel100Posted 5 days ago

    Perfect design bro, congrats!

    1
  • lostsoul-akk•30
    @lostsoul-akkSubmitted 7 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
    Gabriel Crispim•430
    @sirbiel100Posted 7 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
  • Gabriel Crispim•430
    @sirbiel100Posted about 1 year 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
  • Gabriel Crispim•430
    @sirbiel100Posted 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