Componente cuerpo humano

src/js/components/Body.css

@@ -0,0 +1,95 @@
+.body-container {
+  /* border-radius: 25%; */
+  /* width: 100%;
+  height: 100vh; */
+  height: 100%;
+  width: auto;
+}
+
+img {
+  max-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  position: relative;
+}
+
+/* .buds img {
+  width: 50px;
+  height: 50px;
+} */
+
+.top-left{
+
+}
+
+.emoticons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 2rem 2rem 10% 10%;
+  /* clip-path: polygon(0 0, 100% 0%, 7% 100%, 0% 100%); */
+  width: 70px;
+  height: 250px;
+  align-items: center;
+  background-color: white;
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  gap: 5px;
+  border: 1px solid lightgrey;
+}
+
+.emoticon {
+  width: fit-content;
+  height: fit-content;
+  padding: 5px;
+  background-color: lightgrey;
+  border-radius: 50%;
+}
+
+.super-happy {
+  font-size: xx-large;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.happy {
+  font-size: x-large;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.neutral {
+  font-size: larger;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.sad {
+  font-size: medium;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.angry {
+  font-size: smaller;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/js/components/Body.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Buds from "./Buds.jsx";
+import Lungs from "./Lungs.jsx";
+import "./Body.css";
+
+//include images into your bundle
+import humanBody from "../../img/human-body.jpg";
+
+//create your first component
+function Body() {
+  return (
+    <>
+      <div className="container body-container text-center">
+        <div className="d-flex gap-2 justify-space-between">
+          <div className="d-flex top-left flex-start">
+            <Buds />
+          </div>
+          <div className="d-flex top-right flex-end">
+            <Lungs />
+          </div>
+        </div>
+
+        <div className="justify-content-center">
+          <img className="text-center" src={humanBody} />
+        </div>
+        {/* Body Parts */}
+      </div>
+      <div>
+        {/* Emoticons */}
+        <div className="col emoticons rounded-pill">
+          <div className="emoticon super-happy">😆</div>
+          <div className="emoticon happy">🙂</div>
+          <div className="emoticon neutral">😑</div>
+          <div className="emoticon sad">😕</div>
+          <div className="emoticon angry">😡</div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Body;
+
+{
+  /* Buds 
+        <div className="row buds">
+          <div className="card">
+            <div className="card-body">
+              <h5 className="card-title">Buds</h5>
+              <p className="card-text">
+                Hurted
+              </p>
+            </div>
+          </div>
+        </div> */
+}

src/js/components/Buds.css

@@ -0,0 +1,31 @@
+.pill {
+  padding: 1px;
+  border-radius: 25%;
+}
+
+.outer-div {
+  border-radius: 50%;
+}
+
+.img {
+  object-fit: cover;
+}
+
+/* .pill {
+  width: fit-content;
+  height: fit-content;
+  padding: 5px;
+  background-color: white;
+  border: 2px solid lightgrey;
+  border-radius: 50%;
+} */
+/*
+  .super-happy {
+    font-size: xx-large;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  } */

src/js/components/Buds.jsx

@@ -0,0 +1,30 @@
+import cross from "../../img/X.png";
+import success from "../../img/success.png";
+import "./Buds.css";
+
+function Buds() {
+  return (
+    <>
+      <div className="outer-div">
+        <div className="card mb-3" style={{ maxWidth: "200px" }}>
+          <div className="row g-0">
+            <div className="pill col-md-4">
+              <img src={cross} className="img-fluid rounded-start" alt="X" />
+            </div>
+            <div className="col-md-8">
+              <div className="card-body">
+                <small className="text-muted">Buds</small>
+                <p className="card-text"></p>
+                <p className="card-text">
+                  <h5 className="card-title">Hurted</h5>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Buds;

src/js/components/Lungs.css

@@ -0,0 +1,3 @@
+.lungs-outer-div {
+  border: 0;
+}

src/js/components/Lungs.jsx

@@ -0,0 +1,30 @@
+import success from "../../img/success.png";
+import lungs from "../../img/lungs.jpg";
+import "./Lungs.css";
+
+function Lungs() {
+  return (
+    <>
+      <div className="lungs-outer-div">
+        <div className="card mb-3" style={{ maxWidth: "200px" }}>
+          <div className="row g-0">
+            <div className="pill col-md-4">
+              <img src={success} className="img-fluid rounded-start" alt="X" />
+            </div>
+            <div className="col-md-8">
+              <div className="card-body">
+                <small className="text-muted">Lungs</small>
+                <p className="card-text"></p>
+                <p className="card-text"></p>
+                  <h5 className="card-title">Excellent</h5>
+                  <img src={ lungs } className="card-img-bot" alt="lungsImage"></img>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Lungs;