Skip to content
OverviewSolutions
17
Comments
4
P
Kevin Davis
@webdev1kev

All comments

  • Erick•330
    @MinhoteSubmitted almost 3 years ago

    Hello, I am a beginner in Frontend Skills also in English, so feedback will received very well.

    Card-Flexbox

    3
    Kevin Davis•280
    @webdev1kevPosted almost 3 years ago

    You can add some box-shadows to the Payment button and the Card with box-shadow property to make those elements stand out like in the design.

    Maybe make it a little a bit smaller width size

    Add the background image in the css file with background-image: url() that came in the challenge to have that nice wavy two-toned pattern in the back instead of just one color.

    Alot of it is really just trying to get as close as you can to the design given.

    Pretty good job! Keep it up and happy coding.

    0
  • Kevin Davis•280
    @webdev1kevPosted almost 3 years ago

    Love the animations wish I put more thought into animations in mine.

    The navbar doesn't have the background blur effect like in the design. You can include it by using backdrop-filter: blur() in your css.

    Also the navbar gets pretty scrunched together and the layout breaks in certain smaller screen sizes. May want to see how you can change up the CSS grid. I like to use a 12 column layout to define the grid on my page so things can be sized easier and moved around with grid-column at different media queries.

    Also the paragraph text should just be regular 'Barlow' font may want to include that in the <link/> tag as well.

    Hope this helps and happy coding.

    Marked as helpful
    1
  • Kevin Davis•280
    @webdev1kevPosted about 3 years ago

    There are a lot of different ways to approach the color overlay. If you don't want to mess with all those filter properties you could give the #right-div a background-color and change the opacity of the image to like 0.5. From there you can just mess with the background color until it matches close to the color of the design.

    Hope this helps and keep up the good work!

    Marked as helpful
    0
  • WannaBeDev•90
    @GColvilleSubmitted about 3 years ago

    This one was a struggle for me with a lot of work to be done.

    I'm not sure I went about this the right way, positioning the elements was really tricky.

    Looking at the code, is there a better way to have approached this?

    UPDATE:

    I've re-done the code after some practice and looking around for pointers. Still not perfect, there are some bugs to fix:

    1. Card height increases when each answer is expanded. Not sure if this should really happen.
    2. Font-weight for the question text is giving me trouble
    3. Arrow rotate to be done (had issues)

    FAQ Accordion HTML, CSS, JS

    2
    Kevin Davis•280
    @webdev1kevPosted about 3 years ago

    Yea this one was tricky for me as well!

    For positioning elements I would definitely try to take advantage more of flexbox so you don't have to hard code a lot of margins, especially for the faq-container, since its more grid-like and uniform unlike the image, not sure how to effectively use flexbox on the image lol.

    Also try to use more percentage or relative values in margins, padding, so that items can position themselves more dynamically when the screen size changes.

    Other than that keep at it!

    Marked as helpful
    1