/flyo-data-storage

Primary LanguageCSS

Frontend Mentor - Fylo data storage component solution

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

This is my first Junior Frontend Mentor challenge. I think I did pretty well on this challenge,but as always,if there's something you see that can be done better,let me know. HAPPY CODING!!

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size

Screenshot

ScreenShot

Links

My process

I started structuring the HTML keeping in mind how the desktop version looks as well. Then I started styling for the mobile version of the challenge and continued with the desktop version.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

I learned how to manipulate elements to create shapes like the triangle used for the '185 GB LEFT' element.

.GB-left::before {
    content: "";
    position: absolute;
    left: 86.2%;
    top: 4rem;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 26px solid var(--Pale-Blue);
    border-bottom: 35px solid transparent;
  }

Continued development

I want to continue doing these challenges to practice my skills and figure things that I need to work on.

Useful resources

  • css-tricks - This helped me manipulate elements to create shapes like the triangle used for the '185 GB LEFT' element.

Author