Frontend Mentor | mazal's profile

@dz03vcSubmitted 5 months ago

What are you most proud of, and what would you do differently next time?

First of all I'm proud that I simply did it!
This, since is my first challenge, motivated me to keep going at my bootcamp and showed me that I am really learning what I'm studying.
I'm also glad that now I'm understanding how this challenge community works.

What challenges did you encounter, and how did you overcome them?

The first challenge was to understand what Frontend Mentor Challenge wanted from me, and that was overcome by the readme files that comes in the download package and also with the resources at the Discord server.
The second challenge was to write down the codes itself, this was my first "big" blank file that I had to structure and style, but I overcame that remembering everything that I had learn at Colt's Bootcamp and also by using my study notes.
Flex, it looks like that this will be a challenge for a while.
Definitely, the hardest challenge was SVG. At first I thought SVG would be easy peasy, but that required a lot of googling and help from study friends. And I still not sure if I did it correctly.

What specific areas of your project would you like help with?

A feedback on the general structure of the file would be highly appreciated.
At the body I used an encoded version of the svg as a background (Encoded at Meyerweb) (Is it ok to work this way?)

body {
      background-color: hsl(225, 100%, 94%);
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22437%22%3E%3Cpath%20fill%3D%22%23D6E1FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%20349.974c218.558%20116.035%20460.05%20116.035%20724.475%200s502.933-116.035%20715.525%200V0H0v349.974z%22%2F%3E%3C%2Fsvg%3E");
      background-position: top;
      background-repeat: no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

I also tried to use a encoded svg for the top image of a person dancing, but it didn't work, maybe because it was too long. So I googled for that svg url on a third-party website and used that as an external url:

At the music note svg I could work with the inline without problems, but I feel that if I had to scale it I would have problems. That's why I didn't use inline svg for that "person dancing" image, because I couldn't scale it when it was styled inline with .


      
        
          
          
        
      
      
        Annual Plan
        $59.99/year
      
      Change

A feedback on the flex structure would help a lot. I feel that I may have added some extra codes that I wouldn't need to.

body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    main {
      width: 450px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: column;
    }

    .woman {
      overflow: hidden;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    .description {
      text-align: center;
      text-size-adjust: auto;
      line-height: 24px;
    }

    .planContainer {
      display: flex;
    }

    .planColumn {
      display: flex;
      flex-direction: column;
    }

    .attribution {
      text-align: center;
    }

And finally, @media I basically copied all the css styles and removed what I didn't need to resize when the screen got smaller.

mazal

All comments

Order Summary Card - HTML and CSS (Internal CSS code |