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

77
index.html
View file

@ -12,8 +12,10 @@
/> />
<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">
<main class="w-full max-w-3xl rounded-3xl bg-white p-10">
<h1>Simple Omelette Recipe</h1> <h1>Simple Omelette Recipe</h1>
<p> <p>
@ -22,58 +24,84 @@
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> <ul>
<li>Total: Approximately 10 minutes</li> <li>
<li>Preparation: 5 minutes</li> <p><strong>Total:</strong> Approximately 10 minutes</p>
<li>Cooking: 5 minutes</li> </li>
<li>
<p><strong>Preparation:</strong> 5 minutes</p>
</li>
<li>
<p><strong>Cooking:</strong> 5 minutes</p>
</li>
</ul> </ul>
</div> </div>
<h2>Ingredients</h2> <h2>Ingredients</h2>
<ul> <ul>
<li>2-3 large eggs</li> <li><p>2-3 large eggs</p></li>
<li>Salt, to taste</li> <li><p>Salt, to taste</p></li>
<li>Pepper, to taste</li> <li><p>Pepper, to taste</p></li>
<li>1 tablespoon of butter or oil</li> <li><p>1 tablespoon of butter or oil</p></li>
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li> <li>
<p>
Optional fillings: cheese, diced vegetables, cooked meats, herbs
</p>
</li>
</ul> </ul>
<h2>Instructions</h2> <h2>Instructions</h2>
<ol> <ol>
<li> <li>
Beat the eggs: In a bowl, beat the eggs with a pinch of salt and pepper <p>
until they are well mixed. You can add a tablespoon of water or milk for <strong>Beat the eggs:</strong> In a bowl, beat the eggs with a
a fluffier texture. pinch of salt and pepper until they are well mixed. You can add a
tablespoon of water or milk for a fluffier texture.
</p>
</li> </li>
<li> <li>
Heat the pan: Place a non-stick frying pan over medium heat and add <p>
butter or oil. <strong>Heat the pan:</strong> Place a non-stick frying pan over
medium heat and add butter or oil.
</p>
</li> </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>Cook the omelette:</strong> Once the butter is melted and
bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly
coat the surface.
</p>
</li> </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>Add fillings (optional):</strong> When the eggs begin to set
one half of the omelette. 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> <li>
Fold and serve: As the omelette continues to cook, carefully lift one <p>
edge and fold it over the fillings. Let it cook for another minute, then <strong>Fold and serve:</strong> As the omelette continues to cook,
slide it onto a plate. 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>Enjoy: Serve hot, with additional salt and pepper if needed.</li> <li>
<p>
<strong>Enjoy:</strong> Serve hot, with additional salt and pepper
if needed.
</p>
</li>
</ol> </ol>
<h2>Nutrition</h2> <h2>Nutrition</h2>
@ -104,5 +132,6 @@
<td>22g</td> <td>22g</td>
</tr> </tr>
</table> </table>
</main>
</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"],
},
},
}; };