order summary

👾Hello @ilyasazer, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

🎯 Your solution its almost done and I’ve some tips to help you to improve it:

1.When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings. The background-color in this case is background-color: #E0E8FF

2.Replace the div with <main> (every page should have a main landmark and also a main h1 heading) so replace the h3 to with <h1> and follow the sequence if you add another heading as h1, h2, h3…

3.🐸 Use this mini game to learn FLEXBOX and all its properties by positioning the frog and become a FLEXBOX MASTER here's the link: https://flexboxfroggy.com/

4.To make this alignment, first of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

You tried to align the component using margins and position relative but this make this task really tricky and hard control all the content. My advice for you is to use flexbox to create this alignment. First thing you've to do is to add min-height: 100vh to make sure your body will be displaying minimum 100% of the view-port height (this will help the card be ever aligned vertically centered) and then add display: flex; align-items: center; justify-content: center; to make the alignment:

✌️ I hope this helps you and happy coding!