diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..a1e4c36 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 7d38b84..1dabb6a 100644 --- a/README.md +++ b/README.md @@ -1 +1,8 @@ -# project-library \ No newline at end of file +# project-library + +This week our project was to build a library using arrays as well as DOM manupulations, functions, variables and event handling. Our recipe library page offers options for filtering, sorting, and randomly selecting items. + +This project was the first team project as part of the Technigo bootcamp. Working together on the same repository has been a new important experience for us. +We decided on the project together and build a first HTML and CSS together. We worked on the Javascript codes first idividually and explained and discussed them later on. + +Link: https://library-recipes.netlify.app diff --git a/index.html b/index.html index cf5c31a..0ab43c4 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,68 @@ + + - Project Library + Easy Peasy Recipes + + -

Project Library

- +
+

Easy Peasy Recipes

+
+
+ +
+ + +
+

Type of Kitchen

+ +
+ +
+

Time

+
+ + +
+
+ +
+

Sort A-Z

+
+ + +
+
+ +
+ +
+

What's for dinner tonight?

+

Can't decide? Let us help you pick your dinner.

+ +
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/pull_request_template.md b/pull_request_template.md index d92c89b..c0912c0 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1,7 +1,9 @@ ## Netlify link -Add your Netlify link here. -PS. Don't forget to add it in your readme as well. +https://library-recipes.netlify.app ## Collaborators -Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this: -[github-username-1, github-username-2] +Gitte Beckmann, +Anna Hansen, +Gabriella Iofe + +[gittebe, Anna2024WebDev, gabster94] diff --git a/script.js b/script.js index 6a61c06..287fe89 100644 --- a/script.js +++ b/script.js @@ -1,238 +1,4 @@ -/*Here we have created two different arrays that you can work with if you want. -If you choose to create your own arrays with elements, just make sure that some -of the properties make sense to filter on, and some to sort on.*/ - -const books = [ - { - title: 'The Great Gatsby', - author: 'F. Scott Fitzgerald', - year: 1925, - genre: 'Fiction', - rating: 4.2, - description: - 'A classic novel set in the Roaring Twenties, it explores themes of wealth, love, and the American Dream through the enigmatic Jay Gatsby.', - image: './books-images/the-great-gatsby.jpg' - }, - { - title: 'To Kill a Mockingbird', - author: 'Harper Lee', - year: 1960, - genre: 'Fiction', - rating: 4.5, - description: - 'Set in the American South, this novel tackles issues of racism and injustice through the eyes of young Scout Finch.', - image: './books-images/to-kill-a-mockingbird.jpg' - }, - { - title: '1984', - author: 'George Orwell', - year: 1949, - genre: 'Science Fiction', - rating: 4.4, - description: - 'A dystopian classic that explores totalitarianism and the consequences of a surveillance state in a bleak future.', - image: './books-images/1984.jpg' - }, - { - title: 'Pride and Prejudice', - author: 'Jane Austen', - year: 1813, - genre: 'Fiction', - rating: 4.25, - description: - 'A timeless romance novel that examines societal expectations and the misunderstandings that can arise from pride and prejudice.', - image: './books-images/pride-and-prejudice.jpg' - }, - { - title: 'The Catcher in the Rye', - author: 'J.D. Salinger', - year: 1951, - genre: 'Fiction', - rating: 4, - description: - 'Narrated by the teenage Holden Caulfield, the novel explores themes of alienation and the search for authenticity.', - image: './books-images/unknown.jpg' - }, - { - title: 'The Hobbit', - author: 'J.R.R. Tolkien', - year: 1937, - genre: 'Fantasy', - rating: 4.6, - description: - 'A fantasy adventure novel that follows Bilbo Baggins on a quest to help a group of dwarves reclaim their homeland from a dragon.', - image: './books-images/the-hobbit.jpg' - }, - { - title: "Harry Potter and the Sorcerer's Stone", - author: 'J.K. Rowling', - year: 1997, - genre: 'Fantasy', - rating: 4.7, - description: - 'The first book in the beloved Harry Potter series, it introduces readers to the magical world of Hogwarts and the young wizard Harry Potter.', - image: "./books-images/harry-potter-and-the-sorcerer'.jpg" - }, - { - title: 'Moby-Dick', - author: 'Herman Melville', - year: 1851, - genre: 'Adventure', - rating: 4.1, - description: - 'An epic tale of obsession, revenge, and the relentless pursuit of the great white whale, Moby Dick.', - image: './books-images/moby-dick.jpg' - }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - author: 'J.R.R. Tolkien', - year: 1954, - genre: 'Fantasy', - rating: 4.55, - description: - 'The first volume of the epic fantasy trilogy follows Frodo Baggins and the Fellowship on their quest to destroy the One Ring.', - image: './books-images/the-lord-of-the-rings.jpg' - }, - { - title: 'The Shining', - author: 'Stephen King', - year: 1977, - genre: 'Horror', - rating: 4.3, - description: - "A psychological horror novel that tells the story of the Torrance family's terrifying experiences at the haunted Overlook Hotel.", - image: './books-images/unknown.jpg' - }, - { - title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe', - author: 'C.S. Lewis', - year: 1950, - genre: 'Fantasy', - rating: 4.15, - description: - 'The first book in the Chronicles of Narnia series, it follows the adventures of children who discover the magical land of Narnia.', - image: './books-images/the-chronicles-of-narnia.jpg' - }, - { - title: 'The Da Vinci Code', - author: 'Dan Brown', - year: 2003, - genre: 'Mystery', - rating: 3.8, - description: - 'A gripping mystery thriller that follows Harvard symbologist Robert Langdon as he unravels the secrets of the Da Vinci Code.', - image: './books-images/unknown.jpg' - }, - { - title: 'The Alchemist', - author: 'Paulo Coelho', - year: 1988, - genre: 'Fiction', - rating: 4.25, - description: - 'A philosophical novel that tells the story of Santiago, a shepherd boy, on his quest to discover his personal legend.', - image: './books-images/unknown.jpg' - }, - { - title: 'The Hunger Games', - author: 'Suzanne Collins', - year: 2008, - genre: 'Science Fiction', - rating: 4.3, - description: - "In a dystopian future, Katniss Everdeen becomes a symbol of rebellion when she volunteers to take her sister's place in the brutal Hunger Games.", - image: './books-images/unknown.jpg' - }, - { - title: 'The Girl with the Dragon Tattoo', - author: 'Stieg Larsson', - year: 2005, - genre: 'Mystery', - rating: 4.1, - description: - 'A gripping mystery novel featuring investigative journalist Mikael Blomkvist and the enigmatic hacker Lisbeth Salander.', - image: './books-images/unknown.jpg' - }, - { - title: 'The Road', - author: 'Cormac McCarthy', - year: 2006, - genre: 'Dystopian', - rating: 4, - description: - "Set in a post-apocalyptic world, it follows a father and son's harrowing journey to survive and find safety.", - image: './books-images/unknown.jpg' - }, - { - title: "The Hitchhiker's Guide to the Galaxy", - author: 'Douglas Adams', - year: 1979, - genre: 'Science Fiction', - rating: 4.35, - description: - "A comedic science fiction series that follows the misadventures of Arthur Dent after Earth's destruction.", - image: './books-images/unknown.jpg' - }, - { - title: 'The Giver', - author: 'Lois Lowry', - year: 1993, - genre: 'Dystopian', - rating: 4.12, - description: - 'A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.', - image: './books-images/unknown.jpg' - } -] - -const recipes = [ - { - name: 'Individual vegetarian lasagnes', - cuisineType: ['italian'], - ingredients: [ - '1.2 kg cherry tomatoes', - '5 sprigs of fresh thyme', - 'extra virgin olive oil', - '2 shallots', - '2 cloves of garlic', - '500 g baby spinach', - '8-12 fresh or dried lasagne sheets', - '350 g ricotta cheese', - 'WHITE SAUCE', - '600 ml milk', - '25 g unsalted butter', - '2 heaped tablespoons flour', - '150 g vegetarian sharp, mature cheese', - '100 g mozzarella' - ], - source: 'Jamie Oliver', - totalTime: 130, - url: 'http://www.jamieoliver.com/recipes/vegetables-recipes/individual-vegetarian-lasagnes/', - image: './recipe-images/individual-vegetarian-lasagnes.jpg' - }, - { - name: 'Vegetarian Stir-Fried Garlic Scape', - cuisineType: ['Balanced'], - ingredients: [ - '8 oz. garlic scapes', - '3 oz. baby corn', - '3 oz. carrots', - '1 oz. dried shiitake mushrooms', - '1 clove of garlic sliced thinly', - '3 slices of fresh ginger root', - '2 tablespoons vegetable oil', - '1/4 cup shaoxing cooking wine', - '1/4 vegetarian stock or water', - '1 tablespoon light soy sauce', - '1 teaspoon sugar', - '1 teaspoon cornstarch', - '1/4 teaspoon ground white pepper' - ], - source: 'Red Cook', - totalTime: null, - url: 'http://redcook.net/2010/06/16/garlic-scape-an-off-menu-treat/', - image: './recipe-images/vegetarian-stir-fried-garlic-s.jpg' - }, +const RECIPES = [ { name: 'Cheat’s cheesy focaccia', cuisineType: ['Italian'], @@ -247,9 +13,56 @@ const recipes = [ url: 'https://www.bbcgoodfood.com/recipes/cheats-cheesy-focaccia', image: './recipe-images/cheat’s-cheesy-focaccia.jpg' }, + { + name: 'Spice-Rubbed Grilled Flap Meat (Sirloin Tip) Recipe', + cuisineType: 'American', + ingredients: [ + '1 tablespoon whole black peppercorns, toasted', + '1 teaspoon coriander seed, toasted', + '1 teaspoon fennel seed, toasted', + '1 teaspoon cumin pods, toasted', + '1 teaspoon red pepper flakes', + '1/2 teaspoon dried oregano', + '2 medium cloves garlic, minced (about 2 teaspoons)', + '2 tablespoons vegetable or canola oil', + '1 whole flap meat steak, 2 to 2 1/2 pounds', + 'Kosher salt' + ], + source: 'Serious Eats', + totalTime: 240, + url: 'http://www.seriouseats.com/recipes/2012/05/spice-rubbed-grilled-flap-meat-sirloin-tip-recipe.html', + image: './recipe-images/grilled.jpg' + }, + { + name: 'Burnt-Scallion Fish', + cuisineType: ['Asian', 'Chinese'], + ingredients: [ + '2 bunches scallions', + '8 tbsp. butter', + '2 8-oz. fish filets' + ], + source: 'Saveur', + totalTime: 70, + url: 'http://www.saveur.com/article/Recipes/Burnt-Scallion-Fish', + image: './recipe-images/fish-dish.jpg' + }, + { + name: 'Baked Chicken', + cuisineType: ['American'], + ingredients: [ + '6 bone-in chicken breast halves, or 6 chicken thighs and wings, skin-on', + '1/2 teaspoon coarse salt', + '1/2 teaspoon Mrs. Dash seasoning', + '1/4 teaspoon freshly ground black pepper' + ], + source: 'Martha Stewart', + totalTime: 90, + url: 'http://www.marthastewart.com/318981/baked-chicken', + image: './recipe-images/baked-chicken.jpg' + }, { name: "Vegetarian Shepherd's Pie", - cuisineType: ['Balanced', 'High-Fiber'], + cuisineType: ['English', 'Traditional', 'Balanced', 'High-Fiber'], ingredients: [ '2 tablespoons extra-virgin olive oil', '1 large onion, finely diced', @@ -274,7 +87,7 @@ const recipes = [ }, { name: 'Chicken Paprikash', - cuisineType: ['Low-Carb'], + cuisineType: ['Asian', 'Chinese', 'Low-Carb'], ingredients: [ '640 grams chicken - drumsticks and thighs ( 3 whole chicken legs cut apart)', '1/2 teaspoon salt', @@ -293,59 +106,9 @@ const recipes = [ url: 'http://norecipes.com/recipe/chicken-paprikash/', image: './recipe-images/chicken-paprikash.jpg' }, - { - name: 'Baked Chicken', - cuisineType: ['american'], - ingredients: [ - '6 bone-in chicken breast halves, or 6 chicken thighs and wings, skin-on', - '1/2 teaspoon coarse salt', - '1/2 teaspoon Mrs. Dash seasoning', - '1/4 teaspoon freshly ground black pepper' - ], - source: 'Martha Stewart', - totalTime: 90, - url: 'http://www.marthastewart.com/318981/baked-chicken', - image: './recipe-images/baked-chicken.jpg' - }, - { - name: 'Deep Fried Fish Bones', - cuisineType: ['south east asian'], - ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'], - source: 'Serious Eats', - totalTime: 31, - url: 'http://www.seriouseats.com/recipes/2011/03/deep-fried-fish-bones-recipe.html', - image: './recipe-images/deep-fried-fish-bones.jpg' - }, - { - name: 'Burnt-Scallion Fish', - cuisineType: ['chinese'], - ingredients: [ - '2 bunches scallions', - '8 tbsp. butter', - '2 8-oz. fish filets' - ], - source: 'Saveur', - totalTime: 70, - url: 'http://www.saveur.com/article/Recipes/Burnt-Scallion-Fish', - image: './recipe-images/fish-dish.jpg' - }, - { - name: 'Curry-Crusted Fish', - cuisineType: ['south east asian'], - ingredients: [ - '3 slices bread , about 85g/3oz in total', - '1 lime', - '1.0 tbsp Korma curry paste', - '4 thick white fish fillets' - ], - source: 'BBC Good Food', - totalTime: 80, - url: 'http://www.bbcgoodfood.com/recipes/4717/', - image: './recipe-images/fish-dish.jpg' - }, { name: 'Meat Stock', - cuisineType: 'american', + cuisineType: 'American', ingredients: [ '2.5 pounds beef marrow bones', '1 large onion, quartered', @@ -366,41 +129,176 @@ const recipes = [ image: './recipe-images/meat.jpg' }, { - name: 'Homemade Meat Broth', - cuisineType: 'american', + name: 'Individual vegetarian lasagnes', + cuisineType: ['Italian'], ingredients: [ - '1 teaspoon salt', - '1 carrot, peeled', - '1 medium onion, peeled', - '2 or 3 celery stalks', - '¼ red or yellow bell pepper, stripped of all its seeds', - '1 small boiling potato, peeled', - '1 ripe, fresh tomato, or 1 canned Italian plum tomato, drained of juice', - '5 pounds assorted pieces of meat and bones (see meat suggestions above), of which no less than 1½ pounds is all meat' + '1.2 kg cherry tomatoes', + '5 sprigs of fresh thyme', + 'extra virgin olive oil', + '2 shallots', + '2 cloves of garlic', + '500 g baby spinach', + '8-12 fresh or dried lasagne sheets', + '350 g ricotta cheese', + 'WHITE SAUCE', + '600 ml milk', + '25 g unsalted butter', + '2 heaped tablespoons flour', + '150 g vegetarian sharp, mature cheese', + '100 g mozzarella' ], - source: 'Cookstr', - totalTime: 60, - url: 'http://www.cookstr.com/recipes/il-brodo-homemade-meat-broth', - image: './recipe-images/meat.jpg' + source: 'Jamie Oliver', + totalTime: 130, + url: 'http://www.jamieoliver.com/recipes/vegetables-recipes/individual-vegetarian-lasagnes/', + image: './recipe-images/individual-vegetarian-lasagnes.jpg' }, { - name: 'Spice-Rubbed Grilled Flap Meat (Sirloin Tip) Recipe', - cuisineType: 'south-american', + name: 'Deep Fried Fish Bones', + cuisineType: ['Chinese', 'south east asian', 'Asian'], + ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'], + source: 'Serious Eats', + totalTime: 31, + url: 'http://www.seriouseats.com/recipes/2011/03/deep-fried-fish-bones-recipe.html', + image: './recipe-images/deep-fried-fish-bones.jpg' + }, + { + name: 'Vegetarian Stir-Fried Garlic Scape', + cuisineType: ['Italian', 'Balanced'], ingredients: [ - '1 tablespoon whole black peppercorns, toasted', - '1 teaspoon coriander seed, toasted', - '1 teaspoon fennel seed, toasted', - '1 teaspoon cumin pods, toasted', - '1 teaspoon red pepper flakes', - '1/2 teaspoon dried oregano', - '2 medium cloves garlic, minced (about 2 teaspoons)', - '2 tablespoons vegetable or canola oil', - '1 whole flap meat steak, 2 to 2 1/2 pounds', - 'Kosher salt' + '8 oz. garlic scapes', + '3 oz. baby corn', + '3 oz. carrots', + '1 oz. dried shiitake mushrooms', + '1 clove of garlic sliced thinly', + '3 slices of fresh ginger root', + '2 tablespoons vegetable oil', + '1/4 cup shaoxing cooking wine', + '1/4 vegetarian stock or water', + '1 tablespoon light soy sauce', + '1 teaspoon sugar', + '1 teaspoon cornstarch', + '1/4 teaspoon ground white pepper' ], - source: 'Serious Eats', - totalTime: 240, - url: 'http://www.seriouseats.com/recipes/2012/05/spice-rubbed-grilled-flap-meat-sirloin-tip-recipe.html', - image: './recipe-images/grilled.jpg' + source: 'Red Cook', + totalTime: 60, + url: 'http://redcook.net/2010/06/16/garlic-scape-an-off-menu-treat/', + image: './recipe-images/vegetarian-stir-fried-garlic-s.jpg' } ] + +const cardContainer = document.getElementById('card-container') +const filterDropdown = document.getElementById('filterDropdown') +const ascendingButton = document.getElementById('ascendingButton') +const descendingButton = document.getElementById('descendingButton') +const shortestButton = document.getElementById('shortest') +const longestButton = document.getElementById('longest') +const randomButton = document.getElementById('random-button') +// const selectCountry = document.getElementById('selectCountry') + + +// Display all recipes by default when the page loads + +const displayRecipes = (recipesArray) => { + cardContainer.innerHTML = '' //Clears the content + + // Iterating over the whole recipe array to access each recipe object to be able to fill in the $key of the innerHTML afterwards + recipesArray.forEach(recipe => { + + // Get the total time + const time = recipe.totalTime; + + // Handle cuisineType as array or string + const cuisine = Array.isArray(recipe.cuisineType) ? recipe.cuisineType.join(', ') : recipe.cuisineType + + // Convert ingredients array to a list + const ingredientsList = recipe.ingredients.map(ingredient => `
  • ${ingredient}
    • `).join('') + + + + cardContainer.innerHTML += ` +
    +
    + ${recipe.name} +
    +
    +

    ${recipe.name}

    +

    Total Time: ${time} minutes

    +

    Cuisine: ${cuisine}

    +

    Ingredients:

    + +
    +
    ` + }) +} + + +const filterRecipes = () => { + // get the value from the select + const value = filterDropdown.value + console.log('the user selected', value) + // if the user clicks "all", all the recipes will be shown + + if (value === 'all') { + displayRecipes(RECIPES) + + // if the user clicks on another choice only selected recipes will be shown. Since the cuisine types are sometimes stored as a 'string' and sometimes as an [array], I mentioned + } else if (value === 'american') { + + const americanRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('American')) + displayRecipes(americanRecipes) + + } else if (value === 'asian') { + + const asianRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('south east asian')) + + displayRecipes(asianRecipes) + + } else if (value === 'italian') { + const italianRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('Italian')) + + displayRecipes(italianRecipes) + + } +} + +// eventListener for the Dropdown menu +filterDropdown.addEventListener('change', filterRecipes) + + +// Buttons for sorting +// Sort by recipe name in ascending order +ascendingButton.addEventListener('click', () => { + + const sortedRecipes = [...RECIPES].sort((a, b) => a.name.localeCompare(b.name)) + displayRecipes(sortedRecipes) +}) + +// Sort by recipe name in descending order +descendingButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => b.name.localeCompare(a.name)) + displayRecipes(sortedRecipes) +}) + +//Sort by shortest cooking time +shortestButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => a.totalTime - b.totalTime) + displayRecipes(sortedRecipes); +}) + +//Sort by longest cooking time +longestButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => b.totalTime - a.totalTime) + displayRecipes(sortedRecipes); +}) + + +randomButton.addEventListener('click', () => { + const randomIndex = Math.floor(Math.random() * RECIPES.length) + const randomRecipe = RECIPES[randomIndex] + displayRecipes([randomRecipe]) // Pass an array with the single recipe +}) + + +// Display all recipes initially + +displayRecipes(RECIPES) \ No newline at end of file diff --git a/style.css b/style.css index e69de29..8841c2d 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,201 @@ +body { + padding: 0; + background-color: #d9e7e2; + font-family: 'Poppins'; + max-width: 100%; + margin: 0; +} + +/* Header */ +header { + max-width: 100%; + margin: 0; + display: flex; + justify-content: center; +} + +h1 { + text-align: center; + color: #23362f; + width: 100%; + padding-top: 50px; +} + +/* Main section mobile phone */ + +main { + padding: 10px; +} + +.categories { + display: flex; + justify-content: space-evenly; + max-width: 100%; + padding: 20px 0 20px 0; + border-radius: 5px 5px 0 0; + border-bottom: 2px solid gray; + gap: 2px; + flex-direction: column; +} + +h2 { + text-align: center; + margin: 0 auto; +} + +form { + display: flex; + flex-direction: row; + justify-content: center; +} + +/* Filter on Kitchen for mobile phone*/ + +.dropdownContainer { + display: flex; + align-items: center; + flex-direction: column; +} + +#filterDropdown { + cursor: pointer; + border-radius: 10px; + background-color: whitesmoke; + max-width: 80%; + font-weight: 700; + margin: 10px; + padding: 10px; + border: none; + box-shadow: 10px 5px 5px grey; + color: black; +} + +/* Sort Container */ + +.sort-container { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0px 25px 25px 25px; +} + +/* buttons */ +.shortest, +.longest, +.decending, +.ascending { + border-radius: 10px; + background-color: whitesmoke; + max-width: 100px; + font-weight: 700; + margin: 10px; + padding: 10px; + border: none; + box-shadow: 10px 5px 5px grey; + cursor: pointer; +} + +.ascending:hover, +.shortest:hover, +.longest:hover, +.decending:hover { + background-color: rgb(96, 96, 122); + color: white; +} + +.random-container { + padding-top: 30px; + display: flex; + flex-direction: column; + align-items: center; +} + + +.random-button { + border-radius: 10px; + background-color: #74c2a8; + max-width: 200px; + font-weight: 700; + margin: 10px; + padding: 10px; + border: none; + border: none; + box-shadow: 10px 5px 5px grey; + cursor: pointer; +} + +.random-button:hover { + background-color: rgb(96, 96, 122); + color: white; +} + +button { + appearance: none; + color: black; +} + +/* Tablet and iPads */ +@media (min-width: 667px) { + form { + flex-direction: row; + } + + .categories { + flex-direction: row; + } +} + + + +/* Card Contents */ + +section { + display: grid; + gap: 15px; + background: #d9e7e2; + grid-template-columns: repeat(auto-fit, minmax(300px, 3fr)); + padding: 20px; + border: red; +} + +.card { + display: flex; + border-radius: 50px 0px 50px 0px; + padding: 7px; + max-width: 300px; + flex-direction: column; + background-color: white; + cursor: pointer; + transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; +} + +.card h3 { + font-size: 20px; +} + +.card ul { + font-size: 12px; +} + +.card:hover { + background-color: rgb(96, 96, 122); + color: white; + box-shadow: 10px 5px 5px grey; +} + +.card-image { + width: 100%; + height: 280px; + border-radius: 50px 0px 50px 0px; + overflow: hidden; +} + +img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.titleIngredients { + font-weight: bolder; +}