Skip to content

Commit 92a8d7d

Browse files
RanitManikRanitManik
committed
added project 16
1 parent 8216320 commit 92a8d7d

File tree

12 files changed

+387
-2
lines changed

12 files changed

+387
-2
lines changed

‎FrontendMentor15—single-price-grid-component/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ Users should be able to:
5353
- CSS Grid
5454
- CSS Responsiveness
5555

56-
## What I learned
56+
### What I learned
5757

58-
## Code Highlights
58+
### Code Highlights
5959

6060
### Useful resources
6161

‎FrontendMentor16—recipe-page/README.md

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Frontend Mentor - Recipe page
2+
3+
This is a solution to
4+
the [Recipe page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm).
5+
Frontend Mentor challenges help you improve your coding skills by building realistic projects.
6+
7+
## Table of contents
8+
9+
- [Overview](#overview)
10+
- [The challenge](#the-challenge)
11+
- [Screenshot](#screenshot)
12+
- [Links](#links)
13+
- [My process](#my-process)
14+
- [Built with](#built-with)
15+
- [What I learned](#what-i-learned)
16+
- [Code Highlights](#code-highlights)
17+
- [Useful resources](#Useful-resources)
18+
- [Author](#author)
19+
- [Acknowledgments](#acknowledgments)
20+
21+
## Overview
22+
23+
### The challenge
24+
25+
Your challenge is to build out this recipe page and get it looking as close to the design as possible.
26+
27+
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice,
28+
feel free to give it a go.
29+
30+
Users should be able to:
31+
32+
- View the optimal layout for the component depending on their device's screen size
33+
- See a hover state on desktop for the Sign Up call-to-action
34+
35+
### Screenshot
36+
37+
![Screen Shot.png](Screen%20Shot.png)
38+
39+
### Links
40+
41+
- Solution
42+
URL: [click here to see the solution](https://www.frontendmentor.io/solutions/css-only-single-price-grid-component-QvxSo0Zv1g)
43+
- Live Site
44+
URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor15%E2%80%94social-proof-section/index.html)
45+
- codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/jOROaRV)
46+
47+
## My process
48+
49+
### Built with
50+
51+
- Semantic HTML5 markup
52+
- CSS custom properties
53+
- CSS Grid
54+
- CSS Responsiveness
55+
56+
### What I learned
57+
58+
### Code Highlights
59+
60+
### Useful resources
61+
62+
## Author
63+
64+
- Website - [Ranit Manik](https://ranitmanik.github.io/Portfolio-1.0)
65+
- Frontend Mentor - [@RanitManik](https://www.frontendmentor.io/profile/RanitManik)
66+
- LinkedIn - [@ranit-manik](https://www.linkedin.com/in/ranit-manik/)
67+
68+
## Acknowledgments
69+
70+
I would like to express my gratitude to the creators of the Frontend Mentor platform for providing an engaging and
71+
practical challenge in the form of the Blog Preview Card. The hands-on experience gained through tackling this project
72+
has significantly contributed to my growth as a web developer.
73+
74+
I want to acknowledge the supportive community at Frontend Mentor. The platform's collaborative environment and
75+
constructive feedback from peers have been invaluable in refining my skills and pushing me to strive for excellence.
76+
77+
This project has been a rewarding learning experience, and I look forward to applying these insights in future
78+
endeavors. Thank you to everyone who has played a part in my journey of continuous improvement.
79+
80+
Best regards,<br>
81+
Ranit Manik

‎FrontendMentor16—recipe-page/Screen Shot.png

670 KB
Loading

‎FrontendMentor16—recipe-page/design/desktop-design.jpg

112 KB
Loading

‎FrontendMentor16—recipe-page/design/desktop-preview.jpg

76.7 KB
Loading

‎FrontendMentor16—recipe-page/design/mobile-design.jpg

85 KB
Loading

‎FrontendMentor16—recipe-page/design/style-guide.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
## Colors
11+
12+
### Primary
13+
14+
- Nutmeg: hsl(14, 45%, 36%)
15+
- Dark Raspberry: hsl(332, 51%, 32%)
16+
17+
### Neutral
18+
19+
- White: hsl(0, 0%, 100%)
20+
- Rose White: hsl(330, 100%, 98%)
21+
- Eggshell: hsl(30, 54%, 90%)
22+
- Light Grey: hsl(30, 18%, 87%)
23+
- Wenge Brown: hsl(30, 10%, 34%)
24+
- Dark Charcoal: hsl(24, 5%, 18%)
25+
26+
## Typography
27+
28+
### Body Copy
29+
30+
- Font size (paragraph): 16px
31+
32+
### Fonts
33+
34+
- Family: [Young Serif](https://fonts.google.com/specimen/Young+Serif)
35+
- Weights: 400
36+
37+
- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
38+
- Weights: 400, 600, 700

‎FrontendMentor16—recipe-page/images/favicon-32x32.png

1.04 KB
Loading

‎FrontendMentor16—recipe-page/images/image-omelette.jpeg

78 KB
Loading

‎FrontendMentor16—recipe-page/index.html

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description"
7+
content="A simple and quick omelette recipe perfect for any meal. Learn how to make a classic omelette with eggs, salt, pepper, and optional fillings like cheese, vegetables, or meats.">
8+
9+
10+
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
11+
<link rel="stylesheet" href="style.css">
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap"
15+
rel="stylesheet">
16+
17+
<title>Frontend Mentor | Recipe page</title>
18+
</head>
19+
<body>
20+
<main>
21+
<img src="images/image-omelette.jpeg" alt="picture of a classic coked omelette">
22+
23+
<h1>
24+
Simple Omelette Recipe
25+
</h1>
26+
27+
<p>
28+
An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked
29+
to perfection, optionally filled with your choice of cheese, vegetables, or meats.
30+
</p>
31+
32+
<div class="preparation-time">
33+
<h2>
34+
Preparation time
35+
</h2>
36+
37+
<ul>
38+
<li><strong>Total:</strong> Approximately 10 minutes</li>
39+
<li><strong>Preparation:</strong> 5 minutes</li>
40+
<li><strong>Cooking:</strong> 5 minutes</li>
41+
</ul>
42+
</div>
43+
44+
<h2>
45+
Ingredients
46+
</h2>
47+
48+
<ul>
49+
<li>2-3 large eggs</li>
50+
<li>Salt, to taste</li>
51+
<li>Pepper, to taste</li>
52+
<li>1 tablespoon of butter or oil</li>
53+
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
54+
</ul>
55+
56+
<hr>
57+
58+
<h2>
59+
Instructions
60+
</h2>
61+
62+
<ol>
63+
<li><strong>Beat the eggs:</strong> In a bowl, beat the eggs with a pinch of salt and pepper until they are well
64+
mixed.
65+
You can add a tablespoon of water or milk for a fluffier texture.
66+
</li>
67+
68+
<li><strong>Heat the pan:</strong> Place a non-stick frying pan over medium heat and add butter or oil.</li>
69+
70+
<li><strong>Cook the omelette:</strong> Once the butter is melted and bubbling, pour in the eggs. Tilt the pan
71+
to ensure
72+
the eggs evenly coat the surface.
73+
</li>
74+
75+
<li><strong>Add fillings (optional):</strong> When the eggs begin to set at the edges but are still slightly
76+
runny in the
77+
middle, sprinkle your chosen fillings over one half of the omelette.
78+
</li>
79+
80+
<li><strong>Fold and serve:</strong> As the omelette continues to cook, carefully lift one edge and fold it over
81+
the
82+
fillings. Let it cook for another minute, then slide it onto a plate.
83+
</li>
84+
85+
<li><strong>Enjoy:</strong> Serve hot, with additional salt and pepper if needed.</li>
86+
</ol>
87+
88+
<hr>
89+
90+
<h2>
91+
Nutrition
92+
</h2>
93+
94+
<p>The table below shows nutritional values per serving without the additional fillings.</p>
95+
96+
<table>
97+
<tr>
98+
<td>Calories</td>
99+
<td>277kcal</td>
100+
</tr>
101+
<tr>
102+
<td>Carbs</td>
103+
<td>0g</td>
104+
</tr>
105+
<tr>
106+
<td>Protein</td>
107+
<td>20g</td>
108+
</tr>
109+
<tr>
110+
<td>Fat</td>
111+
<td>22g</td>
112+
</tr>
113+
</table>
114+
115+
</main>
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)