Week 2 - Pantone Color of the Year
For this week’s assignment we were tasked to create a webpage based off of a work of art that moved us when seeing it. I loved the exhibition “Simone Fattal: Works and Days” at MoMA PS1 because of the use of geometric architectural interventions that also worked as pedestals.
I made an illustrator drawing to represent these structures, thinking about the least amount of visual information I could provide to that could express architectural space.
I decided to put each of the Pantone Colors of the Year on the “pedestals”. Each color links to that color in the Cooper Hewitt Open Access Archive.
See site here: https://lizzychiappini.github.io/
HTML/CSS Code:
<!doctype html>
<html>
<head>
<title>NewWork</title>
<link rel="shortcut icon" href="2021.png">
<style>
body{
position: absolute;
background-color: #EEECDD;
}
.BackgroundImage {
position: fixed;
height: 720px;
top: -40px;
left: 0px;
}
#text {
position: absolute;
color:black;
border: 2px dotted black;
width: 450px;
left: 720px;
top: 290px;
font-size: 12px;
font-family: courier;
}
#twothousand {
position: fixed;
top: 24px;
right: 400px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandone {
position: fixed;
top: 24px;
right: 300px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandtwo {
position: fixed;
top: 24px;
right: 200px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandthree {
position: fixed;
top: 24px;
right: 100px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandfour {
position: fixed;
top: 24px;
right: 0px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandfive {
position: fixed;
top: 78px;
right: 430px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandsix {
position: fixed;
top: 78px;
right: 330px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandseven {
position: fixed;
top: 78px;
right: 230px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandeight {
position: fixed;
top: 78px;
right: 130px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandnine {
position: fixed;
top: 78px;
right: 30px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandten {
position: fixed;
top: 134px;
right: 460px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandeleven {
position: fixed;
top: 134px;
right: 360px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandtwelve {
position: fixed;
top: 134px;
right: 260px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandthirteen {
position: fixed;
top: 134px;
right: 160px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandforteen {
position: fixed;
top: 134px;
right: 60px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandfifteen {
position: fixed;
top: 190px;
right: 500px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandsixteen {
position: fixed;
top: 190px;
right: 400px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandseventeen {
position: fixed;
top: 190px;
right: 300px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandeighteen {
position: fixed;
top: 190px;
right: 200px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandnineteen {
position: fixed;
top: 30px;
right: 770px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandtwenty {
position: fixed;
top: 30px;
right: 915px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#twothousandtwentyone {
position: fixed;
top: 30px;
right: 1060px;
width: 70px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
#milkglass {
position: fixed;
top: 280px;
left: 0px;
width: 485px;
opacity: 1;
border-radius: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id=text><b>Pantone Colors of the Year 2000-2021</b> <br> <br>Since 2000, the Pantone Color Institute has declared a particular color "Color of the Year". Twice a year the company hosts, in a European capital, a secret meeting of representatives from various nations' color standards groups. After two days of presentations and debate, they choose a color for the following year; for example, the color for summer 2013 was chosen in London in the spring of 2012. The color purportedly connects with the zeitgeist; for example, the press release declaring Honeysuckle the color of 2011 said "In times of stress, we need something to lift our spirits. Honeysuckle is a captivating, stimulating color that gets the adrenaline going – perfect to ward off the blues."[22] The results of the meeting are published in Pantone View, which fashion designers, florists, and many other consumer-oriented companies purchase to help guide their designs and planning for future products.[20] Pantone added two colors for 2021.In 2012, the color of the year, Tangerine Tango, was used to create a makeup line, in partnership with Sephora. The product line, named Sephora + Pantone Universe collection, features Tangerine Tango–embellished false lashes, nail lacquers, cream, glitters, and high-pigment lip glosses.Pantone has said that color "has always been an integral part of how a culture expresses the attitudes and emotions of the times.
<br><br> Pantone began in New Jersey in the 1950s as the commercial printing company of brothers Mervin and Jesse Levine, M & J Levine Advertising. In 1956, its founders, both advertising executives, hired recent Hofstra University graduate Lawrence Herbert as a part-time employee. Herbert used his chemistry knowledge to systematize and simplify the company's stock of pigments and production of colored inks; by 1962, Herbert was running the ink and printing division at a profit, while the commercial-display division was US$50,000 in debt; he subsequently purchased the company's technological assets from the Levine Brothers for US$50,000 (equivalent to $420,000 in 2019) and renamed them "Pantone". The company's primary products include the Pantone Guides, which consist of a large number of small (approximately 6×2 inches or 15×5 cm) thin cardboard sheets, printed on one side with a series of related color swatches and then bound into a small "fan deck". For instance, a particular "page" might contain a number of yellows of varying tints. The idea behind the PMS is to allow designers to "color match" specific colors when a design enters production stage, regardless of the equipment used to produce the color. This system has been widely adopted by graphic designers and reproduction and printing houses. Pantone recommends that PMS Color Guides be purchased annually, as their inks become yellowish over time. Color variance also occurs within editions based on the paper stock used (coated, matte or uncoated), while interedition color variance occurs when there are changes to the specific paper stock used.</div>
<img src="roomwithaview.png" class="BackgroundImage">
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=Cerulean&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousand src="2000.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=Fuchsia&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandone src="2001.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23BF1932&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandtwo src="2002.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%237BC4C4&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandthree src="2003.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23E2583E&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandfour src="2004.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%2353B0AE&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandfive src="2005.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23DECDBE&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandsix src="2006.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%239B1B30&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandseven src="2007.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%235A5B9F&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandeight src="2008.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23F0C05A&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandnine src="2009.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%2345B5AA&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandten src="2010.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23D94F70&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandeleven src="2011.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=tangerine&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandtwelve src="2012.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=emerald&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandthirteen src="2013.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23B163A3&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandforteen src="2014.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23955251&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandfifteen src="2015.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23F7CAC9&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandsixteen src="2016.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%2388B04B&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandseventeen src="2017.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%235F4B8B&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandeighteen src="2018.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23FF6F61&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandnineteen src="2019.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%230F4C81&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandtwenty src="2020.png"></a>
<a href="https://collection.cooperhewitt.org/search/collection/?query=&accession_number=&on_display=&has_images=&has_no_known_copyright=&color=%23F5DF4D&exhibition=&location=&medium=&period=&person=&role=&tag=&type=&description=&justification=&title=&display_date=&year_acquired=&year_end=&year_start=&width=&height=&depth=&longestside=&shortestside=&isa=objects"><img id=twothousandtwentyone src="2021.png"></a>
<img id=milkglass src="milkglass.png">
</body>
</html>