starting to put the project new content

styles/elements/projects.css

@@ -1,31 +1,45 @@
 
-#projects header {
-	height: 300px;
-}
-#projects .project {
-	max-width: 900px;
-	display: flex;
-	flex-direction: column;
-}
-#projects article h2 {
-	text-align: center;
-}
-#projects .project_description {
-	padding: 20px 0px;
-}
-#projects #ljdp iframe {
-	height: 550px;
-	border: none;
-	overflow: hidden;
-}
-@media only screen and (min-width: 741px) {
-	#projects #ljdp iframe {
-		height: 660px;
+/*
+
+		<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;
+	}
+	article {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 20px;
+		img {
+			max-height: 500px;
+			max-width: 500px;
+			margin: 0px auto;
+		}
+	}
+	.mouse {
+		margin-top: 100px;
 	}
 }
-#projects .project_description p {
-	margin: 0px 0px 10px 0px;
-}
-#projects .mouse {
-	margin-top: 100px;
-}