diff --git a/c_quiz.html b/c_quiz.html
new file mode 100644
index 0000000..6d0a2a1
--- /dev/null
+++ b/c_quiz.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coffee Quiz ☕</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #fbeee6;
+            text-align: center;
+            padding: 20px;
+        }
+        .quiz-container {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            max-width: 500px;
+            margin: auto;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #8b4513;
+        }
+        label {
+            display: block;
+            margin: 10px 0;
+        }
+        button {
+            background: #8b4513;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            margin-top: 15px;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+        button:hover {
+            background: #5a2d0c;
+        }
+        #result {
+            margin-top: 20px;
+            font-size: 1.2em;
+            color: #d2691e;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="quiz-container">
+        <h1>Find Your Perfect Coffee! ☕</h1>
+
+        <form id="coffeeQuiz">
+            <label>1. How strong do you like your coffee?</label>
+            <select id="strength">
+                <option value="mild">Mild</option>
+                <option value="medium">Medium</option>
+                <option value="strong">Strong</option>
+            </select>
+
+            <label>2. Do you like milk in your coffee?</label>
+            <select id="milk">
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+            </select>
+
+            <label>3. Do you prefer it hot or cold?</label>
+            <select id="temp">
+                <option value="hot">Hot</option>
+                <option value="cold">Cold</option>
+            </select>
+
+            <button type="button" onclick="getCoffeeResult()">Find My Coffee</button>
+        </form>
+
+        <div id="result"></div>
+    </div>
+
+    <script>
+        function getCoffeeResult() {
+            let strength = document.getElementById("strength").value;
+            let milk = document.getElementById("milk").value;
+            let temp = document.getElementById("temp").value;
+            let resultText = "";
+
+            if (temp === "cold" && milk === "yes") {
+                resultText = "You should try an Iced Latte! ❄️☕";
+            } else if (temp === "cold" && milk === "no") {
+                resultText = "An Iced Americano is perfect for you! ❄️🥤";
+            } else if (strength === "strong" && milk === "no") {
+                resultText = "Go for an Espresso! ⚡☕";
+            } else if (strength === "strong" && milk === "yes") {
+                resultText = "A Cappuccino would be great! 🍵☕";
+            } else if (strength === "medium" && milk === "yes") {
+                resultText = "A classic Café Latte is for you! 🥛☕";
+            } else {
+                resultText = "Try a smooth and mild Americano! ☕";
+            }
+
+            document.getElementById("result").innerHTML = `<strong>${resultText}</strong>`;
+        }
+    </script>
+
+</body>
+</html>
diff --git a/cards.html b/cards.html
new file mode 100644
index 0000000..f44c2ad
--- /dev/null
+++ b/cards.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Coffee Memory Game</title>
+  <style>
+    body {
+      background-color: #fbeee6;
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 20px;
+    }
+    h1 {
+      color: #8b4513;
+    }
+    .game-board {
+      display: grid;
+      grid-template-columns: repeat(4, 100px);
+      grid-gap: 10px;
+      margin-top: 20px;
+    }
+    .card {
+      width: 100px;
+      height: 100px;
+      perspective: 1000px;
+    }
+    .card-inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transition: transform 0.5s;
+      transform-style: preserve-3d;
+      cursor: pointer;
+    }
+    .flipped {
+      transform: rotateY(180deg);
+    }
+    .card-front, .card-back {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      backface-visibility: hidden;
+      border-radius: 8px;
+    }
+    .card-front {
+      background-color: #fff;
+      border: 2px solid #8b4513;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 2em;
+      color: #8b4513;
+    }
+    .card-back {
+      background: url('https://via.placeholder.com/100x100?text=Coffee') center/cover;
+      transform: rotateY(180deg);
+      border: 2px solid #8b4513;
+      border-radius: 8px;
+    }
+    button {
+      background: #8b4513;
+      color: #fff;
+      border: none;
+      padding: 10px 20px;
+      margin: 15px;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+    button:hover {
+      background: #5a2d0c;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>Coffee Memory Game</h1>
+  <p id="message">Click the button to preview all cards.</p>
+  <button id="previewBtn">Preview Cards</button>
+  <div class="game-board" id="gameBoard"></div>
+
+  <script>
+    // List of coffee types (you can replace emoji with images)
+    const coffeeCards = ['☕', '🍵', '🥛', '🫖', '☕', '🍵', '🥛', '🫖'];
+
+    // Shuffle array using Fisher-Yates algorithm
+    function shuffle(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      return array;
+    }
+
+    let flippedCards = [];
+    let matchedCount = 0;
+    let allowClicks = false; // Clicking enabled only after preview
+
+    const gameBoard = document.getElementById('gameBoard');
+    const messageEl = document.getElementById('message');
+    const previewBtn = document.getElementById('previewBtn');
+
+    const shuffledCards = shuffle(coffeeCards.slice()); // Shuffle a copy
+
+    // Create card elements (initially face down)
+    shuffledCards.forEach((coffee) => {
+      const card = document.createElement('div');
+      card.classList.add('card');
+      card.dataset.coffee = coffee;
+      
+      const cardInner = document.createElement('div');
+      cardInner.classList.add('card-inner');
+      
+      const cardFront = document.createElement('div');
+      cardFront.classList.add('card-front');
+      cardFront.textContent = coffee;
+      
+      const cardBack = document.createElement('div');
+      cardBack.classList.add('card-back');
+      
+      cardInner.appendChild(cardFront);
+      cardInner.appendChild(cardBack);
+      card.appendChild(cardInner);
+      gameBoard.appendChild(card);
+      
+      // Add click event listener once preview is done
+      card.addEventListener('click', () => {
+        if (allowClicks) {
+          flipCard(card);
+        }
+      });
+    });
+
+    // Preview function: flip all cards to reveal them briefly
+    previewBtn.addEventListener('click', () => {
+      allowClicks = false; // disable clicks during preview
+      messageEl.textContent = "Memorize the positions!";
+      previewBtn.disabled = true;
+
+      const allCardInners = document.querySelectorAll('.card-inner');
+      allCardInners.forEach(cardInner => cardInner.classList.add('flipped'));
+
+      // After 5 seconds, hide the cards and start the game
+      setTimeout(() => {
+        allCardInners.forEach(cardInner => cardInner.classList.remove('flipped'));
+        messageEl.textContent = "Start matching the cards!";
+        allowClicks = true;
+      }, 5000);
+    });
+
+    // Flip card function
+    function flipCard(card) {
+      // Ignore clicks on already flipped/matched cards
+      if (card.querySelector('.card-inner').classList.contains('flipped') && flippedCards.includes(card)) return;
+      
+      card.querySelector('.card-inner').classList.add('flipped');
+      flippedCards.push(card);
+      
+      // If two cards are flipped, check for a match
+      if (flippedCards.length === 2) {
+        allowClicks = false;  // disable clicking during match check
+        setTimeout(checkForMatch, 800);
+      }
+    }
+
+    // Check if the two flipped cards match
+    function checkForMatch() {
+      const [card1, card2] = flippedCards;
+      if (card1.dataset.coffee === card2.dataset.coffee) {
+        matchedCount += 2;
+      } else {
+        card1.querySelector('.card-inner').classList.remove('flipped');
+        card2.querySelector('.card-inner').classList.remove('flipped');
+      }
+      flippedCards = [];
+      allowClicks = true;
+      
+      // Check if game is over
+      if (matchedCount === coffeeCards.length) {
+        setTimeout(() => alert('Congratulations! You matched all the coffee cards!'), 300);
+      }
+    }
+  </script>
+
+</body>
+</html>
diff --git a/guess_g.html b/guess_g.html
new file mode 100644
index 0000000..2f04180
--- /dev/null
+++ b/guess_g.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>10-Question Guess the Dish Quiz</title>
+  <style>
+    body {
+      background-color: #fff8e1;
+      font-family: Arial, sans-serif;
+      text-align: center;
+      padding: 20px;
+    }
+    h1 {
+      color: #bf360c;
+    }
+    .quiz-container {
+      max-width: 600px;
+      margin: 20px auto;
+      background: #ffe0b2;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+    .clues {
+      text-align: left;
+      margin-bottom: 20px;
+    }
+    .clues p {
+      margin: 8px 0;
+    }
+    input[type="text"] {
+      padding: 10px;
+      width: 80%;
+      max-width: 300px;
+      margin: 10px 0;
+      border: 2px solid #bf360c;
+      border-radius: 5px;
+      font-size: 1em;
+    }
+    button {
+      padding: 10px 20px;
+      font-size: 1em;
+      background-color: #bf360c;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      margin: 10px;
+    }
+    button:hover {
+      background-color: #a52a05;
+    }
+    #result {
+      margin-top: 20px;
+      font-size: 1.2em;
+    }
+    #result img {
+      display: block;
+      margin: 10px auto;
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Guess the Dish Quiz</h1>
+  <div class="quiz-container">
+    <div id="questionArea">
+      <!-- Question and clues will be loaded here -->
+    </div>
+    <input type="text" id="guessInput" placeholder="Enter your guess here">
+    <br>
+    <button id="submitButton">Submit Guess</button>
+    <div id="result"></div>
+    <button id="nextButton" style="display:none;">Next Question</button>
+  </div>
+
+  <script>
+    // Array of 10 questions with 3 clues, answer, and an image URL
+    const questions = [
+      {
+        clues: [
+          "I am a traditional Italian dish.",
+          "I consist of layers of pasta, meat, cheese, and tomato sauce.",
+          "My name sounds similar to a word that means 'to layer'."
+        ],
+        answer: "Lasagna",
+        img: "https://via.placeholder.com/300?text=Lasagna"
+      },
+      {
+        clues: [
+          "I am a popular Japanese dish.",
+          "I am served with raw fish, rice, and seaweed.",
+          "My name means 'vinegared rice'."
+        ],
+        answer: "Sushi",
+        img: "https://via.placeholder.com/300?text=Sushi"
+      },
+      {
+        clues: [
+          "I am a hearty American breakfast.",
+          "I usually include eggs, bacon, and toast.",
+          "I am often served with a side of potatoes."
+        ],
+        answer: "Breakfast",
+        img: "https://via.placeholder.com/300?text=Breakfast"
+      },
+      {
+        clues: [
+          "I am a famous Mexican dish.",
+          "I consist of a tortilla folded or rolled around a filling.",
+          "My name is also used to describe something that's wrapped."
+        ],
+        answer: "Taco",
+        img: "https://via.placeholder.com/300?text=Taco"
+      },
+      {
+        clues: [
+          "I am an iconic French pastry.",
+          "I have a flaky, buttery texture and come in many shapes.",
+          "My name means 'small cake' in French."
+        ],
+        answer: "Croissant",
+        img: "https://via.placeholder.com/300?text=Croissant"
+      },
+      {
+        clues: [
+          "I am a spicy Indian dish.",
+          "I am a creamy tomato-based curry typically made with chicken.",
+          "My name means 'butter' in English."
+        ],
+        answer: "Butter Chicken",
+        img: "https://via.placeholder.com/300?text=Butter+Chicken"
+      },
+      {
+        clues: [
+          "I am a traditional Spanish rice dish.",
+          "I include saffron, seafood, and sometimes chicken.",
+          "My name is also the title of a famous film."
+        ],
+        answer: "Paella",
+        img: "https://via.placeholder.com/300?text=Paella"
+      },
+      {
+        clues: [
+          "I am a classic British dish.",
+          "I involve meat baked in a pastry crust.",
+          "My name is shared with a famous detective from literature."
+        ],
+        answer: "Pie",
+        img: "https://via.placeholder.com/300?text=Pie"
+      },
+      {
+        clues: [
+          "I am a refreshing Middle Eastern dish.",
+          "I consist of finely chopped vegetables and herbs mixed with bulgur wheat.",
+          "My name means 'to mix' in Arabic."
+        ],
+        answer: "Tabbouleh",
+        img: "https://via.placeholder.com/300?text=Tabbouleh"
+      },
+      {
+        clues: [
+          "I am a popular American dessert.",
+          "I have a buttery crust and are filled with fruits or sweet fillings.",
+          "My name is synonymous with a 'piece of pie'."
+        ],
+        answer: "Pie",
+        img: "https://via.placeholder.com/300?text=Pie"
+      }
+    ];
+
+    let currentQuestionIndex = 0;
+    const questionArea = document.getElementById("questionArea");
+    const guessInput = document.getElementById("guessInput");
+    const resultEl = document.getElementById("result");
+    const submitButton = document.getElementById("submitButton");
+    const nextButton = document.getElementById("nextButton");
+
+    function loadQuestion() {
+      // Clear previous result and input
+      resultEl.textContent = "";
+      guessInput.value = "";
+      // Hide next button until answer is submitted
+      nextButton.style.display = "none";
+
+      if (currentQuestionIndex < questions.length) {
+        const q = questions[currentQuestionIndex];
+        let html = `<h2>Question ${currentQuestionIndex + 1}</h2>`;
+        html += `<div class="clues">`;
+        q.clues.forEach((clue, index) => {
+          html += `<p><strong>Clue ${index + 1}:</strong> ${clue}</p>`;
+        });
+        html += `</div>`;
+        questionArea.innerHTML = html;
+      } else {
+        questionArea.innerHTML = "<h2>Quiz Completed!</h2><p>Great job playing!</p>";
+        submitButton.style.display = "none";
+        guessInput.style.display = "none";
+        nextButton.style.display = "none";
+      }
+    }
+
+    function checkAnswer() {
+      const userGuess = guessInput.value.trim();
+      const currentQuestion = questions[currentQuestionIndex];
+      const correctAnswer = currentQuestion.answer;
+      
+      if (userGuess === "") {
+        resultEl.textContent = "Please enter a guess!";
+        return;
+      }
+
+      // Disable the submit button to prevent multiple submissions
+      submitButton.disabled = true;
+
+      if (userGuess.toLowerCase() === correctAnswer.toLowerCase()) {
+        resultEl.innerHTML = `<span style="color: green;">🎉 Correct! ${correctAnswer} is right!</span><br>
+                              <img src="${currentQuestion.img}" alt="${correctAnswer} image">`;
+      } else {
+        resultEl.textContent = "";
+        alert("❌ Oops, that's not it. The correct answer is: " + correctAnswer + "!");
+      }
+
+      // Enable next button and re-enable submit for future questions
+      nextButton.style.display = "inline-block";
+      submitButton.disabled = false;
+    }
+
+    // Event listeners
+    submitButton.addEventListener("click", checkAnswer);
+    nextButton.addEventListener("click", function() {
+      currentQuestionIndex++;
+      loadQuestion();
+    });
+
+    // Start the quiz
+    loadQuestion();
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..039f7b8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cylindrical Progress Bar</title>
+    <style>
+        /* Progress bar container */
+        .progress-container {
+            position: relative;
+            width: 80%;
+            height: 30px;
+            background: #ddd;
+            border-radius: 15px;
+            margin: 50px auto;
+            overflow: hidden;
+        }
+
+        /* Progress fill */
+        .progress-bar {
+            width: 60%; /* Adjust this to control progress */
+            height: 100%;
+            background: linear-gradient(90deg, #ff7b00, #ffcc00);
+            border-radius: 15px;
+            transition: width 0.5s ease-in-out;
+        }
+
+        /* Stop points */
+        .stop {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: white;
+            border: 3px solid #ff7b00;
+            border-radius: 50%;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        /* Positioning the stops */
+        .stop:nth-child(1) { left: 0%; }
+        .stop:nth-child(2) { left: 33%; }
+        .stop:nth-child(3) { left: 66%; }
+        .stop:nth-child(4) { left: 100%; }
+
+    </style>
+</head>
+<body>
+
+    <div class="progress-container">
+        <div class="progress-bar"></div>
+        <div class="stop"></div>
+        <div class="stop"></div>
+        <div class="stop"></div>
+        <div class="stop"></div>
+    </div>
+
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5c74f63
--- /dev/null
+++ b/script.js
@@ -0,0 +1,14 @@
+let currentStep = 0;
+
+function nextStep() {
+  const steps = document.querySelectorAll(".step");
+  const progressBar = document.querySelector(".progress-bar");
+
+  if (currentStep < steps.length) {
+    // Mark the current step as completed
+    steps[currentStep].classList.add("completed");
+    // Update progress bar width based on number of steps completed
+    progressBar.style.width = ((currentStep + 1) / steps.length) * 100 + "%";
+    currentStep++;
+  }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f91eccd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,74 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f8ebe4;
+    margin: 0;
+    padding: 20px;
+  }
+  
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  
+  h2 {
+    color: #6f4e37;
+  }
+  
+  /* Pink Progress Bar */
+  .progress-container {
+    position: relative;
+    width: 100%;
+    height: 15px;
+    background-color: #ffd1dc; /* light pink background */
+    border-radius: 10px;
+    margin-bottom: 40px;
+    overflow: hidden;
+  }
+  
+  .progress-bar {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background-color: #ff69b4; /* bright pink */
+    border-radius: 10px;
+    transition: width 0.5s ease-in-out;
+  }
+  
+  /* Step markers below the bar */
+  .steps {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  
+  .step {
+    width: 22%;
+    padding: 10px;
+    background-color: #ffd1dc;
+    color: #6f4e37;
+    border-radius: 10px;
+    font-weight: bold;
+    transition: background-color 0.3s, color 0.3s;
+  }
+  
+  .step.completed {
+    background-color: #ff69b4;
+    color: white;
+  }
+  
+  /* Button styling */
+  button {
+    background-color: #ff69b4;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #e05a9c;
+  }
+  
\ No newline at end of file
