Colleagues 10 years ago
parent
commit
8351bef550
4 changed files with 101 additions and 17 deletions
  1. 12 6
      css/start.css
  2. 51 0
      css/style.css
  3. 33 3
      index.html
  4. 5 8
      start.html

+ 12 - 6
css/start.css

@@ -6,13 +6,16 @@ ul {
     overflow: hidden
 }
 
+li {    
+    width: 200px;
+}
 
 a:link, a:visited {
     display: block;
     width: 120px;
     font-weight: bold;
     color: #FFFFFF;
-    background-color: #F44336;
+    background-color: #006666;
     text-align: center;
     padding: 4px;
     text-decoration: none;
@@ -27,26 +30,29 @@ a:hover, a:active {
 	text-align: center;
 	font-size:48px;
 	color: #FFFFFF;
-    background-color: #F44336;
+    background-color: #006666;
 	padding:1px 16px;
-	width: 100%
+	width: 100%;
+    margin-bottom: 5px;
 }
 
 .container {
 	text-align: center;
 	color: #FFFFFF;
-    background-color: #F44336;
-	padding:1px 16px;
+    background-color: #006666;
+	padding:20px 16px;
 	margin-left: auto;
     margin-right: auto;
     width: 100%;
 	font-size:25px
+
 }
 
 .foot-container {
 	color: #FFFFFF;
-    background-color: #F44336;
+    background-color: #006666;
 	padding:5px 25px;
+    margin-top: 5px;
 	width: 100%
 }
 

+ 51 - 0
css/style.css

@@ -9,3 +9,54 @@ body {
     padding: 0px auto;
     background: #1F2921;
 }
+
+.newsticker	 {
+	text-align: center;
+	font-size:20px;
+	color: #FFFFFF;
+    background-color: #006666;
+	padding:1px 8px;
+	width: 100%;
+	margin-top: 3px;
+}
+
+
+.navbar	 {
+	text-align: center;
+	font-size:20px;
+	color: #FFFFFF;
+    background-color: #006666;
+	padding:1px 8px;
+	width: 100%
+}
+
+
+ul {
+    list-style-type: none;
+    margin: 20px;
+    padding: 1px;
+    overflow: hidden
+}
+
+li {
+    float: left;
+    width: 200px;
+}
+
+a:link, a:visited {
+    display: block;
+    width: 120px;
+    font-weight: bold;
+    color: #FFFFFF;
+    background-color: #006666;
+    text-align: center;
+    padding: 4px;
+    text-decoration: none;
+    text-transform: uppercase
+}
+
+a:hover, a:active {
+    background-color: #F88000;
+}
+
+

+ 33 - 3
index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Snakey Particles</title>
+	<title>Snaky Particles</title>
 	<script src="https://code.createjs.com/createjs-2015.05.21.combined.js"></script>
 	<script src="js/views/physicist.js"></script>
 	<script src="js/views/particle.js"></script>
@@ -11,11 +11,41 @@
 	<script src="js/models/snake.js"></script>
 	<script src="js/controller.js"></script>
 	<script src="js/script.js"></script>
+
+	<!--script src="js/newsticker.js"></script-->
+	<!--script src="js/navigation.js"></script-->
   <link rel="stylesheet" type="text/css" href="css/style.css">
+  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
 </head>
-<body onload="init();">
-	<canvas id="demoCanvas" width="500" height="500">
+<body onload="init();">		
+<div>
+	<!--canvas id="navigation">alternate content</canvas-->
+
+	<article class="navbar">
+  	<ul>
+  		<li> <img src="./img/logo.png" alt="logo" style="width:120px;height:120px;"> </li>
+    	<li><a href="index.html">Restart</a></li>
+    	<li><a href="settings.html">Settings</a></li>
+    	<li><a href="scorelist.html">Scorelist</a></li>
+    	<li><a href="about.html">About</a></li>
+    	<li><a href="end.html">Quit</a></li>
+  	</ul>
+	</article>
+</div>
+
+<div>
+	<!--canvas id="newsticker">alternate content</canvas-->
+	<article class="newsticker">
+  	Here will be presented useful information about particles... =)
+  	</article>
+</div>
+
+	
+	<div>
+	<canvas id="demoCanvas" width="500" heigth="500">
 		alternate content
 	</canvas>
+	</div>
 </body>
 </html>

+ 5 - 8
start.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>SNAKY PARTCILE</title>
+  <title>SNAKY PARTCILES</title>
 </head>
 
 <link rel="stylesheet" href="./css/start.css">
 
 <body>
 
-<header class="head-container"> SNAKY PARTICLE </header>
+<header class="head-container"> SNAKY PARTICLES </header>
 
 <article class="container">
+  <img src="./img/logo.png" alt="logo" style="width:120px;height:120px;">
   <ul>
     <li><a href="index.html">Start Game</a></li>
     <li><a href="settings.html">Settings</a></li>
@@ -22,12 +23,8 @@
 
 
 <footer class="foot-container">
-  <div class="left">
-    <h6>Snaky Particle: An educational particle physics game.</h6>
-  </div>
-  <div align="right">
-    <h6>@CERN-Webfest 2015</h6>
-  </div>
+  <div class="left"> Snaky Particles: An educational particle physics game.</div>
+  <div align="right"> @CERN-Webfest 2015 </div>
 </footer>
 
 </body>