Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial conference room layout for 1080p

  • Loading branch information...
commit 26f37f96145431761d29454a6a05d61971fc2a10 0 parents
@heythisisnate authored
Showing with 329 additions and 0 deletions.
  1. +1 −0  .gitignore
  2. +224 −0 assets/css/rooms.css
  3. +104 −0 index.html
1  .gitignore
@@ -0,0 +1 @@
+.idea
224 assets/css/rooms.css
@@ -0,0 +1,224 @@
+* {
+ box-sizing: border-box;
+}
+
+html, body { min-height: 100%; }
+
+body {
+ background: #201d17;
+ color: #201d17;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+}
+
+#block {
+ padding: 73px;
+ height: 784px;
+}
+
+#north-half, #south-half {
+ height: 300px;
+ background: #e1e9e0;
+ border: 16px solid #d3ddd1;
+}
+
+#north-half {
+ height: 500px;
+ border-top: none;
+ margin-left: 20%;
+ margin-top: -16px;
+}
+
+.conference-room {
+ position: absolute;
+ padding: 12px;
+ border: 6px solid #8fae87;
+ background: #a2bc9a;
+}
+
+.conference-room .symbol {
+ font-size: 64px;
+ font-weight: bold;
+ line-height: 60px;
+}
+
+.conference-room .capacity {
+ position: absolute;
+ padding: 6px;
+ font-size: 24px;
+ line-height: 80%;
+ right: 0;
+ top: 0;
+}
+
+.conference-room .name {
+ font-size: 20px;
+ position: absolute;
+ bottom: 4px;
+}
+
+#c {
+ top: 90px;
+ left: 55%;
+ width: 6%;
+ height: 110px;
+}
+
+#ar {
+ left: 65%;
+ top: 360px;
+ width: 8%;
+ height: 110px;
+}
+
+#kr {
+ top: 360px;
+ left: 73%;
+ width: 8%;
+ height: 110px;
+}
+
+#pt {
+ top: 290px;
+ left: 23%;
+ width: 7%;
+ height: 130px;
+}
+#ti {
+ top: 420px;
+ left: 23%;
+ width: 7%;
+ height: 110px;
+}
+#ag {
+ top: 530px;
+ left: 23%;
+ width: 7%;
+ height: 110px;
+}
+#pd {
+ top: 640px;
+ left: 23%;
+ width: 7%;
+ height: 110px;
+}
+#au {
+ top: 750px;
+ left: 23%;
+ width: 7%;
+ height: 110px;
+}
+#zn {
+ top: 780px;
+ width: 6%;
+ height: 80px;
+ left: 30%;
+}
+
+#zn .symbol {
+ font-size: 48px;
+ line-height: 22px;
+ margin-left: -2px;
+}
+
+#hg {
+ top: 750px;
+ width: 7%;
+ height: 110px;
+ left: 36%;
+}
+
+#co {
+ top: 350px;
+ width: 7%;
+ height: 110px;
+ left: 37%;
+}
+
+#cd {
+ top: 460px;
+ width: 7%;
+ height: 110px;
+ left: 37%;
+}
+
+#ne {
+ top: 350px;
+ width: 7%;
+ height: 110px;
+ left: 44%;
+}
+
+#he {
+ top: 460px;
+ width: 7%;
+ height: 110px;
+ left: 44%;
+}
+
+#cu {
+ top: 570px;
+ width: 4%;
+ height: 90px;
+ left: 37%;
+}
+
+#ni {
+ top: 570px;
+ width: 3%;
+ height: 90px;
+ left: 41%;
+}
+
+#ni .capacity,
+#ni .name,
+#cu .capacity,
+#cu .name {
+ font-size: 18px;
+}
+
+#sn {
+ top: 570px;
+ width: 4%;
+ height: 90px;
+ left: 47%;
+}
+
+#ni .symbol,
+#fe .symbol {
+ font-size: 32px;
+ line-height: 16px;
+ margin: 20px 0 0 -2px;
+}
+
+#cu .symbol,
+#sn .symbol {
+ font-size: 42px;
+ line-height: 18px;
+ margin: 12px 0 0 -2px;
+}
+
+#ni, #fe, #sn, #cu {
+ padding: 6px;
+}
+
+#sn .capacity,
+#sn .name,
+#cu .capacity,
+#cu .name {
+ font-size: 16px;
+}
+
+#ni .capacity,
+#ni .name,
+#fe .capacity,
+#fe .name {
+ font-size: 13px;
+ margin-left: -2px;
+}
+
+#fe {
+ top: 570px;
+ width: 3%;
+ height: 90px;
+ left: 44%;
+}
104 index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Pivotal Rooms</title>
+ <link rel="stylesheet" href="assets/css/rooms.css" />
+ </head>
+ <body>
+ <div id="block">
+ <div id="south-half"></div>
+ <div id="north-half"></div>
+ <div id="c" class='conference-room'>
+ <div class="capacity">8</div>
+ <div class="symbol">C</div>
+ <div class="name">Carbon</div>
+ </div>
+ <div id="ar" class='conference-room'>
+ <div class="capacity">8</div>
+ <div class="symbol">Ar</div>
+ <div class="name">Argon</div>
+ </div>
+ <div id="kr" class='conference-room'>
+ <div class="capacity">8</div>
+ <div class="symbol">Kr</div>
+ <div class="name">Krypton</div>
+ </div>
+ <div id="pt" class='conference-room'>
+ <div class="capacity">18</div>
+ <div class="symbol">Pt</div>
+ <div class="name">Platinum</div>
+ </div>
+ <div id="ti" class='conference-room'>
+ <div class="capacity">12</div>
+ <div class="symbol">Ti</div>
+ <div class="name">Titanium</div>
+ </div>
+ <div id="ag" class='conference-room'>
+ <div class="capacity">12</div>
+ <div class="symbol">Ag</div>
+ <div class="name">Silver</div>
+ </div>
+ <div id="pd" class='conference-room'>
+ <div class="capacity">12</div>
+ <div class="symbol">Pd</div>
+ <div class="name">Palladium</div>
+ </div>
+ <div id="au" class='conference-room'>
+ <div class="capacity">12</div>
+ <div class="symbol">Au</div>
+ <div class="name">Gold</div>
+ </div>
+ <div id="zn" class='conference-room'>
+ <div class="capacity">2</div>
+ <div class="symbol">Zn</div>
+ <div class="name">Zinc</div>
+ </div>
+ <div id="hg" class='conference-room'>
+ <div class="capacity">8</div>
+ <div class="symbol">Hg</div>
+ <div class="name">Mercury</div>
+ </div>
+ <div id="co" class='conference-room'>
+ <div class="capacity">8</div>
+ <div class="symbol">Co</div>
+ <div class="name">Cobalt</div>
+ </div>
+ <div id="cd" class='conference-room'>
+ <div class="capacity">8</div>
+ <div class="symbol">Cd</div>
+ <div class="name">Cadmium</div>
+ </div>
+ <div id="ne" class='conference-room'>
+ <div class="capacity">6</div>
+ <div class="symbol">Ne</div>
+ <div class="name">Neon</div>
+ </div>
+ <div id="he" class='conference-room'>
+ <div class="capacity">6</div>
+ <div class="symbol">He</div>
+ <div class="name">Helium</div>
+ </div>
+ <div id="cu" class='conference-room'>
+ <div class="capacity">2</div>
+ <div class="symbol">Cu</div>
+ <div class="name">Copper</div>
+ </div>
+ <div id="ni" class='conference-room'>
+ <div class="capacity">1</div>
+ <div class="symbol">Ni</div>
+ <div class="name">Nickel</div>
+ </div>
+ <div id="fe" class='conference-room'>
+ <div class="capacity">1</div>
+ <div class="symbol">Fe</div>
+ <div class="name">Iron</div>
+ </div>
+ <div id="sn" class='conference-room'>
+ <div class="capacity">2</div>
+ <div class="symbol">Sn</div>
+ <div class="name">Tin</div>
+ </div>
+ </div>
+ </body>
+</html>
+
Please sign in to comment.
Something went wrong with that request. Please try again.