diff --git a/src/components/container/Skills/Skills.jsx b/src/components/container/Skills/Skills.jsx index b2ef47e5bc4d6c00c1f2492c3a735cca41dafe53..7f595e20217c2ad570353d1e9c2ac9e6d87a376a 100644 --- a/src/components/container/Skills/Skills.jsx +++ b/src/components/container/Skills/Skills.jsx @@ -3,7 +3,6 @@ import "./Skills.scss"; import { icons } from '../../../Data'; import { langages } from '../../../Data'; import { transversales } from '../../../Data'; -import { finishes } from '../../../Data'; import { motion } from 'framer-motion'; const Skills = () => { const [active, setActive] = useState(1) @@ -54,7 +53,7 @@ const Skills = () => { <div className="transversale" key={transversale.id}> <div className="position"> <div className='transversales_icon icon'>{transversale.icon}</div> - <h3>{transversale.transversale}</h3> + <div>{transversale.transversale}</div> </div> </div> ) diff --git a/src/components/container/Skills/Skills.scss b/src/components/container/Skills/Skills.scss index e2777e93d4250d9ec15f711d03a7b86b5e0694ca..f7b6d7a8e38fe0fdf5ef69c9d4fe62f6de8bb362 100644 --- a/src/components/container/Skills/Skills.scss +++ b/src/components/container/Skills/Skills.scss @@ -63,56 +63,41 @@ margin-right: auto; justify-content: center; color: #fff; + text-align: center; + text-transform: uppercase; + @media screen and(max-width: 800px) { grid-template-columns: repeat(2,1fr); - gap: 1rem; + gap: 0.2rem; } @media screen and(max-width: 450px) { - grid-template-columns: repeat(1,1fr); - gap: 1rem; + grid-template-columns: repeat(2,1fr); + gap: 0.2rem; } .transversale { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - margin: auto; margin-bottom: 3rem; .position { - width: 300px; - padding-left: 2.5rem; - h3 { + width: 150px; + div { font-size: 1.1rem; - text-align: center; + align-self: center; text-transform: uppercase; @media screen and(max-width: 405px){ - font-size: 0.85rem; + font-size: 0.65rem; } } svg { width: 100px; height: 100px; color: #fff; - margin-left: 50%; - transform: translateX(-50%); + text-align: center; } } } -} - -.finishes_container { - display: flex; - justify-content: center; - margin-top: 5rem; - text-align: center; - flex-wrap: wrap; - gap: 2rem; - color: #fff; - - .number { - color: #14a2ba; - font-size: 1.7rem; - } } \ No newline at end of file