0_intro
This commit is contained in:
94
public/2_flexbox/index.html
Normal file
94
public/2_flexbox/index.html
Normal 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>
|
||||
|
||||
Reference in New Issue
Block a user