perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

projects are now a grid

Browse Source
This commit is contained in:
asus
2024-05-26 13:34:59 +02:00
parent 9ba7801d03
commit 86869399fb
2 changed files with 31 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@@ -152,23 +152,43 @@
<div class="projects_grid"> <div class="projects_grid">
<figure class="project"> <figure class="project">
<img src="./docs/projects_square/fdf_pyramide_loop_square_2_light.gif"/> <a href="https://bitbucket.org/hugogogo/int_04_fdf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<figcaption>description</figcaption> <img src="./docs/projects_square/fdf_pyramide_loop_square_2_light.gif"/>
</a>
<figcaption>
<p>programme qui creer une representation 3D filaire d'une carte avec des points a differentes altitudes</p>
<a href="https://bitbucket.org/hugogogo/int_04_fdf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"></a>
</figcaption>
</figure> </figure>
<figure class="project"> <figure class="project">
<img src="./docs/projects_square/cube3d_tour_with_map_square.gif"/> <a href="https://bitbucket.org/hugogogo/int_10_cube3d" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<figcaption>description</figcaption> <img src="./docs/projects_square/cube3d_tour_with_map_square.gif"/>
</a>
<figcaption>
<p>mini jeu video utilisant le raycasting pour creer une impression de deplacement dans un environnement 3D</p>
<a href="https://bitbucket.org/hugogogo/int_10_cube3d" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"></a>
</figcaption>
</figure> </figure>
<figure class="project"> <figure class="project">
<img src="./docs/projects_square/ljdp_map_clusters_square_light.gif"/> <a href="https://bitbucket.org/hugogogo/2023_website_jipf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<figcaption>description</figcaption> <img src="./docs/projects_square/ljdp_map_clusters_square_light.gif"/>
</a>
<figcaption>
<p>plugin wordpress representant des evenements sur une carte avec des marqueurs et des filtres de tris</p>
<a href="https://bitbucket.org/hugogogo/2023_website_jipf" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"></a>
</figcaption>
</figure> </figure>
<figure class="project"> <figure class="project">
<img src="./docs/projects_square/kosmopolit_square.gif"/> <a href="https://bitbucket.org/hugogogo/2022_website_kosmopolit" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket">
<figcaption>description</figcaption> <img src="./docs/projects_square/kosmopolit_square.gif"/>
</a>
<figcaption>
<p>site internet statique utilisant une structure uniquement en html et css</p>
<a href="https://bitbucket.org/hugogogo/2022_website_kosmopolit" target="_blank" rel="noopener noreferrer" title="link to the source code on bitbucket"></a>
</figcaption>
</figure> </figure>
</div> </div>

32
styles/elements/projects.css
View File

@@ -5,42 +5,16 @@
.projects_grid { .projects_grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto)); grid-template-columns: repeat(auto-fit, minmax(200px, auto));
grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-columns: repeat(2, minmax(100px, 500px));
grid-gap: 20px; grid-gap: 20px;
figure { figure {
figcaption { figcaption {
text-align: left; text-align: left;
margin-bottom: 100px;
} }
} }
} }
article {
display: grid;
grid-gap: 20px;
margin-top: 100px;
/*
* trying to create a responsive design, but still some bugs
* so for now stick to mobile first
*
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
*/
grid-template-columns: auto;
p {
grid-column: 1 / span 2;
grid-column: 1;
}
img:first-of-type {
grid-column: 1;
}
img {
width: 600px;
/*
min-width: 300px;
width: 100%;
max-height: 500px;
max-width: 500px;
margin: 0px auto;
*/
}
}
.mouse { .mouse {
margin-top: 100px; margin-top: 100px;
} }