diff --git a/Studio Ghibli/index.html b/Studio Ghibli/index.html
new file mode 100644
index 0000000..9688895
--- /dev/null
+++ b/Studio Ghibli/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Ghibli App
+
+
+
+
+
+
+
+
+
+
diff --git a/Studio Ghibli/scripts.js b/Studio Ghibli/scripts.js
new file mode 100644
index 0000000..663f397
--- /dev/null
+++ b/Studio Ghibli/scripts.js
@@ -0,0 +1,40 @@
+const app = document.getElementById('root')
+
+const logo = document.createElement('img')
+logo.src = 'https://p.kindpng.com/picc/s/57-578400_official-studio-ghibli-logo-hd-png-download.png'
+
+const container = document.createElement('div')
+container.setAttribute('class', 'container')
+
+app.appendChild(logo)
+app.appendChild(container)
+
+var request = new XMLHttpRequest()
+request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
+request.onload = function () {
+ // Begin accessing JSON data here
+ var data = JSON.parse(this.response)
+ if (request.status >= 200 && request.status < 400) {
+ data.forEach((movie) => {
+ const card = document.createElement('div')
+ card.setAttribute('class', 'card')
+
+ const h1 = document.createElement('h1')
+ h1.textContent = movie.title
+
+ const p = document.createElement('p')
+ movie.description = movie.description.substring(0, 300)
+ p.textContent = `${movie.description}...`
+
+ container.appendChild(card)
+ card.appendChild(h1)
+ card.appendChild(p)
+ })
+ } else {
+ const errorMessage = document.createElement('marquee')
+ errorMessage.textContent = `Gah, it's not working!`
+ app.appendChild(errorMessage)
+ }
+}
+
+request.send()
diff --git a/Studio Ghibli/style.css b/Studio Ghibli/style.css
new file mode 100644
index 0000000..d62fd7a
--- /dev/null
+++ b/Studio Ghibli/style.css
@@ -0,0 +1,44 @@
+body{
+ background-image: url(https://data.whicdn.com/images/291635471/original.gif);
+ background-size: 100%;
+
+}
+#root {
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.card {
+ margin: 1rem;
+ border: 1px solid gray;
+ border-radius: 30px;
+ margin-bottom: 20px;
+ background: white;
+}
+
+@media screen and (min-width: 600px) {
+ .card {
+ flex: 1 1 calc(50% - 2rem);
+ }
+}
+
+@media screen and (min-width: 900px) {
+ .card {
+ flex: 1 1 calc(33% - 2rem);
+ }
+}
+h1{
+ border: 1px solid pink;
+ border-top: 50px;
+ border-radius: 30px;
+ background-color: pink;
+ font-size: 30px;
+}
+p{
+ margin: 0 20px;
+}