Skip to content

Commit fe5314d

Browse files
kungfukoalakungfukoala
committed
Prototype1.1
1 parent a6dc3c8 commit fe5314d

File tree

29 files changed

+958
-17
lines changed

29 files changed

+958
-17
lines changed

‎404.html

+5
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ <h1 class="logo">
6767

6868

6969

70+
<li><a href="/a-little-love/" class="inactive">&#9829; /</a>
71+
</li>
72+
73+
74+
7075
<li><a href="/story-behind-the-site/" class="inactive">Story Behind the Site /</a>
7176
</li>
7277

‎a-little-love/index.html

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>Love from Collaborators &#8211; Benjamin Kinzer A Discovery of My Methods for Design</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="Benjamin Kinzer - Creative Director and Designer who loves great ideas and making them real.">
9+
<meta name="author" content="Benjamin Kinzer">
10+
11+
<link rel="canonical" href="http://benjaminkinzer.com/a-little-love/">
12+
<link rel="apple-touch-icon" href="apple-touch-icon.png">
13+
14+
15+
<link rel="stylesheet" href="/assets/css/styles.css">
16+
17+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
18+
<script>window.jQuery || document.write('<script src="assets/javascript/vendor/jquery-1.11.2.min.js"><\/script>')</script>
19+
<script src="/assets/javascript/vendor/modernizr-2.8.3.min.js"></script>
20+
21+
<meta property="og:locale" content="en_US">
22+
<meta property="og:type" content="article">
23+
<meta property="og:title" content="Love from Collaborators">
24+
<meta property="og:description" content="Benjamin Kinzer - Creative Director and Designer who loves great ideas and making them real.">
25+
<meta property="og:url" content="http://benjaminkinzer.com/a-little-love/">
26+
<meta property="og:site_name" content="Benjamin Kinzer">
27+
28+
29+
30+
31+
32+
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
33+
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
34+
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
35+
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
36+
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
37+
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
38+
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
39+
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
40+
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
41+
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
42+
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
43+
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
44+
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
45+
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
46+
</head>
47+
<body class="a-little-love">
48+
<!--[if lt IE 8]>
49+
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
50+
<![endif]-->
51+
<div class="container">
52+
<header class="masthead">
53+
<nav class="navigation">
54+
<ul>
55+
<li>
56+
<h1 class="logo">
57+
<a href="/" class="inactive">
58+
Benjamin Kinzer /
59+
</a>
60+
</h1>
61+
</li>
62+
63+
64+
65+
<li><a href="/profile/" class="inactive">Profile /</a>
66+
</li>
67+
68+
69+
70+
<li><a href="/a-little-love/" class="">&#9829; /</a>
71+
</li>
72+
73+
74+
75+
<li><a href="/story-behind-the-site/" class="inactive">Story Behind the Site /</a>
76+
</li>
77+
78+
</ul>
79+
</nav>
80+
<div class="subtitle">
81+
Art Director and Designer
82+
</div>
83+
</header>
84+
<div class="page">
85+
<div class="side-note">
86+
87+
88+
</div>
89+
<article class="page-content">
90+
<p>“America’s first astronaut chimpanzee floats in space in some surprisingly cool beer packaging that ventures far beyond standard macho marketing.”
91+
<br /><strong>Hugh Hart</strong> <em>Wired Magazine</em> <a href="http://www.wired.com/underwire/2011/12/21st-amendment-art/">Chimp Astronaut Spaces Out in 21st Amendment Brewery’s ‘American Icon’ Artwork</a></p>
92+
93+
<p>“Collaborating with Ben is seamless. The level of detail, collaboration and design excellence that he brought to the project we worked on stood out to me as one of the better partnerships I’ve experienced in my career. His communication, respect for his co-partners and speedy turnarounds made building a product not only extremely satisfying professionally but also added that extra layer of magic that reminds us of why we work in teams. I’d definitely jump at the chance to work with him again and know that wherever he works, his coworkers and employers will find him to be a highly valued member of their company.”
94+
<br /><strong>Meg McDonald</strong> User Experience Designer at Aria Systems</p>
95+
96+
<p>“The true talents of Benjamin are his endless curiosity, his ability to empirically learn about almost any subject and his acute instinct to find beauty wherever it can be hidden. Undoubtedly, one of the best designers I have worked with.”
97+
<br /><strong>Audelino Moreno</strong> Senior Art Director at Shine United</p>
98+
99+
<p>“Ben is an inspiration to work with and I don’t throw that word around lightly. He is open-minded, optimistic, nimble-brained and responsive to good input, yet he also brings a perspective and talent that’s so extraordinary that sometimes you just want to get out of his way so he can do his thing. And somehow even as a busy working artist and dad, he keeps his finger on the pulse of all things contemporary and cool, from music and movies to fashion and food to the perfect illustrator for the assignment at hand. He’s also just a lovely human being.”
100+
<br /><strong>Angela Reid</strong> Creative Director and Writer at TBD Agency</p>
101+
102+
<p>“Ben is a gifted designer. His work is always imaginitive and original without compromising strategy or communication objectives.”
103+
<br /><strong>Kevin Smyth</strong> Account Executive at TBD Agency</p>
104+
105+
<p>“I have worked with Ben on numerous jobs on various accounts. Ben is one of the most talented designers that I have ever met. Very articulate, detail oriented and creative. A pleasure to work with.”
106+
<br /><strong>Steve Tague</strong> Photographer of Steve Tague Studios</p>
107+
108+
<p>“It’s always fun to watch Benjamin’s designs take shape. And, curious at the end to see the shape take its final form. Ben has a delightful way of devoting himself to find a creative design solution–– one only he could create.”
109+
<br /><strong>Jacqueline Smith</strong> Photo Stylist &amp; Designer at Jacqueline Smith &amp; Co.</p>
110+
111+
</article>
112+
</div>
113+
</div>
114+
<footer class="footer">
115+
<div class="newsletter">
116+
<form action="http://benjaminkinzer.createsend.com/t/r/s/bykykh/" method="post" id="subForm">
117+
<p>
118+
<input id="fieldName" name="cm-name" type="text" class="name" placeholder="Name">
119+
</p>
120+
<p>
121+
<input id="fieldEmail" name="cm-bykykh-bykykh" type="email" class="required email" placeholder="Email Address" required>
122+
</p>
123+
<p>
124+
<button type="submit" class="button">Subscribe</button>
125+
</p>
126+
</form>
127+
</div>
128+
<div class="contact">
129+
<small class="description">
130+
PHONE
131+
</small>
132+
<span class="phone-number">+1.541.610.8948</span>
133+
<br>
134+
<a class="email-address" href="mailto:iam@benjaminkinzer.com" alt="Contact Benjamin Kinzer">iam@benjaminkinzer.com</a>
135+
</div>
136+
<div class="legal">
137+
<small>
138+
Benjamin Kinzer &copy; 2015
139+
</small>
140+
</div>
141+
</footer>
142+
143+
144+
<script>
145+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
146+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
147+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
148+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
149+
ga('create', 'UA-857352-1', 'auto');
150+
ga('send', 'pageview');
151+
</script>
152+
153+
</body>
154+
</html>

‎assets/css/projects/2015-juju.css

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
/* Syntax Quick Reference
2+
--------------------------
3+
column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
4+
span($ratio: 1, $offset: 0)
5+
shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
6+
unshift()
7+
edit()
8+
center($max_width: 1410px, $pad: 0)
9+
stack($pad: 0, $align: false)
10+
unstack()
11+
align($direction: both)
12+
cf()
13+
*/
14+
/**
15+
* Grid settings.
16+
* All values are defaults and can therefore be easily overidden.
17+
*/
18+
/**
19+
* List functions courtesy of the wonderful folks at Team Sass.
20+
* Check out their awesome grid: Singularity.
21+
*/
22+
/**
23+
* Get percentage from a given ratio.
24+
* @param {number} [$ratio=1] - The column ratio of the element.
25+
* @returns {number} - The percentage value.
26+
*/
27+
/**
28+
* Work out the column widths based on the ratio and gutter sizes.
29+
* @param {number} [$ratios=1] - The column ratio of the element.
30+
* @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
31+
* @returns {list} $width $gutter - A list containing the with and gutter for the element.
32+
*/
33+
/**
34+
* Get the set layout direction for the project.
35+
* @returns {string} $direction - The layout direction.
36+
*/
37+
/**
38+
* Replace a specified list value with a new value (uses built in set-nth() if available)
39+
* @param {list} $list - The list of values you want to alter.
40+
* @param {number} $index - The index of the list item you want to replace.
41+
* @param {*} $value - The value you want to replace $index with.
42+
* @returns {list} $list - The list with the value replaced or removed.
43+
* @warn if an invalid index is supplied.
44+
*/
45+
/**
46+
* Reverse a list (progressively enhanced for Sass 3.3)
47+
* @param {list} $list - The list of values you want to reverse.
48+
* @returns {list} $result - The reversed list.
49+
*/
50+
/**
51+
* Get the opposite direction to a given value.
52+
* @param {string} $dir - The direction you want the opposite of.
53+
* @returns {string} - The opposite direction to $dir.
54+
* @warn if an incorrect string is provided.
55+
*/
56+
/**
57+
* Style an element as a column with a gutter.
58+
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
59+
* @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
60+
* @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
61+
* @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
62+
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
63+
*/
64+
/**
65+
* An alias for the column mixin.
66+
* @param [$args...] - All arguments get passed through to column().
67+
*/
68+
/**
69+
* Get the width of a column and nothing else.
70+
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
71+
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
72+
*/
73+
/**
74+
* Get the gutter size of a column and nothing else.
75+
* @param {number} [ratios=1] - A width relative to its container as a fraction.
76+
* @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
77+
*/
78+
/**
79+
* An alias for the column-width function.
80+
* @param [$args...] - All arguments get passed through to column().
81+
*/
82+
/**
83+
* An alias for the column-gutter function.
84+
* @param [$args...] - All arguments get passed through to column().
85+
*/
86+
/**
87+
* Style an element as a column without any gutters for a seamless row.
88+
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
89+
* @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
90+
* @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
91+
* @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
92+
*/
93+
/**
94+
* Reorder columns without altering the HTML.
95+
* @param {number} [$ratios=0] - Specify how far along you want the element to move.
96+
* @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
97+
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
98+
*/
99+
/**
100+
* Reset an element that has had shift() applied to it.
101+
*/
102+
/**
103+
* View the grid and its layers for easy debugging.
104+
* @param {string} [$color=black] - The background tint applied.
105+
* @param {boolean} [$important=false] - Whether to apply the style as !important.
106+
*/
107+
/**
108+
* Alias for edit().
109+
*/
110+
/**
111+
* Horizontally center an element.
112+
* @param {number} [$max-width=1410px] - The max width the element can be.
113+
* @param {number} [$pad=0] - Specify the element's left and right padding.
114+
*/
115+
/**
116+
* Uncenter an element.
117+
*/
118+
/**
119+
* Stack an element so that nothing is either side of it.
120+
* @param {number} [$pad=0] - Specify the element's left and right padding.
121+
* @param {boolean/string} [$align=false] - Specify the text align for the element.
122+
*/
123+
/**
124+
* Unstack an element.
125+
*/
126+
/**
127+
* Center an element on either or both axes.
128+
* @requires A parent container with relative positioning.
129+
* @param {string} [$direction=both] - Specify which axes to center the element on.
130+
*/
131+
/**
132+
* Apply a clearfix to an element.
133+
*/
134+
.project-feature-image, .juju-temp {
135+
float: left;
136+
clear: none;
137+
width: 100%;
138+
margin-left: 0%;
139+
margin-right: 3%;
140+
background: url(/images/juju/juju-icon@3x.png) no-repeat 0px 0px;
141+
background-position: bottom;
142+
background-size: 108%;
143+
height: 225px; }
144+
.project-feature-image:last-child, .juju-temp:last-child {
145+
margin-right: 0%; }
146+
@media screen and (min-width: 480px) {
147+
.project-feature-image, .juju-temp {
148+
background-position: center;
149+
background-size: auto;
150+
height: 650px; } }
151+
152+
.juju-temp {
153+
height: 205px;
154+
background: url(/images/juju/juju-temp.png) no-repeat 0px 0px;
155+
background-position: center;
156+
background-size: 108%; }
157+
@media screen and (min-width: 480px) {
158+
.juju-temp {
159+
background-size: 98%;
160+
height: 1000px; } }

