Skip to content

Prototype1.1 #8

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 1 commit into from
May 26, 2015
Merged

Prototype1.1 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,11 @@ <h1 class="logo">



<li><a href="/a-little-love/" class="inactive">&#9829; /</a>
</li>



<li><a href="/story-behind-the-site/" class="inactive">Story Behind the Site /</a>
</li>

Expand Down
154 changes: 154 additions & 0 deletions a-little-love/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Love from Collaborators &#8211; Benjamin Kinzer A Discovery of My Methods for Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Benjamin Kinzer - Creative Director and Designer who loves great ideas and making them real.">
<meta name="author" content="Benjamin Kinzer">

<link rel="canonical" href="http://benjaminkinzer.com/a-little-love/">
<link rel="apple-touch-icon" href="apple-touch-icon.png">


<link rel="stylesheet" href="/assets/css/styles.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/javascript/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="/assets/javascript/vendor/modernizr-2.8.3.min.js"></script>

<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="Love from Collaborators">
<meta property="og:description" content="Benjamin Kinzer - Creative Director and Designer who loves great ideas and making them real.">
<meta property="og:url" content="http://benjaminkinzer.com/a-little-love/">
<meta property="og:site_name" content="Benjamin Kinzer">





<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
</head>
<body class="a-little-love">
<!--[if lt IE 8]>
<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>
<![endif]-->
<div class="container">
<header class="masthead">
<nav class="navigation">
<ul>
<li>
<h1 class="logo">
<a href="/" class="inactive">
Benjamin Kinzer /
</a>
</h1>
</li>



<li><a href="/profile/" class="inactive">Profile /</a>
</li>



<li><a href="/a-little-love/" class="">&#9829; /</a>
</li>



<li><a href="/story-behind-the-site/" class="inactive">Story Behind the Site /</a>
</li>

</ul>
</nav>
<div class="subtitle">
Art Director and Designer
</div>
</header>
<div class="page">
<div class="side-note">


</div>
<article class="page-content">
<p>“America’s first astronaut chimpanzee floats in space in some surprisingly cool beer packaging that ventures far beyond standard macho marketing.”
<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>

<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.”
<br /><strong>Meg McDonald</strong> User Experience Designer at Aria Systems</p>

<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.”
<br /><strong>Audelino Moreno</strong> Senior Art Director at Shine United</p>

<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.”
<br /><strong>Angela Reid</strong> Creative Director and Writer at TBD Agency</p>

<p>“Ben is a gifted designer. His work is always imaginitive and original without compromising strategy or communication objectives.”
<br /><strong>Kevin Smyth</strong> Account Executive at TBD Agency</p>

<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.”
<br /><strong>Steve Tague</strong> Photographer of Steve Tague Studios</p>

<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.”
<br /><strong>Jacqueline Smith</strong> Photo Stylist &amp; Designer at Jacqueline Smith &amp; Co.</p>

</article>
</div>
</div>
<footer class="footer">
<div class="newsletter">
<form action="http://benjaminkinzer.createsend.com/t/r/s/bykykh/" method="post" id="subForm">
<p>
<input id="fieldName" name="cm-name" type="text" class="name" placeholder="Name">
</p>
<p>
<input id="fieldEmail" name="cm-bykykh-bykykh" type="email" class="required email" placeholder="Email Address" required>
</p>
<p>
<button type="submit" class="button">Subscribe</button>
</p>
</form>
</div>
<div class="contact">
<small class="description">
PHONE
</small>
<span class="phone-number">+1.541.610.8948</span>
<br>
<a class="email-address" href="mailto:iam@benjaminkinzer.com" alt="Contact Benjamin Kinzer">iam@benjaminkinzer.com</a>
</div>
<div class="legal">
<small>
Benjamin Kinzer &copy; 2015
</small>
</div>
</footer>


<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-857352-1', 'auto');
ga('send', 'pageview');
</script>

