css header Research

frontend/src/components/CardModel/CardOffer.jsx

@@ -0,0 +1,19 @@
+import ButtonMini from "../Boutons/ButtonMini";
+import "./card-model.css";
+
+function CardOffer() {
+  return (
+    <div className="card-container">
+      <h3 className="pourcentage">Titre de l'offre</h3>
+      <div className="competence">
+        <h3>HTML, CSS, JAVASCRIPT, REACT</h3>
+      </div>
+      <h3 className="label-offre">Titre de l'offre</h3>
+      <h4 className="entreprise-champs">Nom entreprise</h4>
+      <p className="p-description "> Description entreprise</p>
+      <ButtonMini textBtn="Postuler" />
+    </div>
+  );
+}
+
+export default CardOffer;

frontend/src/components/Headers/HeaderLongResearch.jsx

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 
 function HeaderLongResearch({ textTitle, textTitle2 }) {
   return (
-    <header className="  header with-round-bottom ">
-      <div className=" container header-content">
+    <header className="header with-round-bottom">
+      <div className="container-header-content">
         <h1>{textTitle}</h1>
-        <h2>{textTitle2}</h2>
+        <h2 className="text-title-2">{textTitle2}</h2>
       </div>
     </header>
   );

frontend/src/components/Headers/header.css

@@ -48,6 +48,13 @@
   margin-right: 30px;
   margin-top: -10px;
 }
+.container-header-content {
+  padding-left: 30px;
+}
+
+.text-title-2 {
+  padding-top: 30px;
+}
 
 .header .header-content.user {
   display: flex;

frontend/src/pages/HomeOffer/Home.jsx

@@ -58,9 +58,8 @@ function Home() {
   return (
     <div id="home">
       <HeaderLongResearch
-        textTitle="Cabinet de recrutement informatique
-"
-        textTitle2="Nos offres d'emploi"
+        textTitle="Cabinet de recrutement informatique"
+        textTitle2="Nos offres d'emplois"
       />
       <div className="container-page">
         <HomeCard />