@javascriptor1
Posted
Hi Nikkaburger ,
Nice work. Here are some notes which I hope would answer your questions :
1- To center a card component or a div in the page , There are many methods you can follow to achieve that. Here are few of them :
1- Using flexbox. Apply these properties on the body tag :
` body { display: flex; align-items: center; justify-content: center; min-height: 100vh; // if you overlook this property , it won't work }
`
2- using Grid.
body { display: grid; place-content: center; min-height: 100vh; }
3- Using absolute positioning. Create a div and give it following properties :
` div { position: absolute; inset: 0; margin: auto; width: 100px; height: 100px; }
`
2- to create overlay over an image , do the following : Create a div and add an image as child inside the div. then style as following ; ` .img-div { width: 100%; background-color: var(--soft-violet); border-top-left-radius: 8px; border-top-right-radius: 8px; }
img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; mix-blend-mode: multiply; // change this property as per your need display: block;
`
Hope this would help
Keep coding 🚀
Marked as helpful
