babolivier
/
burger-quizz
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Todo: Fix play buttons, responsive navbar

Brendan Abolivier 9 years ago
parent
2ad282134a
commit
17d7327e41
2 changed files with 87 additions and 12 deletions
Unified View Show Diff Stats
  1. 69
    4
      web/css/main.css
  2. 18
    8
      web/index.htm

+ 69
- 4
web/css/main.css View File

1 
 body {
 1 
 body {
2 
   padding:0px;
 2 
   padding:0px;
3 
   margin:0px;
 3 
   margin:0px;
4 
+  font-family:'Open Sans';
5 
+  background: #fffdc6;
6 
+}
7 
+
8 
+a, a:visited {
9 
+  color: white;
10 
+  text-decoration: none;
11 
+}
12 
+
13 
+a:hover {
14 
+  text-decoration: underline;
4 
 }
 15 
 }
5
16
6 
 header {
 17 
 header {
7 
   height: 100px;
 18 
   height: 100px;
19 
+  background-color: white;
8 
   background-image: url("../assets/burgerquizz.png");
 20 
   background-image: url("../assets/burgerquizz.png");
9 
   background-size: 400px;
 21 
   background-size: 400px;
10 
   background-repeat: no-repeat;
 22 
   background-repeat: no-repeat;
11 
   background-position: center;
 23 
   background-position: center;
12 
-  margin-bottom: 10px;
24 
+  padding-bottom: 10px;
13 
 }
 25 
 }
14
26
15 
 section#navbar {
 27 
 section#navbar {
25 
   vertical-align: middle;
 37 
   vertical-align: middle;
26 
 }
 38 
 }
27
39
40 
+section#navbar li:first-child {
41 
+  margin-left:20px;
42 
+}
43 
+
28 
 section#navbar li {
 44 
 section#navbar li {
29 
   display: block;
 45 
   display: block;
30 
   float:left;
 46 
   float:left;
31 
-  margin-left:50px;
32 
-  margin-right:50px;
33 
-  height: 100%;
47 
+  padding-top:17px;
48 
+  padding-left:50px;
49 
+  padding-right:50px;
50 
+  padding-bottom: ;
51 
+  height: 53px;
34 
   vertical-align:middle;
 52 
   vertical-align:middle;
35 
 }
 53 
 }
36
54
55 
+section#navbar li:hover, section#navbar li.current {
56 
+  background: #9556f9;
57 
+}
58 
+
37 
 section#navbar li:last-child {
 59 
 section#navbar li:last-child {
38 
   display: block;
 60 
   display: block;
39 
   float: right;
 61 
   float: right;
41 
   margin-right:0px;
 63 
   margin-right:0px;
42 
   padding-right:70px;
 64 
   padding-right:70px;
43 
   padding-left:70px;
 65 
   padding-left:70px;
66 
+  background: #ff9619;
67 
+}
68 
+
69 
+section#navbar li:last-child:hover {
44 
   background: #ffab19;
 70 
   background: #ffab19;
45 
 }
 71 
 }
72 
+
73 
+section#page {
74 
+  width: 60%;
75 
+  margin: auto;
76 
+}
77 
+
78 
+section#page h2 {
79 
+  text-align: center;
80 
+  font-size: 200%;
81 
+}
82 
+
83 
+section#page p {
84 
+  text-indent: 30px;
85 
+}
86 
+
87 
+.button {
88 
+  display:inline-block;
89 
+  background: #09b22b;
90 
+  color: white;
91 
+  border: none;
92 
+  height: 70px;
93 
+  width: 200px;
94 
+  margin:auto;
95 
+  margin-right:15px;
96 
+  margin-left:15px;
97 
+  text-align:center;
98 
+}
99 
+
100 
+.firstword {
101 
+  font-size:200%;
102 
+}
103 
+
104 
+input[type="submit"]:hover {
105 
+  cursor: pointer;
106 
+}
107 
+
108 
+div#buttons {
109 
+  margin:auto;
110 
+}

+ 18
- 8
web/index.htm View File

4 
     <meta charset="utf-8">
 4 
     <meta charset="utf-8">
5 
     <title>Burger Quizz - Accueil</title>
 5 
     <title>Burger Quizz - Accueil</title>
6 
     <link rel="stylesheet" href="css/main.css">
 6 
     <link rel="stylesheet" href="css/main.css">
7 
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
7 
   </head>
 8 
   </head>
8 
   <body>
 9 
   <body>
9 
     <header>
 10 
     <header>
10 
     </header>
 11 
     </header>
11 
     <section id="navbar">
 12 
     <section id="navbar">
12 
       <ul>
 13 
       <ul>
13 
-        <li>Accueil</li>
14 
+        <li class="current"><a href="#">Accueil</a></li>
14 
         <li>Règles</li>
 15 
         <li>Règles</li>
15 
         <li>Meilleurs scores</li>
 16 
         <li>Meilleurs scores</li>
16 
         <li>Jouer</li>
 17 
         <li>Jouer</li>
23 
       </article>
 24 
       </article>
24 
       <article id="jouer">
 25 
       <article id="jouer">
25 
         <h2>Jouer</h2>
 26 
         <h2>Jouer</h2>
26 
-        <form action="play.htm">
27 
-          <input type="submit" value="Solo 1 joueur" />
28 
-        </form>
29 
-        <form action="multi.htm">
30 
-          <input type="submit" value="Multi 2 joueurs" />
31 
-        </form>
32 
-      </article>
27 
+        <div class="button">
28 
+          <a href="play.htm">
29 
+            <div class="firstword">
30 
+              Solo
31 
+            </div>
32 
+            1 joueur
33 
+          </a>
34 
+        </div>
35 
+        <div class="button">
36 
+          <a href="multi.php">
37 
+            <div class="firstword">
38 
+              Multi
39 
+            </div>
40 
+            2 joueurs
41 
+          </a>
42 
+        </div>
33 
     </section>
 43 
     </section>
34 
   </body>
 44 
   </body>
35 
 </html>
 45 
 </html>