Skip to content
OverviewSolutions
21
Comments
19
Rohit Kumar
@rohitKumar38344

All comments

  • Alamin•2,000
    @CodeWithAlaminSubmitted over 1 year ago

    My first Junior project with Javascript. Open to feedback! 😊👍

    • Bonus: Dark Mode toggle
    • Bonus: See the age numbers animate to their final number when the form is submitted

    Age Calculator app w/ Dark Mode

    2
    Rohit Kumar•560
    @rohitKumar38344Posted over 1 year ago

    congratulation Alamin, for completing your challenge. Your solution looks perfect. Your design exactly matches the design provided in the challenge. Hope to see such more solutions in future. Happy Coding :D

    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 1 year ago

    You have used the wrong syntax on box-shadow property on element having class (.card) It should be like this box-shadow: 0px 3px 25px; . You don't have to seperate the values using commas. Refer to mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow to read more about box-shadow. Happy Coding :D

    Marked as helpful
    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 1 year ago

    Congratulations yashraj1309 for completing your challenge. Your design is same as expected just make the web page responsive so that it can be accessible on different screen sizes and try to write to add some meaningful description in alt attrib because it is readed by the screen readers. Apart from that there are some issues pointed by frontend mentor in the generated report just fix them. Happy Coding :D

    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 2 years ago
    * {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

    ** You should use value of box-sizing property: border-box not 0 because it's invalid value

    Marked as helpful
    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 2 years ago

    congratulations for completing your challenge. Your design is looks good. I have a suggestion for you: you can also use <hr/> element instead of empty div to place that line with the same property as you applied on div except width 100% on hr

    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 2 years ago

    congratulations @meneerhanafi for completing your challenge. Your design looks good. But try to add hover state on the button itself, currently hover state is active only anchor tag inside the button tag. Try to add it on button

    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 2 years ago

    Everything looks good. You just forget to add background image on header section

    1
  • Rohit Kumar•560
    @rohitKumar38344Posted over 2 years ago
    1. Remove the test div it's unnecessary placed in the solution.
    2. Remove the display: flex property from main it's not necessary
    3. Use vw instead of px to apply background image with respect to viewport
    body {
    background: url("images/bg-pattern-top.svg"),url("images/bg-pattern-bottom.svg");
    *** background-position: top -66vw left -46vw, bottom -76vw right -38vw; ***
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--cyan);
    background-blend-mode: overlay;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Kumbh Sans', sans-serif;
}
    Marked as helpful
    0
  • Rohit Kumar•560
    @rohitKumar38344Posted over 2 years ago

    congratulations for completing your challenge. Feedback: just fix the bottom border of info section by this: border-bottom: 2px solid #eee; info { margin-top: 65px; border-bottom: 2px solid #eee; padding-bottom: 30px; }

    0
  • Rohit Kumar•560
    @rohitKumar38344Posted almost 3 years ago

    1: Remove the margins from h4 so that content along the image can be center because due to margins content along the image is not centered even after using align items property 2: apply the margin between the paragraphs and h4

    Good work keep coding :D

    Marked as helpful
    0
  • Rohit Kumar•560
    @rohitKumar38344Posted almost 3 years ago

    Your need to use background property to section-1 instead of background-image for short hand background: url("path of image") no-repeat; otherwise you can also use specific css properties for background like background-image, background-repeat, and then apply background-position property to position the image, otherwise you did great work To know more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

    Marked as helpful
    0
  • Rohit Kumar•560
    @rohitKumar38344Posted almost 3 years ago

    congratulations @EdouardHrgt for completing your challenge. I have learnt a lot from your code. My suggestion for you: 1,You can use margin: 100px auto on container to center it instead of using absolute positioning. 2, You can also remove the explicit height from container it's make content little bit stretchy. 3, You can remove gap property it's written unnecessarily in your code. 4, You can remove the width and height 100% on col-1 it's not necessary there. 5, on h1 you can remove the width as well it will fix your layout and from paragraph as well inside col-1

    Hope it helps :D

    Marked as helpful
    0