Skip to content
OverviewSolutions
8
Comments
4
Dan
@DanRHatfield

All comments

  • Dominika•80
    @exploremSubmitted about 2 years ago

    I got stuck for a long time with svg styling. I haven't learned about svg yet. I had a problem with setting the SVG to the text in the button. SVG and text also had to be responsive to screen size. At the current level of knowledge, I used the display: inline-block property to align the SVG with the text. To do this, I enclosed the text with a span tag. I was able to position the SVG on the left side away from the text. Using the vertical-aligne property, I positioned the text in the center of the SCG.This was the most difficult for me in this exercise.

    Product preview card component Fronted Mentor

    3
    Dan•220
    @DanRHatfieldPosted about 2 years ago

    Visually, it looks great. A little big when full screen, but spot on visually.

    The switch over to the condensed version happened really early when I was previewing it. Seemed like there was still a lot of space that the browser could have been shrunk before needing making the switch but that might just be my preference.

    On Add to Cart, I believe the shopping cart svg image was provided. Here is what I used:

    <img src="./images/icon-cart.svg" alt="Cart image">
    Marked as helpful
    0
  • Dan•220
    @DanRHatfieldPosted about 2 years ago

    Hi Jamaldada:

    Congrats on finishing the challenge!

    I'm not seeing the desired font come through on your rendering. It also looks like the height and width ratio isn't what they showed in their sample images. Perhaps if you added more white space at the top and sides of the text?

    I do see that it is responsive, so great work there!

    0
  • Taskin Sultana•190
    @TaskinSultanaSubmitted about 2 years ago

    I have faced some problems in positioning the image in first section...I have tried to position the image by adding the property [ position : absolute ] to position it outside the div...but I couldn't position it in responsive mobile view...so I change the design a little bit and put the image inside the div....so please tell me how to solve my image problem...and if I had made any mistakes in this challenge , feel free to point it out.

    Insure-landing-page using HTML,CSS and JAVASCRIPT

    1
    Dan•220
    @DanRHatfieldPosted about 2 years ago

    Hi Taskin,

    First off, congrats on finishing the project!

    I had a similar issue when I was doing this one. I found the answer through making using a linear-gradient that was set on the background with the darker portion going a certain percentage and then white after. It gave the effect of looking like the image was hanging outside the section, but in reality the section was two tone in color and it was part of both.

    This is the page that gave me the idea: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

    Marked as helpful
    0
  • Dan•220
    @DanRHatfieldPosted about 2 years ago

    Visually I think it looks really good. I notice that your solution has additional controls in the month, year and CVC form elements. I could see those being useful.

    Marked as helpful
    1