Skip to content

Instantly share code, notes, and snippets.

@adamki

adamki/index.css

Last active January 13, 2020 20:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamki/240c2df899d7f11fa86b1ec89ec56195 to your computer and use it in GitHub Desktop.
Save adamki/240c2df899d7f11fa86b1ec89ec56195 to your computer and use it in GitHub Desktop.
Download ZIP
heist
Raw
index.css
body {
padding: 0;
margin: 0;
overflow: hidden; /* Don't display any scroll bars */
}
#app {
height: 100vh;
width: 100%;
text-align: center;
margin: auto;
font-family: 'Orbitron';
color: #00FF00;
}
.flex {
display: flex;
height: 100%;
}
.left {
height: 100%;
}
.bt {
border-top: 3px solid grey;
}
.bb {
border-bottom: 3px solid grey;
}
.bl {
border-left: 3px solid grey;
}
.br {
border-right: 3px solid grey;
}
.timerText { font-size: 5rem; }
#gif {
background: url("https://www.microage.ca/st-johns/wp-content/uploads/sites/21/2019/07/managed-it-services-it-solutions-banner.png");
height: 100%;
width: 100%;
}
.right {
flex-direction: column;
height: 100%;
}
.clue-text {
align-items: center;
height: 10rem;
font-size: 5rem;
font-weight: 800;
width: 100%;
}
.marquee {
font-size: 5rem;
font-weight: 800;
}
/* background: url("https://www.microage.ca/st-johns/wp-content/uploads/sites/21/2019/07/managed-it-services-it-solutions-banner.png"); */
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Put your own custom styles in here -->
<link rel="stylesheet" href="./index.css" media="all">
<!-- Include Webfont to style text in custom font -->
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- The "app" element contains any content that receives dynamic updates -->
<div id="app">
<div class="flex">
<div class="left br" style="width: 33%">
<div class="flex clue-text bb" style="justify-content: center">
<h3 class="timerText">12:12:49</h3>
</div>
<div id="guard-progress">
<h1>guard progress</h1>
<img :src="msg.guardProgress">
</div>
</div>
<div class="flex right" style="width: 67%">
<div class="flex clue-text bb">
<marquee><h3>Here's a clue</h3></marquee>
</div>
<div class="flex">
<div class="left br" style="width: 50%">
<div>
<h1>Encryption Software Password</h1>
</div>
<div id="gif">
</div>
</div>
<div class="right" style="width: 50%">
<h1>Motion Detector Status</h1>
</div>
</div>
</div>
</div>
</div>
<!-- uibuilder script libraries -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>
<script src="./uibuilderfe.min.js"></script>
<!-- Put any additional custom code in here -->
<script src="./index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment