commencer avec un class main
- pour le plus gros balise dans un page commence avec qqch comment ça:
.main {
height: 100vh;
width: 100wv;
magin: 0;
}
Box Model
box-sizing: content-box;
- The defulat is
- Where if margin or padding are added they extend the size of the element
box-sizing: border-box;
- border-box is a CSS adjustment that puts all the padding and border inside the "width".
CSS Grids
les parents besoin de afficher display:grid
display:grid;
grid-template-rows: repeat(4,200px);
grid-template-columns: repeat(4,400px);
Étirez la
header sur toute la première ligne
grid-column-start: 1;
grid-column-end: 3;
CSS Flexbox
Une méthode de mise en page CSS
- À gérer la disposition des éléments d’une page web justify-content: axes premiere align-items: axes secondaire
Tailwind
sources
- tutorial: https://www.youtube.com/watch?v=H_kSd4kn0E8
- https://play.tailwindcss.com/
- https://tailwindcss.com/docs/colors
- https://nerdcave.com/tailwind-cheat-sheet
Tutorial using play.tailwindcss.com
<div class="flex min-h-screen flex-col bg-teal-100">
<div class="mb-8 flex justify-between bg-teal-500 px-6 py-4 text-teal-100">
<h1 class="text-lg font-bold">MyWebsite</h1>
<nav class="flex gap-4">
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="space-y-8 flex-grow">
<section class="text-center">
<h2 class="mb-4 text-xl font-semibold sm:text-red-500 md:text-purple-500">
Welcome
</h2>
<p>This is the mean content area of the website</p>
</section>
<section>
<h2 class="mb-4 text-center text-xl font-semibold">Features</h2>
<div class="grid gap-6 px-6 sm:grid-cols-2 md:grid-cols-3">
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100 hover:shadow-lg"
>
Feature 1
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 2
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 3
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 1
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 2
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 3
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 1
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 2
</div>
<div
class="rounded bg-teal-400 p-4 hover:bg-teal-400/80 hover:text-teal-100"
>
Feature 3
</div>
</div>
</section>
</div>
<div class="bg-teal-500 py-6 text-center text-sm text-teal-100 mt-4">
© 2025 My Website. All rights reserved.
</div>
</div>
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));