Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
1. My tribute page should have an element with corresponding id="main", which contains all other elements. ‣
2. I should see an element with corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug"). ‣
3. I should see a <div> element with corresponding id="img-div". 
4. Within the "img-div" element, I should see an <img> element with a corresponding id="image". ‣
5. Within the "img-div" element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div". ‣
6. I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page. ‣
7. I should see an <a> element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to "_blank" in order for your link to open in a new tab (i.e. target="_blank"). ‣
8. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size. ‣
9. The <img> element should be centered within its parent element.
-->
<!DOCTYPE html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<style>
html {	
	background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/blizzard.png');
}
#title {
	display: none;
}
#main {
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem;
	width: 640px;
	font-family: 'Didact Gothic', sans-serif;
}
#title-img {
	margin: auto;
	overflow: hidden;
	margin-bottom: 16rem;
}
#img-title {
	width: 740px; 
	height: auto;
	position: absolute;
	left: 50%;
	margin-left: -370px;
}
#image {
	max-width: 640px;
	height: auto;
	margin: auto;
}
#img-caption {
	text-align: center;
}
</style>
</head>

<div id="main">
<div id="title">Herb Lubalin</div>
<div id="title-img">
	<img id="img-title" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/8e784b3549089.5630e14e83824.png">
</div>

<div id="img-div">
	<img id="image" src="http://www.aiga.org/globalassets/migrated-images/uploadedimages/aiga/content/inspiration/aiga_medalist/md_lubalin_light_portrait.jpg">
<div id="img-caption">
	<div id="img-caption">Herb Lubalin</div>
</div>
</div>

<div id="tribute-info">
<p>Herb Lubalin was two years old when AIGA awarded its first
medal to the individual who, in the judgment of its board of
directors and its membership, had distinguished himself in, and
contributed significantly to, the field of graphic arts. There has
been a lot of history between that moment and the evening in
January 1981, when members, directors, friends and admirers
gathered in the Great Hall of the New York Chamber of Commerce
building to be with Lubalin as he accepted the 62nd AIGA medal.</p><p>A lot of that history, at least in the graphic arts, had been
written—and designed—by Herb Lubalin. And Lubalin has been
recognized, awarded, written about, imitated and emulated for it.
There's hardly anyone better known and more highly regarded in the
business. Lubalin's receipt of AIGA's highest honor was never a
matter of “if,” only “when.”</p><p>Coming to terms with Herb Lubalin's work takes you quickly to
the heart of a very big subject: the theory of meaning and how
meaning is communicated—how an idea is moved, full and resonant,
from one mind to another. Not many have been able to do that better
than Lubalin.</p><p>Typography is the key. It is where you start with Lubalin and
what you eventually come back to. However, “typography” is not a
word Lubalin thought should be applied to his work. “What I do is
not really typography, which I think of as an essentially
mechanical means of putting characters down on a page. It's
designing with letters. Aaron Burns called it, 'typographics,' and
since you've got to put a name on things to make them memorable,
'typographics' is as good a name for what I do as any.”</p><p>Lubalin was a brilliant, iconoclastic advertising art
director—in the 1940s with Reiss Advertising and then for twenty
years with Sudler and Hennessey. Recipient of medal after medal,
award after award, and in 1962 named Art Director of the Year by
the National Society of Art Directors, he has also been a
publication designer of great originality and distinction. He
designed startling <em>Eros</em> in the early 60s, intellectually
and visually astringent <em>Fact</em> in the mid-60s, lush and
luscious <em>Avant Garde</em> late in the same decade, and founded
<em>U &amp; lc</em> in 1973 and saw it flourish into the 80s.</p><p>But it is Lubalin and his typographics—words, letters, pieces of
letters, additions to letters, connections and combinations, and
virtuoso manipulation of letters—to which all must return. The
“typographic impresario of our time,” Dorfsman called him, a man
who “profoundly influenced and changed our vision and perception of
letter forms, words and language.”</p><p>Lubalin at his best delivers the shock of meaning through his
typography-based design. <em>Avant Garde</em> literally moves
ahead. The <em>Sarah Vaughn Sings</em> poster does just that.
<em>Ice Capades</em> skates. There is a child in <em>Mother &amp;
Child,</em> and a family in <em>Families.</em> If words are a way
of making meaning, then the shapes of their letters give voice,
color, character and individuality to that meaning.</p><p>The shock of meaning, in Lubalin's artful hands, delivers
delight, as well, delight that flows from sight and insight.
“Lubalin,” praises Dorfsman, “used his extraordinary talent and
taste to transform words and meaning from a medium to an
inextricable part of the message? and in so doing, raised
typography from the level of craft to art.” And it is in his paper
<em>U &amp; lc</em> that a lot of threads in Lubalin's life and
career get pulled together. It is publication dedicated to the
joyful, riotous exploration of the complex relationships between
words, letters, type and meaning—an ebullient advertisement for
himself as art director, editor, publisher and purveyor of the
shock and delight of meaning through typography and design. “Right
now,” he said, “I have what every designer wants and few have the
good fortune to achieve. I'm my own client. Nobody tells me what to
do.” And 170,000 subscribers which, with a conservative pass-along
estimate, yields 400,000 readers, benefit.</p><p>Herb Lubalin's unique contribution to our times goes well beyond
design in much the same way that his typographic innovations go
beyond the twenty-six letters, ten numerals and the handful of
punctuation marks that comprise our visual, literal vocabulary.
Lubalin's imagination, sight and insight have erased boundaries and
pushed back frontiers.</p><p>As an agency art director, he pushed beyond the established norm
of copy-driven advertising and added a new dimension. As a
publication designer, he pushed beyond the boundaries that
constrained existing magazines—both in form and content. In fact,
some said he had pushed beyond the boundaries of “good taste,”
though in retrospect that work is more notable today for its
graphic excellence than for its purported prurience. Lubalin helped
push back the boundaries of the impact and perception of
design—from an ill-defined, narrowly recognized craft to a powerful
communication medium that could put big, important ideas smack in
the public eye.</p><p>And finally, he pushed back what were believed to be the
boundaries of design for entire generations of designers who were
to follow. For such a quiet, gentle person to have accomplished so
much is testimony indeed to the power of ideas in the hands of a
master.</p>
</div>

<a id="tribute-link" target="_blank" href="http://www.aiga.org/medalist-herblubalin"><em>Copyright 1981 by AIGA.</em></a>

</div>


              
            
!

CSS

              
                
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

// BE SURE TO SELECT THE CORRECT TEST SUITE FROM THE DROPDOWN MENU!!! :-) 

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console