Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
9

Abdelrahman Khaled

@Abdelrahman0KhaledEgypt280 points

my name abdelrahman I strive to be junior front-end web developer

Latest solutions

  • testimonials-grid-section-main


    Abdelrahman Khaled•280
    Submitted about 2 years ago

    0 comments
  • social-proof-section-master


    Abdelrahman Khaled•280
    Submitted almost 3 years ago

    2 comments
  • four-card-feature-section-master


    Abdelrahman Khaled•280
    Submitted almost 3 years ago

    0 comments
  • clipboard-landing-page-master


    Abdelrahman Khaled•280
    Submitted almost 3 years ago

    0 comments
  • fylo-data-storage-component-master


    Abdelrahman Khaled•280
    Submitted almost 3 years ago

    1 comment
  • single-price-grid-component-master


    Abdelrahman Khaled•280
    Submitted almost 3 years ago

    1 comment
View more solutions

Latest comments

  • Ele•90
    @dev-ele206
    Submitted almost 2 years ago

    Order summery card built with HTML and CSS

    1
    Abdelrahman Khaled•280
    @Abdelrahman0Khaled
    Posted almost 2 years ago

    Congratulations on completing this challenge bro❤️ , but i see you have litle problem with centering the card , you can fix it by adding to body this

        margin: 0;
       padding : 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    

    and

    flex-direction: column;
    

    to have div of in the "attribution" under div of "card"

  • 7MYV•150
    @7MYV
    Submitted about 2 years ago

    Fylo data storage component

    1
    Abdelrahman Khaled•280
    @Abdelrahman0Khaled
    Posted about 2 years ago

    @7MYV Congratulations on completing this challenge👌❤️, here are some tips to make it look better. you can use for background ❤️

    body {
    background-image: url(images/bg-desktop.png);
    background-position: 0 100%;
    background-color: hsl(229, 57%, 11%);
    background-size: 100%;
    background-repeat: no-repeat;
    }
    

    and till me if it work ❤️

    Marked as helpful
  • Tejasvi Mishra•100
    @tejasvi2708
    Submitted about 2 years ago

    Product Preview Component

    1
    Abdelrahman Khaled•280
    @Abdelrahman0Khaled
    Posted about 2 years ago

    Congratulations on completing this challenge👌❤️, here are some tips to make it look better. you can use

    p{
    line-height: 2px;
    }
    

    Text to make vertical space, and to Horizontal space in 'PERFUME'

    p{
    letter-spacing: 2px;
    }
    

    Text and Congratulations again ,keep coding. 😊

    Marked as helpful
  • Askell•60
    @AliAbuSalam
    Submitted about 2 years ago

    Desktop solution using vanilla html and css

    2
    Abdelrahman Khaled•280
    @Abdelrahman0Khaled
    Posted about 2 years ago

    Congratulations on completing this challenge👌❤️, here are some tips to make it look better. to center with out flexbox you can use

    .contaner {
    position: relative;
    transform: translate(- 50%,  - 50%);
    }
    

    and you need to use fonts in style-guide file, and you need to make border-radius like

    card{
    border-radius: 15px;
    }
    

    and you don't need to border color and Congratulations again ,keep coding bro❤️😊 EDITED bro❤️

    Marked as helpful
  • Delian21•150
    @Delian21
    Submitted almost 3 years ago

    Delian's QR Code Component

    #sass/scss
    2
    Abdelrahman Khaled•280
    @Abdelrahman0Khaled
    Posted almost 3 years ago

    hay @Delian21 congratulation you complete the challenge but there is suggest to center your card.

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

    this is after give the body min height: 100vh tile me if work . good job friend ..happy coding @Delian21

    Marked as helpful
  • Philani Ncube•150
    @PhilaniNcube
    Submitted almost 3 years ago

    Product Card

    1
    Abdelrahman Khaled•280
    @Abdelrahman0Khaled
    Posted almost 3 years ago

    hi philani congratulation to complete it but .. i see you have some problems in fonts and font sizes and font weight and colors.. my friend .. all you need ( font size , font family , font weight , background color , colors , act ) in style-guide file with index.html and images file and design file .. you don't need to be pro to git or use it .. its for free with those files

View more comments
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