Skip to content
OverviewSolutions
7
Comments
5
Jimender
@Jimender

All comments

  • Jimender•140
    @JimenderPosted over 3 years ago

    Hello @alexiscenriquez, Nice Attempt on this Challenge.

    Tips on how you can improve it:

    • Do not give your card a fixed height. you can envelop your main html inside a container and give it height of 100vh.
    • Place your text content and buttons inside a wrapper or container and apply padding to it.
    • Your card have too much border radius reduce it to match the header img. Instead of % use pixels for border-radius.
    • For background svg try
    background: top/100% no-repeat url(../images/pattern-background-mobile.svg);
background-color: var(--paleBlue);
    Marked as helpful
    1
  • Tejas Shekar•10
    @TejasShekarSubmitted over 3 years ago

    p.s. its been less than a month since I started my web dev journey and apologies if you feel that my questions are noob-ish.

    1. The box shadow is feather light and I just could not find out how to do it.
    2. Background wave svg did not render on github pages even though I dont have any issues when I previewed the site using live server.
    3. Any other suggestions for improvement are happily welcomed.

    Thankyou.

    Built using purely HTML and CSS

    2
    Jimender•140
    @JimenderPosted over 3 years ago

    Hi @TejasShekar, first of all Nice Work so far.

    Tips on Improving:

    • for box-shadow use box-shadow: 0 1.5rem 2rem rgba(0,0,0,0.1); and try to tweak it until you are satisfied with the result.
    • wrap your container in main tag and use flexbox on your container.
    • you forgot to add hover & active effects on buttons.
    • you can wrap text content inside a div element and add padding so that it looks same through out the project

    Sorry couldn't provide solution regarding svg.

    Happy Coding :)

    Marked as helpful
    0
  • Jimender•140
    @JimenderPosted over 3 years ago
    • you should use appropriate colors.
    body : Light-Gray: hsl(204, 43%, 93%);
.priceList1: white;
    • In your why us section use ul element.

    Nice Work. Happy Coding :)

    0
  • Muhammad Shajjar•1,100
    @muhammadshajjarSubmitted over 3 years ago

    Hello, everyone! 👋

    Done with the challenge it was fun but could always try to make it better. With every project, there might be a number of possible solutions and I would love to have a look at your approach too. Feedback on how to make solutions simpler, best practices, or anything which would be helpful for me or anyone would be highly appreciated...

    Thanks,

    profil-card-component challenge using vanilla css and html

    1
    Jimender•140
    @JimenderPosted over 3 years ago

    Nicely done but i think you forgot to add box-shadow on your profile card. Otherwise, looks perfect to me :) .

    Marked as helpful
    0
  • Jimender•140
    @JimenderPosted over 3 years ago

    if you want to fix the position of buttons you can try absolute positioning.

    0