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>
<link rel="stylesheet" href="styles.css" />
</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>
<p>
@ -22,58 +24,84 @@
choice of cheese, vegetables, or meats.
</p>
<div>
<div class="bg-snow">
<h3>Preparation time</h3>
<ul>
<li>Total: Approximately 10 minutes</li>
<li>Preparation: 5 minutes</li>
<li>Cooking: 5 minutes</li>
<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>
<li>2-3 large eggs</li>
<li>Salt, to taste</li>
<li>Pepper, to taste</li>
<li>1 tablespoon of butter or oil</li>
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
<li><p>2-3 large eggs</p></li>
<li><p>Salt, to taste</p></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>
<h2>Instructions</h2>
<ol>
<li>
Beat the eggs: In a bowl, beat the eggs with a pinch of salt and pepper
until they are well mixed. You can add a tablespoon of water or milk for
a fluffier texture.
<p>
<strong>Beat the eggs:</strong> In a bowl, beat the eggs with a
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>
Heat the pan: Place a non-stick frying pan over medium heat and add
butter or oil.
<p>
<strong>Heat the pan:</strong> Place a non-stick frying pan over
medium heat and add butter or oil.
</p>
</li>
<li>
Cook the omelette: Once the butter is melted and bubbling, pour in the
eggs. Tilt the pan to ensure the eggs evenly coat the surface.
<p>
<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>
Add fillings (optional): When the eggs begin to set at the edges but are
still slightly runny in the middle, sprinkle your chosen fillings over
one half of the omelette.
<p>
<strong>Add fillings (optional):</strong> When the eggs begin to set
at the edges but are still slightly runny in the middle, sprinkle
your chosen fillings over one half of the omelette.
</p>
</li>
<li>
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.
<p>
<strong>Fold and serve:</strong> 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.
</p>
</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>
<h2>Nutrition</h2>
@ -104,5 +132,6 @@
<td>22g</td>
</tr>
</table>
</main>
</body>
</html>

72
package-lock.json generated
View file

@ -8,6 +8,7 @@
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
"prettier": "^3.3.2",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.4",
"vite": "^5.3.2"
@ -1050,6 +1051,19 @@
"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": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -1717,6 +1731,19 @@
"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": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
@ -1786,6 +1813,33 @@
"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": {
"version": "6.1.0",
"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"
}
},
"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": {
"version": "0.6.5",
"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",
"postcss": "^8.4.39",
"prettier": "^3.3.2",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.4",
"vite": "^5.3.2"
},
"prettier": {
"plugins": [
"prettier-plugin-css-order",
"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 {
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"],
},
},
};