imp bg card Expertises

2025-01-06 03:37:04 +01:00
parent a7c84fe336
commit b0fa21ba35
7 changed files with 30 additions and 5 deletions
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- <link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script"> -->
+    <link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script">
    <title>Création web</title>
  </head>
  <body>
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
+<svg width="100px" height="100px" id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
  <g id="Calque_1" data-name="Calque 1">
    <polyline points="315.48 135.3 358.16 181.43 306.75 228.68" style="fill: none; stroke: #d54f32; stroke-miterlimit: 10;"/>
  </g>
@@ -1,5 +1,8 @@
 import React from "react";
 import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
+import pictoMaitriseOeuvre from "../assets/picto-maitrise-oeuvre.avif";
+import pictoStructure from "../assets/picto-structure.avif";
+import pictoElectricite from "../assets/picto-electricite.avif";

 const Expertices = ({
  expertiseTitle,
@@ -31,14 +34,23 @@ const Expertices = ({
        {expertiseTitle}
      </Typography>
      <Grid container spacing={4}>
+
        {/* Expertise 1 */}
        <Grid item xs={12} md={4}>
          <Card
            sx={{
+              backgroundPosition: "center",
              boxShadow: 3,
              padding: 2,
              textAlign: "center",
              backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoMaitriseOeuvre})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
+              
            }}
          >
            <CardContent>
@@ -65,6 +77,12 @@ const Expertices = ({
              padding: 2,
              textAlign: "center",
              backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoStructure})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
            }}
          >
            <CardContent>
@@ -91,6 +109,12 @@ const Expertices = ({
              padding: 2,
              textAlign: "center",
              backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoElectricite})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
            }}
          >
            <CardContent>
@@ -143,8 +143,9 @@ const Header = () => {
            src={Logo}
            alt="Bureau d'études Le Mans"
            style={{
-              height: "40px",
-              width: "auto",
+              width: "50px",
+              height: "50px",
+              objectFit: "contain",
            }}
          />
        </Box>
@@ -326,7 +327,7 @@ const Header = () => {
            src={LogoM}
            alt="Logo"
            style={{
-              height: "40px",
+              height: "50px",
              width: "auto",
            }}
          />