diff --git a/README.md b/README.md
index a9a4cc6..aa75ead 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,86 @@
-# 📊 Project: Simple API 1
-
-### Goal: Display data returned from an api
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
- - (1 to 5 no 3) I completed the challenge
- - (1 to 5 no 3) I feel good about my code
- - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# 🦸♂️ Marvel Origins Finder
+
+This little project lets you search for any Marvel character and instantly see their story and picture. It connects straight to the **Marvel Developer API** and pulls the info right into the browser — no backend needed.
+
+I built it as a fun way to practice working with APIs, JavaScript, and some responsive design.
+
+---
+
+## 💡 What It Does
+
+Type a character’s name — like “Spider-Man,” “Deadpool,” or “Black Widow” — hit **Search**, and boom: you’ll get their official Marvel bio and image pulled live from the API.
+
+It’s fast, clean, and designed to work on both desktop and mobile screens.
+
+---
+
+## 🧰 Built With
+
+* **HTML** – simple layout and structure
+* **CSS** – made it responsive and gave it some style (yes, Deadpool is the background 😎)
+* **JavaScript** – handles API calls, error checks, and DOM updates
+* **CryptoJS** – used to generate the MD5 hash Marvel requires for authentication
+
+---
+
+## 🚀 How It Works
+
+1. You enter a name.
+2. The app builds a Marvel API request using your keys, timestamp, and hash.
+3. The data comes back as JSON — the app grabs the description and image.
+4. The content updates on the page instantly.
+
+It’s a simple flow, but a great example of how to work with an authenticated external API in JavaScript.
+
+---
+
+## ⚙️ How To Run
+
+1. Clone or download this repo
+
+ ```bash
+ git clone https://github.com/yourusername/marvel-origins.git
+ cd marvel-origins
+ ```
+2. Open the `index.html` file in your browser
+3. Type in a character name and click **Search**
+
+*(You’ll need valid Marvel API keys — replace the ones in `main.js` with your own.)*
+
+---
+
+## 📚 What I Learned
+
+This project helped me really understand:
+
+* How to authenticate API requests using hashes and timestamps
+* How to fetch and handle API data with `fetch()`
+* How to manipulate the DOM dynamically without a framework
+* How to build a clean responsive UI using just CSS
+
+It’s simple, but it taught me a lot about putting the pieces together from start to finish.
+
+---
+
+## 🖼️ Visual
+
+The background image is Deadpool (because why not?), and the layout automatically adjusts to fit your screen.
+
+If you type “Deadpool,” he basically stares back at you. Creepy. But funny.
+
+---
+
+## 🔮 Future Ideas
+
+* Add a random character button
+* Show a list of matching characters instead of one
+* Display extra info like comics or movies they’ve appeared in
+* Add a loading animation while waiting for results
+
+---
+
+## ✍️ Created By
+
+**Abdirahman Mohamed**
+Just a developer building cool stuff, one project at a time.
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..d27d2cc
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,157 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ gap: 1em;
+ align-items: center;
+
+ height: 100vh;
+ width: 100vw;
+ margin: 0;
+
+ background-image: url('../img/deadpool.jpeg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ background-attachment: fixed;
+ color: white;
+ background-color: black;
+}
+
+input {
+ width: 350px;
+ height: 40px;
+ font-size: 2rem;
+ border-radius: 15px;
+}
+
+div {
+ text-align: center;
+ width: 100%;
+ margin: 0%;
+}
+
+.info img {
+ width: 50%;
+}
+
+h1 {
+ font-size: 5rem;
+ margin: 0% 2%;
+}
+
+.info {
+ display: flex;
+ font-size: 2rem;
+ height: 800px;
+}
+
+h3 {
+ margin-top: 0%;
+ height: 100%;
+ text-align: left;
+ padding-left: 3%;
+ padding-top: 5%;
+ width: 50%;
+}
+
+button {
+ width: 130px;
+ height: 40px;
+ font-size: 2rem;
+ border-radius: 15px;
+}
+
+@media (max-width: 1224px) {
+ body {
+ background-size: 120%;
+ }
+
+ h1 {
+ font-size: 4rem;
+ }
+
+ .info {
+ flex-direction: column;
+ height: auto;
+ }
+
+ .info img,
+ h3 {
+ width: 45%;
+ height: 400px;
+ margin: 0%;
+ padding: 0%;
+ }
+ h3{
+ width: 50%;
+ padding-left: 2%;
+ }
+ .info{
+ height: 400px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+}
+
+
+@media (max-width: 798px) {
+ body {
+ background-size: 120%;
+ background-attachment: scroll;
+ }
+
+ h1 {
+ font-size: 5rem;
+ }
+
+ h3 {
+ width: 90%;
+ padding: 2%;
+ font-size: 1.7rem;
+ }
+
+ input {
+ width: 50%;
+ font-size: 1.6rem;
+ }
+
+ button {
+ width: 100px;
+ font-size: 1.6rem;
+ }
+}
+
+@media (max-width: 480px) {
+
+ h1 {
+ font-size: 2.5rem;
+ margin: 1rem 0;
+ }
+
+ h3 {
+ font-size: 1.4rem;
+ width: 95%;
+ padding: 1rem;
+ }
+
+ input {
+ width: 50%;
+ height: 35px;
+ font-size: 1.4rem;
+ }
+
+ button {
+ width: 90px;
+ height: 35px;
+ font-size: 1.3rem;
+ }
+
+ .info img {
+ width: 90%;
+ }
+}
\ No newline at end of file
diff --git a/img/deadpool.jpeg b/img/deadpool.jpeg
new file mode 100644
index 0000000..e24ac92
Binary files /dev/null and b/img/deadpool.jpeg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..100b6bb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+ Marvel History
+
+
+
+