starting to put the project new content

index.html

@@ -136,24 +136,11 @@
 				<a href="https://bitbucket.org/hugogogo" target="_blank" rel="noopener noreferrer" title="link to git repositories on bitbucket"></a>
 			</header>
 
+			<h2>quelques projets réalisés</h2>
+
 			<article>
-				<h2>projets réalisés</h2>
+				<img src="./docs/projects/fdf_pyramide_2.gif"/>
-				<figure class="project" id="ljdp">
+				<img src="./docs/projects/fdf_demo.gif"/>
-					<figcaption class="project_description">
-						<h3>extension wordpress :</h3><p>extension wordpress affichant les articles du site sur une carte, et permettant d'affiner la selection avec des critères</p>
-						<ul>
-							<li>lien du site : <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer" title="link to the webpage the running plugin"></a></li>
-							<li>lien du code : <a href="incomming" target="_blank" rel="noopener noreferrer" title="link to the source code of the plugin"></a></li>
-							<li>technologies : wordpress backend, php, javascript, html, css, google maps javascript API, google maps geocoding API, google maps markerclusterer</li>
-						</ul>
-					</figcaption>
-					<iframe
-						src="https://2022.lejourdesprofs.org/hugogogo/"
-						data-flex="center"
-						title="embedded plugin from it's original website"
-						sandbox="allow-scripts allow-popups"
-					></iframe> 
-				</figure>
 			</article>
 
 			<div class="mouse"><div class="mouse_2 pre"></div></div>

styles/elements/projects.css

@@ -1,31 +1,45 @@
 
-#projects header {
+/*
+
+		<section id="projects" class="section">
+			<div class="mouse"><div class="mouse_3 pre"></div></div>
+
+			<header>
+				<h1 aria-label="projets">
+					<span aria-hidden="true" class="pre"></span>
+				</h1>
+				<a href="https://bitbucket.org/hugogogo" target="_blank" rel="noopener noreferrer" title="link to git repositories on bitbucket"></a>
+			</header>
+
+			<h2>quelques projets réalisés</h2>
+
+			<article>
+				<img src="./docs/projects/fdf_pyramide_2.gif"/>
+				<img src="./docs/projects/fdf_demo.gif"/>
+			</article>
+
+			<div class="mouse"><div class="mouse_2 pre"></div></div>
+			<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
+
+		</section>
+*/
+
+#projects {
+	header {
 		height: 300px;
 	}
-#projects .project {
+	article {
-	max-width: 900px;
 		display: flex;
-	flex-direction: column;
+		flex-direction: row;
-}
+		flex-wrap: wrap;
-#projects article h2 {
+		gap: 20px;
-	text-align: center;
+		img {
-}
+			max-height: 500px;
-#projects .project_description {
+			max-width: 500px;
-	padding: 20px 0px;
+			margin: 0px auto;
-}
-#projects #ljdp iframe {
-	height: 550px;
-	border: none;
-	overflow: hidden;
-}
-@media only screen and (min-width: 741px) {
-	#projects #ljdp iframe {
-		height: 660px;
 		}
 	}
-#projects .project_description p {
+	.mouse {
-	margin: 0px 0px 10px 0px;
-}
-#projects .mouse {
 		margin-top: 100px;
 	}
+}