Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
6

Sirajul Islam

@sirajshaonSylhet, Bangladesh260 points

BSc graduate in EEE from DUET, Gazipur, Dhaka. Working with engineering design software and also interested in web design.

I’m currently learning...

Modern HTML | CSS | JavaScript

Latest solutions

  • Huddle landing page with alternating feature blocks


    Sirajul Islam•260
    Submitted 4 months ago

    0 comments
  • Fylo landing page with two column layout


    Sirajul Islam•260
    Submitted 4 months ago

    0 comments
  • Clipboard landing page challenge on Frontend Mentor


    Sirajul Islam•260
    Submitted 4 months ago

    0 comments
  • Fylo data storage component challenge on Frontend Mentor


    Sirajul Islam•260
    Submitted 4 months ago

    0 comments
  • Testimonials grid section challenge on Frontend Mentor


    Sirajul Islam•260
    Submitted 4 months ago

    1 comment
  • Bento grid challenge on Frontend Mentor


    Sirajul Islam•260
    Submitted 4 months ago

    0 comments
View more solutions

Latest comments

  • Sahar Zaker Soltani•180
    @saharzakersoltani
    Submitted 3 months ago

    Clipboard Landing Page

    1
    Sirajul Islam•260
    @sirajshaon
    Posted 3 months ago

    Great Job!!!

  • Sanjay Kumar SR•260
    @srsanjaykumar
    Submitted 3 months ago

    Social proof section

    1
    Sirajul Islam•260
    @sirajshaon
    Posted 3 months ago

    Great! It can be more adjustable if use grid instead flex.

  • smgr7•40
    @smgr7
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of completing the challenge without using Figma file for exact css but still the final output looks similar.

    What challenges did you encounter, and how did you overcome them?

    None.

    Social links profile

    4
    Sirajul Islam•260
    @sirajshaon
    Posted 3 months ago

    Looks good. Need to little work on font size and weight.

  • P
    mci3x•100
    @mci3x
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of not giving up at this point.

    Every time I managed to get something to work, some other thing got broken.

    Recreating elements based on Figma is easy but to get it to be responsive and keep it to design, turned out to be very frustrating and very time consuming.

    I feel like lines like these are a little step forward:

    width: clamp(20.438rem, 87.2vw, 24rem);
    height: clamp(36.188rem, 63.65vh, 38.188rem);
    padding: clamp(var(--s-md), 6.4%, var(--s-lg));
    

    Overall I'm not too happy with how it came out.

    What challenges did you encounter, and how did you overcome them?

    This small project almost broke me down :|

    I had a lot of problems with getting rid of media queries and at the same time keep it to design.

    There is no top and bottom padding on mobile, on tablet padding is bigger and on all sides and no padding at all on desktop. At the end I had to use two media queries for that.

    At first I wanted to use <ul> on links but I had issues with styling buttons and it was really annoying. Decided to use role="list" instead.

    Wanted to go back to <ul> at some point when I discovered that at some particular screen sizes my buttons are overflowing and I didn't find the solution. I only added overflow: auto so there is a way to scroll when it happens

    It is killing me that on my .list element gap and justify-content: space-between is not working as I would expect and I don't know why. I wanted to get rid of gap so buttons would come closer when viewport height is lower but they just overflow.

    What specific areas of your project would you like help with?

    In case of some screen dimensions like 1280x800 my buttons are overflowing and I couldn't help it.

    I wanted to use clamp() on gap but I failed.

    I wanted to use space-between without a gap but it didn't work.

    Didn't want to shrink buttons because on design their height is fixed.

    Tried flex-shrink also but without success.

    Responsive Social Links Card Component

    #accessibility
    2
    Sirajul Islam•260
    @sirajshaon
    Posted 4 months ago

    Great work. Try removing height property from class "card". I think, It will fix your scroll issue. Let me know. Thanks...

    Marked as helpful
  • Giriprasath1726•30
    @Giriprasath1726
    Submitted 4 months ago

    Four_Card_Section

    1
    Sirajul Islam•260
    @sirajshaon
    Posted 4 months ago

    add

    html, body { height:100%;}
    

    then add these inside body tag

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    

    this will make your design centered. and make sure to use the design responsive for all size using variable units instead of px. You can check my solutions

  • Franco•250
    @Franco-Cipolla
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Can someone please look at my website and code and tell me the solution to why my cards fly up a bit when i hover over the button? it happened since i put a border to my button when hovering

    3 Component Page Flexbox

    1
    Sirajul Islam•260
    @sirajshaon
    Posted 4 months ago

    give your button border inside button style and give border color --clr-grey. remove border and it's color from button:hover style. for more understanding, you can check my design..

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