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

Submitted

Simple HTML and CSS site made using CSS Grid for Layout

Anna 90

@Bluechai03

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! This is my first attempt completing a challenge on FrontEnd Mentor.

Made with simple HTML and CSS Grid Desktop Mode Design

I was able to replicate the website for the most part but I had no idea how to create that pointed corner for the small container on the right, could someone let me know how? Also I didn't know how to make the backgrounds for the icons on the left container be the same width and height without squishing the images, how would I go about fixing that?

Feedback and advice is very much appreciated, thank you!

Community feedback

Mahesh Yadav 1,220

@Mahesh-yadav

Posted

Hi

You can create the pointed corner using ::after css psuedo element like this

.storage-remaining::after{
        content: '';
        width: 0;
        height: 0;
        border-top: solid 20px white;                 // These two styles create the pointed corner
        border-left: solid 20px transparent;
        position: absolute;
        right: 0px;                                              // These styles position it at bottom-right corner
        bottom: -20px;
    }
3

Anna 90

@Bluechai03

Posted

Thank you! I had to change some of the properties to make it fit perfectly but other than that, it worked perfectly!

0

@norman02

Posted

This looks good. There are a couple ways to make the buttons work. My solution was to set the width of the images, and place them in a <div>. I used the div padding for the button.

1

Anna 90

@Bluechai03

Posted

It finally looked alright when I added the background and positioning properties in a separate class, then placed the images under that with a class that defined their widths. Thanks for the advice!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord