diff --git a/MatchingPair/Contact-us.html b/MatchingPair/Contact-us.html new file mode 100644 index 00000000..42ed9645 --- /dev/null +++ b/MatchingPair/Contact-us.html @@ -0,0 +1,42 @@ + + + + + + Contact-Me + + + + +
+

Contact-Us

+ +
+
+ + + + + + + + +
+ +
+ +
+

+
+ + + diff --git a/MatchingPair/Contact.css b/MatchingPair/Contact.css new file mode 100644 index 00000000..e46c7173 --- /dev/null +++ b/MatchingPair/Contact.css @@ -0,0 +1,163 @@ +body { + font-family: 'Arial', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248) + ); + background-size: 400% 400%; + animation: gradientAnimation 5s ease infinite; + color: #fff; + cursor: pointer; + } + #custom-cursor{ + + width: 20px; + height: 20px; + border: 2px solid #e8dce4; + border-radius: 50%; + position: absolute; + pointer-events: none; + transition: transform 0.1s ease-out, background-color 0.2s ease; + z-index: 10000; + animation: cursorAnimation 0.3s infinite alternate; +} +@keyframes cursorAnimation { + 0% { transform: scale(1); background-color: black,; } + 100% { transform: scale(1.5); background-color: white; } +} + +@keyframes gradientAnimation { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} +@keyframes backgroundAnimation { + 0% { background-color: #f44336; } + 20% { background-color: #e91e63; } + 40% { background-color: #9c27b0; } + 60% { background-color: #673ab7; } + 80% { background-color: #3f51b5; } + 100% { background-color: #2196f3; } +} +@keyframes cursorAnimation { + 0% { transform: scale(1); background-color: black,; } + 100% { transform: scale(1.5); background-color: white; } + } + h1 { + margin-top: 20px; + text-align: center; + text-transform: uppercase; + letter-spacing: 2px; + animation: titleAnimation 1s ease-out infinite alternate; + } +.submit{ + text-align: center; + margin-left:100px; + margin-top: 14px; +} +/* Navbar styles */ +.navbar { + width: 100%; + background-color: #09000d; + padding: 1px ; + position: fixed; + top: 0; + z-index: 1000; + } + + .navbar-container { + width: 90%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + } + + .navbar-brand { + color: #fff; + text-decoration: none; + font-size: 24px; + font-weight: bold; + } + + .navbar-menu { + list-style: none; + display: flex; + gap: 15px; + } + + .navbar-menu li { + display: inline; + } + + .navbar-menu a { + color: #fff; + text-decoration: none; + font-size: 18px; + } + + .navbar-menu a:hover { + text-decoration: underline; + } + + +.contact-container { + background: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + max-width: 500px; + width: 100%; +} + +h1 { + margin-bottom: 20px; + color: #673ab7; +} + +label { + display: block; + margin-top: 10px; +} + +input, textarea { + width: 100%; + padding: 10px; + margin-top: 5px; + margin-bottom: 10px; + border: 1px solid #ddd; + border-radius: 5px; +} +.form-group{ + display:flex; + + margin-left: 90px; +} + +button { + background-color: #007BFF; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + margin-top: 20px; + + + +} + +button:hover { + background-color: #0056b3; +} + +#formMessage { + margin-top: 20px; + color: red; + text-align: center; +} diff --git a/MatchingPair/README.md b/MatchingPair/README.md new file mode 100644 index 00000000..13282e3b --- /dev/null +++ b/MatchingPair/README.md @@ -0,0 +1,89 @@ +# Matching Pairs Game +## Description + +The Matching Pairs Game is a fun and engaging memory game developed using HTML, CSS, and JavaScript. The game challenges players to match pairs of cards with identical images within a limited time. It offers a simple yet addictive gameplay experience, a countdown timer, and a helpful chatbot for hints. + +## Features + +- **Interactive Gameplay:** Flip cards to reveal their images and try to find matching pairs. +- **Scoring System:** Earn points for each successful match. +- **Countdown Timer:** Complete the game within the allotted time to win.(FutureScope) +- **Responsive Design:** The game is optimized for both desktop and mobile devices. +- **Dark Theme:** The game features a modern dark theme for a comfortable playing experience. + +### Objective + +Match all pairs of cards . + +### How to Play + +1. **Starting the Game:** + - All cards are placed face down on the game board. + - The score and timer are displayed at the top of the game area. + +2. **Flipping Cards:** + - Click on any card to flip it over and reveal the image on the front. + - Click on a second card to flip it over as well. + +3. **Matching Pairs:** + - If the images on the two flipped cards match, they will remain face up. + - If the images do not match, both cards will flip back face down after a short delay. + + +5. **Timer:** + - The timer is displayed at the top of the game area. + . + + + +7. **Winning and Losing:** + - The game is won when all pairs of cards have been matched before the timer runs out. + + +8. **Restarting the Game:** + - Refresh the page to start a new game. + +### Tips + +- Remember the positions of the cards you have already flipped. +- Use hints strategically to maximize your chances of finding pairs quickly. + +## ScreeShots +![Matching_Pair_Game](https://github.com/user-attachments/assets/0fc1bf7f-81b4-4124-97a2-9fa135479b66) +## workingVideo: + + +https://github.com/user-attachments/assets/cc6e7ac3-4057-47ad-b859-2aae2d4e31b9 + + + +## Technologies Used + +- **HTML:** Structure of the game. +- **CSS:** Styling and layout. +- **JavaScript:** Game logic and interactivity. + +## Getting Started + +1. Clone the repository: + ```bash + git clone https://github.com/yourusername/matching-pairs-game.git + ``` +2. Navigate to the project directory: + ```bash + cd matching-pairs-game + ``` +3. Open `index.html` in your web browser to play the game. + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. + +## Acknowledgments + +- Icons by [Favicon](https://favicon.io/) + + +--- + +Replace `"https://github.com/yourusername/matching-pairs-game.git"` with the actual URL of your GitHub repository. This README file provides a detailed description of the game, instructions for playing, and information about the technologies used, making it easy for others to understand and contribute to your project. diff --git a/MatchingPair/about.css b/MatchingPair/about.css new file mode 100644 index 00000000..d93f82c9 --- /dev/null +++ b/MatchingPair/about.css @@ -0,0 +1,97 @@ +body { + font-family: 'Arial', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248) + ); + background-size: 400% 400%; + animation: gradientAnimation 5s ease infinite; + color: #fff; + cursor: pointer; + } + #custom-cursor{ + + width: 20px; + height: 20px; + border: 2px solid #e8dce4; + border-radius: 50%; + position: absolute; + pointer-events: none; + transition: transform 0.1s ease-out, background-color 0.2s ease; + z-index: 10000; + animation: cursorAnimation 0.3s infinite alternate; +} +@keyframes cursorAnimation { + 0% { transform: scale(1); background-color: black,; } + 100% { transform: scale(1.5); background-color: white; } +} + +@keyframes gradientAnimation { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} +@keyframes backgroundAnimation { + 0% { background-color: #f44336; } + 20% { background-color: #e91e63; } + 40% { background-color: #9c27b0; } + 60% { background-color: #673ab7; } + 80% { background-color: #3f51b5; } + 100% { background-color: #2196f3; } +} +@keyframes cursorAnimation { + 0% { transform: scale(1); background-color: black,; } + 100% { transform: scale(1.5); background-color: white; } + } + h1 { + margin-top: 20px; + text-align: center; + text-transform: uppercase; + letter-spacing: 2px; + animation: titleAnimation 1s ease-out infinite alternate; + } + +.content-container { + margin-top: 300px; /* Adjust based on the height of the navbar */ + padding: 20px; + max-width: 800px; + margin-left: auto; + margin-right: auto; + background-color: #1e1e1e; + color: #ffffff; + border-radius: 10px; +} + +header h1 { + font-size: 32px; + margin-bottom: 20px; + margin-top: 20px; + padding-top: 500px; + +} +h1{ + animation: gradientAnimations 0.3 ease infinite; +} +.instructions h2 { + font-size: 24px; + margin-top: 20px; + margin-bottom: 10px; + margin-left: 10px; +} + +.instructions p, .instructions li { + font-size: 18px; + margin-bottom: 10px; + +} +p{ + margin-top: 15px; +} + +.instructions ul, .instructions ol { + margin-left: 20px; +} diff --git a/MatchingPair/about.html b/MatchingPair/about.html new file mode 100644 index 00000000..6fd00c8a --- /dev/null +++ b/MatchingPair/about.html @@ -0,0 +1,58 @@ + + + + + + Matching Pairs Game - Instructions + + + + +
+ +

How to Play the Matching Pairs Game

+
+
+

Objective

+

The goal of the game is to match all pairs of cards within the allotted time.

+

How to Play

+
    +
  1. Starting the Game: +

    When the game starts, all the cards will be placed face down on the game board. You will see the score and timer at the top of the game area.

    +
    2. +
  2. Flipping Cards: +

    Click on any card to flip it over and reveal the image on the front. Click on a second card to flip it over as well.

    +
    3. +
  3. Matching Pairs: +

    If the images on the two flipped cards match, they will remain face up, indicating a successful match. If the images do not match, both cards will be flipped back face down after a short delay.

    +
    4. +
  4. Scoring: +

    Each successful match will add 10 points to your score. The score is displayed at the top of the game area.

    +
    5. +
  5. Timer: +

    You have a limited amount of time (60 seconds) to match all the pairs. The timer is displayed at the top of the game area. The game ends when the timer runs out or when all pairs have been matched.

    +
    6. +
  6. Hints: +

    You can ask the chatbot for hints if you are having trouble finding pairs. To ask for a hint, type "hint" in the chat input box and press the send button. The chatbot will suggest which cards to flip.

    +
    7. +
  7. Winning the Game: +

    The game is won when all pairs of cards have been matched before the timer runs out. A message will appear congratulating you on your win.

    +
    8. +
  8. Losing the Game: +

    If the timer runs out before you have matched all the pairs, the game is over, and a message will appear informing you that the time is up.

    +
    9. +
  9. Restarting the Game: +

    Refresh the page to start a new game.

    +
    10. +
