fixed projects img styling

This commit is contained in:
yousifpa98
2024-12-22 00:42:33 +01:00
parent 38aeb57a9d
commit 667b40bbe4
4 changed files with 8 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 697 KiB

View File

@@ -13,6 +13,7 @@ import { useState } from "react";
import ProjectsMain from "../subComponents/Projects/ProjectsMain"; import ProjectsMain from "../subComponents/Projects/ProjectsMain";
import inkspireImg from "../../assets/img/projects/inkspire.png"; import inkspireImg from "../../assets/img/projects/inkspire.png";
import debImg from "../../assets/img/projects/deb.png"; import debImg from "../../assets/img/projects/deb.png";
import animeDBImg from "../../assets/img/projects/animeDB.png";
import animedbImg1 from "../../assets/img/projects/animedb1.png"; import animedbImg1 from "../../assets/img/projects/animedb1.png";
import animedbImg2 from "../../assets/img/projects/animedb2.png"; import animedbImg2 from "../../assets/img/projects/animedb2.png";
import animedbImg3 from "../../assets/img/projects/animedb3.png"; import animedbImg3 from "../../assets/img/projects/animedb3.png";
@@ -47,7 +48,7 @@ const Projects = () => {
}, },
year: "2024", year: "2024",
job: "personal project", job: "personal project",
imgs: [animedbImg1, animedbImg2, animedbImg3], imgs: [animeDBImg],
id: 3, id: 3,
}, },
{ {

View File

@@ -1,6 +1,9 @@
.projectCard { .projectCard {
width: 33%; width: 33%;
/* height: 200px; */ display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
} }
.imgs, .imgs,

View File

@@ -1,7 +1,6 @@
.projectsMain { .projectsMain {
grid-area: 1 / 1 / 8 / 9; grid-area: 1 / 1 / 8 / 9;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@@ -12,6 +11,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: space-around;
gap: 1rem; gap: 1rem;
width: 100%;
} }