fem-projects/recipe-page
Archived
1
Fork 0
Code Activity

Add some css

Browse source
This commit is contained in:
Hadeed 2024-07-03 00:15:21 +05:00
parent 2b91a50659
commit 0b08948a6a
5 changed files with 256 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
index.html
View file

@ -12,97 +12,126 @@
/> />
<title>Recipe page</title> <title>Recipe page</title>
<link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body class="flex min-h-dvh items-center justify-center bg-eggshell p-32">
<h1>Simple Omelette Recipe</h1> <main class="w-full max-w-3xl rounded-3xl bg-white p-10">
<h1>Simple Omelette Recipe</h1>
<p> <p>
An easy and quick dish, perfect for any meal. This classic omelette An easy and quick dish, perfect for any meal. This classic omelette
combines beaten eggs cooked to perfection, optionally filled with your combines beaten eggs cooked to perfection, optionally filled with your
choice of cheese, vegetables, or meats. choice of cheese, vegetables, or meats.
</p> </p>
<div> <div class="bg-snow">
<h3>Preparation time</h3> <h3>Preparation time</h3>
<ul>
<li>
<p><strong>Total:</strong> Approximately 10 minutes</p>
</li>
<li>
<p><strong>Preparation:</strong> 5 minutes</p>
</li>
<li>
<p><strong>Cooking:</strong> 5 minutes</p>
</li>
</ul>
</div>
<h2>Ingredients</h2>
<ul> <ul>
<li>Total: Approximately 10 minutes</li> <li><p>2-3 large eggs</p></li>
<li>Preparation: 5 minutes</li> <li><p>Salt, to taste</p></li>
<li>Cooking: 5 minutes</li> <li><p>Pepper, to taste</p></li>
<li><p>1 tablespoon of butter or oil</p></li>
<li>
<p>
Optional fillings: cheese, diced vegetables, cooked meats, herbs
</p>
</li>
</ul> </ul>
</div>
<h2>Ingredients</h2> <h2>Instructions</h2>
<ul> <ol>
<li>2-3 large eggs</li> <li>
<li>Salt, to taste</li> <p>
<li>Pepper, to taste</li> <strong>Beat the eggs:</strong> In a bowl, beat the eggs with a
<li>1 tablespoon of butter or oil</li> pinch of salt and pepper until they are well mixed. You can add a
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li> tablespoon of water or milk for a fluffier texture.
</ul> </p>
</li>
<h2>Instructions</h2> <li>
<p>
<strong>Heat the pan:</strong> Place a non-stick frying pan over
medium heat and add butter or oil.
</p>
</li>
<ol> <li>
<li> <p>
Beat the eggs: In a bowl, beat the eggs with a pinch of salt and pepper <strong>Cook the omelette:</strong> Once the butter is melted and
until they are well mixed. You can add a tablespoon of water or milk for bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly
a fluffier texture. coat the surface.
</li> </p>
</li>
<li> <li>
Heat the pan: Place a non-stick frying pan over medium heat and add <p>
butter or oil. <strong>Add fillings (optional):</strong> When the eggs begin to set
</li> at the edges but are still slightly runny in the middle, sprinkle
your chosen fillings over one half of the omelette.
</p>
</li>
<li> <li>
Cook the omelette: Once the butter is melted and bubbling, pour in the <p>
eggs. Tilt the pan to ensure the eggs evenly coat the surface. <strong>Fold and serve:</strong> As the omelette continues to cook,
</li> carefully lift one edge and fold it over the fillings. Let it cook
for another minute, then slide it onto a plate.
</p>
</li>
<li> <li>
Add fillings (optional): When the eggs begin to set at the edges but are <p>
still slightly runny in the middle, sprinkle your chosen fillings over <strong>Enjoy:</strong> Serve hot, with additional salt and pepper
one half of the omelette. if needed.
</li> </p>
</li>
</ol>
<li> <h2>Nutrition</h2>
Fold and serve: As the omelette continues to cook, carefully lift one
edge and fold it over the fillings. Let it cook for another minute, then
slide it onto a plate.
</li>
<li>Enjoy: Serve hot, with additional salt and pepper if needed.</li> <p>
</ol> The table below shows nutritional values per serving without the
additional fillings.
</p>
<h2>Nutrition</h2> <table>
<tr>
<td>Calories</td>
<td>277kcal</td>
</tr>
<p> <tr>
The table below shows nutritional values per serving without the <td>Carbs</td>
additional fillings. <td>0g</td>
</p> </tr>
<table> <tr>
<tr> <td>Protein</td>
<td>Calories</td> <td>20g</td>
<td>277kcal</td> </tr>
</tr>
<tr> <tr>
<td>Carbs</td> <td>Fat</td>
<td>0g</td> <td>22g</td>
</tr> </tr>
</table>
<tr> </main>
<td>Protein</td>
<td>20g</td>
</tr>
<tr>
<td>Fat</td>
<td>22g</td>
</tr>
</table>
</body> </body>
</html> </html>

