index.js
import React from "react";
import ReactDOM from "react-dom/client";
import AppProfile from "./AppProfile";
import "./index.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<AppProfile />
</React.StrictMode>
);
AppProfile.jsx
import Profile from "./components/Profile";
import "./App.css";
export default function AppProfile() {
return (
<>
<Profile
url="https://w.namu.la/s/40798176c5352e763e0cb04d58addcead564740ca6df82478a10879bcfabfbd00ecef0e5f28bd5adbc444b9203cd12946cd25e97e8f5e84c1664a0c37abcd05bc59f94c21139507d0caace216094aa002e73de2e4bf4206f80300fa7697c466be725c76932f716f4f9780da190165871"
year="2013"
title="Yeezus"
/>
<Profile
url="https://w.namu.la/s/03840c3d31d2da06ed86073ea746b1d77a9d13d46735ddbb19ab7b2baf3cd7354ca13d48d6894bbe79588deaed7add1053b046da7e5580f03a7f3864d4f4c9bb6be14ceab018e39db3c995125037e86d6a1d8ff55e7fd98b60e3002b118eca9f99d94132e8827843bc0ea82fe908a3b0"
year="2018"
title="Ye"
/>
<Profile
url="https://w.namu.la/s/54bdb55f0753cec1e4325c90233c4c36892b9d8571559d42cc89d95b6e7f5119e1c44180a2073ba86a0114f52d0701f762afe9305324e5bc63551c6de029780cb76f3d5be997ca4f2eb4c791190704c41bc47150133a40430759982bdea21e8d78069db87c95f43774fafc35a90023c8"
year="2019"
title="Jesus Is King"
/>
</>
);
}
Profile.jsx
export default function Profile({ url, title, year }) {
return (
<div className="profile">
<img src={url} alt="avatar" className="photo" />
<h1>{title}</h1>
<p>{year}</p>
</div>
);
}
App.css
.test {
color: #ff6347;
}
.profile {
margin: 2rem;
width: 300px;
text-align: center;
padding: 1rem;
background-color: antiquewhite;
border-radius: 30%;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
.photo {
width: 200px;
height: 200px;
border-radius: 100%;
}
View
