Skip to content
OverviewSolutions
22
Comments
11
Daniel Dudu
@danieldudu

All comments

  • namlh•630
    @namlh023Submitted almost 3 years ago

    Look forward to any suggestions. I tried to implement grids for this design. Thanks

    Social Proof Section

    1
    Daniel Dudu•380
    @danielduduPosted almost 3 years ago

    Hi Ryan! It looks nice even with grid. You could try flexbox also - with align-self: (flex-start, center, flex-end).

    Marked as helpful
    0
  • Daniel Dudu•380
    @danielduduPosted almost 3 years ago

    @Kamasah-Dickson good work!

    Try to change the main divs with semantic elements like: <main>/<article>/<footer> Aldo for the <footer> you could use position:fixed in order to make it stick to the bottom

    0
  • Daniel Dudu•380
    @danielduduPosted almost 3 years ago

    @Aryan-ki-codepanti

    Nice job.

    I'd make a position: fixed for the <footer> in order to keep it on the bottom of the page. I also would make a max-width instead of width and work a little more with the main image (try to make it display: block & max-width: 100% and avoid fixed width so it will be consistent with the rest of the card text

    0
  • carlin-mitchell•20
    @carlin-mitchellSubmitted almost 3 years ago

    This one was difficult for me due to needing an overlay image and semi-opaque background at the same time. Fun times, and thank goodness for google! Also, sizing and centering the Ethereum and clock icons was not too fun. I would be curious to know if I went about it the right way or if there is something more efficient I could have done.

    My main concern now is, how can I keep the footer info from creeping up over the card when I zoom in. I have yet to figure this out.

    Any other comments/insights would be greatly appreciated!

    Thanks!

    Responsive card using flexbox and lots of googling

    2
    Daniel Dudu•380
    @danielduduPosted almost 3 years ago

    @carlin-mitchell

    Hello!

    You could use only CSS flex for this challenge. I don't see the reason to use tables.

    Also, make sure you use semantic HTML. For example your footer does not have a <footer></footer> tag

    And you should check the backslashes you have used: --- use / instead (check HTML issues report)

    Bad value images\icon-ethereum.svg for attribute src on element img: Backslash () used as path segment delimiter.

    Context: ble-text><img src=images\icon-ethereum.svg class=icon`><span

    Marked as helpful
    0
  • Daniel Dudu•380
    @danielduduSubmitted about 3 years ago

    Fun project :) Any comments you might have, I'll be happy to read and learn ;)

    HTML & SCSS

    2
    Daniel Dudu•380
    @danielduduPosted about 3 years ago

    Thank you, Anmol! I will consider your suggestion and change accordingly. I guess I left myself dragged too much towards animations.

    1
  • Daniel Dudu•380
    @danielduduPosted over 3 years ago

    Hi Ryiana,

    It looks very good!

    I would add background-position: center center to you bg image to make it stretch a little more centered on the subject.

    Also the breakpoint on media query - i would put id sooner, somewhere around 550px or maybe 600px to give a sooner desktop view and keep the initial card distorsion to a minimum.

    Alternativeley, you could set the article_card div to a width of maybe 375px ...

    Hope that will help :)

    Marked as helpful
    0
  • Daniel Dudu•380
    @danielduduSubmitted over 3 years ago

    Hello! It was fun doing this small challenge. I used svg for social media icons and did not found a viable solution to make background bigger on :hover while changing the color of the icon to white.

    It surely would have been easier to use fontawesome icons but I wanted to use svg locally stored. If you have any ideas ... would be great to study this together.

    Also ... I did not yet worked on JS, cause I'm yet yo learn ...

    Thank you all and happy coding !

    HTML5 & CSS3 with no JS ... yet

    2
    Daniel Dudu•380
    @danielduduPosted over 3 years ago

    Hi Agata! Thank you for your observation. I have modified the social media icons and now they look ok even with :hover. Also for the input, I restored the outline while eliminate border on :focus state. And of, course, some padding for the cursor.

    I appreciate your help :)

    0
  • Daniel Dudu•380
    @danielduduSubmitted over 3 years ago

    I have made this only with HTM5 & CSS3 and did not touch the JS part - because I am still beginner in this. Didn't want to copy / paste without learning first what I am doing.

    If you feel like I could do better, I appreciate any comments :) Thank you !

    HTML5 & CSS3 ONLY - without the JS part :(

    4
    Daniel Dudu•380
    @danielduduPosted over 3 years ago

    Thank you Aman! :) I have made some changes as you have noted about the width issue.

    1
  • Daniel Dudu•380
    @danielduduPosted over 3 years ago

    Hi Grace,

    Thank you for your comments that I very much appreciate. I modified the social part transforming them into links and removed the "hidden" problem and also fixed the width & height.

    Regarding the white surround - I was induced in error by the picture of desktop preview mockup - so I designed according to it first. Now, I have changed somehow to appear as a full webpage.

    Thanks again for your observations! :)

    0
  • Daniel Dudu•380
    @danielduduPosted over 3 years ago

    Hi! It looks nice and fluid to me. I would make the body background lighter as it is in the design, though. But I like your work. Good job!

    0
  • Daniel Dudu•380
    @danielduduPosted over 4 years ago

    Hey Roman, Thank you for your time and review!

    I have eliminated the width on body and changed bg-color...maybe it is my screen that is not so great ...

    Daniel

    0