Flowerbox

An intermediate CSS mockup designed to be completed with any technology.

Getting Started

1. Decide which technology you'll be using to create this mockup.
2. Create a wireframe of the mockup.
3. Create a new repository on github.com to hold your code
   You may later decide to deploy this and include it in your portfolio
4. If you'll be incorporating app functionality (H4M), consider using Trello to organize yourself

Resources

The resources below are the resources that were used to design this mockup. Feel free to utilize them if you'd like to get as close to the original mockup as possible.

Fonts:

• DM Sans
• Open Sans

Colors:

• Darker Pink: #f0a8bb
• Lighter Pink: #f9dde0
• Blue: #92b2ba
• Background: whitesmoke
• Tag & Footer Background: #eeeeee
• Tag Text: #777777

Images:

• Banner: https://i.imgur.com/BrtVHqy.png
• Banner w/ Text: https://i.imgur.com/U8tiT5X.png
• Logo: https://i.imgur.com/KxfWH9J.png

Icons:

• IonIcons

Data:

Depending on how you design your app, you may choose to hardcode this data, you may choose to use the object as a dummy database, you may choose to seed it to a database. This is just to ensure you have the data you need. If you want or need to download the images, feel free to visit the links provided in the data below to do so.

const data = [
	{
		name: 'forgive-me-pleases',
		image: 'https://i.imgur.com/0UCzcZM.jpg',
		price: 50,
		tags: ['pink', 'roses', 'bouquet', 'apologies'],
	},
	{
		name: 'pink perfection',
		image: 'https://i.imgur.com/XoEClf7.png',
		price: 15,
		tags: ['pink', 'gerbera daisy', 'singular', 'decor'],
	},
	{
		name: 'hopeful sunshine',
		image: 'https://i.imgur.com/LRrcBtN.png',
		price: 30,
		tags: ['yellow', 'sunflower', 'multiple', 'garden'],
	},
	{
		name: 'motivational mug',
		image: 'https://i.imgur.com/NOJ2ikN.png',
		price: 25,
		tags: ['yellow', 'gerbera daisy', 'singular (with mug)'],
	},
	{
		name: 'breathtaking bouquet',
		image: 'https://i.imgur.com/TuuKiHt.png',
		price: 40,
		tags: ['white', "baby's breath", 'bouquet', 'decor'],
	},
	{
		name: 'loves-me-loves-me-knots',
		image: 'https://i.imgur.com/SaTbTEx.png',
		price: 20,
		tags: ['mixed', 'gerbera daisy', 'mini bouguet', 'for fun'],
	},
	{
		name: 'hiya, spring',
		image: 'https://i.imgur.com/dJvHolr.jpg',
		price: 35,
		tags: ['mixed', 'hyacinths', 'bouquet', 'garden'],
	},
	{
		name: 'can of compassion',
		image: 'https://i.imgur.com/PN3jmrf.png',
		price: 55,
		tags: ['mixed', 'decor', 'bouquet (with can)', 'love'],
	},
	{
		name: 'basket of beauty',
		image: 'https://i.imgur.com/Z86X3qq.png',
		price: 50,
		tags: ['mixed', 'bouquet (with basket)', 'love', 'decor'],
	},
]

Hints:

• Wondering how to create the shadow effect on the text in the header? Look into the text-shadow css property
• What about the shadow on the cards? There must be something similar to text-shadow but for divs instead, use your google-fu to find out!

Hungry For More

• Create additional pages to really build this out into a realistic site.
• Create shopping cart functionality that allowes users to CRUD items in their cart.
• Incorporate local storage or authentication to save a user's cart between visits.
• Add check-out functionality with a tool like Stripe
• Incorporate Commercejs to simplify the cart and checkout functionality.