First Commit, try to display a custom navbar

2 years ago · 2866d4bf0a
parent 69a5373032
commit 2866d4bf0a
4 changed files with 90 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,37 @@
+/* Onglet */
+
+.menu-pannel {
+    background-color: #000000;
+    color: #ffffff;
+    width: 100%;
+}
+
+.menu-pannel-item {
+    display: inline-block;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.active {
+    display: block;
+}
+
+.hidden {
+    display: none;
+}
+
+
+/* Formulaire */
+
+form label,
+form input {
+    display: block;
+}
+
+
+/* CARD */
+
+.team-card {
+    border: #000000 1px;
+    border-radius: 5px;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <title>My awesome team</title>
+
+    <link rel="stylesheet" href="/css/style.css" />
+</head>
+
+<body>
+    <div id="app">
+        <navbar></navbar>
+    </div>
+    <script type="module">
+        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
+
+        import NavBar from '/src/view/navbar.js';
+      
+        const app = createApp({
+            data(){
+                return {
+                    message: 'Bonjour App'
+                }
+            }
+        })
+        app.component('NavBar', NavBar);
+        app.mount('#app');
+      </script>
+</body>
+
+</html>
--- a/src/view/link_service.js
+++ b/src/view/link_service.js
@ -0,0 +1,10 @@
+export default class LinkService{
+
+    getLinks(){
+        return [
+        'https://www.google.com',
+        'https://www.youtube.com',
+        'https://www.github.com',
+        ];
+    }
+}
--- a/src/view/navbar.js
+++ b/src/view/navbar.js
@ -0,0 +1,11 @@
+export default {
+    template:`
+    <div>
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Teams</a></li>
+            <li><a href="#">Results</a></li>
+        </ul>
+    </div>
+    `
+};