Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-25 19:29:32 +00:00
Code Issues Projects Releases Wiki Activity

Added structural divs.

Browse Source 
- Created control panel button with styling.
This commit is contained in:
Max Stevenson 2020-06-01 00:27:10 +01:00
parent 67596a2bf3
commit f153766c0e
2 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app.css
View File

@ -2,6 +2,11 @@
box-sizing: border-box;
}
body {
background: black;
margin: 0 100px;
}
.outer-container__one {
border-width: 1px;
border-style: solid;
@ -263,9 +268,31 @@
justify-items: stretch;
}
#system-icons {
grid-area: 4 / 2 / 5 / 3;
}
#control-panel {
display: flex;
flex-direction: column;
}
h1 {
max-width: fit-content;
background: #438149;
color: #ededed;
margin: 0 auto;
}
.button-display__button {
-moz-box-shadow: inset 0 0 5px #515151;
-webkit-box-shadow: inset 0 0 5px #515151;
box-shadow: inset 0 0 5px #515151;
width: fit-content;
}
.button-display__button__depressed {
color: #BFBFBF;
text-shadow: 1px 1px 1px #565656;
padding: 5px;
}

16
index.html
View File

@ -83,6 +83,22 @@
</div>
</div>
</div>
<div class="outer-container__one" id="control-panel">
<div class="outer-container__two">
<div class="control-pannel__button-display">
<div class="button-display__button">
<p class="button-display__button__depressed">VEHICLE</p>
</div>
</div>
<div class="control-pannel__video-screen"></div>
<div class="control-pannel__button-control"></div>
<div class="control-pannel__button-display"></div>
<div class="control-pannel__output-display"></div>
</div>
</div>
<div class="outer-container__one" id="system-icons">
<div class="outer-container__two"></div>
</div>
</div>
</div>
</div>