‎assets/css/styles.css

+19-10
Original file line numberDiff line numberDiff line change
@@ -690,10 +690,7 @@ body {
690690

691691
.footer {
692692
margin-top: 5.4em;
693-
color: white;
694-
background-color: black; }
695-
.footer a {
696-
color: white; }
693+
color: #000000; }
697694
.footer .contact, .footer .newsletter, .footer .legal {
698695
float: left;
699696
clear: none;
@@ -717,8 +714,8 @@ body {
717714
padding-top: 0.675em; }
718715
.footer .newsletter .button {
719716
margin-top: 1.35em;
720-
background-color: black;
721-
border: 2px solid white; }
717+
background-color: white;
718+
border: 2px solid black; }
722719
.footer .contact .description {
723720
font-weight: 800; }
724721
.footer .legal {
@@ -756,7 +753,14 @@ body {
756753
.profile {
757754
background-color: black;
758755
color: white; }
759-
.profile p {
756+
.profile .footer {
757+
color: #FFFFFF; }
758+
.profile .footer .button {
759+
margin-top: 1.35em;
760+
background-color: black;
761+
border: 2px solid white;
762+
color: #FFFFFF; }
763+
.profile .who p {
760764
font-size: 2em; }
761765
.profile a {
762766
color: white;
@@ -833,8 +837,13 @@ body {
833837
clear: both; } }
834838
.home .post-header {
835839
position: absolute;
836-
top: 10px;
840+
margin: 0px;
841+
right: 0px;
837842
padding-left: 1.7em; }
838843
.home .post-title {
839-
font-size: 1.2em;
840-
font-weight: 100; }
844+
margin: 0px;
845+
padding: 6px 10px;
846+
font-size: 0.8em;
847+
text-transform: uppercase;
848+
color: white;
849+
background-color: black; }

‎images/juju/juju-icon-thumbnail.png

147 KB
Loading

‎images/juju/juju-icon@3x.png

1.6 MB
Loading

‎images/juju/juju-temp.png

1.16 MB
Loading

0 commit comments

Comments
 (0)