Exercise 3 - Creating a Recipe Card

-

 


Spaghetti Carbonara


This website is a simple recipe card designed using HTML and CSS. It features a clean and modern layout showcasing the “Spaghetti Carbonara” recipe. The recipe card includes the dish’s title, a high-quality image, a detailed list of ingredients, and step-by-step cooking instructions. The webpage uses a combination of element selectors, class selectors, and ID selectors to style different parts of the page, providing a visually appealing and easy-to-read format. The design includes a soft color theme, rounded corners, hover effects, and a responsive card layout to enhance the user experience. This website serves as a beginner-friendly demonstration of how HTML structure and CSS styling can be combined to create an attractive, functional recipe card.


HTML And CSS Code


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Spaghetti Carbonara Recipe</title>


    <style>

        body {

            font-family: 'Segoe UI', Tahoma, sans-serif;

            background: linear-gradient(to bottom right, #faf3e0, #f5e8d0);

            margin: 0;

            padding: 40px;

        }

        h1, h2 {

            color: #5a3317;

        }

        ul, ol {

            padding-left: 25px;

            line-height: 1.7;

        }      

        .card {

            max-width: 750px;

            margin: auto;

            background: #ffffff;

            border-radius: 20px;

            padding: 30px;

            box-shadow: 0 8px 25px rgba(0,0,0,0.15);

            transition: transform 0.2s ease;

        }

        .card:hover {

            transform: scale(1.01);

        }


        .recipe-title {

            font-size: 36px;

            text-align: center;

            margin-bottom: 20px;

            font-weight: 700;

            color: #7a4921;

            letter-spacing: 1px;

        }

        .recipe-img {

            width: 100%;

            border-radius: 15px;

            margin-bottom: 20px;

            box-shadow: 0 5px 15px rgba(0,0,0,0.2);

        }

        .ingredient-list li {

            margin-bottom: 6px;

        }   

        #instructions li {

            margin-bottom: 12px;

        }

        .section-box {

            background: #fff7ec;

            padding: 18px 20px;

            border-radius: 15px;

            margin-bottom: 25px;

            border-left: 5px solid #c27b43;

        }

        .section-box:hover {

            background: #ffefd8;

        }

    </style>

</head>

<body>

    <div class="card">

        <h1 class="recipe-title">Spaghetti Carbonara</h1>


        <img class="recipe-img" 

             src="https://uploads.onecompiler.io/442fuys4s/445h7v69k/Espaguetis_carbonara.jpg" 

             alt="Spaghetti Carbonara">


        <div class="section-box">

            <h2>Ingredients</h2>

            <ul class="ingredient-list">

                <li>200g spaghetti</li>

                <li>2 eggs</li>

                <li>1/2 cup grated Parmesan cheese</li>

                <li>100g beef or turkey bacon (halal)</li>

                <li>2 cloves garlic, minced</li>

                <li>Salt & black pepper</li>

            </ul>

        </div>


        <div class="section-box">

            <h2>Cooking Instructions</h2>

            <ol id="instructions">

                <li>Boil spaghetti in salted water until al dente.</li>

                <li>Cook bacon in a pan until crispy; add garlic for 1 minute.</li>

                <li>Beat eggs with Parmesan cheese in a bowl.</li>

                <li>Add drained spaghetti to the pan and mix.</li>

                <li>Turn off heat and quickly stir in the egg-cheese mixture.</li>

                <li>Season with black pepper and serve immediately.</li>

            </ol>

        </div>

    </div>

</body>

</html>



Comments

Post a Comment

Popular posts from this blog

Simple Personal Profile Page

-
Image
Simple Personal Profile Page: https://eloraby-task1.netlify.app/ Mohammad Oraby Hello! My name is Mohammad Oraby. I’m currently studying Software Engineering and I’m passionate about technology, design, and problem-solving. I enjoy learning new things and creating projects that can make life easier or more interesting. Outside of academics, I love exploring new places, trying different types of food, and meeting people from various cultures. I believe that every experience helps shape who we are and teaches us something valuable about the world. My Hobbies Playing Chess Watching Movies Traveling My Skills Web Development (HTML, CSS, JavaScript) Team Collaboration Creative Problem Solving Personal Profile Page after adding a little CSS:  https://mohamed-eloraby-task1.netlify.app/ Mohammad Eloraby 💻 Software Engineering Student | 🌍 Based in Kuala Lumpur | 🎯 Passionate Learner Hello! My name is  Mohammad Eloraby . I’m currently pursuing my degree in  Software Engineering ...
Read more

Final Project Website Redesign

-
Image
  CAVS 55 Website Redesign Code Folder 1. Introduction This project focuses on transforming an approved website redesign prototype into a fully functional, responsive, and accessible website. The main objective was to implement the visual and interaction design decisions made during the earlier stages of the project and bring them to life using front-end web technologies. The final outcome is a live website that accurately reflects the original Figma prototype while following best practices in web design, usability, and performance. The website was developed as a multi-page platform consisting of five main pages: ACT Home, Events, Collections, Contact, and FAQ. Each page was designed and implemented to provide a consistent user experience, intuitive navigation, and a professional visual appearance. The final website is publicly accessible via a live URL hosted on Netlify. 2. Tools and Technologies Used The development of the website relied on standard front-end web technologie...
Read more

Prototype Development: CAVS 55 Event Page Redesign

-
Image
  figma.com Prototype Development: CAVS 55 Event Page Redesign The objective of this prototype is to translate the CAVS 55 Event Page redesign proposal into a functional, interactive representation that demonstrates improved usability, visual hierarchy, and engagement. The prototype aims to transform the original static and text-heavy page into a dynamic event hub that clearly communicates the significance of the 55th anniversary of the Center for Advanced Visual Studies (CAVS) while supporting intuitive navigation and a more immersive user experience. Overview of the Prototype The interactive prototype was developed using Figma, leveraging components, auto-layout, and interactive frames to simulate realistic navigation. The prototype includes three core pages: Homepage (CAVS 55 Main Event Page) Program Page (Core Content Page) Contact Page These pages reflect the redesign goals by presenting information in clear sections, using strong visual hierarchy, and incorpora...
Read more