Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
For more information about how to create things like this, check out the Web Dev Weeks talk on HTML & CSS. Skimming over this step's code, you can see that we've included our styles.css file containing all of our CSS, as well as an external file called normalize.min.css which will also help make things appear correctly. You can also see a rough sketch of how the app will look: we've got a couple of text inputs to get the board size, we've got a couple of counters to keep track of some game stats, and we've got the `tile-wrapper`, which will hold the code for all of our
- Loading branch information
0 parents
commit 7a570d3
Showing
2 changed files
with
141 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="description" content="Hone your skills! Beat Voldemort!"> | ||
| <!-- For mobile responsive behaviors --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <!-- Using a CSS reset like normalize.css is usually a good idea --> | ||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/css"> | ||
| <!-- This is what loads the CSS we have written --> | ||
| <link rel="stylesheet" href="style.css" type="text/css"> | ||
| <title>Galumphing Banderwoozles</title> | ||
| </head> | ||
| <body> | ||
| <!-- For gathering the arguments about board size from the user. --> | ||
| <form id="args"> | ||
| <input id="rows" name="rows" placeholder="Number of rows?"> | ||
| <input id="cols" name="cols" placeholder="Number of cols?"> | ||
| <button id="submit">Play!</button> | ||
| </form> | ||
| <!-- Show some numbers relating to the current board state. --> | ||
| <div class="center"> | ||
| <h1 id="reds" class="red">0</h1> | ||
| <h1 id="greens" class="green">0</h1> | ||
| <h1 id="blues" class="blue">0</h1> | ||
| </div> | ||
| <!-- Our actual board. Empty at first, then updated after the game starts. --> | ||
| <div class="center"> | ||
| <div id="tile-wrapper"></div> | ||
| </div> | ||
| <!-- Paste Google jQuery snippet here! --> | ||
|
|
||
| <!-- Loading JavaScript libraries should normally be done at the end of the | ||
| <body> tag. That way, loading the JavaScript doesn't "block" your page | ||
| from loading, but instead both can load at the same time. --> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| body { | ||
| background: #333; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .center { | ||
| text-align: center; | ||
| } | ||
|
|
||
| input { | ||
| border: 1px solid #333; | ||
| border-radius: 4px; | ||
| padding: 15px; | ||
| background: #222; | ||
| box-shadow: rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset; | ||
| font-size: 16px; | ||
| text-align: center; | ||
| color: white; | ||
| } | ||
|
|
||
| button { | ||
| border: none; | ||
| background: #ccc; | ||
| border-radius: 4px; | ||
| padding: 15px; | ||
| font-size: 16px; | ||
| color: #333; | ||
| box-shadow: rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px; | ||
| } | ||
|
|
||
| button:hover { | ||
| cursor: pointer; | ||
| background: #ddd; | ||
| } | ||
|
|
||
| button:focus, button:active { | ||
| outline: 0; | ||
| } | ||
|
|
||
| button:active, .tile.green:active { | ||
| box-shadow: rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset; | ||
| } | ||
|
|
||
| #args { | ||
| width: 564px; | ||
| margin: 20px auto 0 auto; | ||
| } | ||
|
|
||
| .blue, #blues { | ||
| background-color: #3c78d8; | ||
| } | ||
|
|
||
| .green, #greens { | ||
| background-color: #6aa84f; | ||
| } | ||
|
|
||
| .red, #reds { | ||
| background-color: #e06666; | ||
| } | ||
|
|
||
| .tile { | ||
| height: 60px; | ||
| width: 60px; | ||
| border: 2px solid #333; | ||
| border-radius: 4px; | ||
| display: inline-block; | ||
| margin: 4px; | ||
| } | ||
|
|
||
| .tile.green { | ||
| cursor: pointer; | ||
| box-shadow: rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 2px inset,rgba(0,0,0,0.4) 0 -2px 2px inset,rgba(0,0,0,0.4) 1px 1px 1px; | ||
| border: #333; | ||
| height: 64px; | ||
| width: 64px; | ||
| } | ||
|
|
||
| .tile.green:hover { | ||
| background-color: #79b45f; | ||
| } | ||
|
|
||
| h1 { | ||
| color: white; | ||
| display: inline-block; | ||
| padding: 5px 25px; | ||
| font-family: Menlo, monospace; | ||
| border-radius: 4px; | ||
| box-shadow: rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset; | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| #args { | ||
| margin: none; | ||
| width: auto; | ||
| } | ||
|
|
||
| button, input { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| margin: 2px auto; | ||
| } | ||
| } |