Skip to content

Divyamsharma-18/Recipe-Page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🍳 Recipe Page — A Page So Pretty You’ll Want to Cook (Maybe)

This is a beautiful, clean, minimalist Recipe Page UI — the kind you see on those fancy cooking blogs where everything looks calm, no onions are ever accidentally burned, and somehow everyone has fresh rosemary at home. 🌿😌

Live Demo → https://recipepagechallengeres.netlify.app/


🍽️ What’s This Project?

A Frontend Mentor challenge where the goal was to create a simple, single recipe page with:

  • Ingredient list
  • Preparation steps
  • Cook / prep time
  • Visual structure that doesn’t scream "I just learned HTML yesterday" 😭

And yes… it’s fully responsive so you can follow the recipe while cooking & crying in the kitchen. 🍜💧


✨ Features

  • 🥗 Clean layout with well-structured recipe sections
  • 🎨 Soft + elegant visual design (chef-approved ✅)
  • 📱 Mobile-first responsive styling
  • 📚 Readable typography — like actually readable
  • 💨 Loads instantly (lighter than your emotional baggage)

🧠 Tech Stack

Ingredient Purpose
HTML Main structure (the plate) 🍽️
CSS Styling & seasoning (the salt) 🧂
Responsive CSS Makes sure it doesn’t break like your roti 🫓

Frameworks Used: None Why? Because this is pure handcrafted design, like homemade chai ☕✨


🚀 Live Preview

👉 https://recipepagechallengeres.netlify.app/

Open it, scroll slow, pretend you’re a calm person.


🏗️ File Structure

Recipe-Page/
│── index.html       # The recipe layout
└── style.css        # Fancy styling, spacing & responsiveness

📦 Run Locally

git clone https://github.com/Divyamsharma-18/Recipe-Page.git
cd Recipe-Page
# Open index.html in your browser ✨

Simple. No npm. No “why is node_modules 400MB?” trauma.


🪄 UI Vibes

This page feels like:

  • Sunday morning
  • Clean kitchen
  • Peaceful lo-fi music playing
  • You actually having your life together (temporarily)

👩‍🍳 Author

Divyam Sharma
🌐 Portfolio — https://divyamsharma.netlify.app
💻 GitHub — https://github.com/Divyamsharma-18
🐦 Twitter — https://x.com/Heydivyamsharma

Writes CSS with the same love people reserve for homemade parathas. 🫶


⭐ Show Some Support

If you appreciate good spacing, calm vibes, or recipes that don’t require 46 ingredients, Consider starring the repo ⭐

It helps nourish the soul. Just like food. 🥹🍲


Bon Appétit! Go cook something delicious (or just stare at the UI again, that works too) 😭✨ Image