</body>
</html>
160 changes: 160 additions & 0 deletions assets/css/projects/2015-juju.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
/* Syntax Quick Reference
--------------------------
column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
span($ratio: 1, $offset: 0)
shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
unshift()
edit()
center($max_width: 1410px, $pad: 0)
stack($pad: 0, $align: false)
unstack()
align($direction: both)
cf()
*/
/**
* Grid settings.
* All values are defaults and can therefore be easily overidden.
*/
/**
* List functions courtesy of the wonderful folks at Team Sass.
* Check out their awesome grid: Singularity.
*/
/**
* Get percentage from a given ratio.
* @param {number} [$ratio=1] - The column ratio of the element.
* @returns {number} - The percentage value.
*/
/**
* Work out the column widths based on the ratio and gutter sizes.
* @param {number} [$ratios=1] - The column ratio of the element.
* @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
* @returns {list} $width $gutter - A list containing the with and gutter for the element.
*/
/**
* Get the set layout direction for the project.
* @returns {string} $direction - The layout direction.
*/
/**
* Replace a specified list value with a new value (uses built in set-nth() if available)
* @param {list} $list - The list of values you want to alter.
* @param {number} $index - The index of the list item you want to replace.
* @param {*} $value - The value you want to replace $index with.
* @returns {list} $list - The list with the value replaced or removed.
* @warn if an invalid index is supplied.
*/
/**
* Reverse a list (progressively enhanced for Sass 3.3)
* @param {list} $list - The list of values you want to reverse.
* @returns {list} $result - The reversed list.
*/
/**
* Get the opposite direction to a given value.
* @param {string} $dir - The direction you want the opposite of.
* @returns {string} - The opposite direction to $dir.
* @warn if an incorrect string is provided.
*/
/**
* Style an element as a column with a gutter.
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
* @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
* @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
* @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
*/
/**
* An alias for the column mixin.
* @param [$args...] - All arguments get passed through to column().
*/
/**
* Get the width of a column and nothing else.
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
*/
/**
* Get the gutter size of a column and nothing else.
* @param {number} [ratios=1] - A width relative to its container as a fraction.
* @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
*/
/**
* An alias for the column-width function.
* @param [$args...] - All arguments get passed through to column().
*/
/**
* An alias for the column-gutter function.
* @param [$args...] - All arguments get passed through to column().
*/
/**
* Style an element as a column without any gutters for a seamless row.
* @param {number} [$ratios=1] - A width relative to its container as a fraction.
* @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
* @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
* @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
*/
/**
* Reorder columns without altering the HTML.
* @param {number} [$ratios=0] - Specify how far along you want the element to move.
* @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
* @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
*/
/**
* Reset an element that has had shift() applied to it.
*/
/**
* View the grid and its layers for easy debugging.
* @param {string} [$color=black] - The background tint applied.
* @param {boolean} [$important=false] - Whether to apply the style as !important.
*/
/**
* Alias for edit().
*/
/**
* Horizontally center an element.
* @param {number} [$max-width=1410px] - The max width the element can be.
* @param {number} [$pad=0] - Specify the element's left and right padding.
*/
/**
* Uncenter an element.
*/
/**
* Stack an element so that nothing is either side of it.
* @param {number} [$pad=0] - Specify the element's left and right padding.
* @param {boolean/string} [$align=false] - Specify the text align for the element.
*/
/**
* Unstack an element.
*/
/**
* Center an element on either or both axes.
* @requires A parent container with relative positioning.
* @param {string} [$direction=both] - Specify which axes to center the element on.
*/
/**
* Apply a clearfix to an element.
*/
.project-feature-image, .juju-temp {
float: left;
clear: none;
width: 100%;
margin-left: 0%;
margin-right: 3%;
background: url(/images/juju/juju-icon@3x.png) no-repeat 0px 0px;
background-position: bottom;
background-size: 108%;
height: 225px; }
.project-feature-image:last-child, .juju-temp:last-child {
margin-right: 0%; }
@media screen and (min-width: 480px) {
.project-feature-image, .juju-temp {
background-position: center;
background-size: auto;
height: 650px; } }

.juju-temp {
height: 205px;
background: url(/images/juju/juju-temp.png) no-repeat 0px 0px;
background-position: center;
background-size: 108%; }
@media screen and (min-width: 480px) {
.juju-temp {
background-size: 98%;
height: 1000px; } }
29 changes: 19 additions & 10 deletions assets/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -690,10 +690,7 @@ body {

.footer {
margin-top: 5.4em;
color: white;
background-color: black; }
.footer a {
color: white; }
color: #000000; }
.footer .contact, .footer .newsletter, .footer .legal {
float: left;
clear: none;
Expand All @@ -717,8 +714,8 @@ body {
padding-top: 0.675em; }
.footer .newsletter .button {
margin-top: 1.35em;
background-color: black;
border: 2px solid white; }
background-color: white;
border: 2px solid black; }
.footer .contact .description {
font-weight: 800; }
.footer .legal {
Expand Down Expand Up @@ -756,7 +753,14 @@ body {
.profile {
background-color: black;
color: white; }
.profile p {
.profile .footer {
color: #FFFFFF; }
.profile .footer .button {
margin-top: 1.35em;
background-color: black;
border: 2px solid white;
color: #FFFFFF; }
.profile .who p {
font-size: 2em; }
.profile a {
color: white;
Expand Down Expand Up @@ -833,8 +837,13 @@ body {
clear: both; } }
.home .post-header {
position: absolute;
top: 10px;
margin: 0px;
right: 0px;
padding-left: 1.7em; }
.home .post-title {
font-size: 1.2em;
font-weight: 100; }
margin: 0px;
padding: 6px 10px;
font-size: 0.8em;
text-transform: uppercase;
color: white;
background-color: black; }
Binary file added images/juju/juju-icon-thumbnail.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/juju/juju-icon@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/juju/juju-temp.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading