ajout éléments hidden dans index.html

OpenClassrooms-Student-Center · May 25, 2023 · 950766c · 950766c
1 parent d1e38d3
commit 950766c
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css
@@ -62,6 +62,35 @@ body {
 	font-size: 14px;
 	background-color: #FFFEF8;
 }
+.hidden-mode {
+	display: none;
+}
+.mode {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 60px;
+	background-color: #000;
+}
+.mode div:first-child{
+	width: 16px;
+	height: 16px;
+	background-color: #fff;
+}
+.mode i {
+	color: #000;
+	font-size: 15px;
+}
+.mode p {
+	color: #FFFFFF;
+	margin: 0 20px 0 10px;
+}
+.mode button {
+	background-color: #fff;
+	border: none;
+	border-radius: 60px;
+	padding: 10px 23px;
+}
 header {
 	display: flex;
 	justify-content: space-between;
@@ -141,11 +170,27 @@ li:hover {
 	text-align: center;
 	margin-bottom: 1em;
 }
-
+.projet {
+	display: flex;
+	justify-content: center;
+}
+.hidden {
+	display: none;
+}
+.edit {
+	display: flex;
+	padding-top: 0.75em;
+	margin-left: 30px;
+}
+.edit img {
+	width: 14px;
+	height: 14px;
+	margin-right: 10px;
+}
 .button-filter {
 	display: block;
 	text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 2em;
 }
 
 .categorie-button {

diff --git a/FrontEnd/index.html b/FrontEnd/index.html
@@ -13,6 +13,15 @@
 <body>
 	<div id="conteneur-page">
 
+		<div class="hidden-mode">
+			<div>
+				<i class="fa-regular fa-pen-to-square fa-2xs"></i>
+			</div>
+			<p>Mode édition</p>
+			<div>
+				<button><span> publier les changements</span></button>
+			</div>
+		</div>
 		<header>
 			<h1>Sophie Bluel <span>Architecte d'intérieur</span></h1>
 			<nav>
@@ -37,7 +46,13 @@ <h2>Designer d'espace</h2>
 				</article>
 			</section>
 			<section id="portfolio">
-				<h2>Mes Projets</h2>
+				<div class="projet">
+					<h2>Mes Projets</h2>
+					<div class="hidden">
+						<img src="./assets/icons/pen-to-square-regular.svg" alt="icône modifier">
+						<p>modifier</p> 
+					</div>
+				</div>
 				<div class="button-filter"></div>
 				<div class="gallery"></div>
 			</section>