Skip to content
OverviewSolutions
4
Comments
4
Ravi Pratap Singh
@cyberspatial

All comments

  • Ravi Pratap Singh•110
    @cyberspatialPosted about 3 years ago

    Beautifully implemented solution.

    Your code has few issues!

    1. For the <a> tag you have mistakenly combined button and <a> tag together.
    2. U should use alternative text for the image in case the browser doesn't load the image. < img src="" alt="image-description-in-brief" >

    Good Luck!

    Marked as helpful
    1
  • Taner•80
    @ChesarfieldSubmitted about 3 years ago

    I know Html & CSS, although not very well. I would appreciate if you review my codes and give feedback. Thank you very much in advance.

    Order Summary Card with Html & CSS

    3
    Ravi Pratap Singh•110
    @cyberspatialPosted about 3 years ago

    Solution is implemented very well. Further I would like to add:

    1. You have used section inside a div. instead u can use div. Section is used to separate the content on the page, But here you are using it to separate the content inside a div , semantically it can be improved by replacing section with div.

    2. U have used heading even for a rate and annual plan. Instead of using <h4> for annual plan and rate u can use <span> or <p>.

    3. You can remove the accessibility issues by changing <div class="container"> to <main class="container"> and <div class="attribution"> to <footer class="attribution">.

    Good luck!

    Marked as helpful
    0
  • Ravi Pratap Singh•110
    @cyberspatialPosted about 3 years ago

    Good solution. Few things I want to add

    1. For a Desktop site , you had used flex to center the content, but in the given design it was left aligned so u could use " text-align:left", U can also change using the flex-box if the flex-direction is row, then u can use "justify-content:flex-start", if the flex-direction is column then you can use align-items:flex-start.
    2. You could remove your accessibility issues by changing <div class="card"> to <main class="card"> and changing <div class="attribution"> to < footer class="attribution">
    Marked as helpful
    1
  • Ravi Pratap Singh•110
    @cyberspatialPosted about 3 years ago

    Beautifully implemented the solution.

    You could remove your accessibility issues by changing <div class="container"> to <main class="container"> and by changing the <div class="attributes"> to <footer class="attributes ">.

    Your image alternative text is blank, make sure to mention there something in case the image doesn't load.

    Marked as helpful
    0