90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<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>
|