Website Files
SOME of the cool custom HTML and CSS code used on the website
Buttons:
HTML CODE:
<p></p>
<CENTER>
<span class="block element3">
<a href='http://patriarchy-steinbeck.weebly.com/website-files' class='button'>Button1</a></span>
<span class="block element1">
<a href='http://patriarchy-steinbeck.weebly.com/website-files' class='button'>Button2</a></span>
<span class="block element2">
<a href='http://patriarchy-steinbeck.weebly.com/website-files' class='button'>Button3</a></span>
</CENTER>
<CENTER>
<span class="block element3">
<a href='http://patriarchy-steinbeck.weebly.com/website-files' class='button'>Button1</a></span>
<span class="block element1">
<a href='http://patriarchy-steinbeck.weebly.com/website-files' class='button'>Button2</a></span>
<span class="block element2">
<a href='http://patriarchy-steinbeck.weebly.com/website-files' class='button'>Button3</a></span>
</CENTER>
CSS STYLE CODE: sets span styles for normal and wide buttons; sets button default class w/ default colors, hover colors, and mouse click colors as well as spacing around text, borders, and gradients (button objects are element 1, element 2, element 3)
.button {
border: 0px solid #6b460a;
background: #823d17;
background: -webkit-gradient(linear, left top, left bottom, from(#cc570a), to(#823d17));
background: -webkit-linear-gradient(top, #cc570a, #823d17);
background: -moz-linear-gradient(top, #cc570a, #823d17);
background: -ms-linear-gradient(top, #cc570a, #823d17);
background: -o-linear-gradient(top, #cc570a, #823d17);
background-image: -ms-linear-gradient(top, #cc570a 0%, #823d17 100%);
-webkit-border-radius: 27;
-moz-border-radius: 27;
border-radius: 27px;
font-family: Arial;
color: #fabc03;
font-size: 20px;
line-height: 36px;
padding: 10px 25px 10px 25px;
text-decoration: none;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #6b350c 0 1px 0;
}
.button:hover {
border: 0px solid #6b3e0e;
text-shadow: #825613 0 1px 0;
background: #b38600;
background: -webkit-gradient(linear, left top, left bottom, from(#ad5516), to(#b38600));
background: -webkit-linear-gradient(top, #ad5516, #b38600);
background: -moz-linear-gradient(top, #ad5516, #b38600);
background: -ms-linear-gradient(top, #ad5516, #b38600);
background: -o-linear-gradient(top, #ad5516, #b38600);
background-image: -ms-linear-gradient(top, #ad5516 0%, #b38600 100%);
color: #debf25;
}
.button:active {
text-shadow: #a39c15 0 1px 0;
border: 0px solid #1f160a;
background: #a15805;
background: -webkit-gradient(linear, left top, left bottom, from(#5c2d0e), to(#b38600));
background: -webkit-linear-gradient(top, #5c2d0e, #a15805);
background: -moz-linear-gradient(top, #5c2d0e, #a15805);
background: -ms-linear-gradient(top, #5c2d0e, #a15805);
background: -o-linear-gradient(top, #5c2d0e, #a15805);
background-image: -ms-linear-gradient(top, #5c2d0e 0%, #a15805 100%);
color: #e0e010;
}
.blockwide {
height: 40px;
width: 280px;
vertical-align: middle;
line height: 100px;
}
.block{
height: 40px;
width: 120px;
vertical-align: middle;
line height: 100px;
}
.element3 {
float: right;
vertical-align: middle;
}
.element2 {
float: left;
vertical-align: middle;
}
.element1 {
text-align: center;
width: auto;
vertical-align: middle;
}
.overflow {
float: right;
}
border: 0px solid #6b460a;
background: #823d17;
background: -webkit-gradient(linear, left top, left bottom, from(#cc570a), to(#823d17));
background: -webkit-linear-gradient(top, #cc570a, #823d17);
background: -moz-linear-gradient(top, #cc570a, #823d17);
background: -ms-linear-gradient(top, #cc570a, #823d17);
background: -o-linear-gradient(top, #cc570a, #823d17);
background-image: -ms-linear-gradient(top, #cc570a 0%, #823d17 100%);
-webkit-border-radius: 27;
-moz-border-radius: 27;
border-radius: 27px;
font-family: Arial;
color: #fabc03;
font-size: 20px;
line-height: 36px;
padding: 10px 25px 10px 25px;
text-decoration: none;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #6b350c 0 1px 0;
}
.button:hover {
border: 0px solid #6b3e0e;
text-shadow: #825613 0 1px 0;
background: #b38600;
background: -webkit-gradient(linear, left top, left bottom, from(#ad5516), to(#b38600));
background: -webkit-linear-gradient(top, #ad5516, #b38600);
background: -moz-linear-gradient(top, #ad5516, #b38600);
background: -ms-linear-gradient(top, #ad5516, #b38600);
background: -o-linear-gradient(top, #ad5516, #b38600);
background-image: -ms-linear-gradient(top, #ad5516 0%, #b38600 100%);
color: #debf25;
}
.button:active {
text-shadow: #a39c15 0 1px 0;
border: 0px solid #1f160a;
background: #a15805;
background: -webkit-gradient(linear, left top, left bottom, from(#5c2d0e), to(#b38600));
background: -webkit-linear-gradient(top, #5c2d0e, #a15805);
background: -moz-linear-gradient(top, #5c2d0e, #a15805);
background: -ms-linear-gradient(top, #5c2d0e, #a15805);
background: -o-linear-gradient(top, #5c2d0e, #a15805);
background-image: -ms-linear-gradient(top, #5c2d0e 0%, #a15805 100%);
color: #e0e010;
}
.blockwide {
height: 40px;
width: 280px;
vertical-align: middle;
line height: 100px;
}
.block{
height: 40px;
width: 120px;
vertical-align: middle;
line height: 100px;
}
.element3 {
float: right;
vertical-align: middle;
}
.element2 {
float: left;
vertical-align: middle;
}
.element1 {
text-align: center;
width: auto;
vertical-align: middle;
}
.overflow {
float: right;
}
Pop-Up Text (from Steinbeck Bio)
BLAHBLAHBLAHBLAHBLAHBLAH I LOVE ENGLISHENGLISHSUB-TEXT
EVEN SMALLER TEXT BLAHBLAHBLAHBLAHBLAHBLAH
CSS FROM EXAMPLE
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/>
<title>ToolTips Example</title>
<style >
.tooltip {
border-bottom: 1px dotted #000000; color: #000000;
outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-
shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-
size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>
</head>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/>
<title>ToolTips Example</title>
<style >
.tooltip {
border-bottom: 1px dotted #000000; color: #000000;
outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-
shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-
size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>
</head>
Example HTML Code
<body><font size="5">
<p>BLAHBLAHBLAHBLAHBLAHBLAH <a href="#">I LOVE ENGLISH<span ><img src="http://www.gotmesh.org/wp-content/uploads/2014/07/keep-calm-and-enjoy-learning-english.png" alt="Quote" height="48" width="48" /><em>ENGLISH</em>SUB-TEXT<br><font size = 2>EVEN SMALLER TEXT</font></br></span></a> BLAHBLAHBLAHBLAHBLAHBLAH</p>
</body>
</html>
<p>BLAHBLAHBLAHBLAHBLAHBLAH <a href="#">I LOVE ENGLISH<span ><img src="http://www.gotmesh.org/wp-content/uploads/2014/07/keep-calm-and-enjoy-learning-english.png" alt="Quote" height="48" width="48" /><em>ENGLISH</em>SUB-TEXT<br><font size = 2>EVEN SMALLER TEXT</font></br></span></a> BLAHBLAHBLAHBLAHBLAHBLAH</p>
</body>
</html>
FULL STEINBECK BIO CODE: (All text had to be coded in - NOTHING was put in a drag-and-drop text box)
Everything before </style> is CSS; evrything after </style> is html
Everything before </style> is CSS; evrything after </style> is html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/>
<title>ToolTips Example</title>
<style >
.tooltip {
border-bottom: 1px dotted #000000; color: #000000;
outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-
shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-
size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>
</head> -- CSS ENDS HERE
<body><font size="5"> --HTML STARTS HERE
<p>
Born February 27, 1902;</p>
<p>Died December 20, 1968;</p>
<p>
John Ernst Steinbeck Jr. was a renowned American author in the mid-20th century. His novels portrayed the plight of <a href="#">homeless and hopeless<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“The comfortable people in tight houses felt pity at first, and then distaste, and finally hatred for the migrant people.”<br><font size = 2>(The Grapes of Wrath, 512)</font></br></span></a> people in <a href="#">a rapidly changing America.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“The Western land, nervous under the beginning of change…”<br><font size = 2>(The Grapes of Wrath, 175)</font></br></span></a> Steinbeck’s childhood was largely unremarkable. He attended primary school in Salinas, California and was remembered as an avid reader and writer while in middle and high school. At age 17, Steinbeck received his high school diploma and began attending Stanford University intermittently for six years, focusing on classes in literature and <a href="#">philosophy.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“For man, unlike any other thing, organic or inorganic, in the universe, grows beyond his work, walks up the stairs of his concepts, emerges ahead of his accomplishments… This you may say of man – when theories change and crash, when philosophies …grow and disintegrate, man reaches, stumbles forward, painfully, mistakenly sometimes.”<br><font size = 2>(The Grapes of Wrath, 175)</font></br></span></a> At that time, he knew he wanted to become a writer, so he only selected classes he believed would assist him with honing his craft. Following graduation, Steinbeck traveled across the United States in search of work. Even after he began working as a writer, he struggled for steady work. His travels took him to Oklahoma for a period of time during the great depression, where he witnessed the extreme prejudice by the nation against the poor, starving <a href="#">Okie<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“Well, Okie use’ ta mean you was form Oklahoma. Now it means you’re a dirty son-of-a bitch. Okie means you’re scum. Don’t mean nothing itself, it’s the way they say it.”<br><font size = 2>(The Grapes of Wrath, 242)</font></br></span></a> farmers. Cup of Gold, Steinbeck's first novel, was published in 1929.</p>
<p>The difficulties Steinbeck faced growing up in California were the inspiration for his his most popular book, <a href="#">The Grapes of Wrath.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“In the eyes of the hungry there is a growing wrath. In the souls of the people the grapes of wrath are filling and growing heavy, growing heavy for the vintage.”<br><font size = 2>(The Grapes of Wrath, 411)</font></br></span></a> Steinbeck lived through the Great Depression, making him aware of the <a href="#">painfully similar effects of the Dust Bowl.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“I knowed a fellow from California… He says they’s too many folks lookin’ for work right there now. An’ he says the folks that pick the fruit live in diry ol’ camps an’ don’t hardly get enough to eat. He says wages is low and hard to get any.”<br><font size = 2>(The Grapes of Wrath, 105)</font></br></span></a> The Grapes of Wrath relates the story of the Joads, impoverished farmers who migrate to California after losing their Oklahoma farm during the Dust Bowl, a period of great drought. Published in 1939, The Grapes of Wrath earned the National Book Award and the Pulitzer Prize for fiction. Steinbeck's other renowned books include: Of Mice and Men (1937), Cannery Row (1945) and East of Eden. He was awarded the Nobel Prize for Literature in 1962.</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p> --USED TO SPACE OUT EMBEDED CODE TO LEAVE ROOM FOR POPUPS
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/>
<title>ToolTips Example</title>
<style >
.tooltip {
border-bottom: 1px dotted #000000; color: #000000;
outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-
shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-
size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>
</head> -- CSS ENDS HERE
<body><font size="5"> --HTML STARTS HERE
<p>
Born February 27, 1902;</p>
<p>Died December 20, 1968;</p>
<p>
John Ernst Steinbeck Jr. was a renowned American author in the mid-20th century. His novels portrayed the plight of <a href="#">homeless and hopeless<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“The comfortable people in tight houses felt pity at first, and then distaste, and finally hatred for the migrant people.”<br><font size = 2>(The Grapes of Wrath, 512)</font></br></span></a> people in <a href="#">a rapidly changing America.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“The Western land, nervous under the beginning of change…”<br><font size = 2>(The Grapes of Wrath, 175)</font></br></span></a> Steinbeck’s childhood was largely unremarkable. He attended primary school in Salinas, California and was remembered as an avid reader and writer while in middle and high school. At age 17, Steinbeck received his high school diploma and began attending Stanford University intermittently for six years, focusing on classes in literature and <a href="#">philosophy.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“For man, unlike any other thing, organic or inorganic, in the universe, grows beyond his work, walks up the stairs of his concepts, emerges ahead of his accomplishments… This you may say of man – when theories change and crash, when philosophies …grow and disintegrate, man reaches, stumbles forward, painfully, mistakenly sometimes.”<br><font size = 2>(The Grapes of Wrath, 175)</font></br></span></a> At that time, he knew he wanted to become a writer, so he only selected classes he believed would assist him with honing his craft. Following graduation, Steinbeck traveled across the United States in search of work. Even after he began working as a writer, he struggled for steady work. His travels took him to Oklahoma for a period of time during the great depression, where he witnessed the extreme prejudice by the nation against the poor, starving <a href="#">Okie<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“Well, Okie use’ ta mean you was form Oklahoma. Now it means you’re a dirty son-of-a bitch. Okie means you’re scum. Don’t mean nothing itself, it’s the way they say it.”<br><font size = 2>(The Grapes of Wrath, 242)</font></br></span></a> farmers. Cup of Gold, Steinbeck's first novel, was published in 1929.</p>
<p>The difficulties Steinbeck faced growing up in California were the inspiration for his his most popular book, <a href="#">The Grapes of Wrath.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“In the eyes of the hungry there is a growing wrath. In the souls of the people the grapes of wrath are filling and growing heavy, growing heavy for the vintage.”<br><font size = 2>(The Grapes of Wrath, 411)</font></br></span></a> Steinbeck lived through the Great Depression, making him aware of the <a href="#">painfully similar effects of the Dust Bowl.<span ><img src="http://icons.iconarchive.com/icons/rimshotdesign/nod2/512/Toolbar-Regular-Get-Info-icon.png" alt="Quote" height="48" width="48" /><em>Quote</em>“I knowed a fellow from California… He says they’s too many folks lookin’ for work right there now. An’ he says the folks that pick the fruit live in diry ol’ camps an’ don’t hardly get enough to eat. He says wages is low and hard to get any.”<br><font size = 2>(The Grapes of Wrath, 105)</font></br></span></a> The Grapes of Wrath relates the story of the Joads, impoverished farmers who migrate to California after losing their Oklahoma farm during the Dust Bowl, a period of great drought. Published in 1939, The Grapes of Wrath earned the National Book Award and the Pulitzer Prize for fiction. Steinbeck's other renowned books include: Of Mice and Men (1937), Cannery Row (1945) and East of Eden. He was awarded the Nobel Prize for Literature in 1962.</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p> --USED TO SPACE OUT EMBEDED CODE TO LEAVE ROOM FOR POPUPS
Shrinking a iframe and risizing its contents
CSS CODE:
/* For Wrapping iframe for display of mini frames */
.wrap2
{
width: 320px;
height: 192px;
padding: 0;
overflow: hidden;
}
.frame2
{
width: 1280px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1289
}
.wrap2
{
width: 320px;
height: 192px;
padding: 0;
overflow: hidden;
}
.frame2
{
width: 1280px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1289
}
HTML CODE:
<html>
<div >
<iframe src="//e.infogr.am/the-motif-of-the-father"></iframe>
</div>
</html>
<div >
<iframe src="//e.infogr.am/the-motif-of-the-father"></iframe>
</div>
</html>