Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions21Comments19

All comments

  • Alaminā€¢ 1,960

    @CodePapa360

    Submitted

    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

    #accessibility#sass/scss

    2

    Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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
  • Xhan88ā€¢ 60

    @Xhan88

    Submitted

    ggg

    flex

    #astro#bulma#airtable

    3

    Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted 

    * {
    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

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

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

    1
  • Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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

    @rohitKumar38344

    Posted

    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
  • Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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

    1
  • Theresaā€¢ 30

    @tscherli

    Submitted

    Do you have better solution for the place holder view for the equilibrium picture? Do you have any suggestion for creating lines in CSS?

    CSS, HTML

    1

    Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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.

    0
  • Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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

    0
  • Christian Lamā€¢ 20

    @ui-Auxilary

    Submitted

    1. How do you recreate the overlay in the example? I tried a multiply blendmode, but couldn't replicate what was shown in the example.

    2. Would it have been better to use an <img > and an alt with an overlay div, instead of using the image as the background image for the aside?

    3. Other feedback and/or suggestions welcomed :)

    HTML5 CSS Flexbox - Responsive Stats Card Component

    1

    Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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.

    1
  • Kheyyon Parkerā€¢ 10

    @keyy123

    Submitted

    I am having a bunch of issues with deploying to github pages. More specifically, Getting the image to display on Github pages. On my local development, I made more changes so it looks better than outline on live url but I can't get the image to display...

    My First Challenge

    2

    Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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

    0
  • Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    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

    1
  • Rohit Kumarā€¢ 560

    @rohitKumar38344

    Posted

    You just need to add some margin to top and bottom section of your header, otherwise your design is good. Good job

    Marked as helpful

    1