Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
122
bikeinman
@BikeInMan

All comments

  • Sergiu•290
    @SergiuStancioiu
    Submitted over 3 years ago

    Mobile first with CSS and CSS GRID

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Hi,

    Nice work so far. Desktop design is close to the requirements.

    However, on small screen sizes, there are a couple of problems. The first card is missing border color on top. And there is no gap/margin between cards.

    Also, on tablet sizes. The cards seem to stretch all the way to the sides. To prevent this consider setting a max-width on cards. eg:

    .card-content {
    max-width: 300px;
    margin: 10px;
    }
    

    Good Luck

    Marked as helpful
  • Beatriz•660
    @beatrizang
    Submitted over 3 years ago

    Huddle Landing Page | HTML & CSS

    2
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Hi,

    Nice work! Try setting the following properties on your body. Looks much better.

    background-repeat: no-repeat;
    background-size: cover;
    
    Marked as helpful
  • GamuchiraiS•130
    @GamuchiraiS
    Submitted over 3 years ago

    intro-component-with-signup-form-master

    #accessibility#sass/scss
    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Hi,

    The layout and css part are very good. Works well. Congratulations.

    However, validations always return errors, even if enter all the fields correctly. Can you please check whats happening?

    Good Luck.

    Marked as helpful
  • Ted•180
    @sharipoff-0-1
    Submitted over 3 years ago

    Responsive accordion, mobile first, accessibility

    #accessibility
    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Very nicely done. Works well in both sizes. I could not complete this challenge nearly as good as yours.

    I am just curious about one thing. Why did you choose span for the question. and p for the answer. Why not divs for both or p for both ? Span seems like an inline element according to MDN.

  • Htein Linn•150
    @hteinLinn210
    Submitted over 3 years ago

    Four Card Feature Section

    2
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Hi,

    Nice work with 2X2 on tablets. Regarding your question. You can remove top: 25%; on supervisor and calculator

    and just add the align-items: center; to .feature-section

    Let me know if it works out.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right? Good Luck.

    Marked as helpful
  • Ratnesh sahu•410
    @alexmercer500
    Submitted over 3 years ago

    Four Card Feature Segment

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Hey, nice work so far.

    In the .para you have used <br> to break the line. <br> is not meant for styling but for breaking lines where appropriate, like in addresses etc. Instead you may also use max-inline-size to control the length of a line in p tags.

    Card titles are of different color than design. Intentional?

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Good Luck.

  • Julian Florez•190
    @juliflorezg
    Submitted over 3 years ago

    multicolumn card feature section, using sass

    #sass/scss
    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    The design on desktop seems to be very close to the design. Congratulations.

    Some suggestions about markup.

    1. top-info should be wrapped in a header and not article

    2. h2, h1 is the not the right order. Here you seemed to have used it only for sizing. h1, h2 are not meant for sizing but for section headings in long form articles. You could have wrapped both the lines in h1 and one of them in span inside it and style span separately.

    3. About card titles, span is not the right element. May be h2 or h3 is better. span is mostly used in between long sentences and you briefly want to accent few words inside it.

    Other suggestions.

    1. Some padding is required on the sides on tablet sizes. Now it overflows.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Good Luck.

    Marked as helpful
  • Axurynn•200
    @Axurynn
    Submitted over 3 years ago

    Four card feature section

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    The design on desktop seems to be very close to the design. Congratulations.

    I have the following comments for you, if you will.

    You should not use div to wrap text. Div is mostly used to group of elements and to style it. .cardTitle, .cardP should be changed to standard html elements like h2 and p.

    Cards stretch the whole screen on smaller than desktop sizes. Try using max-width (about 300px) on your cards.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Hope you enjoyed doing this challenge. For me, it took a lot of time and a lot of trial and error.

    Good Luck.

    Marked as helpful
  • kmsan•480
    @kentmichael
    Submitted over 3 years ago

    This is a solution to the Four card feature section challenge on Front

    2
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Nice work, with the whole design in one grid.!

  • Nurcholis•420
    @cholis04
    Submitted over 3 years ago

    Advice Generator using Next.js, Axios and styled-component

    #accessibility#axios#next#styled-components#typescript
    11
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    so cool..

  • Vander Santos•1,820
    @vanderms
    Submitted over 3 years ago

    HTML | SCSS | JS

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Beautiful. Nice work as always.

    May be you can add a link to the logo and make 'Try it free' a little more interactive. It seemed to too subtle to be noticed.

    Link to your portfolio is a nice idea. :)

    Marked as helpful
  • Nick OD•270
    @NickODxyz
    Submitted over 3 years ago

    Chat App CSS Illustration | CSS Art

    2
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Very cool. Matches the design almost 100%. How did you do that ? Whats your technique?

  • Xin Chen•240
    @xchen1778
    Submitted over 3 years ago

    Four Card Feature Section

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Wow, you have done some.pretty cool stuff with a single grid. Works well in both sizes. Awesome.

  • Antonio Rodrigues Júnior•500
    @juniorrdgs
    Submitted over 3 years ago

    Huddle Landing Page - Single Introductory Section

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Wow, you have given color to the scrollbars and styled them too. Very creative idea! Looks nice and works well. Great work.

  • VINÍCIUS DOS SANTOS VERISSIMO•250
    @viniciusdsv93
    Submitted over 3 years ago

    Four card feature

    2
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Nice work ! Works well.

    You can make it much simpler by apply on align-items: center; on container-cards and removing all other flexs on 3 columns. A little margin under red box would get you the same result. Just a thought. I am always looking to work with as much less code as possible.

    Marked as helpful
  • Ikenna•270
    @ikennaezef
    Submitted over 3 years ago

    Into component with signup form solution with HTML, CSS and JavaScript

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Pretty Impressive ! Congratulations.

  • Nick OD•270
    @NickODxyz
    Submitted over 3 years ago

    Huddle Landing Page | Flexbox | Responsive

    3
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    Hi Nick,

    You have completed some impressive challenges and far ahead in the game. And for some strange reason you decided to follow me :) I am honored.

    Senior Analyst to Frontend ? Must be a difficult decision. But you seem to enjoy this a lot. Somewhat same here.

    Good Luck.

  • MazzCode•120
    @MazzGuille
    Submitted over 3 years ago

    flexbox

    1
    bikeinman•1,080
    @BikeInMan
    Posted over 3 years ago

    100days of Coding? Interesting ! How many hours do you plan to work/code? What are you planning to develop ?

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub