<!DOCTYPE html>
-<html lang="">
+<html lang="en">
<head>
<meta charset="utf-8">
<title>All Insects</title>
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="font.css">
</head>
<body>
- <h1>All Insects</h1>
+ <header>
+ <h1>All Insects</h1>
+ <h2>[Studios]</h2>
+ </header>
+ <main>
+ <section>
+ <h2>INT. DAY - WEBSITE (BACKGROUND)</h2>
+ <p>
+ All Insects Studio is a production company comprised of new talent with a focus on the strange and unusual. We aim to experiment with different forms of media - film, live TV, radio, multimedia ARGs - highlighting our own experiences and observations about the strangeness of the world.
+ </p>
+ <p>
+ Through endless toil and late nights fueled by only the pressing force of creativity, the members of All Insects endeavour to bring forth hallucinations into the world.
+ </p>
+ <ul>
+ <li>
+ <b>Finn Downton, Writer/Director.</b> Finn draws ideas from the depths and forms them into scripts full of meaning and strange imagery. He is a recent graduate of the University of Salford, and draws inspiration from his past, spinning explorations of his trauma with his current passions and obsessions. He enjoys the sensation of being torn from a barbed hook.
+ </li>
+ <img src="media/finn.jpg" id="finn" />
+ <li>
+ <b>Will Greenwood, Producer.</b> With experience in TV Production but on a break from the gallery, Will has a number of large projects (graduate and otherwise) under his belt. He enjoys Finns scripts and call-sheets.
+ </li>
+ <img src="media/will.jpg" id="will" />
+ <li>
+ <b>Tegan Blake-Barnard, Production Designer.</b> In the final year of her degree, Tegan draws inspiration from all things obscure and fantastical. Her background in oil painting allows her to approach every new project with an artistic flair. She enjoys playing god and breathing life into any messed up ideas Will and Finn can come up with.
+ </li>
+ <img src="media/tegan.jpg" id="tegan" />
+ </ul>
+ </section>
+ </main>
</body>
</html>
+/* Fimm Font import */
+
+@font-face {
+ font-family: "Fimm";
+ src:
+ url("fonts/Fimm.otf") format("opentype"),
+ url("fonts/Fimm.woff") format("woff"),
+ url("fonts/Fimm.ttf");
+}
+
+@font-face {
+ font-family: "TT2020";
+ src:
+ url("fonts/TT2020Base-Regular.woff2") format("woff2"),
+ url("fonts/TT2020Base-Regular.ttf");
+}
+
+/* Header styling */
+
+header {
+ font-size: 1.8em;
+ font-family: sans-serif;
+ padding: 50px 100px 20px 100px;
+}
+
+header > h1 {
+ margin-top: 0;
+ font-family: "Fimm", serif;
+}
+
+header > h2 {
+ margin: -1.8em 0 0 4em;
+ font-size: 1em;
+ transform: skew(-0.5rad);
+}
+
+/* Main section */
+
+main {
+ font-family: "TT2020", monospace;
+ padding: 20px 50px 50px 50px;
+ line-height: 1.2;
+}
+
+section {
+ width: min(100%, 650px);
+}
+
+@media (max-width: 1250px) {
+ /* Formatting for mobile */
+ img {
+ width: min(100%, 200px);
+ }
+}
+
+/* Variables for the photo arrangement to make it easier to tweak */
+:root {
+ --x: 750px;
+ --y: 220px;
+}
+
+@media (min-width: 1250px) {
+ /* Formatting for computer */
+
+ img {
+ width: 300px;
+ position: absolute;
+ }
+ #finn {
+ top: var(--y);
+ left: var(--x);
+ }
+ #will {
+ top: calc(var(--y) + 170px);
+ left: calc(var(--x) + 50px);
+ }
+ #tegan {
+ top: calc(var(--y) + 350px);
+ left: calc(var(--x) + 25px);
+ }
+}
projects / insects / commitdiff
