superheros

src/App.jsx

@@ -0,0 +1,23 @@
+
+import { useEffect, useState } from 'react';
+import Home from './pages/Home';
+
+function App() {
+  const [superHero, setSuperHero] = useState({});
+  useEffect(() => {
+    fetch('https://superheroapi.com/api.php/10160086797479102/226')
+      .then((response) => response.json())
+      .then((jsonData) => {
+        setSuperHero(jsonData);
+      });
+    console.log(superHero);
+  }, []);
+  return (
+    <>
+      <Home superHero={superHero} />
+
+    </>
+  );
+}
+
+export default App;

src/pages/Home.css

@@ -0,0 +1,97 @@
+.center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    background-color: bisque;
+
+
+}
+
+
+.home{
+    background-color: aqua;
+    width: 500px;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding: 50px;
+    background-image: url("https://i.pinimg.com/736x/e7/5d/60/e75d609bdb187415e096f436187bb5c3.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: -35px;
+    border-radius: 25px;
+    box-shadow: 0px 0px 20px ;
+
+}
+
+
+
+.h1{
+    color: rgb(165, 137, 137);
+    font-weight: bold;
+     text-decoration: underline;
+
+    display: flex;
+
+    justify-content: center;
+
+    width: 100%;
+
+}
+
+
+
+
+.img {
+
+    width: 200px;
+
+    height: 200px;
+
+    border-radius: 20px;
+
+    object-fit: cover;
+
+    box-shadow: 0px 0px 20px rgba(223, 65, 65, 0.557);
+
+    position: relative;
+
+    left: 20%;
+
+}
+
+.Title {
+
+        color: rgb(221, 136, 26);
+
+    font-weight: bold;
+
+    font-size: 18px;
+
+    margin-bottom: 10px;
+
+}
+
+
+
+
+.Paragraph {
+
+    font-size: 16px;
+
+    color: antiquewhite;
+
+    padding-bottom: 20px;
+
+    padding-left: 20px;
+
+    width: 50%;
+
+    line-height: 1.5rem;
+
+}
+

src/pages/Home.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "./Home.css"
+
+function Home({ superHero }) {
+  console.log(superHero);
+  return (
+    <div className="center">
+      <div
+        className="home">
+        <h1
+          className="h1">{superHero.name}</h1>
+        <p
+          className="Title">
+          Occupation :<br></br>
+        </p>
+        <span
+          className="paragraph">
+          {superHero.work &&
+            superHero.work.occupation}
+        </span>
+        <p
+          className="title">
+          Group
+        </p>
+        <span
+          className="paragraph">
+          {superHero.connection &&
+            superHero.connection[
+            "group-affiliation"
+            ]}
+        </span>
+        <div>
+
+      {superHero.image && (
+        <img className="img"
+          src={superHero.image.url}
+          alt={superHero.name}
+        />
+      )}
+
+    </div>
+    </div >
+      </div >
+  );
+}
+
+
+
+
+
+
+export default Home;