debut_page_principale

2026-06-17 10:50:51 +02:00
parent b71c845b32
commit 484fb29dd2
2 changed files with 138 additions and 0 deletions
@@ -0,0 +1,84 @@
+body {
+    width: 100%;
+    height: 100%;
+    background-color: rgb(190, 255, 255);
+    margin: 0;
+}
+#img_1 {
+    display: flex;
+    width: 20%;
+    height: 20%;
+}
+.image_footer {
+    display: flex;
+    width: 30%;
+    height: 30%;
+}
+.align_x {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+}
+#text_1 {
+    display: flex;
+    width: 65%;
+    height: 15%;
+    font-size: 200%;
+}
+h1 {
+    background-color: steelblue;
+    font-size: 40px;
+}
+h2 {
+    text-align: center;
+    background-color: cadetblue;
+}
+#nav_barre {
+    display: flex;
+    width: 100%;
+    height: 100px;
+    background-color: steelblue;
+}
+
+.styled {
+    border: 0;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: white;
+    text-shadow: 1px 1px 1px black;
+    border-radius: 10px;
+    background-color: tomato;
+    background-image: linear-gradient(
+        to top left,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0.2) 30%,
+        transparent
+    );
+}
+
+.styled:hover {
+    background-color: red;
+}
+
+.styled:active {
+    box-shadow:
+        inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset 2px 2px 3px rgb(0 0 0 / 0.6);
+}
+
+#buttons {
+    height: 100%;
+    width: 25%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row-reverse;
+    margin-left: auto;
+    align-items: center;
+}
+.shadow {
+    box-shadow: 0px 10px 5px gray;
+}
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="css/style.css" />
+    </head>
+    <body>
+        <div id="nav_barre" class="shadow">
+            <h1>FleetZen</h1>
+            <div id="buttons">
+                <input class="button" type="button"></input>
+                <input class="styled" type="button"></input>
+            </div>
+        </div>
+        <div class="align_x">
+            <div p id="text_1">
+                <p>
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry. Lorem Ipsum has been the industry's
+                    standard dummy text ever since 1966, when designers at
+                    Letraset and James Mosley, the librarian at St Bride
+                    Printing Library in London, took a 1914 Cicero translation
+                    and scrambled it to make dummy text for Letraset's Body Type
+                    sheets. It has survived not only many decades, but also the
+                    leap into electronic typesetting, remaining essentially
+                    unchanged. It was popularised thanks to these sheets and
+                    more recently with desktop publishing software including
+                    versions of Lorem Ipsum.
+                </p>
+            </div>
+            <img
+                id="img_1"
+                src="https://cdn.artphotolimited.com/images/63186a20bd40b809d5bac6c0/300x300/1967-porsche-912.jpg"
+            />
+        </div>
+        <div class="align_x">
+            <img
+                class="image_footer"
+                src="https://www.passionautomobiles.fr/fr/media/252-lamborghini-huracan-2.jpg"
+            />
+
+            <img
+                class="image_footer"
+                src="https://wordpress-content.vroomly.com/wp-content/uploads/2023/03/Lamborghini.jpg"
+            />
+            <img
+                class="image_footer"
+                src="https://mngt.fr/wp-content/uploads/2024/05/Voitures-de-legende-Le-classement-ultime-des-10-plus-rapides-du-Mond.jpg"
+            />
+        </div>
+        <h2>
+            <p>stagiaires rpz</p>
+        </h2>
+    </body>
+</html>