A Pen by Samantha

Thumbnail
This awesome code was written by RoseKitty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RoseKitty ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Samantha</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
<meta charset="UTF-8">
<title>Creating and Using Arrays</title>
<link href="../_css/site.css" rel="stylesheet">
<script>
var authors = [ 'Ernest Hemingway',
                'Charlotte Bronte',
                'Dante Alighieri',
                'Emily Dickinson'
              ];
</script>
</head>

<body>
<div class="wrapper">
  <div class="header">
    <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
      Missing<br>
      Manual</i></p>
  </div>
  <div class="content">
    <div class="main">
      <h1>Creating and Using Arrays</h1>
      <script>
    document.write('<p>The first author is <strong>');
    document.write(authors[0] + '</strong></p>');
    document.write('<p>The last author is <strong>');
    document.write(authors[authors.length-1] + '</strong></p>');
    authors.unshift('Stan Lee');
    document.write('<p>I almost forgot <strong>');
    document.write(authors[0]);
    document.write('</strong></p>');
	  </script>
     </div>

  </div>
  <div class="footer">
    <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
  </div>
</div>
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/RoseKitty/a-pen-by-samantha-PqRaVL */

/* reset */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html , body{
	line-height: 1;
	background-color: #334873;
	background-image: url(../_images/bg-page2.png);
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end reset*/

/* @font-face @/
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 2, 2011 04:30:37 PM America/New_York */



@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('ColabThi-webfont.eot');
    src: url('ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabThi-webfont.woff') format('woff'),
         url('ColabThi-webfont.ttf') format('truetype'),
         url('ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('ColabLig-webfont.eot');
    src: url('ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabLig-webfont.woff') format('woff'),
         url('ColabLig-webfont.ttf') format('truetype'),
         url('ColabLig-webfont.svg#ColaborateLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateRegular';
    src: url('ColabReg-webfont.eot');
    src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabReg-webfont.woff') format('woff'),
         url('ColabReg-webfont.ttf') format('truetype'),
         url('ColabReg-webfont.svg#ColaborateRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateMediumRegular';
    src: url('ColabMed-webfont.eot');
    src: url('ColabMed-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabMed-webfont.woff') format('woff'),
         url('ColabMed-webfont.ttf') format('truetype'),
         url('ColabMed-webfont.svg#ColaborateMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateBoldRegular';
    src: url('ColabBol-webfont.eot');
    src: url('ColabBol-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabBol-webfont.woff') format('woff'),
         url('ColabBol-webfont.ttf') format('truetype'),
         url('ColabBol-webfont.svg#ColaborateBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Inconsolata';
    src: url('Inconsolata-webfont.eot');
    src: url('Inconsolata-webfont.eot?#iefix') format('embedded-opentype'),
         url('Inconsolata-webfont.woff') format('woff'),
         url('Inconsolata-webfont.ttf') format('truetype'),
         url('Inconsolata-webfont.svg#InconsolataMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3 {
	font-family: 'ColaborateRegular', Arial, sans-serif;	
}


strong {
	font-family: 'ColaborateMediumRegular', Arial, sans-serif;	
}

em {
	font-family: 'ColaborateThinRegular', Arial, sans-serif;	
}

.content {
	max-width: 760px;
	margin: 20px 0 0 100px;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 100px;
	width: 100%;
	padding-top: 18px;
	background: url(../_images/bg-footer.png) repeat-x left top;
}

.logo {
	letter-spacing: -1px;
	color: rgb(195,151,51);
	text-shadow: 2px 2px 1px rgba(0,0,0,.25);
	font: normal 54px 'ColaborateThinRegular', Arial, sans-serif;
}

.logo i {
	font-size: 24px;
	font-family: 'ColaborateRegular', Arial, sans-serif;
	color: rgb(119,104,71);
	position: relative;
	top:-0.18em;
	display: inline-block;
	text-shadow: none;
}

.logo i.mm {
	font-size: 16px;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.75);
	top: 0.1em;
	left: 0.5em;
	line-height: 90%;
	text-align: right;
	background-color: rgb(110,138,195);
	padding: .25em .5em .25em 1em;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.75);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.75);
	box-shadow: 1px 1px 2px rgba(0,0,0,.75);
}


.clear:after { 
content: "."; display: block; height: 0; clear: both; visibility: hidden; 
}

.clear {
	min-height: 1px;
}

* html .clear {
 height: 1px;
}

.header {
	position: relative;
	border-top: solid 6px white;
	padding: 10px 0 10px 0;
	margin-bottom: 20px;
}


.main {
	xxposition: relative;
	padding-bottom: 1em;
	border-bottom: solid 1px rgba(255,255,255,.5);
	xxoverflow:hidden;
	xxmin-height: 300px;
}

.main h1 {
	font-size: 32px;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.75);
	border-bottom: solid 1px rgba(255,255,255,.5);
	margin-bottom: 0.75em;
}


p , li, legend , form{
	font-size: 18px;
	color: white;
	font-family: 'ColaborateLightRegular', Arial, sans-serif;
	line-height: 125%;
	margin-bottom: 10px;
}

fieldset {
	padding: 10px;
	border: 1px solid white;
	margin: 25px 0;	
}

.nav {
	margin: 10px 0 0 100px;	
}

.nav li {
	display: inline-block;	
}

.nav a, .example {
	display: inline-block;
	font-family: 'ColaborateLightRegular', Arial, sans-serif;
	font-size: 12px;
	color: rgb(255,255,255);
	text-decoration: none;
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
	padding: .25em .5em;
	background-color: rgba(107,124,159, .75);
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	transition: all .25s ease-in;
	cursor: pointer;
}

.nav a:hover, .example:hover{
	background-color: rgba(255,255,255,.85);
	color: rgb(0,0,0);
}

.footer p {
	font-size: 14px;
	font-family: 'ColaborateLightRegular', Arial, sans-serif;
	padding: .5em .25em .5em 1em;
	color:rgb(55,76,119);
	background: rgb(110,138,195);
	-moz-border-radius: 2px 0 0 0;
	border-radius: 2px 0 0 0;
	margin: 0;
}

#resources {
	background-color: rgba(255,255,255,0.95);
	padding: 0em 1em 1em .75em;
	position: absolute;
	top: 10em;
	left: -51em;
	width: 50em;
	-moz-border-radius: 0 0 .5em 0;
	border-radius: 0 0 .5em 0;
	display: none;
}

#resources .open {
	position: absolute;
	width: 20px;
	height: 20px;
	right: -20px;
	top: -20px;
	background-color: rgba(255,255,255,0.8);
	-moz-border-radius: 0.5em;
	border-radius: .5em 0;
	text-align: center;
	font-family: 'ColaborateBoldRegular', Arial, sans-serif;
	cursor: pointer;
	color: rgb(119,104,71);
	line-height: 100%;
}