72
package-lock.json generated
View file

@ -8,6 +8,7 @@
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"postcss": "^8.4.39", "postcss": "^8.4.39",
"prettier": "^3.3.2", "prettier": "^3.3.2",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.4", "tailwindcss": "^3.4.4",
"vite": "^5.3.2" "vite": "^5.3.2"
@ -1050,6 +1051,19 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/css-declaration-sorter": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz",
"integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==",
"dev": true,
"license": "ISC",
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"postcss": "^8.0.9"
}
},
"node_modules/cssesc": { "node_modules/cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -1717,6 +1731,19 @@
"postcss": "^8.4.21" "postcss": "^8.4.21"
} }
}, },
"node_modules/postcss-less": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz",
"integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"peerDependencies": {
"postcss": "^8.3.5"
}
},
"node_modules/postcss-load-config": { "node_modules/postcss-load-config": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
@ -1786,6 +1813,33 @@
"postcss": "^8.2.14" "postcss": "^8.2.14"
} }
}, },
"node_modules/postcss-scss": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
"integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss-scss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"engines": {
"node": ">=12.0"
},
"peerDependencies": {
"postcss": "^8.4.29"
}
},
"node_modules/postcss-selector-parser": { "node_modules/postcss-selector-parser": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
@ -1823,6 +1877,24 @@
"url": "https://github.com/prettier/prettier?sponsor=1" "url": "https://github.com/prettier/prettier?sponsor=1"
} }
}, },
"node_modules/prettier-plugin-css-order": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/prettier-plugin-css-order/-/prettier-plugin-css-order-2.1.2.tgz",
"integrity": "sha512-vomxPjHI6pOMYcBuouSJHxxQClJXaUpU9rsV9IAO2wrSTZILRRlrxAAR8t9UF6wtczLkLfNRFUwM+ZbGXOONUA==",
"dev": true,
"license": "ISC",
"dependencies": {
"css-declaration-sorter": "^7.1.1",
"postcss-less": "^6.0.0",
"postcss-scss": "^4.0.9"
},
"engines": {
"node": ">=16"
},
"peerDependencies": {
"prettier": "3.x"
}
},
"node_modules/prettier-plugin-tailwindcss": { "node_modules/prettier-plugin-tailwindcss": {
"version": "0.6.5", "version": "0.6.5",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz", "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",

2
package.json
View file

@ -8,12 +8,14 @@
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"postcss": "^8.4.39", "postcss": "^8.4.39",
"prettier": "^3.3.2", "prettier": "^3.3.2",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.4", "tailwindcss": "^3.4.4",
"vite": "^5.3.2" "vite": "^5.3.2"
}, },
"prettier": { "prettier": {
"plugins": [ "plugins": [
"prettier-plugin-css-order",
"prettier-plugin-tailwindcss" "prettier-plugin-tailwindcss"
] ]
}, },

64
styles.css Normal file
View file

@ -0,0 +1,64 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-weight: 100 900;
src: url("/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
font-family: "Outfit";
}
@font-face {
font-weight: 100 900;
src: url("/fonts/YoungSerif-Regular.ttf") format("truetype");
font-family: "Young Serif";
}
h1,
h2 {
font-weight: 400;
line-height: 100%;
font-family: theme("fontFamily.serif");
}
h1 {
color: theme("colors.dark-charcoal");
font-size: 2.5rem;
}
h2 {
color: theme("colors.brandy-red");
font-size: 1.75rem;
}
h3 {
color: theme("colors.dark-raspberry");
font-weight: 600;
font-size: 1.25rem;
line-height: 100%;
}
p {
color: theme("colors.wenge-brown");
font-weight: 400;
font-size: 1rem;
line-height: 150%;
> strong {
font-weight: 700;
}
}
td {
color: theme("colors.wenge-brown");
font-weight: 400;
font-size: 1rem;
line-height: 150%;
&:last-child {
color: theme("colors.brandy-red");
font-weight: 700;
}
}
}

17
tailwind.config.js
View file

@ -1,4 +1,19 @@
export default { export default {
content: ["index.html"], content: ["index.html"],
theme: {}, theme: {
colors: {
"brandy-red": "#854632",
"dark-charcoal": "#312E2C",
"dark-raspberry": "#7A284E",
"wenge-brown": "#5F564D",
"white-coffee": "#E3DDD7",
eggshell: "#F3E5D7",
snow: "#FFF7FB",
white: "#FFFFFF",
},
fontFamily: {
sans: ["Outfit", "sans-serif"],
serif: ["Young\\ Serif", "serif"],
},
},
}; };