Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created June 6, 2017 18:53
Show Gist options
  • Save naeluh/a8f77dd23ab163f1f5e5daf38dfa6096 to your computer and use it in GitHub Desktop.
Save naeluh/a8f77dd23ab163f1f5e5daf38dfa6096 to your computer and use it in GitHub Desktop.
Download ZIP
Kelly - create new pages for each one and include all the html in the div with the id container
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>~</title>
<link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://www.kellyakashi.com/test/into/fancybox.css" />
<link rel="stylesheet" type="text/css" href="http://www.kellyakashi.com/test/into/main.css" />
</head>
<body>
<!-- fixed header -->
<table align="center" width="75%" border="0" id="menu">
<tr>
<td width="33%">KELLY AKASHI</td>
<td width="33%" align="center"><a href="/wrks.html">WORKS</a></td>
<td width="33%" align="right"><a href="/infos.html">CV/INFO</a></td>
</tr>
</table>
<!-- fixed header -->
<!-- include all body html in container -->
<div id="container" align="center">
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-BeingMe-large.jpg" data-fancybox="group" data-caption="<i>Being Me</i>; 2017; pigmented wax and glass">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-BeingMe-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-BeMe-large.jpg" data-fancybox="group" data-caption="<i>Be Me</i>; 2016; Stainless Steel">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-BeMe-smaller.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-Figure14-detail1.jpg" data-fancybox="group" data-caption="Detail from <i>Figure 14</i>; 2015; alabaster, glass, wax, wick">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-Figure14-detail1-550h.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-LifeForms-large.jpg" data-fancybox="group" data-caption="Life Forms; 2016; bronze and glass">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-LifeForms-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-StudioGlass-large.jpg" data-fancybox="group" data-caption="Glass in the studio - 2016">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-StudioGlass-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-AtRest-large.jpg" data-fancybox="group" data-caption="Detail of <i>At Rest</i>; 2016; bronze and rope">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-AtRest-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-BentWeeds-large.jpg" data-fancybox="group" data-caption="Life Form with Kabuto Influence; 2017; glass and rope">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-BentWeeds-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-WaysOfBeing-large.jpg" data-fancybox="group" data-caption="Ways of Being; 2016-17; brick, wax, wick, lead">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-WaysOfBeing-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-Untitled-large.jpg" data-fancybox="group" data-caption="From <i>Mirror Image</i>; 2014; wood, paint, bronze, silver gelatin">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-Untitled-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-HairyWeed-large.jpg" data-fancybox="group" data-caption="Hairy Weed; 2016; bronze and copper foil">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-HairyWeed-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-CandleFilter-large.jpg" data-fancybox="group" data-caption="Candel Filter SE; 2015; wax, wick, brass wire, alumnium, pillow">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-CandleFilter-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-WellHung-large.jpg" data-fancybox="group" data-caption="detail of <i>Well(-)Hung; 2017; bronze, rope, pigmented silicone">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-WellHung-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-DowntimeMachine2015-large.jpg" data-fancybox="group" data-caption="Downtime Machine; 2015; copper, wax, wick, bronze wire">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-DowntimeMachine2015-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-Figure14-detail-large.jpg" data-fancybox="group" data-caption="Detail of <i>Figure 14</i>; 2015; bronze, alabaster, nickel, resin, silver gelatin">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-Figure14-detail-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-Studio2013-large.jpg" data-fancybox="group" data-caption="Studio - 2013">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-Studio2013-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-StructureIV-large.jpg" data-fancybox="group" data-caption="Structure IV; 2015, bronze and glass">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-StructureIV-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-FingerFigure-large.jpg" data-fancybox="group" data-caption="<i>Finger Figure</i>; 2016; bronze, annodized wire, brass hoops; bronze wire">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-FingerFigure-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-Studio2014-large.jpg" data-fancybox="group" data-caption="Studio candle table - 2014">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-Studio2014-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-Tangle1-large.jpg" data-fancybox="group" data-caption="Detail of <i>At Rest</i>; 2016; bronze and rope">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-Tangle1-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-StructureII-large.jpg" data-fancybox="group" data-caption="Structure II; 2014; bronze">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-StructureII-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-LifeFormKabuto-large.jpg" data-fancybox="group" data-caption="Life Form with Kabuto Influence; 2017; rope and glass">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-LifeFormKabuto-small.jpg" alt="" />
</a>
<a href="http://www.kellyakashi.com/test/into/photographs/Akashi-EatMe-large.jpg" data-fancybox="group" data-caption="<i>Eat Me</i>; 2016; at the Hammer Museum for Made in LA; rope, bronze, pigmented silicone">
<img src="http://www.kellyakashi.com/test/into/photographs/Akashi-EatMe-small.jpg" alt="" />
</a>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://www.kellyakashi.com/test/into/jquery.fancybox.min.js"></script>
</body>
</html>
Raw
main.css
body,td,th {
font-family: "Nova Mono", sans-serif;
line-height: 25px;
size: 14px;
text-align:center;
}
a {
font-family: "Nova Mono", sans-serif;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #93C;
}
a:active {
text-decoration: none;
color: #93C;
}
#menu {
position: fixed;
background: #fff;
margin: 0 auto;
width: 100%;
top: 0;
left: 0;
height: 70px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment