texte et image

CSS/styles.css

@@ -1,16 +1,19 @@
-* {
+
-	font-family:  cursive;
-}
 
 
 body{
 	margin: 0;
+	background: linear-gradient(90deg,rgba(63,94,251,0.7) 0%,rgba(252,70,107,0.7) 100%);
 }
 
 
+header{
+	margin-bottom: 10vh;
+}
 nav{
 	top: 0;
 	left: 0;
+	z-index: 1;
 	position: fixed;
 	display: flex;
 	align-items: center;
@@ -61,11 +64,50 @@ li{
 }
 
 p{
+	font-family:  unset;
 	font-size: 30px;
-	margin: 10px;
+
 }
 
 
+.img_gauche_txt_droite{
+	display: flex;
+	justify-content: space-around;
+	align-items: flex-end;
+}
+
+
+
+.img_gauche_txt_droite p{
+	background-color: rgba(100,100,100,0.2);
+	border-radius: 10px;
+	width: 50%;
+}
+
+.img_gauche_txt_droite img{border-radius: 10px;}
+.img_gauche_txt_droite img:not(:hover){filter: saturate(0.2);}
+
+
+.img_droite_txt_gauche{
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-around;
+	align-items: flex-end;
+}
+
+
+
+.img_droite_txt_gauche p{
+	background-color: rgba(100,100,100,0.2);
+	border-radius: 10px;
+	width: 50%;
+}
+
+.img_droite_txt_gauche img{border-radius: 10px;}
+.img_droite_txt_gauche img:not(:hover) {filter: saturate(0.2);}
+
+
+
 #pied_de_page{
 	font-size: 15px;
 

index.html

@@ -31,26 +31,28 @@
 		</header>
 
 		<main>
-			<img id="cas" src="img/casion_background.jpeg">
 			<a href=""><img id="btn_up" src="img/arrow-up.svg"></a>
-	
-			<p>
-freestar
-freestar
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt, nisl vel venenatis lacinia, lorem sem fringilla odio, ut blandit erat mauris id elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec velit eget odio mattis posuere in vitae sem. Nam vel interdum metus. Maecenas fringilla metus nunc, eget sodales lacus ornare non. Ut a metus ut erat feugiat tempor. Vestibulum a pellentesque risus. Ut ut ante nisl. Suspendisse vitae est posuere, tincidunt justo sed, ornare odio.
+			<div class="img_gauche_txt_droite">
+				<img id="cas" src="img/casion_background.jpeg">
 
-Sed dignissim aliquam erat, vitae varius odio sodales vitae. Curabitur ut leo placerat, interdum dui non, egestas diam. In sagittis nisi orci, sit amet venenatis risus posuere sed. Duis hendrerit magna quis finibus pretium. Mauris dolor nulla, molestie quis velit sit amet, ultricies dignissim lectus. Nam felis urna, dapibus vel magna id, euismod mattis dui. Duis vitae cursus dolor, ut rutrum enim. Cras porttitor eu magna eget molestie. Sed vitae volutpat ex, in consequat arcu.
+		
+				<p>
+					ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+				</p>
 
-Donec rutrum, ligula sit amet condimentum tristique, lorem lorem mattis lacus, ac venenatis enim augue ut sapien. Donec pretium sagittis nunc pharetra lacinia. Donec vel suscipit nisl, ut tincidunt enim. Sed mattis bibendum bibendum. Donec faucibus consequat nisi, eget vehicula lectus ullamcorper id. Suspendisse nec scelerisque tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer pharetra, lacus at congue interdum, sem turpis efficitur eros, ut dictum justo nibh congue magna. Phasellus non felis eget erat dictum imperdiet. Aenean posuere hendrerit varius. 
+			</div>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt, nisl vel venenatis lacinia, lorem sem fringilla odio, ut blandit erat mauris id elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec velit eget odio mattis posuere in vitae sem. Nam vel interdum metus. Maecenas fringilla metus nunc, eget sodales lacus ornare non. Ut a metus ut erat feugiat tempor. Vestibulum a pellentesque risus. Ut ut ante nisl. Suspendisse vitae est posuere, tincidunt justo sed, ornare odio.
+			<div class="img_droite_txt_gauche">
+				<img id="cas" src="img/casion_background.jpeg">
+				<p>
+					ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 
-Sed dignissim aliquam erat, vitae varius odio sodales vitae. Curabitur ut leo placerat, interdum dui non, egestas diam. In sagittis nisi orci, sit amet venenatis risus posuere sed. Duis hendrerit magna quis finibus pretium. Mauris dolor nulla, molestie quis velit sit amet, ultricies dignissim lectus. Nam felis urna, dapibus vel magna id, euismod mattis dui. Duis vitae cursus dolor, ut rutrum enim. Cras porttitor eu magna eget molestie. Sed vitae volutpat ex, in consequat arcu.
+				</p>
-
+			</div>
-Donec rutrum, ligula sit amet condimentum tristique, lorem lorem mattis lacus, ac venenatis enim augue ut sapien. Donec pretium sagittis nunc pharetra lacinia. Donec vel suscipit nisl, ut tincidunt enim. Sed mattis bibendum bibendum. Donec faucibus consequat nisi, eget vehicula lectus ullamcorper id. Suspendisse nec scelerisque tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer pharetra, lacus at congue interdum, sem turpis efficitur eros, ut dictum justo nibh congue magna. Phasellus non felis eget erat dictum </p>
-			<!--
-			Contenu principal 
-			-->
 
 		</main>