mise en place de la page

elhalj · Aug 26, 2024 · 22dbfc3 · 22dbfc3
commit 22dbfc3
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 0 deletions.
diff --git a/app.js b/app.js
diff --git a/images/logo/first_logo.png b/images/logo/first_logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css" />
+    <title>Calendar_Statistic</title>
+</head>
+
+<body>
+    <header>
+        <div class="container">
+            <nav class="navbar bg-body-tertiary">
+                <div class="container-fluid">
+                    <a class="navbar-brand" href="#">
+                        <img src="images/logo/first_logo.png" alt="Logo" width="30" height="24"
+                            class="d-inline-block align-text-center" />
+                        <span>WILSON IKEDA</span>
+                    </a>
+                    <ul class="d-flex justify-content-between">
+                        <li><a href="#">HOME</a></li>
+                        <li><a href="#">CONTACT</a></li>
+                        <li><a href="#">ABOUT</a></li>
+                    </ul>
+                </div>
+            </nav>
+        </div>
+    </header>
+    <main>
+        <div class="container-fluid">
+            <div class="first">
+                <div class="town">
+                    <button><img src="#" alt="" />Yopougon</button>
+                    <button><img src="#" alt="" />Azito</button>
+                    <button><img src="#" alt="" />Johnikro</button>
+                    <button><img src="#" alt="" />Bocamp</button>
+                    <button><img src="#" alt="" />Kilometre 27</button>
+                    <button><img src="#" alt="" />Camp-baoulé</button>
+                    <button><img src="#" alt="" />Sibissa</button>
+                </div>
+                <div class="list">
+                    <div class="time_all">
+                        <div class="all_button">
+                            <button class="btn btn-primary opacity-50" type="button" id="all_button">
+                                ALL
+                            </button>
+                            <button class="btn btn-primary opacity-50" type="button" id="all_button">
+                                DIRECT
+                            </button>
+                            <button class="btn btn-primary opacity-50" type="button" id="all_button">
+                                COTE
+                            </button>
+                            <button class="btn btn-primary opacity-50" type="button" id="all_button">
+                                FINISHED
+                            </button>
+                        </div>
+                        <div class="time_button">
+                            <input type="date" />
+                        </div>
+                    </div>
+                    <div class="list_country_club">
+                        <div class="country">
+                            <div class="country_display">
+                                <img src="#" alt="" />BOCAMP: <a href="#">Ligue1</a>
+                            </div>
+                            <div class="classement">
+                                <a href="#">classement</a>
+                            </div>
+                        </div>
+                        <div class="club_display">
+                            <input type="time" name="time" id="time" value="19:00" />
+                            <div>
+                                <div><img src="#" alt="" /><a href="#">Portugal</a></div>
+                                <div>
+                                    <img src="#" alt="" /><a href="#">Crystal palace</a>
+                                </div>
+                            </div>
+                            <div class="score">
+                                <div class="score_player1">0</div>
+                                <div class="score_player2">0</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,64 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+
+
+ul{
+    width: 300px;
+    list-style: none;
+}
+ul a{
+    text-decoration: none;
+    color: rgb(92, 38, 38);
+    font-size: xx-small;
+}
+
+.first{
+    display: flex;
+    /*justify-content: space-around;*/
+}
+
+.town{
+   /* border: 1px solid red;*/
+    margin: 0 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    width: 150px;
+}
+.town button{
+    border: none;
+    margin-top: 5px;
+    color: black;
+}
+
+.list{
+    border: 1px solid;
+    width: 700px;
+}
+
+.time_all{
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    align-items: center;
+    padding: 10px;
+}
+
+.country{
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+}
+
+.club_display{
+    display: flex;
+    justify-content: space-around;
+    margin: 10px;
+}
+
+input{
+    border: none;
+    box-shadow: inset 2px 2px 2px rgb(104, 133, 159);
+}