Skip to content
OverviewSolutions
21
Comments
19
Rohit Kumar
@rohitKumar38344

All comments

  • Rohit Kumar•560
    @rohitKumar38344

    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

  • Rohit Kumar•560
    @rohitKumar38344

    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
  • Rohit Kumar•560
    @rohitKumar38344

    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

  • Xhan88•60
    @Xhan88

    flex

    #astro#bulma#airtable
    3
    Rohit Kumar•560
    @rohitKumar38344
    * {
    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
  • Rohit Kumar•560
    @rohitKumar38344

    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

  • Rohit Kumar•560
    @rohitKumar38344

    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

  • Rohit Kumar•560
    @rohitKumar38344

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

  • Rohit Kumar•560
    @rohitKumar38344
    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
  • Rohit Kumar•560
    @rohitKumar38344

    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; }

  • Rohit Kumar•560
    @rohitKumar38344

    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
  • Rohit Kumar•560
    @rohitKumar38344

    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
  • Rohit Kumar•560
    @rohitKumar38344

    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
  • Rohit Kumar•560
    @rohitKumar38344

    Good work @Fuadzarzar You just need to remove semicolon from text inside p tag of class title-container and you can also use border-bottom property on info-container instead of hr because now you can style the border using css perfectly, otherwise everything look's good Keep coding :D

    Marked as helpful
  • Rohit Kumar•560
    @rohitKumar38344

    Congratulations @tscherli for completing your challenge. Here's the link to my solution: https://www.frontendmentor.io/solutions/html-css-flexbox-E5IjnTThH You can use this to refactor your code on HTML as well as CSS side, because you use some unnecessary code in your solution.

  • Rohit Kumar•560
    @rohitKumar38344

    Congratulations @Issasoftdev for completing your challenge. Here's the feedback from my side: Your code looks good just remove the font-size from the paragraph then your layout will looks exactly same as the given in the challenge.

    Marked as helpful
  • Rohit Kumar•560
    @rohitKumar38344

    Yes you can use a div inside the aside to act as an overlay and apply following properties on it: .overlay { position: absolute; background-color: hsla(277, 87%, 32%, 0.58); border-radius: 0px 5px 5px 0px; inset: 0px; /* Here you can use top, left, right, bottom properties also*/ } putting the background image set on aside which you set already.

  • Rohit Kumar•560
    @rohitKumar38344

    Your live URL link is not working first fix it using: https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site

  • Rohit Kumar•560
    @rohitKumar38344
    1. You can use gap property of flexbox on div having class of "left-div" instead of using margin-left on img
    2. Next you can use align-items property on left-div with value "center" because img icon seems to be stretched due to default behaviour of flex items.
    3. Remove the width of 30% on right-div because of it content is stretched

    except of all of these everything is perfect. Good work :D

    Marked as helpful