#resources h2 {
	font-family: 'ColaborateBoldRegular', Arial, sans-serif;
	font-size:18px;
	text-transform:uppercase;
	/*color: rgb(59,82,128);*/
	color: rgb(119,104,71);
	margin-top: 1em;
	text-shadow: none;
}

#resources h3 {
	font-family: 'ColaborateMediumRegular', Arial, sans-serif;
	font-size: 14px;
	color: rgba(0,0,0,.8);
	margin-top: 8px;
}

.resourceList > li {
	display: inline-block;
	padding: .5em 1em;
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
	background-color: rgba(119,104,74, .5);
	font-family: 'ColaborateRegular', Arial, sans-serif;
	font-size: 12px;
	color: rgb(255,255,255);
	margin-bottom: 5px;
}

#resources ul {
	margin: 5px 0 0 0;
}
a {
	color: rgba(255,255,255,.75);
}
h2 {
	color: rgb(143,180,255);
	margin-bottom: 5px;
	font-size: 22px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.75);
}
h3 {
	font-size: 18px;
	color: rgb(227,198,133);;
}

.example, code {
	font-family: 'Inconsolata', Courier, monospaced;
	font-size: 16px;
	color: rgb(255,255,255);
}

.results {
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgba(255,255,255,.4);
	padding: 1em;
	margin-bottom: 1em;
	overflow: hidden;
}

.results strong {
	font-family: 'ColaborateRegular', Arial, sans-serif;
	color: rgb(227,198,133);
}
.results .found {
	color: rgb(255,0,0);
}

.unit {
	display: inline-block;
	width: 45%;
}
.results h2 {
	color: rgba(255,255,255,1);
}
.results div {
	padding-bottom: 10px;
}
.results div code {
	float: right;
	width: 60%;
}

input {
	font-size: 20px;
}
.found {
	color: rgba(255,0,0,1);
}
form .wide {
	font-size: 18px;
	width: 100%;
}
.resultSection {
	float: right;
	width: 45%;
	margin-left: 20px;
}
#regexTester {
	margin-right: 55%;
}
.sideBySide li {
	float: left;
	overflow: hidden;
	width: 220px;
}
.clickable {
	cursor:pointer;
	margin-bottom: 5px;
}

.clickable:hover {
background-color:#FFC;
}

.highlighted {
	position: absolute;
	background-color: transparent;
	opacity: 0.5;
	filter: alpha(opacity=50);
	border:1px solid white;
	z-index: 100;
}
.badge {
	position: absolute;
	margin-top: -10px;
	z-index:50;
	font-family: 'Inconsolata', Courier, monospaced;
	font-size:14px;
	font-weight:bold;
	padding: 5px;
	color: black !important;
	background-color: #3FF;
	border: 1px black solid;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.col1 {
	float: left;
	width: 75%;	
}
.col2 {
	float: right;
	width: 20%;	
}

.col2 ul {
	margin-left: 20px;
	list-style: square;
}
.col2 li {
	font-size: 90%;	
}


#selectorList {
	overflow: hidden;	
}
#selector {
	width: 275px;
}
#bib {
	padding: 15px;
	border: 1px dotted #FFF;
	font-size: 80%;
	margin-bottom: 25px;
}

#gallery img {
	display: inline-block;
	margin: 0 0 10px 0;
	border: 1px solid rgb(0,0,0);
}

form#order div, form#signup div{
	padding-bottom: 10px;	
}

form#order .label, form#signup .label {
	display: block;
	clear: left;
	float: left;
	width: 175px;
	text-align: right;
	padding: 7px 15px 0 0;
	text-transform: uppercase;	
	font-weight: bold;
}

form#signup .label {
	width: 200px;	
}

.labelBlock {
	text-transform: uppercase;
	font-weight: bold;	
	display: block;
	padding-bottom: 0 !important;
	clear: both;
	margin-top: 10px;
}

form#order select, form#signup select {
	display: inline-block;
	margin-top: 8px;	
}

form#order input[type="radio"], form#signup input[type="radio"], form#signup input[type="checkbox"] {
   display: inline-block;
   margin-top: 10px;	
}

form .indent, #submit {
	margin-left: 215px;	
}
#console label {
	float: left;
	width: 100px;
}
.clearLeft {
	clear: left;
}
.imgRight {
	float: right;
	margin-bottom: 5px;
	margin-left: 5px;
}
.imgLeft {
	float: left;
	margin-bottom: 5px;
	margin-right: 5px;
}

#signup .indent label.error {
  margin-left: 0;
}

Comments