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
Split 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,15 +1,27 @@
1 1 
 body {
2 2 
   padding:0px;
3 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 17 
 header {
7 18 
   height: 100px;
19 
+  background-color: white;
8 20 
   background-image: url("../assets/burgerquizz.png");
9 21 
   background-size: 400px;
10 22 
   background-repeat: no-repeat;
11 23 
   background-position: center;
12 
-  margin-bottom: 10px;
24 
+  padding-bottom: 10px;
13 25 
 }
14 26
15 27 
 section#navbar {
 
@@ -25,15 +37,25 @@ section#navbar ul {
25 37 
   vertical-align: middle;
26 38 
 }
27 39
40 
+section#navbar li:first-child {
41 
+  margin-left:20px;
42 
+}
43 
+
28 44 
 section#navbar li {
29 45 
   display: block;
30 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 52 
   vertical-align:middle;
35 53 
 }
36 54
55 
+section#navbar li:hover, section#navbar li.current {
56 
+  background: #9556f9;
57 
+}
58 
+
37 59 
 section#navbar li:last-child {
38 60 
   display: block;
39 61 
   float: right;
 
@@ -41,5 +63,48 @@ section#navbar li:last-child {
41 63 
   margin-right:0px;
42 64 
   padding-right:70px;
43 65 
   padding-left:70px;
66 
+  background: #ff9619;
67 
+}
68 
+
69 
+section#navbar li:last-child:hover {
44 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,13 +4,14 @@
4 4 
     <meta charset="utf-8">
5 5 
     <title>Burger Quizz - Accueil</title>
6 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 8 
   </head>
8 9 
   <body>
9 10 
     <header>
10 11 
     </header>
11 12 
     <section id="navbar">
12 13 
       <ul>
13 
-        <li>Accueil</li>
14 
+        <li class="current"><a href="#">Accueil</a></li>
14 15 
         <li>Règles</li>
15 16 
         <li>Meilleurs scores</li>
16 17 
         <li>Jouer</li>
 
@@ -23,13 +24,22 @@
23 24 
       </article>
24 25 
       <article id="jouer">
25 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 43 
     </section>
34 44 
   </body>
35 45 
 </html>