diff --git a/README.md b/README.md
index 955af7c..5997c66 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ Your website should be responsive and work on screens of different sizes.
- Image should have a height of 100px.
- Header should have a margin of 20 pixels on the bottom.
- Header background color should be `green`.
-- **Main Area**
+- **Main Area**'
- Main area should contain all other content on the page.
- Width: 70 percent.
- Content should be oriented in a row
diff --git a/index.html b/index.html
index 248ffe9..1090ef9 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,50 @@
+
+
+ "Szechuan Sauce"
+
+ Rick & Morty
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/rickMorty.css b/rickMorty.css
new file mode 100644
index 0000000..ab29d5d
--- /dev/null
+++ b/rickMorty.css
@@ -0,0 +1,111 @@
+body{
+ background-color: black;
+ color: white;
+ text-align: center;
+}
+
+header{
+ background-color: green;
+ display: flex;
+ justify-content: space-around;
+ width: 70%;
+ margin: auto;
+ margin-bottom: 20px;
+ align-items: center;
+ height: 200px;
+ font-family: fantasy;
+}
+h1{
+ font-size: 70px;
+ /* padding-left: 5%; */
+}
+header>img{
+width: 130px;
+height: 130px;
+}
+#all-characters{
+ list-style: none;
+ display: flex;
+ width: 70%;
+ margin: auto;
+ padding-inline-start: 0px;
+ justify-content: space-between;
+ overflow-x: scroll;
+ /* margin-left: 15%; */
+ /* height: 160px; */
+ /* padding: 3px; */
+}
+/* #character-comments-ul{
+ font-size: 40px;
+
+
+} */
+figcaption{
+ background-color: black;
+ text-align: center;
+ color:white;
+ font-size: 28px;
+ margin-top: 14px;
+}
+
+main{
+visibility: hidden;
+background-color: black;
+display: flex;
+width: 70%;
+margin-left: 15%;
+justify-content: space-around;
+color:white;
+border: solid white 4px;
+}
+
+label{
+ font-size: 33px;
+
+}
+
+h3{
+ font-weight: bold;
+ font-size: 38px;
+}
+#liComment{
+ font-weight: bold;
+ font-size: 38px;
+}
+
+form{
+ margin-top: 10%;
+ text-align: center;
+ color:white;
+}
+#status,#location-name{
+ font-size: 24px;
+}
+#subButton{
+
+ height: 30px;
+ font-size: 18px;
+ width:70% ;
+}
+
+#character-comments-section{
+ width: 40%;
+}
+#input{
+ width:90%;
+ height: 30px;
+ margin-top: 8px;
+ font-size: 28px;
+}
+
+#character-comments-ul{
+
+ font-size: 25px;
+font-family: sans-serif;
+}
+
+
+
+.li-class-comments{
+ text-align: left;
+}
\ No newline at end of file
diff --git a/rickMorty.js b/rickMorty.js
new file mode 100644
index 0000000..53b752a
--- /dev/null
+++ b/rickMorty.js
@@ -0,0 +1,98 @@
+let form = document.getElementById('form')
+let allComments = document.getElementById("character-comments-ul")
+let userInput = document.getElementById('input')
+let title = document.querySelector('title')
+let h3 = document.querySelector('h3')
+let h2 = document.createElement('h2')
+
+form.addEventListener('submit',(event)=>{
+ event.preventDefault()
+ let liComment = document.createElement('li')
+liComment.classList.add("li-class-comments");
+liComment.innerHTML = `${title.textContent}: ${event.target.input.value}`;
+allComments.appendChild(liComment)
+ userInput.value =""
+})
+
+
+const showMain = (el)=>{
+ let main = document.querySelector('main')
+ main.style.visibility = "visible"
+ let showImage = document.getElementById('show-image')
+ showImage.src = el.image
+ showImage.setAttribute("height", "300");
+ let h3 = document.querySelector('h3')
+ let status = document.querySelector('#status')
+ let location = document.querySelector('#location-name')
+ let title = document.querySelector('title')
+ let label = document.querySelector('label')
+ label.textContent.innerHTML = ""
+ h3.textContent = el.name
+ status.textContent = `status: ${el.status}`
+ location.textContent = `location: ${el.location.name}`
+ title.textContent = el.name
+ label.textContent = `What would this character say about Jerry?`
+}
+
+
+
+let ulChars = document.getElementById('all-characters')
+const getRickAndMorty = async (event) => {
+ try {
+ let res = await axios.get("https://rickandmortyapi.com/api/character/");
+ twentyChars = res.data.results
+ twentyChars.forEach(el => {
+ let liChar = document.createElement('li')
+ liChar.id = "photo-img"
+ let eachChar = document.createElement('img')
+ eachChar.setAttribute("width", "200");
+ eachChar.setAttribute("height", "200");
+ let textChar = document.createElement('figcaption')
+ textChar.textContent = el.name
+ eachChar.src = el.image
+ liChar.appendChild(eachChar)
+ liChar.appendChild(textChar)
+ ulChars.appendChild(liChar)
+ liChar.addEventListener('click',(event)=>{
+showMain(el)
+ })
+ });
+ } catch (err) {
+ console.log(err);
+ }
+};
+
+
+
+
+
+document.addEventListener('DOMContentLoaded',(event)=>{
+ getRickAndMorty()
+})
+
+
+
+
+
+
+//
\ No newline at end of file
+