diff --git a/apple-pie/index.html b/apple-pie/index.html index a019c8262..7dd032f95 100644 --- a/apple-pie/index.html +++ b/apple-pie/index.html @@ -1,39 +1,104 @@ - - - - Apple Pie Recipe - - - - Apple Pie - - This was my grandmother's apple pie recipe. I have never seen another one quite like it. It will always - be my favorite and has won me several first place prizes in local competitions. I hope it becomes one of your - favorites as well! - - Ingredients - - 1 recipe pastry for a 9 inch double crust pie - 1/2 cup unsalted butter - 3 tablespoons all-purpose flour - 1/4 cup water - 3 tablespoons all-purpose flour - 1/4 cup water 1/2 cup white sugar - 1/2 cup packed brown sugar - 8 Granny Smith apples - peeled, cored and sliced - - Directions - - Preheat oven to 425 degrees F (220 degrees C).Melt the butter in a saucepan. Stir in flour to form a paste. Add water, white sugar and brown sugar, and bring - to a boil. Reduce temperature and let simmer. - - Place the bottom crust in your pan. Fill with apples, mounded - slightly. Cover with a lattice work crust. Gently pour the sugar and butter liquid over the crust. Pour slowly so - that it does not run off. - - Bake 15 minutes in the preheated oven. Reduce the temperature to 350 degrees F (175 - degrees C). Continue baking for 35 to 45 minutes, until apples are soft. - - + + + + + Apple Pie Recipe + + + + + + + + +
+ Tarta + +

Apple pie

+
+ +
+

+ This was my grandmother's apple pie recipe. I have never seen another + one quite like it. It will always be my favorite and has won me several + first place prizes in local competitions. I hope it becomes one of your + favorites as well! +

+
+

1h 30min 8 servings 512 +

+
+ +
+

Ingredients

+ + +
+ +
+
+

Prep

+

Cook

+

Ready In

+
+
+

30min

+

1 h

+

1h 30min

+
+
+
+ +
+

Directions

+
    +
  1. + Preheat oven to 425 degrees F (220 degrees C).Melt the butter in a + saucepan. Stir in flour to form a paste. Add water, white sugar and + brown sugar, and bring to a boil. Reduce temperature and let simmer. +
    2. + +
  2. + Place the bottom crust in your pan. Fill with apples, mounded + slightly. Cover with a lattice work crust. Gently pour the sugar and + butter liquid over the crust. Pour slowly so that it does not run off. +
    3. + +
  3. + Bake 15 minutes in the preheated oven. Reduce the temperature to 350 + degrees F (175 degrees C). Continue baking for 35 to 45 minutes, until + apples are soft. +
    4. +
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css index 7a55b4df4..7a771548a 100644 --- a/apple-pie/styles/style.css +++ b/apple-pie/styles/style.css @@ -5,14 +5,26 @@ html { font-size: 16px; } -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; } -body, h1, h2, h3, h4, h5, h6, p, ol, ul { +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; + } /* Set the font */ @@ -21,4 +33,65 @@ body { } /* STYLES */ -/* Write your CSS below */ \ No newline at end of file +/* Write your CSS below */ + +.foto { + width: 100%; + +} +.titulo { + top:20rem; + left:23rem ; + font-size: 4.95rem; + +} + +/* ESTILOS DEL CUERPO*/ +p{ + font-size: 1.4rem; + text-align:justify; + line-height: 1.2; + + +} + + +i{ + color:lightslategray; + +} +ul { + /* 1. Remove the default list style */ + list-style: none; +} + + + +ul > li::before { + /*3. Set the new style for the list markers */ + content: "- "; +} + +.graella{ + display:flex; + justify-content: center; + flex-wrap: wrap; + width: 100%; +} + + + +ol { + /* 1. Remove the default list style */ + list-style: none; +} + +ol > li { + /* 2. Create a custom list counter */ + counter-increment: listcounter; +} + +ol > li::before { + /*3. Set the new style for the list markers */ + content: counter(listcounter) ")"; +} diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 000000000..62949a809 --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,41 @@ +{ + "name": "webdev_2.3.2_lab-css-recipes-clone", + "lockfileVersion": 3, + "requires": true, + "packages": { + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/bootstrap": { + "version": "5.3.6", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz", + "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, + "node_modules/icons": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/icons/-/icons-1.0.0.tgz", + "integrity": "sha512-7POum3AHKovjEEXg4ITL2opTzGjnN2UnUIhv5LsUX+SjKBsFMjRyANShrCubt0KQdNdcX2wAym+JXOt6LceuYA==", + "deprecated": "Package no longer supported. Contact support@npmjs.com for more info." + } + } +} diff --git a/node_modules/@popperjs/core/LICENSE.md b/node_modules/@popperjs/core/LICENSE.md new file mode 100644 index 000000000..0370c4581 --- /dev/null +++ b/node_modules/@popperjs/core/LICENSE.md @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2019 Federico Zivolo + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/node_modules/@popperjs/core/README.md b/node_modules/@popperjs/core/README.md new file mode 100644 index 000000000..53be7b9d8 --- /dev/null +++ b/node_modules/@popperjs/core/README.md @@ -0,0 +1,376 @@ + +

