- 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.
