new page: Crash Man

pages/crashman.html

@@ -0,0 +1,89 @@
+<style>
+    #crashman-page {
+        position: relative;
+        background: url("assets/img/crashman/crashman-bg.png") no-repeat center center;
+        background-size: cover;
+        overflow: hidden;
+    }
+
+    #snips {
+        height: 120px;
+        width: 620px;
+        background-color: rgb(209, 1, 209);
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+
+        position: absolute;
+        bottom: 30px;
+        left: -50px;
+        transform: rotate(-5deg);
+    }
+
+    #snips img {
+        flex: 1 1 0;
+        width: auto;
+        object-fit: contain;
+        max-height: 100%;
+    }
+
+    #title {
+        position: absolute;
+        top: 350px;
+        right: 8px;
+
+        font-family: "Heading Now";
+        font-size: 48px;
+
+        color: #fff;
+        text-shadow:
+            0px 10px 0 rgb(209, 1, 209),
+            0px 20px 0 black;
+    }
+
+    #text {
+        position: absolute;
+        top: 390px;
+        width: 100%;
+        height: auto;
+        background-color: rgba(62, 6, 62, 0.704);
+        font: 11.75pt/1.40 Tahoma, sans-serif;
+        padding: 24px;
+        color: #fff;
+        line-height: 1.9em;
+    }
+
+    .stretch {
+        font-weight: 800;
+        transform: scaleX(2.1);
+        transform-origin: left;
+        display: inline-block;
+    }
+
+</style>
+
+<div id="crashman-page" class="page-base">
+
+    <div id="text">
+        <p>
+            <b>Rusty Haight</b> is the human crash-test dummy. As director of the San Diego-based Collision Safety Institute, 
+            Rusty has experienced more than 950 violent vehicle crash tests at speeds of up to 54 mph, 
+            and taken <span class="stretch">140 air bags to the face.</span>
+        </p>
+        <p>
+            Haight has contributed several publications on the topic of automobile safety 
+            in <b>Collision Magazine</b> such as <em>Hyundai and Kia Crash Data: the Indispensable Compendium.</em>
+        </p>
+    </div>
+
+    <div id="snips">
+        <img src="assets/img/crashman/crashman-1.png" />
+        <img src="assets/img/crashman/crashman-2.png" />
+        <img src="assets/img/crashman/crashman-3.png" />
+    </div>
+
+    <div id="title" class="ytmnd-1">crash man</div>
+
+</div>