mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2025-01-24 04:30:18 +00:00
Working on system secure border.
This commit is contained in:
parent
7bc59a02a9
commit
c8b790990f
47
app.css
47
app.css
@ -141,8 +141,8 @@
|
||||
border-radius: 1px;
|
||||
border-top: 1px solid black;
|
||||
border-left: none;
|
||||
border-bottom: 0.5px solid #4B4B4B;
|
||||
border-right: 0.5px solid #4B4B4B;
|
||||
border-bottom: 0.5px solid #4b4b4b;
|
||||
border-right: 0.5px solid #4b4b4b;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
}
|
||||
|
||||
.room-info__container {
|
||||
background-color: #E2EB57;
|
||||
background-color: #e2eb57;
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
@ -171,7 +171,6 @@
|
||||
|
||||
.room-info__level-display {
|
||||
width: fit-content;
|
||||
|
||||
}
|
||||
|
||||
.room-info__level-text {
|
||||
@ -184,7 +183,7 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.room-info__level-number {
|
||||
.room-info__level-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -207,7 +206,8 @@
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 5px 8px;
|
||||
padding: 4px 0;
|
||||
padding: 8px 0;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.room-info__subtitle {
|
||||
@ -215,13 +215,46 @@
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
padding: 2px 36px;
|
||||
padding: 4px 36px;
|
||||
margin: 5px 8px 0px 8px;
|
||||
}
|
||||
|
||||
.map-display__container {
|
||||
width: 500px;
|
||||
border-bottom: 8px solid #438149;
|
||||
border-top: 8px solid #438149;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.map-display__system-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #448149;
|
||||
}
|
||||
|
||||
.map-display__center-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#sys-one {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#sys-four {
|
||||
writing-mode: tb-rl;
|
||||
transform: rotate(-180deg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: fit-content;
|
||||
background: #438149;
|
||||
color: #ededed;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
29
index.html
29
index.html
@ -10,7 +10,30 @@
|
||||
<div class="inner-container__two">
|
||||
<div class="outer-container__one" id="map-display">
|
||||
<div class="outer-container__two">
|
||||
<h1>SYSTEM SECURED</h1>
|
||||
<div class="map-display__container">
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-one" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
<div class="map-display__center-section">
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-two" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-three" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-display__system-wrapper">
|
||||
<h1 id="sys-four" class="map-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-info__container">
|
||||
<div class="room-info__level-display">
|
||||
<p class="room-info__level-text">LEVEL</p>
|
||||
@ -18,7 +41,9 @@
|
||||
</div>
|
||||
<div class="room-info__title-container">
|
||||
<h3 class="room-info__title">Control Room / Plan View</h3>
|
||||
<p class="room-info__subtitle">drawing number - 305pcoffintunaphooter</p>
|
||||
<p class="room-info__subtitle">
|
||||
drawing number - 305pcoffintunaphooter
|
||||
</p>
|
||||
</div>
|
||||
<div class="room-info__level-display">
|
||||
<p class="room-info__level-text">LEVEL</p>
|
||||
|
Loading…
x
Reference in New Issue
Block a user