HTML Code!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="favicon.ico" href="favicon.ico" />
<link href="StyleSheetOldSpiceAds.css" rel="stylesheet" />
<title>Old Spice - Ads</title>
</head>
<body>
<header class="header">
<h1>Old Spice - Advertisements</h1>
</header>
<nav class="horizontalOne">
<ul>
<li class="lineone"><a href="OldSpiceHTML.html">Home </a> </li>
<li class="linetwo"><a href="OldSpiceAds.html">Advertisements </a> </li>
<li class="linethree"><a href="OldSpiceAnnotated.html">Annotated
Bibliography</a></li>
</ul>
</nav>
<nav class="horizontalTwo">
<ul>
<li class="linefour"><a href="OldSpiceHistory.html">Old Spice History</a></li>
<li class="linefive"><a href="OldSpiceWorksCited.html">Works Cited </a> </li>
<li class="linesix"><a href="../index.html">TomNeilly.com</a></li>
</ul>
</nav>
<section class="section-one">
<h2> Advertisements </h2>
<p style="font-size: 130%">
This is a small sample of some of the more memorable Old Spice advertisements
from over the years. From top to bottom, the advertisements are arranged from
oldest to most recent. This helps demonstrate how advertising, not just for Old
Spice
but advertising in general, has evolved over the last 50 years.
</p>
</section>
<section class="classic">
<h4>The Classic Collection </h4>
<figure class="classicLeft">
<figcaption style="color: white; font-size: 75%">This classic advertisement
is from 1960.</figcaption>
<a href="https://youtube.googleapis.com/v/5qA_fAtn3eQ?hd=1&amp;autoplay=1"
target="_blank">
<img id="one" src="ClassicOldSpice1960.PNG" /></a>
<figcaption>All Classic Video. "Old Spice Aftershave Lotion (1960s) - Classic
TV Commercial." <span class="youtube">YouTube</span>, 24 June 2012. Web. 30 March 2014.
</figcaption>
</figure>
<figure class="classicRight">
<figcaption style="color: white; font-size: 75%"> This classic advertisement
is from 1972.</figcaption>
<a href="https://youtube.googleapis.com/v/SlFokhDYErE?hd=1&amp;autoplay=1"
target="_blank">
<img id="two" src="ClassicOldSpice1972.PNG" /></a>
<figcaption>VintageC OmPlus. "70s Old Spice II Vintage 1972 Commercial." <span
class="youtube">YouTube</span>, 2 July 2013. Web. 30 March 2014. </figcaption>
</figure>
<p> These Old Spice advertisements are from 1960 (left) and 1972 (right) and they
are quite different from each other in the message and image they sell.</p>
<p> The advertisement from 1960 is very sexist, and Old Spice capitalizes on the
use of this sex appeal (pathos) to try to sell their product. A sleek, cool looking man
dressed in a nice suit, puffing on a cigarette, (something nobody would ever dare show in
a TV commercial today), and sipping his alcoholic beverage gets a reminiscent look on
his face when asked why he wears Old Spice. He then begins rattling off names of all the
women that he has <span style="text-decoration:line-through">slept with</span> crossed
paths with, as the commercial turns its focus to all of these different, beautiful women.
From the variety of women shown, they might as well say, "There's no woman you can't land
when you're wearing Old Spice." The spokesman even has to interrupt him as it seems like
his list will never end. </p>
<p style=" padding-bottom: 25px;">
The advertisement from 1972 differs greatly from the 1960 ad. Rather than
using sex appeal to sell the product, they use pathos in another way - to invoke a sense
of adventure and mystery in men. The commercial begins with a ship sailing the ocean.
When the ship makes its way to land, a sailor hops off with his knapsack full of the
wares from his travels. He walks around a bit, tossing people bottles of Old Spice
aftershave, as if it is some exotic product from a faraway land that only he could have
gotten to. At the end, Old Spice sneak in a promotion for their new (in 1972) product,
Old Spice shave cream, which is a good example of logos - by 1972, Old Spice aftershave
had been around for 35 years, and the men who use their product regularly are very likely
to switch to Old Spice shave cream based on their satisfaction with the aftershave. By
sneaking in the shaving cream product in the last three seconds, they kill two birds with
one stone.
</p>
</section>
<section class="eighties">
<h2> The 1980s Collection </h2>
<figure class="eightiesLeft">
<figcaption style="color: white; font-size: 75%">This classic advertisement
is from 1980.</figcaption>
<a href="https://youtube.googleapis.com/v/yZ2wcK0zEHI?hd=1&amp;autoplay=1"
target="_blank">
<img src="OldSpice1980.PNG" /></a>
<figcaption>Robatsea2009. "Old Spice Christmas 1980 TV Commercial." <span
class="youtube">YouTube</span>, 23 Dec. 2010. Web. 30 March 2014.</figcaption>
</figure>
<figure class="eightiesRight">
<figcaption style="color: white; font-size: 75%">This classic advertisement
is from 1983.</figcaption>
<a href="https://youtube.googleapis.com/v/lBAMlbDDaLA?hd=1&amp;autoplay=1"
target="_blank">
<img src="OldSpice1983.PNG" /></a>
<figcaption>OofusTwilip. "1983 Commercial - Old Spice - Not Meant For All
Men." <span class="youtube">YouTube</span>, 19 Jan. 2008. Web. 30 March
2014.</figcaption>
</figure>
<p>
These two advertisements are from 1980 (left) and 1983 (right). They are quite
different in their presentations, but both serve up a similar message and appeal to
pathos.
</p>
<p style=" padding-bottom: 25px;">
After watching these two commercials, it seems that Old Spice's theme in the
early 1980s was focused on masculinity. There are still traces of sex appeal, as both of
the advertisements show a pretty woman on the arm of the man wearing Old Spice, but
unlike the advertisement from 1960, it is not the primary selling point. Instead they
switch focus to how Old Spice chooses the man, provided they are manly enough to wear it.
Of course Old Spice also claims that wearing it will please the ladies, too - not to
completely eliminate the use of sex appeal.
</p>
</section>
<section class="isaiah">
<h2>The Isaiah Mustafa Collection</h2>
<figure class="isaiahLeft">
<figcaption style="color: white; font-size: 75%">Isaiah Mustafa kicks off the
new age of Old Spice.</figcaption>
<a href="https://youtube.googleapis.com/v/owGykVbfgUE?hd=1&amp;autoplay=1"
target="_blank">
<img src="OldSpiceIsaiah.PNG" /></a>
<figcaption>Old Spice. "Old Spice | The Man Your Man Could Smell Like." <span
class="youtube">YouTube</span>, 4 Feb. 2010. Web. 30 March 2014.</figcaption>
</figure>
<figure class="isaiahRight">
<figcaption style="color: white; font-size:75%" >Isaiah Mustafa continues to
convince the ladies.</figcaption>
<a href="https://youtube.googleapis.com/v/uLTIowBF0kE?hd=1&amp;autoplay=1"
target="_blank">
<img src="OldSpiceIsaiahTwo.PNG" /></a>
<figcaption>Old Spice. "Old Spice | Questions." <span
class="youtube">YouTube</span>, 29 June 2010. Web. 30 March 2014.</figcaption>
</figure>
<p>
Ah, finally. The Isaiah Mustafa era. The advertisement on the left was the
first of the "Man your man could smell like" campaign, the revolutionary campaign that
really rebranded Old Spice. The advertisement on the right was a follow-up from the same
era and campaign, starring Isaiah Mustafa.
</p>
<p>
This is what really changed it all for Old Spice. In 2010, Old Spice
introduced their new body wash. But how could Old Spice sell men something that they may
view as a feminine product? Another obstacle - since most women do the shopping, (sorry
for the stereotype, ladies) Old Spice had to convince the ladies as well. With the NFL
football player turned actor, Isaiah Mustafa, they created a series of commercials that
not only specifically addressed the ladies, but talked about what makes men manly. These
advertisements were so successful, they garnered record amounts of YouTube views in days.
To follow up with the success of the ads, Old Spice (advertised by Wieden + Kennedy)
teamed back up with Mustafa encouraging fans to ask Mustafa questions via Twitter,
Facebook, and YouTube. Over the next two days, Mustafa recorded 180 response videos that
were constantly airing on YouTube. The crowd response was unprecedented, and Old Spice's
social media grew enormously during this time.
</p>
<p style=" padding-bottom: 25px;"> This demonstrates the power of social media in
advertising. We are now in an age where consumers, for the first time, have an
opportunity to communicate with companies in real-time. In 2010, Old Spice was a pioneer
in this new interactivity between the two sides. As a result, their sales exploded, and
they were reinvented from "your grandfather's aftershave" to young and hip.
</p>
</section>
<section class="crews">
<h2>The Terry Crews Collection </h2>
<figure class="crewsLeft">
<figcaption style="color: white; font-size: 75%"> Watch Terry lose his mind.
</figcaption>
<a href="https://youtube.googleapis.com/v/BNbMvlPc_7U?hd=1&amp;autoplay=1"
target="_blank">
<img id="three" src="CrewsBrain.PNG" /></a>
<figcaption>Old Spice. "Old Spice | Blown Mind." <span
class="youtube">YouTube</span>, 11 Jan. 2012. Web. 30 March 2014.</figcaption>
</figure>
<figure class="crewsRight">
<figcaption style="color: white; font-size: 75%"> Watch Terry bust into someone
else's commercial.</figcaption>
<a href="http://www.youtube.com/v/5-t6AIMSCdw?hd=1&amp;autoplay=1"
target="_blank">
<img id="five" src="CrewsSeadoo.PNG" style="border-width: 0px" /></a>
<figcaption>Fcbahamutzero. "Old Spice Body Spray Bounce Commercial." <span
class="youtube">YouTube</span>, 7 Feb. 2012. Web. 30 March 2014.</figcaption>
</figure>
<p>
These advertisements are out of the Terry Crews era of Old Spice
advertising, dubbed "Old Spice is power". Personally, I think these are some of the
funniest advertisements ever created. On the left, Terry Crews loses his mind. Literally.
On the right, Terry Crews shows how Old Spice is too powerful to stay in its own
commercial.
</p>
<p style=" padding-bottom: 25px;">
Crews' advertisements are more than him flaunting around in red underwear and
screaming his lungs out, telling the viewer how powerful Old Spice is. In-your-face,
loud, comical, ridiculous, and original, these advertisements are a perfect example of
what a company must do to actually capture people's attention these days. Word of mouth
has always been a strong method of advertising, and with the technology available today,
word of mouth has been taken to a new level. Between creating amusement in advertisements
and the popularity of YouTube, people will do a lot of the work for a company - sharing
links, "liking" it on Facebook, and interacting on Twitter are all key things companies
rely on to push their product, and over the last few years, Old Spice has been mastering
this technique.
</p>
</section>
<section class="mom">
<h3>The Mom Collection </h3>
<figure class="momLeft">
<figcaption style="color: white; font-size: 75%">Creepy moms stalk their
boys.</figcaption>
<a href="https://youtube.googleapis.com/v/JEbpbNTkIdk?hd=1&amp;autoplay=1"
target="_blank">
<img src="OldSpiceMom.PNG" /></a>
<figcaption>FunnyAds. "Old Spice TV Ad - Mom Song Extended." <span
class="youtube">YouTube</span>, 3 Jan. 2014. Web. 30 March 2014.</figcaption>
</figure>
<figure class="momRight">
<figcaption style="color: white; font-size: 75%">Creepy mom tags along for
bowling.</figcaption>
<a href="https://youtube.googleapis.com/v/FW7Fmi8_kfU?hd=&amp;autoplay=1"
target="_blank">
<img src="OldSpiceMomBowling.PNG" /></a>
<figcaption>FunnyAds. "Old Spice TV Ad 2014 - Bowl." <span
class="youtube">YouTube</span>, 3 Jan 2014. Web. 30 March 2014.</figcaption>
</figure>
<p>
Here we have "The Mom Collection". Creepy helicopter moms stalk their boys
and mope over having lost them to the beautiful girls that just cannot seem to resist
them thanks to the power of the Old Spice scent. On the left is the full version of the
"Mom Song" (which is quite catchy), the advertisement that kicked off this campaign. On
the right is a solo which serves as a follow-up to the popularity of the original "Mom
Song".
</p>
<p style=" padding-bottom: 25px;">
Once again, Old Spice kicks off another hilarious advertising campaign that
managed to go viral overnight. The reactions seemed to be mixed over these videos (I
suppose some mothers could take offense to this), but regardless, Old Spice got people
talking - and that was the point. The more people talking about Old Spice, the more it
gets into their heads, and before they know it, they are loading it up in their shopping
cart. Like other Old Spice ads from the 2000s, it is brimming with humor and
ridiculousness - the magic recipe to get people grinning and buying.
</p>
</section>
<p>Want to see the HTML and CSS code for this page? Click here.</p>
<footer>This website is in no way connected to Procter and Gamble®. This website is a
school project and nothing more. All rights reserved for Old Spice® and Procter and
Gamble®. 2014.</footer>
<div class="brain">
<img src="OldSpiceBrain.png" style="width: 100px; height: 100px;"/>
</div>
</body>
</html>
/***********************************************************************************/
CSS code!
html {
background: linear-gradient(black, rgb(202, 43, 44), black);
overflow-style:scrollbar;
overflow: scroll;
text-wrap:none;
}
body {
max-width: 1000px;
min-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
margin-bottom: 0%;
background: linear-gradient(90deg, black, gray, white, gray, black);
padding-top: 50px;
font-family: Arial, sans-serif, Verdana;
box-shadow:0 0 10px 10px black;
}
header {
background:linear-gradient(rgb(202, 43, 44), black);
color: white;
margin-left: auto;
margin-right: auto;
font-family: 'Script MT';
height: 75px;
width: 80%;
border: 2px groove red;
border-radius: 45px;
/*padding: 10px;*/
box-shadow:rgba(0,0,0,0.3) 10px 10px 10px;
}
h1 {
width: 100%;
height: 100%;
text-align: center;
font-size: 300%;
padding-top:4px;
margin:auto;
text-shadow: 10px 4px 5px gray;
}
/*****************************************************************************/
nav.horizontalOne {
font-family: sans-serif;
font-size: large;
width: 100%;
height: 50px;
display: block;
margin-top: 5%;
}
nav.horizontalOne ul {
width: 100%;
text-decoration: none;
text-align:center;
}
nav.horizontalOne li {
text-align: center;
float: left;
width: 20%;
margin-left: 4%;
margin-right: 5%;
padding: 10px;
list-style: none;
border-radius: 25px;
box-shadow:rgba(0,0,0,0.3) 10px 10px 10px;
background: linear-gradient(rgb(202, 43, 44), black);
color: white;
}
nav.horizontalOne li:hover {
opacity: .5;
}
nav.horizontalOne
color: white;
}
a {
/******************************************************************/
nav.horizontalTwo
{
font-family: sans-serif;
font-size: large;
width: 100%;
height: 50px;
display: block;
}
nav.horizontalTwo ul {
width: 100%;
text-decoration: none;
text-align: center;
}
nav.horizontalTwo li {
text-align: center;
float: left;
width: 20%;
margin-left: 4%;
margin-right: 5%;
padding: 10px;
list-style: none;
border-radius: 25px;
box-shadow:rgba(0,0,0,0.3) 10px 10px 10px;
background: linear-gradient(rgb(202, 43, 44), black);
color: white;
}
nav.horizontalTwo li:hover {
opacity: .5;
}
nav.horizontalTwo
color: white;
}
a {
p:first-letter {
font-size: 160%;
font-family: 'Times New Roman';
}
/******************************************************************/
/*article {
font-size: medium;
font-family: Arial;
color: black;
float: left;
width:80%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
article p {
width: 100%;
font-size: 110%;
}
article h5 {
text-align: center;
font-size: 200%;
font-family: 'Poor Richard';
width: 100%;
text-align:center;
clear: both;
margin-top: 10px;
padding-top: 15px;
border-top: 3px solid black;
}*/
.section-one {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 1px solid black;
background: linear-gradient(black, rgb(202, 43, 44));
color: white;
border-radius: 25px;
box-shadow: black 10px 10px 10px;
}
.section-one p {
width: 90%;
margin-left: auto;
margin-right: auto;
font-size: 110%;
}
.section-one img {
width: 250px;
height: 200px;
float: left;
margin-right: 20px;
box-shadow: 5px 5px 5px black;
}
h4, h2, h3 {
width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Poor Richard';
font-size: 250%;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 3px solid white;
color: white;
text-shadow: 10px 4px 5px gray;
}
p {
text-indent: 25px;
font-size: 110%;
}
section.classic {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 1px solid black;
background:linear-gradient(black, rgb(202, 43, 44));
color: white;
border-radius: 25px;
box-shadow: black 10px 10px 10px;
}
section.classic p {
width: 80%;
margin-left: 10%;
margin-right: 10%;
clear: both;
}
figure.classicLeft {
float: left;
text-align: center;
}
figure.classicRight {
float: right;
text-align: center;
}
section.eighties {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 1px solid black;
background:linear-gradient(black, rgb(202, 43, 44));
color: white;
border-radius: 25px;
box-shadow: black 10px 10px 10px;
}
figure.eightiesLeft {
float: left;
text-align: center;
}
figure.eightiesRight {
float: right;
text-align: center;
}
figcaption {
width: 350px;
font-size: 60%;
}
section.eighties p {
width: 80%;
margin-left: 10%;
margin-right: 10%;
clear: both;
}
section.crews {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 1px solid black;
background:linear-gradient(black, rgb(202, 43, 44));
color: white;
border-radius: 25px;
box-shadow: black 10px 10px 10px;
}
section.crews p {
width: 80%;
margin-left: 10%;
margin-right: 10%;
clear: both;
}
figure.crewsLeft {
float: left;
text-align: center;
}
figure.crewsRight {
float: right;
text-align: center;
}
section.mom {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 1px solid black;
background:linear-gradient(black, rgb(202, 43, 44));
color: white;
border-radius: 25px;
box-shadow: black 10px 10px 10px;
}
section.mom p {
width: 80%;
margin-left: 10%;
margin-right: 10%;
clear: both;
}
figure.momLeft {
float: left;
text-align: center;
}
figure.momRight {
float: right;
text-align: center;
}
section.isaiah {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 1px solid black;
background:linear-gradient(black, rgb(202, 43, 44));
color: white;
border-radius: 25px;
box-shadow: black 10px 10px 10px;
}
section.isaiah p {
width: 80%;
margin-left: 10%;
margin-right: 10%;
clear: both;
}
figure.isaiahLeft {
float: left;
text-align: center;
}
figure.isaiahRight {
float: right;
text-align: center;
}
img {
border-width: 0px;
width: 350px;
height: 275px;
}
img:hover {
opacity: .7;
}
.youtube {
font-style:italic;
}
footer {
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 75px;
margin-bottom: 10px;
padding-bottom: 40px;
font-family: sans-serif;
font-size: 75%;
font-style: italic;
clear: both;
border-top: 2px solid black;
padding-top: 25px;
color:white;
background-color: black;
box-shadow: 0 0 10px 10px black;
}
header.header {
animation: header ease 2s;
}
li.lineone {
animation: lineone ease 1s;
}
li.linetwo {
animation: linetwo ease 1s;
}
li.linethree {
animation: linethree ease 1s;
}
li.linefour {
animation: linefour ease 1s;
}
li.linefive {
animation: linefive ease 1s;
}
li.linesix {
animation: linesix ease 1s;
}
.logoSpin {
animation: logoSpin ease 2s;
}
div.brain {
animation: brain ease 10s infinite;
margin: 0px;
margin-top: -125px;
}
@keyframes lineone {
0% {
transform: translateX(2000%);
}
100% {
transform: translateX(0%);
}
}
@keyframes linetwo {
0% {
transform:translateX(2000%);
}
/*16.66% {
transform: translateX(1000%);
}*/
100% {
transform: translateX(0%);
}
}
@keyframes linethree {
0% {
transform:translateX(2000%);
}
/*33.33% {
transform: translateX(1000%);
}*/
100% {
transform: translateX(0%);
}
}
@keyframes linefour {
0% {
transform:translateX(-2000%);
}
/*49.99% {
transform: translateX(1000%);
}*/
100% {
transform: translateX(0%);
}
}
@keyframes linefive {
0% {
transform:translateX(-2000%);
}
/*66.65% {
transform: translateX(1000%);
}*/
100% {
transform: translateX(0%);
}
}
@keyframes linesix {
0% {
transform:translateX(-2000%);
}
/*83.33% {
transform: translateX(1000%);
}*/
100% {
transform: translateX(0%);
}
}
@keyframes header {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
50.1% {
opacity: .1;
}
100% {
opacity: 1;
}
}
@keyframes brain {
0% {
transform: translateY(4800%);
}
0.1% {
transform: rotate(0deg);
}
99.9% {
transform: rotate(360deg);
}
100% {
transform: translateY(4800%);
}
/*0% {
transform: translate(0%, 0%);
}*/
/*25% {
transform: translate(0%, -100%);
}
26% {
transform:rotate(90deg);
}
50% {
transform:translate(100%, -100%);
}
51% {
transform:rotate(180deg);
}
75% {
transform: translate(1000%, 0%);
}*/
}
