Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions22Comments11

All comments

  • namlh• 630

    @namlh023

    Submitted

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

    Social Proof Section

    1

    Daniel Dudu• 380

    @danieldudu

    Posted

    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

    @danieldudu

    Posted

    @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

    @danieldudu

    Posted

    @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-mitchell

    Submitted

    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

    @danieldudu

    Posted

    @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

    @danieldudu

    Submitted

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

    HTML & SCSS

    2

    Daniel Dudu• 380

    @danieldudu

    Posted

    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

    @danieldudu

    Posted

    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

    @danieldudu

    Submitted

    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

    @danieldudu

    Posted

    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

    @danieldudu

    Submitted

    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

    @danieldudu

    Posted

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

    1
  • Daniel Dudu• 380

    @danieldudu

    Posted

    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

    @danieldudu

    Posted

    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

    @danieldudu

    Posted

    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