This commit is contained in:
vincent_b
2025-10-17 00:18:16 +02:00
parent a9c8ef66db
commit 1c1f514531
28 changed files with 1422 additions and 124 deletions

View File

@@ -0,0 +1,94 @@
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2 Flexboxs</title>
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="style_flexbox.css">
</head>
<body>
<!-- <div w3-include-html="./parts/header.html"></div> -->
<h3>Flexbox 2 colones</h3>
<div id="flex-container">
<div class="flex-item">
1 Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
</div>
<div class="flex-item">
2 Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
</div>
</div>
<h3>Flexbox items</h3>
<ul class="flex-container tomato">
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
</ul>
<h3>Flexbox Navigation</h3>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3>Flexbox Recap</h3>
<img id="flexbox_css_tricks" src="https://code.vincent-bonnefille.fr/plain-html_back/public/2_flexbox/flexbox_css_tricks.png">
</body>
<footer>
<script src="/assets/js/script_html_infos.js"></script>
<!-- <script src="/assets/js/script_html_include_w3.js"></script> -->
<!-- <script>
includeHTML();
</script> -->
<script src="https://livejs.com/live.js"></script>
</footer>
</html>