Open frozzel opened 2 years ago
Work with a partner to implement the following user stories:
As the store owner, I want to display the product cards with rounded corners.
As the store owner, I want to give the product cards a 3D look by dropping a shadow and rotating it slightly.
It's done when the product cards have rounded corners, drop shadows, and a rotated appearance.
The solution does not have to look exactly like the image provided. Play around with the properties and have fun!
Refer to the following documentation:
MDN Web Docs on creating fancy boxes
The following image demonstrates the web application's appearance:
border-radius
box-shadow
transform
If you have completed the activity and want to further your knowledge, work through the following challenge with your partner:
Use Google or another search engine to research this.
© 2022 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.
fun done
frozzel
commented
2 years ago frozzel
commented
2 years ago
📖 Implement Box Styling on Product Cards
Work with a partner to implement the following user stories:
As the store owner, I want to display the product cards with rounded corners.
As the store owner, I want to give the product cards a 3D look by dropping a shadow and rotating it slightly.
Acceptance Criteria
It's done when the product cards have rounded corners, drop shadows, and a rotated appearance.
The solution does not have to look exactly like the image provided. Play around with the properties and have fun!
📝 Notes
Refer to the following documentation:
MDN Web Docs on creating fancy boxes
Assets
The following image demonstrates the web application's appearance:
💡 Hints
border-radius,box-shadow, andtransform.🏆 Bonus
If you have completed the activity and want to further your knowledge, work through the following challenge with your partner:
Use Google or another search engine to research this.
© 2022 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.