+

Tips

+ +
+ + + + + diff --git a/MatchingPair/contact.js b/MatchingPair/contact.js new file mode 100644 index 00000000..1c639700 --- /dev/null +++ b/MatchingPair/contact.js @@ -0,0 +1,26 @@ +document.getElementById('contactForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const message = document.getElementById('message').value; + const formMessage = document.getElementById('formMessage'); + + if (name === '' || email === '' || message === '') { + formMessage.textContent = 'Please fill in all fields.'; + return; + } + + if (!validateEmail(email)) { + formMessage.textContent = 'Please enter a valid email address.'; + return; + } + + formMessage.textContent = 'Thank you for contacting us, ' + name + '! We will get back to you soon.'; + formMessage.style.color = 'green'; +}); + +function validateEmail(email) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); +} diff --git a/MatchingPair/favicon_io (2)/android-chrome-192x192.png b/MatchingPair/favicon_io (2)/android-chrome-192x192.png new file mode 100644 index 00000000..f45d5889 Binary files /dev/null and b/MatchingPair/favicon_io (2)/android-chrome-192x192.png differ diff --git a/MatchingPair/favicon_io (2)/android-chrome-512x512.png b/MatchingPair/favicon_io (2)/android-chrome-512x512.png new file mode 100644 index 00000000..7a67fed5 Binary files /dev/null and b/MatchingPair/favicon_io (2)/android-chrome-512x512.png differ diff --git a/MatchingPair/favicon_io (2)/apple-touch-icon.png b/MatchingPair/favicon_io (2)/apple-touch-icon.png new file mode 100644 index 00000000..8226a400 Binary files /dev/null and b/MatchingPair/favicon_io (2)/apple-touch-icon.png differ diff --git a/MatchingPair/favicon_io (2)/favicon-16x16.png b/MatchingPair/favicon_io (2)/favicon-16x16.png new file mode 100644 index 00000000..2cfa1830 Binary files /dev/null and b/MatchingPair/favicon_io (2)/favicon-16x16.png differ diff --git a/MatchingPair/favicon_io (2)/favicon-32x32.png b/MatchingPair/favicon_io (2)/favicon-32x32.png new file mode 100644 index 00000000..bff7c971 Binary files /dev/null and b/MatchingPair/favicon_io (2)/favicon-32x32.png differ diff --git a/MatchingPair/favicon_io (2)/favicon.ico b/MatchingPair/favicon_io (2)/favicon.ico new file mode 100644 index 00000000..cde73a67 Binary files /dev/null and b/MatchingPair/favicon_io (2)/favicon.ico differ diff --git a/MatchingPair/favicon_io (2)/site.webmanifest b/MatchingPair/favicon_io (2)/site.webmanifest new file mode 100644 index 00000000..45dc8a20 --- /dev/null +++ b/MatchingPair/favicon_io (2)/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/MatchingPair/index.html b/MatchingPair/index.html new file mode 100644 index 00000000..8b3c06bf --- /dev/null +++ b/MatchingPair/index.html @@ -0,0 +1,43 @@ + + + + + + Matching Pairs Game + + + + + + + + + +
+

Matching Pairs Game

+
+
+

Moves: 0

+

Time: 0 seconds

+ +
+
+
+
Hello! Need any help?
+
+ + +
+ + + + diff --git a/MatchingPair/script.js b/MatchingPair/script.js new file mode 100644 index 00000000..78bbb37c --- /dev/null +++ b/MatchingPair/script.js @@ -0,0 +1,148 @@ +document.addEventListener('mousemove', function(e) { + const customCursor = document.getElementById('custom-cursor'); + customCursor.style.left = e.pageX + 'px'; + customCursor.style.top = e.pageY + 'px'; +}) +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +document.addEventListener("DOMContentLoaded", () => { + const gameContainer = document.getElementById("game-container"); + let cards = generateCards(); + let flippedCard = null; + let lockBoard = false; + let moves = 0; + let matchedPairs = 0; + let timerInterval; + let seconds = 0; + + function generateCards() { + const symbols = ["😀", "😎", "🥳", "🎉", "🚀", "🌟", "🎈", "🎁"]; + let cards = [...symbols, ...symbols]; + cards.sort(() => Math.random() - 0.5); + return cards; + } + + + function createCard(symbol, index) { + const card = document.createElement("div"); + card.classList.add("card"); + card.dataset.symbol = symbol; + card.addEventListener("click", flipCard); + gameContainer.appendChild(card); + } + + function flipCard() { + if (lockBoard) return; + if (this === flippedCard) return; + this.textContent = this.dataset.symbol; + this.classList.add("flipped"); + + if (!flippedCard) { + flippedCard = this; + } else { + moves++; + document.getElementById("moves").textContent = `Moves: ${moves}`; + if (flippedCard.dataset.symbol !== this.dataset.symbol) { + lockBoard = true; + setTimeout(() => { + flippedCard.classList.remove("flipped"); + this.classList.remove("flipped"); + flippedCard.textContent = ""; + this.textContent = ""; + flippedCard = null; + lockBoard = false; + }, 1000); + } else { + flippedCard = null; + matchedPairs++; + if (matchedPairs === cards.length / 2) { + clearInterval(timerInterval); + setTimeout(() => { + alert(`Congratulations! You completed the game in ${seconds} seconds with ${moves} moves.`); + }, 500); + } + } + } + } + + function initializeGame() { + gameContainer.innerHTML = ""; + cards.forEach((symbol, index) => { + createCard(symbol, index); + }); + moves = 0; + matchedPairs = 0; + seconds = 0; + document.getElementById("moves").textContent = `Moves: ${moves}`; + startTimer(); + } + + function startTimer() { + timerInterval = setInterval(() => { + seconds++; + document.getElementById("timer").textContent = `Time: ${seconds} seconds`; + }, 1000); + } + + initializeGame(); +}); + +///added chat box functionality +const chatBox = document.getElementById('chat-box'); +const chatInput = document.getElementById('chat-input'); +const sendBtn = document.getElementById('send-btn'); +sendBtn.addEventListener('click', sendMessage); +function sendMessage() { + const message = chatInput.value.trim(); + if (!message) return; + + displayMessage(message, 'user'); + chatInput.value = ''; + respondToMessage(message); +} + +function displayMessage(message, sender) { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message', sender); + messageElement.textContent = message; + chatBox.appendChild(messageElement); + chatBox.scrollTop = chatBox.scrollHeight; +} + + +function respondToMessage(message) { + let response; + if (message.toLowerCase().includes('hint')) { + response = getHint(); + } else { + response = "I'm here to help! Ask me for a hint or any other question."; + } + setTimeout(() => displayMessage(response, 'bot'), 1000); +} + +function getHint() { + // Check for pairs of cards that are not yet matched + for (let i = 0; i < cards.length; i++) { + for (let j = i + 1; j < cards.length; j++) { + if (!cards[i].classList.contains('flipped') && !cards[j].classList.contains('flipped')) { + if (cards[i].querySelector('.card-front').style.backgroundImage === cards[j].querySelector('.card-front').style.backgroundImage) { + return `Try flipping the cards at positions ${i + 1} and ${j + 1}.`; + } + } + } + } + // If no pairs found, suggest flipping a random unflipped card + for (let i = 0; i < cards.length; i++) { + if (!cards[i].classList.contains('flipped')) { + return `Try flipping the card at position ${i + 1}.`; + } + } + return "No hints available at the moment.";} diff --git a/MatchingPair/styles.css b/MatchingPair/styles.css new file mode 100644 index 00000000..53eabb2f --- /dev/null +++ b/MatchingPair/styles.css @@ -0,0 +1,251 @@ +body { + font-family: 'Arial', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + background: linear-gradient(45deg, #0d0812, #0a1a37,rgb(43, 5, 94),rgb(79, 3, 79),rgb(4, 4, 134),rgb(86, 86, 248) + ); + background-size: 400% 400%; + animation: gradientAnimation 5s ease infinite; + color: #fff; + cursor: none; +} +/* Navbar styles */ +.navbar { + width: 100%; + background-color: #29242b; + padding: 1px ; + position: fixed; + top: 0; + z-index: 1000; +} + +.navbar-container { + width: 90%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar-brand { + color: #fff; + text-decoration: none; + font-size: 24px; + font-weight: bold; +} + +.navbar-menu { + list-style: none; + display: flex; + gap: 15px; +} + +.navbar-menu li { + display: inline; +} + +.navbar-menu a { + color: #fff; + text-decoration: none; + font-size: 18px; +} + +.navbar-menu a:hover { + text-decoration: underline; +} + +/* Adjust the game container to accommodate the navbar */ +.game-container { + margin-top: 60px; /* Adjust based on the height of the navbar */ + text-align: center; +} + +#custom-cursor{ + + width: 20px; + height: 20px; + border: 2px solid #e8dce4; + border-radius: 50%; + position: absolute; + pointer-events: none; + transition: transform 0.1s ease-out, background-color 0.2s ease; + z-index: 10000; + animation: cursorAnimation 0.3s infinite alternate; +} +@keyframes cursorAnimation { + 0% { transform: scale(1); background-color: black,; } + 100% { transform: scale(1.5); background-color: white; } +} + +@keyframes gradientAnimation { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} +@keyframes backgroundAnimation { + 0% { background-color: #f44336; } + 20% { background-color: #e91e63; } + 40% { background-color: #9c27b0; } + 60% { background-color: #673ab7; } + 80% { background-color: #3f51b5; } + 100% { background-color: #2196f3; } +} + +h1 { + margin-top: 20px; + text-align: center; + text-transform: uppercase; + letter-spacing: 2px; + animation: titleAnimation 1s ease-out infinite alternate; +} + +@keyframes titleAnimation { + 0% { color: #fff; transform: scale(1); } + 100% { color: #f3f3f3; transform: scale(1.1); } +} + +#game-container { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-template-rows: repeat(4, 100px); + gap: 10px; + margin-top: 20px; + perspective: 1000px; + animation: fadeIn 2s ease-out; +} + +@keyframes fadeIn { + 0% { opacity: 0; transform: translateY(20px); } + 100% { opacity: 1; transform: translateY(0); } +} + +@keyframes backgroundAnimation { + 0% { background-color: #f44336; } + 20% { background-color: #e91e63; } + 40% { background-color: #9c27b0; } + 60% { background-color: #673ab7; } + 80% { background-color: #3f51b5; } + 100% { background-color: #2196f3; } +} + +.card { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + cursor: pointer; + transform-style: preserve-3d; + transition: transform 0.5s ease, box-shadow 0.3s ease, transform 0.3s ease; + animation: backgroundAnimation 5s infinite alternate, cardEntry 0.5s ease; +} + +@keyframes cardEntry { + 0% { opacity: 0; transform: scale(0.5); } + 100% { opacity: 1; transform: scale(1); } +} + +.card:hover { + transform: scale(1.1) rotateZ(5deg); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +.card.flipped { + transform: rotateY(180deg); + background-color: #fff; /* Fixed color for flipped cards */ + color: #000; +} + +#game-info { + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; +} + +#game-info p { + margin-right: 20px; + animation: fadeIn 1.5s ease-out; +} + +button { + padding: 10px 20px; + background-color: #4caf50; + color: #fff; + border: none; + cursor: pointer; + font-size: 16px; + text-transform: uppercase; + letter-spacing: 1px; + transition: background-color 0.3s ease, transform 0.3s ease; + animation: buttonBounce 2s infinite; +} + +button:hover { + background-color: #45a049; + transform: scale(1.1); +} + +@keyframes buttonBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} +.chat-container { + position: fixed; + bottom: 0; + right: 20px; + width: 300px; + background-color: #2c2c2c; + border: 1px solid #444; + border-radius: 10px; + overflow: hidden; +} + +.chat-box { + height: 200px; + overflow-y: auto; + padding: 10px; + color: #fff; +} + +.chat-message { + margin-bottom: 10px; + padding: 5px 10px; + border-radius: 5px; +} + +.chat-message.bot { + background-color: #444; + text-align: left; +} + +.chat-message.user { + background-color: #0084ff; + text-align: right; +} + +#chat-input { + width: 80%; + padding: 10px; + border: none; + border-radius: 0 0 0 10px; + background-color: #333; + color: #fff; +} + +#send-btn { + width: 10%; + padding: 5px; + border: none; + border-radius: 0 0 10px 0; + background-color: #444; + color: #fff; + cursor: pointer; + display: inline-block; +}