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

Finished screen interface.

Browse Source 
- Started working on room info components.
This commit is contained in:
Max Stevenson 2020-05-27 11:25:27 +01:00
parent 27a5a6cab2
commit 0acf32729b
2 changed files with 88 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app.css
View File

@ -141,20 +141,60 @@
border-radius: 1px;
border-top: 1px solid black;
border-left: none;
border-bottom: none;
border-right: none;
border-bottom: 0.5px solid #4B4B4B;
border-right: 0.5px solid #4B4B4B;
margin: 0px;
}
.island-container__text {
color: black;
width: fit-content;
background-color: #ffffff;
padding: 8px 48px 9px 48px;
background-color: white;
padding: 8px 48px 8px 48px;
font-style: italic;
margin: 0px;
}
#console-display {
width: fit-content;
}
#console-display > .outer-container__two {
padding: 5px 10px;
}
.room-info__container {
background-color: #E2EB57;
padding: 3px;
display: flex;
align-items: center;
}
.room-info__level-display {
width: fit-content;
}
.room-info__level-text {
color: white;
background: black;
width: fit-content;
padding: 1px 8px;
text-align: center;
margin-bottom: 5px;
margin-top: 5px;
}
.room-info__level-number {
display: flex;
align-items: center;
justify-content: center;
color: white;
background-color: black;
font-weight: bolder;
font-size: 50px;
margin: 5px 0 0 0;
}
h1 {
max-width: fit-content;
background: #438149;

62
index.html
View File

@ -8,26 +8,52 @@
<div class="outer-container__two">
<div class="inner-container__one">
<div class="inner-container__two">
<h1>SYSTEM SECURED</h1>
<p>Welcome to Jurassic Park</p>
<div class="console-display__wrapper">
<div class="screen-container__wrapper">
<div class="screen-container__outer">
<p class="screen-container__text">SCREEN</p>
<div class="outer-container__one" id="map-display">
<div class="outer-container__two">
<h1>SYSTEM SECURED</h1>
<div class="room-info__container">
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
<div class="room-info__title-container">
<h3></h3>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
</div>
<div class="triangle-wrapper">
<div class="outer-triangle__right"></div>
<div class="inner-triangle__right"></div>
</div>
<div class="buffer"></div>
</div>
<div class="island-container__wrapper">
<div class="triangle-wrapper" id="island-triangle">
<div class="outer-triangle__left"></div>
<div class="inner-triangle__left"></div>
</div>
<div class="island-container__outer">
<p class="island-container__text">Isla Nubar, Costa Rica</p>
</div>
<div class="outer-container__one" id="console-display">
<div class="outer-container__two">
<div class="inner-container__one">
<div class="inner-container__two">
<div class="console-display__wrapper">
<div class="screen-container__wrapper">
<div class="screen-container__outer">
<p class="screen-container__text">SCREEN</p>
</div>
<div class="triangle-wrapper">
<div class="outer-triangle__right"></div>
<div class="inner-triangle__right"></div>
</div>
<div class="buffer"></div>
</div>
<div class="island-container__wrapper">
<div class="triangle-wrapper" id="island-triangle">
<div class="outer-triangle__left"></div>
<div class="inner-triangle__left"></div>
</div>
<div class="island-container__outer">
<p class="island-container__text">
Isla Nubar, Costa Rica
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>