Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
33
Comments
13
...
@HatimHJ

All comments

  • Abas Alamin•20
    @Abasalamin91
    Submitted almost 3 years ago

    QR code page using Html & Css

    2
    ...•600
    @HatimHJ
    Posted almost 3 years ago
    .container-grid {
        display: grid;
        width: 200px;
    
        /*  grid-template-rows: 1fr 140px;  */
    
    }
    
  • Eman Abdallah Shaltoot•380
    @Eman-Abdallah
    Submitted about 3 years ago

    FAQ-Accordion-Card

    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    i'm learning github [especially pull request] that whyi fork your project (hope you don't mind)

  • Mahdi Rezaei•500
    @MahdiRezaeiDev
    Submitted about 3 years ago

    FAQ Accordion Card

    #accessibility#sass/scss#vite#itcss
    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    nice work. try padding top and bottom for the main tag

  • Rio Rifaldi•100
    @rio-rifaldi
    Submitted about 3 years ago

    responsive card with grid css

    #accessibility
    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    you put the colors in css variables in the body selector when dark mode clicked you give the body class like 'dark' in other slector [body.dark] you change variables colors .

    that how i did it in this challenging and it worked fine. there's a little bit of javascript

    Marked as helpful
  • Glow•140
    @TheAwesomeTechGirl
    Submitted about 3 years ago

    stats-preview-card

    #sass/scss
    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    media (max-width: 375px){ .container {

    grid-template-columns: 1fr; // add this to the container
    

    }

    .images {

    grid-row: 1; // this to the image
    

    }

    //or .text-box { grid-row: 2; // this to the text }

    }

    Marked as helpful
  • KurtJF•150
    @KurtJF
    Submitted about 3 years ago

    Responsive Four Card Feature

    2
    ...•600
    @HatimHJ
    Posted about 3 years ago

    congratulations on finish the challenge

    Is there a set breakpoint for responsive media query?

    • Mobile: 375px
    • Desktop: 1440px

    when you code you should start with mobile then you adjust for desktop. this how i do it and it work ok for me

  • mohammed abdo•220
    @Hazard-58
    Submitted about 3 years ago

    huddle landing page with curved section

    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    you can use [filter: brightness(0) invert(1);] to make the footer logo white

    Marked as helpful
  • Roberto Hebert•30
    @hebertpxx
    Submitted about 3 years ago

    JS DOM , CSS Classes and HTML.

    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    The keystone of AJAX is the {XMLHttpRequest} object.

    • Create an XMLHttpRequest object
    • Define a callback function
    • Open the XMLHttpRequest object
    • Send a Request to a server

    w3schools

  • Nikita•120
    @nyakita
    Submitted about 3 years ago

    HTML + CSS + GRID

    2
    ...•600
    @HatimHJ
    Posted about 3 years ago

    for the button try use [button:hover] insted of [button:active]

    for the grid try this site [ https://cssgridgarden.com/ ] great for learning css grid

    if you find this helpfully please mark as helpfull

    Marked as helpful
  • Moataz•210
    @moataz-serag
    Submitted about 3 years ago

    Responsive landing page with flexbox

    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    try css filter [filter: brightness(0) invert(1);]

    Marked as helpful
  • aLpSabre•180
    @alpbrace
    Submitted about 3 years ago

    Basic Responsive Landing Page Using only HTML and CSS

    #accessibility#less
    2
    ...•600
    @HatimHJ
    Posted about 3 years ago

    2- How can I create the section with the header "Ready To Build Your Community?" before the footer, without using position absolute and in a better responsive way?

    i did it with [ transform : translateY(-value) ] and it worked fine

    Marked as helpful
  • ...•600
    @HatimHJ
    Submitted about 3 years ago

    Huddle landing page with curved sections solution

    #sass/scss
    1
    ...•600
    @HatimHJ
    Posted about 3 years ago

    i'm using aos library that's why the content not showing in the DESIGN COMPARISON check the site if you interested

  • TRG•150
    @MugeshTRG
    Submitted about 3 years ago

    NFT Preview Card Component using HTML and CSS.

    #accessibility#theme-ui
    2
    ...•600
    @HatimHJ
    Posted about 3 years ago

    try [margin : auto] on card class to remove vertically scrollbar Hope it helps:)

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