First commit

a526f596 · Giildo · a526f596 · a526f596 · a526f596
Commit a526f596 authored 2 months ago by Giildo
--- a/assets/css/style.css
+++ b/assets/css/style.css
+body {
+    margin: 0;
+}
+
+section {
+    height: 100vh;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    grid-template-columns: 1fr;
+
+    @media (width > 720px) {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    @media (width > 960px) {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    div {
+        width: 100px;
+        height: 100px;
+    
+        &:first-child {
+            background-color: red;
+        }
+    
+        &:nth-child(2) {
+            background-color: brown;
+        }
+    
+        &:nth-child(3) {
+            background-color: rebeccapurple;
+        }
+    
+        &:nth-of-type(4) {
+            background-color: blue;
+        }
+    
+    
+        &:last-of-type {
+            background-color: yellow;
+        }
+    }
+}
+
+nav {
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    ul {
+        display: flex;
+        gap: 8px;
+        list-style: none;
+        padding: 0 8px 0 0;
+        margin: 0;
+        li {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
\ No newline at end of file
--- a/assets/js/dialog.js
+++ b/assets/js/dialog.js
+const button = document.getElementById('dialog-open-btn')
+
+button.addEventListener('click', () => {
+    const dialog = document.querySelector('dialog')
+    dialog.showModal()
+
+    dialog.addEventListener('click', () => {
+        dialog.close()
+    })
+})
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Document</title>
+
+    <link rel="stylesheet" href="assets/css/style.css">
+
+    <script src="assets/js/dialog.js" type="module"></script>
+</head>
+<body>
+<nav>
+    <ul>
+        <li>Accueil</li>
+        <li>About</li>
+        <li>Contact</li>
+    </ul>
+</nav>
+</body>
+</html>
\ No newline at end of file