Skip to content
OverviewSolutions
6
Comments
5
Asif Ali
@drAsifAli123

All comments

  • RG•30
    @Ramana-GiriSubmitted over 2 years ago
    • I found adding the "Action plan" text within the light grey box as difficult in this project.
    • I have added the "change" button with my little known css code but I don't know whether it's the correct way.
    • I don't know whether my font size is correct but I have used the font size mentioned in the style guide.
    • Feel free to suggest and comment your opinion on my project.

    Responsive Order summary page using HTML and CSS

    1
    Asif Ali•130
    @drAsifAli123Posted over 2 years ago

    Hi @Ramana-Giri Everything looks great except the "change" hover state. You need to change the underline of "change" on hover over. To remove the underline on hover, you need to set "text-decoration" to "none" in your hover class.

    .change:hover{ text-decoration: none;}

    I hope it will help you to improve your practice. If so then please like the post.

    Happy Coding🎈

    1
  • Yonatan Goldshtein•30
    @yonigoldSubmitted over 2 years ago

    Hi ! This was a nice challenge, I did it with bootstrap for practice and i think it went really well. Im looking for ways to improve my code, how to make it more cleaner, more good-looking and in general any advice on the code will be great. Thanks.

    Order summary card component

    2
    Asif Ali•130
    @drAsifAli123Posted over 2 years ago

    Hi @yonigold Your design looks good but you need to tweak few properties to change your design.

    1. wrap "Annual plan" into h2 heading.
    2. instead of using ".prices { font-size: 12px;}" use ".prices { font-size: 1rem;}".
    3. do the same font size change to ".prices2" class.
    4. wrap the price into p tag.
    5. make a single div and put your "Annual plan" and "price" into this single div and give only one class to this div to refactor your code.
    6. give small padding to "div class="prices""
    7. instead of giving change class to div, give this class to anchor tag and give a hover over pseudo class to change the color property and text-decoration to none;
    8. give a hover class to "cancel order" anchor tag to change the color on hover over.

    I hope this will help you to improve your practice; and like this post if it helps you;

    Happy Coding🎈

    Marked as helpful
    1
  • Asif Ali•130
    @drAsifAli123Posted over 2 years ago

    Although your design is good but always keep in mind to change the design in inspect manual and see if things look ok then implement the design accordingly. You can inspect manual in the chrome browser.

    Steps:- 1)Right click on your chrome Browser page on your current project then at the last click on inspect.

    2)That will open the console and in the console you can use box model to change container height to 550px and padding and margin accordingly.

    Note:- Before closing the console panel make sure you know what properties to change in the final css stylesheet because in the console changes are temporary.

    I hope this will help you to improve your practice.

    Happy Coding🎈

    Marked as helpful
    0
  • Asif Ali•130
    @drAsifAli123Posted over 2 years ago

    Everything looks perfect except hover state. give hover pseudo class to this:- .main-img:hover{ color:hsl(178, 100%, 50%);} h1:hover{ color:hsl(178, 100%, 50%);} .last-span:hover{ color:hsl(178, 100%, 50%);} and try to use h2 heading after h1. I hope this will help you to improve your practice. if it will then give an upvote. thank you.

    Happy Coding🎈

    Marked as helpful
    0
  • Asif Ali•130
    @drAsifAli123Posted over 2 years ago

    Make last image border'width to 1px and border-color to white(#fff). Change top image border-radius to 4% and outer div border radius to 4% give body a line-height of 1.5 and set margin between last ethereum and <hr> and also between <hr> and last image and <p>. By doing these changes your design will look better. hop you will like the outcome. If you do then like this. And all the best for next challenges.

    Marked as helpful
    0