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

Mo

@MohamedAridah
880Points

I don't know to write actually..! but i started my coding journey by chance in 2020 just to spend time and it turned out that coding makes my happy..!. So that's why i am here, WHY not.!👍

I’m currently learning...

Javascript, Turn designs to real code for more practice.

Latest Solutions

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    QR code component solution

    4
    Mo880 | Posted 13 days agocommented on Dan Bennett's "QR code component" solution

    Hello @inkfromblood, congratulation on submitting your first solution🎉👏.

    Yes giving the QR code image max-width: 100% is totally right since this will make the image to take the full width and never overflow it.

    I have also some notes for you:

    • use font-family: 'Outfit', sans-serif globally instead of redeclare every time:
    body {
        font-family: 'Outfit', sans-serif;
    }
    
    • instead of using <h2> heading level for the text you can just use <p> element since this text is not a heading. This will fix your Accessibility Issues

    • use <footer> instead of .attribution div it's more HTML Semantic. Also This will fix your Accessibility Issues

    • This challenge Doesn't has nay links so you can Remove styles of the <a> tag since it's useless.

    • you can see My solution for this challenge it may be helpful for you..!

    I hope this wasn't too long for you, hoping also it was useful😍.

    Goodbye and have a nice day.

    Keep coding🚀

    0
  • Solution screenshot
    • HTML
    • CSS

    responsive landing page using CSS Flex

    2
    Mo880 | Posted 13 days agocommented on Moruf Lawal's "NFT preview card component" solution

    Hello @MorufLawal, congratulation on submitting your first solution🎉👏.

    I have some notes for you:

    • for the hover effect, put the image with .eqn class inside div with .image-wrapper class for example and follow these styles:
    .image-wrapper::after{
    	content: url(./images/icon-view.svg);
    	position: absolute;
    	background-color: rgb(0 255 247 / 45%);
    	width: 100%;
    	height: 100%;
    	opacity: 0;
    	top: 0;
    	left: 0;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	cursor: pointer;
    	border-radius: 1rem;
    	overflow: hidden;
    	transition: .3s ease;
    }
    
    .image-wrapper:hover::after {
        opacity : 1;
    }
    

    i used div to wrap the image and do the hover effect since <img> alone doesn't work with ::after pseudo element.

    • instead of using <hr> tag you can use border-top or border-bottom depending on the div you will use it. Also this is more Semantic

    • for .Bottom give it text-align: start to be like the design also give space between the avater image and the text.

    • use <a> element instead of span for author name. It's more Semantic and on click this name this may lead to another page.

    • you can see My solution for this challenge it may be helpful for you..!

    I hope this wasn't too long for you, hoping also it was useful😍.

    Goodbye and have a nice day.

    Keep coding🚀

    0
  • Solution screenshot
    • HTML
    • CSS

    order-summary-component-main

    4
    Mo880 | Posted 13 days agocommented on Sultan Hafizh Alexander's "Order summary component" solution

    Hello ,

    • for .parent you need to add background-color property to to add background for the element and make it like the design.

    • for .parent there is no need to use fixed height. height: 560px.

    • for .parent to make the waves illustration looks closer to the design you can change background-size property to 100% instead of cover. or you can remove background-size property at all. you cab read about background-size from Here.

    • So after all this changes to the .parent it's styles will be like this:

    .parent {
        display: grid;
        place-items: center;
        min-height: 100vh;
        background: #e0e8ff url(../images/pattern-background-desktop.svg) no-repeat;
    }
    
    • for .container you can remove margin-top property if you want the card to be perfectly centered.

    • Don't use fixed height let content itself determine it's height. so you can remove height: 335px for .card-content div

    • for card-title instead of using <h2> heading level use <h1> heading level instead. This will fix your Accessibility issues as well.

    • when you use width: 80% instead of using margin-left or margin-right to center the content . You can just use margin: auto.

    • use font-family globally in the body for example instead of redeclare it for each element

    • .pay and .cancel have common styles so you can combine them in one class and add it to them instead of redeclare it again.

    • for your question you can see My solution for this challenge it may be helpful for you..!

    I hope this wasn't too long for you, hoping also it was useful😍.

    Goodbye and have a nice day.

    Keep coding🚀

    0
  • Solution screenshot
    • HTML
    • CSS

    More practice with Figma

    2
    Mo880 | Posted 13 days agocommented on Kent O'Sullivan's "NFT preview card component" solution

    Hello @12Kentos, Good job it's almost identical to the design👍👏

    However i have some notes for you:

    • use min-height: 100vh for the body instead of using height: 100vh. This will allow your content to take more vertical height if content needed to. So user can see all the content.

    • instead of using these styles for .eth-cube-img

    .eth-cube-img {
        width: 30.02rem;
        height: 30.02rem;
        border-radius: 0.8rem;
    }
    

    you can just give the <img> the full width and the padding of .eth-card-container will make sure that there are space around the image. So your styles for .eth-cube-img could be:

    .eth-cube-img {
        width: 100%;
        border-radius: 0.8rem;
    }
    
    • for the hover effect you can Delete .eth-eye-img img tag and .eth-img-container styles and try pseudo elements like ::after or ::before like:
    .eth-img-container::after{
    	content: url(./images/icon-view.svg);
    	position: absolute;
    	background-color: rgb(0 255 247 / 45%);
    	width: 100%;
    	height: 100%;
    	opacity: 0;
    	top: 0;
    	left: 0;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	cursor: pointer;
    	border-radius: 1rem;
    	overflow: hidden;
    	transition: .3s ease;
    }
    
    .eth-img-container:hover::after {
        opacity : 1;
    }
    
    • instead of using <p> element for .eth-title you can use <h1> because this is a a heading.

    • use <a> element instead of span for .eth-auth-name. It's more Semantic and on click this name this may lead to another page.

    • you can see My solution for this challenge it may be helpful for you..!

    I hope this wasn't too long for you, hoping also it was useful😍.

    Goodbye and have a nice day.

    Keep coding🚀

    1
  • Solution screenshot
    • HTML
    • CSS

    Basic HTML and CSS (with Flexbox)

    2
    Mo880 | Posted 13 days agocommented on tbrownlee's "QR code component" solution

    Hello @tbrownlee, you did Great for this challenge, it's also Responsive so good job.👏👍

    • your styles to .main is extra and has no purpose. So Remove it.

    • using flex with the <img> is also can be Removed. the <img> element isn't parent for an any element so display: flex will do nothing.

    • instead of giving width property to the .text or the <img> you can just let them take 100% of the width and use padding property to control and give the outer space around the .container.

    • it's better to use rem units for font-size and somethings like that. em is relative to the font-size of its direct or nearest parent . rem is relative to the HTML (root) font-size. Read this Article for better understanding.

    • you can see My solution for this challenge it may be helpful for you..!

    I hope this wasn't too long for you, hoping also it was useful😍.

    Goodbye and have a nice day.

    Keep coding🚀

    1