done

src/App.css

@@ -0,0 +1,131 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  color: #333;
+}
+
+.card {
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  margin: 20px;
+  padding: 20px;
+  display: flex;
+  border: 1px solid black;
+  height: 150px;
+  align-items: center;
+}
+
+.image {
+  max-width: 150px;
+  margin-right: 20px;
+  object-fit: cover;
+}
+.card-info {
+  font-size: 16px;
+  line-height: 1.2;
+  text-align: start;
+  margin-bottom: 40px;
+}
+
+.card-info h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+.card-info span {
+  font-weight: bold;
+  color: black;
+}
+
+.card-info p {
+  font-size: 14px;
+  color: black;
+  font-weight: normal;
+}
+
+.greating {
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  margin: 20px;
+  padding: 10px;
+  display: flex;
+  border: 1px solid black;
+  align-items: center;
+}
+
+.credit-card-container {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+}
+.credit-card {
+  background-color: #333;
+  border-radius: 10px;
+  color: white;
+  max-width: 250px;
+  min-width: 250px;
+  height: 150px;
+  padding: 20px;
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-type {
+  align-self: flex-end;
+  font-size: 18px;
+}
+.card-number {
+  font-size: 18px;
+  letter-spacing: 1.4px;
+  margin: 10px 0;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.fa-star {
+  color: white;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.fa-star.checked,
+.fa-star.active {
+  color: black;
+}
+
+.driver-card {
+  background-color: #468fd3;
+  color: white;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  width: 600px;
+  padding: 20px;
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+.card-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.driver-name {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}

src/App.jsx

@@ -1,9 +1,115 @@
 import "./App.css";
+import IdCard from "./components/IdCard";
+import Greatings from "./components/Greatings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
+import Rating from "./components/Rating";
+import DriverCard from "./components/DriverCard";
 
 function App() {
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <section>
+        <IdCard
+          lastName="Doe"
+          firstName="John"
+          gender="male"
+          height={178}
+          birth={new Date("1992-07-14")}
+          picture="https://randomuser.me/api/portraits/men/44.jpg"
+        />
+
+        <IdCard
+          lastName="Delores "
+          firstName="Obrien"
+          gender="female"
+          height={172}
+          birth={new Date("1988-05-11")}
+          picture="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+      </section>
+
+      <section>
+        <Greatings lang="de" children="Ludwig" />
+        <Greatings lang="fr" children="François" />
+      </section>
+
+      <section>
+        <Random min={1} max={6} />
+        <Random min={1} max={100} />
+      </section>
+
+      <section>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+      </section>
+
+      <section className="credit-card-container">
+        <CreditCard
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="white"
+        />
+
+        <CreditCard
+          type="Master Card"
+          number="0123456789010995"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="N26"
+          owner="Maxence Bouret"
+          bgColor="#eeeeee"
+          color="#222222"
+        />
+
+        <CreditCard
+          type="Visa"
+          number="0123456789016984"
+          expirationMonth={12}
+          expirationYear={2019}
+          bank="Name of the Bank"
+          owner="Firstname Lastname"
+          bgColor="#ddbb55"
+          color="white"
+        />
+      </section>
+
+      <section>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+      </section>
+
+      <section>
+        <DriverCard
+          name="Travis Kalanick"
+          rating={4.2}
+          img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
+          car={{
+            model: "Toyota Corolla Altis",
+            licensePlate: "CO42DE",
+          }}
+        />
+
+        <DriverCard
+          name="Dara Khosrowshahi"
+          rating={4.9}
+          img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
+          car={{
+            model: "Audi A3",
+            licensePlate: "BE33ER",
+          }}
+        />
+      </section>
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,32 @@
+function BoxColor({ r, g, b }) {
+  const divStyle = {
+    backgroundColor: `rgb(${r}, ${g}, ${b})`,
+    height: "150px",
+    border: "1px solid black",
+    textAlign: "center",
+    margin: "10px",
+    fontSize: "20px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    color: r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black" : "white",
+  };
+
+  r = Math.max(0, Math.min(255, r));
+  g = Math.max(0, Math.min(255, g));
+  b = Math.max(0, Math.min(255, b));
+
+  const hexR = r.toString(16).padStart(2, "0");
+  const hexG = g.toString(16).padStart(2, "0");
+  const hexB = b.toString(16).padStart(2, "0");
+
+  return (
+    <div style={divStyle}>
+      {" "}
+      rgb({r},{g},{b}) <br />#{hexR}
+      {hexG}
+      {hexB}{" "}
+    </div>
+  );
+}
+export default BoxColor;

src/components/CreditCard.jsx

@@ -0,0 +1,19 @@
+function CreditCard(props) {
+  const creditCard = props;
+
+  const maskedNumber = "**** **** **** " + creditCard.number.slice(-4);
+
+  return (
+    <>
+      <div className="credit-card">
+        <nav className="card-type">{creditCard.type}</nav>
+        <section className="card-number">{maskedNumber}</section>
+        <footer className="card-footer">
+          {creditCard.expirationMonth}/{creditCard.expirationYear}{" "}
+          {creditCard.bank} {creditCard.owner}
+        </footer>
+      </div>
+    </>
+  );
+}
+export default CreditCard;