+ Popper +

+ +
+

Tooltip & Popover Positioning Engine

+
+ +

+ + npm version + + + npm downloads per month (popper.js + @popperjs/core) + + + Rolling Versions + +

+ +
+ + +**Positioning tooltips and popovers is difficult. Popper is here to help!** + +Given an element, such as a button, and a tooltip element describing it, Popper +will automatically put the tooltip in the right place near the button. + +It will position _any_ UI element that "pops out" from the flow of your document +and floats near a target element. The most common example is a tooltip, but it +also includes popovers, drop-downs, and more. All of these can be generically +described as a "popper" element. + +## Demo + +[![Popper visualized](https://i.imgur.com/F7qWsmV.jpg)](https://popper.js.org) + +## Docs + +- [v2.x (latest)](https://popper.js.org/docs/v2/) +- [v1.x](https://popper.js.org/docs/v1/) + +We've created a +[Migration Guide](https://popper.js.org/docs/v2/migration-guide/) to help you +migrate from Popper 1 to Popper 2. + +To contribute to the Popper website and documentation, please visit the +[dedicated repository](https://github.com/popperjs/website). + +## Why not use pure CSS? + +- **Clipping and overflow issues**: Pure CSS poppers will not be prevented from + overflowing clipping boundaries, such as the viewport. It will get partially + cut off or overflows if it's near the edge since there is no dynamic + positioning logic. When using Popper, your popper will always be positioned in + the right place without needing manual adjustments. +- **No flipping**: CSS poppers will not flip to a different placement to fit + better in view if necessary. While you can manually adjust for the main axis + overflow, this feature cannot be achieved via CSS alone. Popper automatically + flips the tooltip to make it fit in view as best as possible for the user. +- **No virtual positioning**: CSS poppers cannot follow the mouse cursor or be + used as a context menu. Popper allows you to position your tooltip relative to + any coordinates you desire. +- **Slower development cycle**: When pure CSS is used to position popper + elements, the lack of dynamic positioning means they must be carefully placed + to consider overflow on all screen sizes. In reusable component libraries, + this means a developer can't just add the component anywhere on the page, + because these issues need to be considered and adjusted for every time. With + Popper, you can place your elements anywhere and they will be positioned + correctly, without needing to consider different screen sizes, layouts, etc. + This massively speeds up development time because this work is automatically + offloaded to Popper. +- **Lack of extensibility**: CSS poppers cannot be easily extended to fit any + arbitrary use case you may need to adjust for. Popper is built with + extensibility in mind. + +## Why Popper? + +With the CSS drawbacks out of the way, we now move on to Popper in the +JavaScript space itself. + +Naive JavaScript tooltip implementations usually have the following problems: + +- **Scrolling containers**: They don't ensure the tooltip stays with the + reference element while scrolling when inside any number of scrolling + containers. +- **DOM context**: They often require the tooltip move outside of its original + DOM context because they don't handle `offsetParent` contexts. +- **Compatibility**: Popper handles an incredible number of edge cases regarding + different browsers and environments (mobile viewports, RTL, scrollbars enabled + or disabled, etc.). Popper is a popular and well-maintained library, so you + can be confident positioning will work for your users on any device. +- **Configurability**: They often lack advanced configurability to suit any + possible use case. +- **Size**: They are usually relatively large in size, or require an ancient + jQuery dependency. +- **Performance**: They often have runtime performance issues and update the + tooltip position too slowly. + +**Popper solves all of these key problems in an elegant, performant manner.** It +is a lightweight ~3 kB library that aims to provide a reliable and extensible +positioning engine you can use to ensure all your popper elements are positioned +in the right place. + +When you start writing your own popper implementation, you'll quickly run into +all of the problems mentioned above. These widgets are incredibly common in our +UIs; we've done the hard work figuring this out so you don't need to spend hours +fixing and handling numerous edge cases that we already ran into while building +the library! + +Popper is used in popular libraries like Bootstrap, Foundation, Material UI, and +more. It's likely you've already used popper elements on the web positioned by +Popper at some point in the past few years. + +Since we write UIs using powerful abstraction libraries such as React or Angular +nowadays, you'll also be glad to know Popper can fully integrate with them and +be a good citizen together with your other components. Check out `react-popper` +for the official Popper wrapper for React. + +## Installation + +### 1. Package Manager + +```bash +# With npm +npm i @popperjs/core + +# With Yarn +yarn add @popperjs/core +``` + +### 2. CDN + +```html + + + + + +``` + +### 3. Direct Download? + +Managing dependencies by "directly downloading" them and placing them into your +source code is not recommended for a variety of reasons, including missing out +on feat/fix updates easily. Please use a versioning management system like a CDN +or npm/Yarn. + +## Usage + +The most straightforward way to get started is to import Popper from the `unpkg` +CDN, which includes all of its features. You can call the `Popper.createPopper` +constructor to create new popper instances. + +Here is a complete example: + +```html + +Popper example + + + + + + + + +``` + +Visit the [tutorial](https://popper.js.org/docs/v2/tutorial/) for an example of +how to build your own tooltip from scratch using Popper. + +### Module bundlers + +You can import the `createPopper` constructor from the fully-featured file: + +```js +import { createPopper } from '@popperjs/core'; + +const button = document.querySelector('#button'); +const tooltip = document.querySelector('#tooltip'); + +// Pass the button, the tooltip, and some options, and Popper will do the +// magic positioning for you: +createPopper(button, tooltip, { + placement: 'right', +}); +``` + +All the modifiers listed in the docs menu will be enabled and "just work", so +you don't need to think about setting Popper up. The size of Popper including +all of its features is about 5 kB minzipped, but it may grow a bit in the +future. + +#### Popper Lite (tree-shaking) + +If bundle size is important, you'll want to take advantage of tree-shaking. The +library is built in a modular way to allow to import only the parts you really +need. + +```js +import { createPopperLite as createPopper } from '@popperjs/core'; +``` + +The Lite version includes the most necessary modifiers that will compute the +offsets of the popper, compute and add the positioning styles, and add event +listeners. This is close in bundle size to pure CSS tooltip libraries, and +behaves somewhat similarly. + +However, this does not include the features that makes Popper truly useful. + +The two most useful modifiers not included in Lite are `preventOverflow` and +`flip`: + +```js +import { + createPopperLite as createPopper, + preventOverflow, + flip, +} from '@popperjs/core'; + +const button = document.querySelector('#button'); +const tooltip = document.querySelector('#tooltip'); + +createPopper(button, tooltip, { + modifiers: [preventOverflow, flip], +}); +``` + +As you make more poppers, you may be finding yourself needing other modifiers +provided by the library. + +See [tree-shaking](https://popper.js.org/docs/v2/performance/#tree-shaking) for more +information. + +## Distribution targets + +Popper is distributed in 3 different versions, in 3 different file formats. + +The 3 file formats are: + +- `esm` (works with `import` syntax — **recommended**) +- `umd` (works with `