Scribd
Upload
62 views

Document 2

Uploaded by

Akmal ŠecretPsychø
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

Document 2

Uploaded by

Akmal ŠecretPsychø
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Index.

html <div class="box">


<!DOCTYPE html> <div class="typo">
<html lang="en"> <div class="ind"></div>
<head> <img src="images/static.jpg" data-
<title>:: OL' RELIABLE :: | HOME</title> href="images/anim.gif" alt=""> </div>
<meta charset="utf-8"> <p class="p1" style="font-
<link rel="icon" href="images/favicon.ico"> size:25px;">Ol' Reliable</p>
<link rel="shortcut icon" <p class="p1"><a href="#">Ol' Reliable</a>
href="images/favicon.ico"> is SpongeBob's most prized jellyfish net. It
<link rel="stylesheet" href="css/style.css"> appears in the episodes "Nature Pants," "The
<script src="js/jquery.js"></script> Pink Purloiner," and "Best Day Ever," as well as
<script src="js/jquery-migrate- the video game SpongeBob's Truth or
1.1.1.js"></script> Square.</p>
<script src="js/superfish.js"></script> <p class="p2" style="font-
<script src="js/jquery.equalheights.js"></script> size:15px;">Description</p>
<script src="js/jquery.easing.1.3.js"></script> "Nature Pants"
<script src="js/script.js"></script> It is a net made of gold.
</head>
<body> "The Pink Purloiner" and "Best Day Ever"
<header> It is a more advanced net with silicon netting,
<div class="container_12"> carbon fiber handle, titanium skeleton, and soft
<div class="grid_12"> red grip handle.</div>
<h1><a href="index.html"><img </div>
src="images/logo.png" alt=""></a></h1> <div class="grid_3">
<div class="clear"></div> <div class="block1 blue"><img
<div class="menu_block"> src="images/spongebob-character-web-
<nav> desktop.png" alt=""><a href="#">SpongeBob
<ul class="sf-menu"> SquarePants</a></div>
<li class="current"><a </div>
href="index.html">HOME</a></li> </div>
<li><a </div>
href="videos.html">VIDEOS</a></li> <footer>
<li><a <div class="container_12">
href="characters.html">CHARACTERS</a></li> <div class="grid_12">
<li><a <div class="socials"> <a href="#"></a> <a
href="photos.html">PHOTOS</a></li> href="#"></a> <a href="#"></a> <a
<li><a href="#"></a> </div>
href="contact.html">CONTACTS</a></li> <div class="copy">:: OL' RELIABLE :: &copy;
</ul> 1999</a></div>
</nav> </div>
<form id="search" action="#" </div>
method="GET"> </footer>
<input type="text" name="s"> </body>
<a </html>
onClick="document.getElementById('search').su
bmit()"></a> videos.html
<div class="clear"></div> <!DOCTYPE html>
</form> <html lang="en">
<div class="clear"></div> <head>
</div> <title>:: OL' RELIABLE :: | VIDEOS</title>
<div class="clear"></div> <meta charset="utf-8">
</div> <link rel="icon" href="images/favicon.ico">
</div> <link rel="shortcut icon"
</header> href="images/favicon.ico">
<div class="content"> <link rel="stylesheet" href="css/style.css">
<div class="container_12"> <script src="js/jquery.js"></script>
<div class="grid_9">
<script src="js/jquery-migrate- </div>
1.1.1.js"></script> <div class="box pt1 green pb1">
<script src="js/superfish.js"></script> <video width="600" height="420"
<script src="js/jquery.equalheights.js"></script> controls>
<script src="js/jquery.easing.1.3.js"></script> <source src="vid/E1.mp4"
<script src="js/script.js"></script> type="video/mp4">
</head> </video>
<body> <div class="extra_wrapper">
<header> <div class="text1"><a href="#">E1:
<div class="container_12"> Whirlybrains; MermaidPants</a></div>
<div class="grid_12"> Posted on Monday, October 15th, 2018
<h1><a href="index.html"><img <b>SpongeBob SquarePants Season 10 </div>
src="images/logo.png" alt=""></a></h1> <div class="clear"></div>
<div class="clear"></div> <div class="alright"><a href="#"
<div class="menu_block"> class="btn">More</a></div>
<nav> </div>
<ul class="sf-menu"> </div>
<li><a href="index.html">HOME</a></li> </div>
<li class="current"><a </div>
href="videos.html">VIDEOS</a></li> <footer>
<li><a <div class="container_12">
href="characters.html">CHARACTERS</a></li> <div class="grid_12">
<li><a <div class="socials"> <a href="#"></a> <a
href="photos.html">PHOTOS</a></li> href="#"></a> <a href="#"></a> <a
<li><a href="#"></a> </div>
href="contact.html">CONTACTS</a></li> <div class="copy">:: OL' RELIABLE :: &copy;
</ul> 1999</a></div>
</nav> </div>
<form id="search" action="#" </div>
method="GET"> </footer>
<input type="text" name="s"> </body>
<a </html>
onClick="document.getElementById('search').su
bmit()"></a>
<div class="clear"></div> characters.html
</form>
<div class="clear"></div> <!DOCTYPE html>
</div> <html lang="en">
<div class="clear"></div> <head>
</div> <title>:: OL' RELIABLE :: | CHARACTERS</title>
</div> <meta charset="utf-8">
</header> <link rel="icon" href="images/favicon.ico">
<div class="content"> <link rel="shortcut icon"
<div class="container_12"> href="images/favicon.ico">
<div class="grid_12"> <link rel="stylesheet" href="css/style.css">
<div class="box blue pb1"> <script src="js/jquery.js"></script>
<video width="600" height="420" controls <script src="js/jquery-migrate-
autoplay> 1.1.1.js"></script>
<source src="vid/E2.mp4" <script src="js/superfish.js"></script>
type="video/mp4"> <script src="js/jquery.equalheights.js"></script>
</video> <script src="js/jquery.easing.1.3.js"></script>
<div class="extra_wrapper"> <script src="js/script.js"></script>
<div class="text1"><a href="#">E2: Mimic </head>
Madness; House Worming</a></div> <body>
Posted on Monday, October 15th, 2018 <header>
SpongeBob SquarePants Season 10 </div> <div class="container_12">
<div class="clear"></div> <div class="grid_12">
<h1><a href="index.html"><img <div class="box blue pb1">
src="images/logo.png" alt=""></a></h1> <h3 class="head1">Patrick Star</h3>
<div class="clear"></div> <img src="images/Patrick_2018.png"
<div class="menu_block"> alt="" class="img_inner fleft">
<nav> <div class="extra_wrapper">
<ul class="sf-menu"> <div class="text1"><a href="#">Last
<li><a href="index.html">HOME</a></li> edited a day ago</a></div>
<li><a Patrick Star is a main character and the
href="videos.html">VIDEOS</a></li> deuteragonist of SpongeBob SquarePants,
<li class="current"><a voiced by Bill Fagerbakke. Patrick is an
href="characters.html">CHARACTERS</a></li> overweight pink starfish who lives under a rock
<li><a and is SpongeBob's best friend. Patrick has crazy
href="photos.html">PHOTOS</a></li> ideas that often get the two into trouble. Like
<li><a his best friend, he tends to be extremely gullible
href="contact.html">CONTACTS</a></li> and clueless (even to Spongebob's intentions),
</ul> but remains a very loyal friend. Generally
</nav> moronic, he has shown he is capable of random
<form id="search" action="#" bursts of intelligence. His parents, Margie and
method="GET"> Herb Star who are rarely seen on the show.
<input type="text" name="s"> There's a running gag which involves Patrick
<a mistaking Spongebob’s parents for his own.
onClick="document.getElementById('search').su That was seen in the episode "Driven To Tears".
bmit()"></a> </div>
<div class="clear"></div> <div class="clear"></div>
</form> </div>
<div class="clear"></div> </div>
</div> <div class="grid_3 prefix_1 omega">
<div class="clear"></div> <h3 class="head">Characters</h3>
</div> <ul class="list">
</div> <li><a href="#">Squidward Tentacles
</header> </a></li>
<div class="content cont1"> <li><a href="#">Eugene H. Krabs</a></li>
<div class="container_12"> <li><a href="#">Sandra "Sandy" Cheeks
<div class="grid_12"> </a></li>
<div class="box bx2"> <li><a href="#">Sheldon J. Plankton
<div class="grid_8 alpha"> </a></li>
<div class="box blue pb1"> <li><a href="#">Gary the Snail </a></li>
<h3 class="head1">SpongeBob <li><a href="#">Karen Plankton </a></li>
SquarePants</h3> <li><a href="#">Mrs. Puff </a></li>
<img src="images/SpongeBob.png" alt="" <li><a href="#">Pearl Krabs </a></li>
class="img_inner fleft"> </ul>
<div class="extra_wrapper"> </div>
<div class="text1"><a href="#">Last <div class="clear"></div>
edited a day ago</a></div> </div>
SpongeBob SquarePants is the main </div>
character and the protagonist of the Nicktoon of </div>
the same name. He is voiced by Tom Kenny and </div>
first appeared on television in the series' pilot <footer>
episode "Help Wanted" on May 1, 1999. <div class="container_12">
SpongeBob was created and designed by marine <div class="grid_12">
biologist and animator Stephen Hillenburg, <div class="socials"> <a href="#"></a> <a
shortly after the cancellation of Rocko's Modern href="#"></a> <a href="#"></a> <a
Life in 1996. Thanks to success and popularity of href="#"></a> </div>
the franchise, he has become a household name <div class="copy">:: OL' RELIABLE :: &copy;
and a Nickelodeon icon. </div> 1999</a></div>
<div class="clear"></div> </div>
</div> </div>
</footer> </div>
</body> </header>
</html> <div class="content">
<div class="container_12">
<div class="grid_12">
photos.html <div class="box pb0 green">
<h3>SpongeBob SquarePants</h3>
<!DOCTYPE html> <div class="block2"> <img
<html lang="en"> src="images/Song-SpongebobTheme.jpg" alt=""
<head> class="img_inner i1">
<title>:: OL' RELIABLE :: | PHOTOS</title> <div class="text1"><a href="#">Song-
<meta charset="utf-8"> SpongebobTheme.jpg</a></div>
<link rel="icon" href="images/favicon.ico"> Song-SpongebobTheme.jpg (original file)
<link rel="shortcut icon" (629 × 479 pixels, file size: 59 KB, MIME type:
href="images/favicon.ico"> image/jpeg) </div>
<link rel="stylesheet" href="css/style.css"> <div class="block2"> <img
<script src="js/jquery.js"></script> src="images/Rock_Bottom_010.jpg" alt=""
<script src="js/jquery-migrate- class="img_inner i1 ">
1.1.1.js"></script> <div class="text1"><a
<script src="js/superfish.js"></script> href="#">Rock_Bottom_010.jpg</a></div>
<script src="js/jquery.equalheights.js"></script> Rock_Bottom_010.jpg (original file) (512 ×
<script src="js/jquery.easing.1.3.js"></script> 384 pixels, file size: 35 KB, MIME type:
<script src="js/script.js"></script> image/jpeg) </div>
</head> <div class="block2"> <img
<body> src="images/Paper_1.png" alt=""
<header> class="img_inner i1">
<div class="container_12"> <div class="text1"><a
<div class="grid_12"> href="#">Paper_1.PNG</a></div>
<h1><a href="index.html"><img Paper_1.PNG (original file) (405 × 335
src="images/logo.png" alt=""></a></h1> pixels, file size: 162 KB, MIME type: image/png)
<div class="clear"></div> </div>
<div class="menu_block"> <div class="clear"></div>
<nav> <div class="clear"></div>
<ul class="sf-menu"> <div class="alright"><a href="#"
<li><a href="index.html">HOME</a></li> class="btn">More</a></div>
<li><a </div>
href="videos.html">VIDEOS</a></li> <div class="box bx2">
<li><a <h3>Patrick Star</h3>
href="characters.html">CHARACTERS</a></li> <div class="block2"> <img
<li class="current"><a src="images/Patrick-Star-patrick-star-
href="photos.html">PHOTOS</a></li> spongebob-30584139-400-311.jpg" alt=""
<li><a class="img_inner i1">
href="contact.html">CONTACTS</a></li> <div class="text1"><a href="#">Patrick-
</ul> Star-patrick-star-spongebob-30584139-400-
</nav> 311.jpg</a></div>
<form id="search" action="#" Patrick-Star-patrick-star-spongebob-
method="GET"> 30584139-400-311.jpg (original file) (400 × 311
<input type="text" name="s"> pixels, file size: 39 KB, MIME type: image/jpeg)
<a </div>
onClick="document.getElementById('search').su <div class="block2"> <img
bmit()"></a> src="images/Patrick_with_nose.jpg" alt=""
<div class="clear"></div> class="img_inner i1 ">
</form> <div class="text1"><a
<div class="clear"></div> href="#">Patrick_with_nose.jpg</a></div>
</div> Patrick_with_nose.jpg (original file) (470 ×
<div class="clear"></div> 316 pixels, file size: 18 KB, MIME type:
</div> image/jpeg) </div>
<div class="block2"> <img <h1><a href="index.html"><img
src="images/I'm_out_of_time_cards.jpg" alt="" src="images/logo.png" alt=""></a></h1>
class="img_inner i1"> <div class="clear"></div>
<div class="text1"><a <div class="menu_block">
href="#">I'm_out_of_time_cards.jpg</a></div> <nav>
I'm_out_of_time_cards.jpg (original file) <ul class="sf-menu">
(635 × 480 pixels, file size: 154 KB, MIME type: <li><a href="index.html">HOME</a></li>
image/jpeg) </div> <li><a
<div class="clear"></div> href="videos.html">VIDEOS</a></li>
<div class="clear"></div> <li><a
<div class="alright"><a href="#" href="characters.html">CHARACTERS</a></li>
class="btn">More</a></div> <li><a
</div> href="photos.html">PHOTOS</a></li>
</div> <li class="current"><a
</div> href="contact.html">CONTACTS</a></li>
</div> </ul>
<footer> </nav>
<div class="container_12"> <form id="search" action="#"
<div class="grid_12"> method="GET">
<div class="socials"> <a href="#"></a> <a <input type="text" name="s">
href="#"></a> <a href="#"></a> <a <a
href="#"></a> </div> onClick="document.getElementById('search').su
<div class="copy">:: OL' RELIABLE :: &copy; bmit()"></a>
1999</a></div> <div class="clear"></div>
</div> </form>
</div> <div class="clear"></div>
</footer> </div>
</body> <div class="clear"></div>
</html> </div>
</div>
</header>
contact.html <div class="content">
<div class="container_12">
<!DOCTYPE html> <div class="grid_12 cont1">
<html lang="en"> <div class="box bx2 pb1">
<head> <div class="grid_6 alpha">
<title>:: OL' RELIABLE :: | CONTACT</title> <div class="pl1">
<meta charset="utf-8"> <h3>Find Us</h3>
<link rel="icon" href="images/favicon.ico"> <div class="map">
<link rel="shortcut icon" <figure class="">
href="images/favicon.ico"> <iframe
<link rel="stylesheet" href="css/style.css"> src="http://maps.google.com/maps?
<link rel="stylesheet" href="css/form.css"> f=q&amp;source=s_q&amp;hl=en&amp;geocod
<script src="js/jquery.js"></script> e=&amp;q=Brooklyn,+New+York,+NY,
<script src="js/jquery-migrate- +United+States&amp;aq=0&amp;sll=37.0625,-
1.1.1.js"></script> 95.677068&amp;sspn=61.282355,146.513672&
<script src="js/superfish.js"></script> amp;ie=UTF8&amp;hq=&amp;hnear=Brooklyn,
<script src="js/forms.js"></script> +Kings,+New+York&amp;ll=40.649974,-
<script src="js/jquery.equalheights.js"></script> 73.950005&amp;spn=0.01628,0.025663&amp;z
<script src="js/jquery.easing.1.3.js"></script> =14&amp;iwloc=A&amp;output=embed"></ifra
<script src="js/script.js"></script> me>
</head> </figure>
<body> </div>
<header> </div>
<div class="container_12"> </div>
<div class="grid_12"> <div class="grid_5 prefix_1 omega">
<h3>Contact Us</h3>
<form id="form" action="#"> <div class="socials"> <a href="#"></a> <a
<div class="success_wrapper"> href="#"></a> <a href="#"></a> <a
<div class="success">Contact form href="#"></a> </div>
submitted!<br> <div class="copy">:: OL' RELIABLE :: &copy;
<strong>We will be in touch 1999</a></div>
soon.</strong> </div> </div>
</div> </div>
<fieldset> </footer>
<label class="name"> </body>
<input type="text" value="Name:"> </html>
<br class="clear">
<span class="error error-empty">*This
is not a valid name.</span><span class="empty
error-empty">*This field is required.</span> style.css
</label>
<label class="email"> /**/
<input type="text" value="E-mail:"> @import url(http://fonts.googleapis.com/css?
<br class="clear"> family=Marvel);
<span class="error error-empty">*This /* 'Marvel', sans-serif */
is not a valid email address.</span><span
class="empty error-empty">*This field is @import "../css/reset.css";
required.</span> </label> @import "../css/grid.css";
<label class="phone"> @import "../css/superfish.css";
<input type="tel" value="Phone:">
<br class="clear"> input {
<span class="error error-empty">*This outline: none !important;
is not a valid phone number.</span><span border-radius: 0 !important;
class="empty error-empty">*This field is }
required.</span> </label>
<label class="message">
<textarea>Message:</textarea> html {
<br class="clear"> width: 100%;
<span class="error">*The message is }
too short.</span> <span class="empty">*This
field is required.</span> </label> a[href^="tel:"] {
<div class="clear"></div> color: inherit;
<div class="btns"><a data- text-decoration:none;
type="submit" class="col1">send</a><a data- }
type="reset" class="col1">clear</a>
<div class="clear"></div> *{
</div> -webkit-text-size-adjust: none;
</fieldset> }
</form>
Admin :: OL' RELIABLE :: <br>
E-mail: <a href="#" body {
class="col1">[email protected]</a> <br> font: 12px/18px Arial, Helvetica, sans-serif;
Phone: +62 831-1041-2224 </div> color:#d5d5d5;
<div class="clear"></div> background-color: #322b36;
</div> position:relative;
</div> min-width:960px;
</div>
</div>
<footer> }
<div class="container_12">
<div class="grid_12">
.ic {
border:0;
float:right; list-style: none;
background:#fff; }
color:#f00;
width:50%; ul.list {
line-height:10px; padding-top: 30px;
font-size:10px; }
margin:-220% 0 0 0;
overflow:hidden; ul.list li {
padding:0 padding-left: 23px;
} position: relative;
}

h1, h2, h3, h4, h5, h6 { ul.list li:after {


font-weight: normal; display: block;
font-family: 'Marvel', sans-serif ; position: absolute;
color: #fe8c21; left: 0;
} top: 7px;
width: 3px;
h3 { height: 3px;
font-size: 36px; background-color: #fcab1c;
line-height: 36px; content: '';
padding-top: 22px; }
margin-bottom: 20px;
ul.list li+li {
} margin-top: 18px;
}
h3.head1 {
margin-bottom: 17px; /*links*/
}
a{
h4 { text-decoration: none;
font-size: 24px; color: inherit;
line-height: 28px; outline: none;
padding-left: 7px; transition: 0.5s ease;
padding-top: 22px; -o-transition: 0.5s ease;
margin-bottom: 20px; -webkit-transition: 0.5s ease;
} }

a:hover {
.page1 h3 { color: #fe8c21;
margin-bottom: 21px;
} }

p{ .alright {
margin-bottom: 18px; padding-top: 23px;
} padding-bottom: 3px;
}
img {
max-width: 100%; a.btn {
} font-size: 14px;
display: inline-block;
address { line-height: 18px;
font-style: normal; color: #e85441;
} padding-right: 13px;
ul { background: url(../images/link_arrow.png)
padding: 0; right 4px no-repeat;
margin: 0; }
text-align: right;
a.btn:hover { }
color: #fff; .center {
} text-align: center;
}
/*preclass*/ .wrapper, .extra_wrapper {
overflow: hidden;
.mb0 { }
margin-bottom: 0px !important; .clear {
} float: none !important;
.m0 { clear: both;
margin: 0 !important; }
}
/*header*/
.mb1 {
margin-bottom: 25px !important; header {
} display: block;
position: relative;
.ind1 { z-index: 999;
margin-top: 11px; margin-bottom: 46px;
} }

.pad0 { #search {
padding: 0 !important; float: right;
} width: 140px;
position: relative;
overflow: hidden;
.pt0 { margin-top: 15px;
padding-top: 0; }
}
#search input {
.img_inner { background-color: #fcab1c;
max-width: 100%; border: 1px solid #ff5d32;
-moz-box-sizing: border-box; float: none;
-webkit-box-sizing: border-box; height: 25px;
-o-box-sizing: border-box; padding: 4px 50px 3px 10px;
box-sizing: border-box; color: #000;
margin-bottom: 19px; font: 12px/18px Arial, Helvetica, sans-serif;
position: relative; width: 100%;
} -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
.fleft { -o-box-sizing: border-box;
float: left; box-sizing: border-box;
margin-right: 18px; }
margin-top: 1px;
margin-bottom: 0px; #search a {
} background:
url(../images/search_icon.png) 0 2px no-repeat;
.fright { width: 43px;
float: right !important; height: 25px;
} display: block;
position: absolute;
.upp { right: 0;
text-transform: uppercase; top: 0;
} cursor: pointer;
}
.alright {
#search a:hover {
opacity: 0.5; .block1 {
} border-bottom: 1px solid #e85441;
text-align: center;
/*Content*/ font-weight: bolder;
font-size: 14px;
.content { padding-bottom: 7px;
padding-bottom: 44px; background-color: #423d60;
} }

.page1 .content { .block1+.block1 {


padding-bottom: 47px; margin-top: 48px;
padding-bottom: 6px;
} }

.p1, .p2 { .block1+.block1 img {


color: #fff; margin-bottom: 6px;
} }

.p1 a { .block1+.block1+.block1 {
color: #ff4a4a; margin-top: 49px;
} }

.p2 a { .blue {
color: #ee0f0f; border-color: #ff7d01;
} }

.p1 a:hover, .p2 a:hover { .blue.block1 img, .cont1 .blue img{


color: #fff; background-color: #423d60;
} }

.box { .cont1 .box.bx2 {


border-bottom: 1px solid #e85441; padding-left: 0;
background-color: #423d60; padding-right: 0;
padding: 0 34px 17px; }
}
.cont1 .alright {
.page1 .box { padding-right: 34px;
padding-right: 44px; }
}
.box.bx1 {
.pl1 { padding-right: 32px;
padding-left: 34px; padding-bottom: 61px;
} position: relative;
}
.cont1 .fleft{
margin-right: 20px; .box.bx1 img {
padding-bottom: 2px; right: 23px;
padding-top: 1px; bottom: 10px;
} position: absolute;
}
.block1 img {
background-color: #e85441;
margin-bottom: 5px; .bx2 {
padding-left: 17px; border-bottom-width: 3px;
padding-right: 18px; }
}
.text1 { }
color: #e85441;
font-size: 18px;
margin-bottom: 15px; .map address {
} padding-top: 10px;
overflow: hidden;
.pb1 { line-height: 20px;
padding-bottom: 22px; }
}

.pt1 { address dt {
padding-top: 22px; color: #000;
} }

.block2 {
width: 265px; address dd span {
float: left; min-width: 85px;
display: inline-block;
} text-align: left;
}
.block2 +.block2 {
margin-left: 38px; .socials {
} overflow: hidden;
float: right;
.img_inner.i1 { padding-top: 16px;
margin-top: -2px; }
margin-bottom: 22px;
} .socials a {
float: left;
/****Map***/ display: block;
background: url(../images/socials.png) 0 0
.map { no-repeat;
padding-top: 0px; width: 23px;
margin-top: -2px; height: 23px;
} }

.map .text1 { .socials a+a {


font-family: Arial, Helvetica, sans-serif; margin-left: 6px;
font-size: 16px; background-position: -29px 0;
padding-bottom: 19px; }

} .socials a+a+a {
.map figure { margin-left: 5px;
background-position: -57px 0;
width: 100%; }
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; .socials a+a+a+a {
-o-box-sizing: border-box; background-position: right 0;
box-sizing: border-box; }
display: block;
margin-bottom: 29px; .socials a:hover {
opacity: 0.5;
} }
.map figure iframe {
width: 100%; /************Footer***********/
height: 347px;
max-width: 100%; footer {
display: block; .grid_7,
padding: 0px 0; .grid_8,
font-size: 12px; .grid_9,
} .grid_10,
.grid_11,
.grid_12 {
display: inline;
.copy { float: left;
padding-top: 18px; margin-left: 10px;
padding-bottom: 40px; margin-right: 10px;
border-top: 1px solid #fe8c21; }

} .push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
grid.css .push_5, .pull_5,
.push_6, .pull_6,
/* .push_7, .pull_7,
960 Grid System ~ Core CSS. .push_8, .pull_8,
Learn more ~ http://960.gs/ .push_9, .pull_9,
.push_10, .pull_10,
Licensed under GPL and MIT. .push_11, .pull_11 {
*/ position: relative;
}
/*
Forces backgrounds to span full width, /* `Grid >> Children (Alpha ~ First, Omega ~
even if there is horizontal scrolling. Last)
Increase this if your layout is wider. ----------------------------------------------------------------
------------------------------------*/
Note: IE6 works fine without this fix.
*/ .alpha {
margin-left: 0;
body { }
min-width: 960px;
} .omega {
margin-right: 0;
/* `Container }
----------------------------------------------------------------
------------------------------------*/ /* `Grid >> 12 Columns
----------------------------------------------------------------
.container_12 { ------------------------------------*/
margin-left: auto;
margin-right: auto; .container_12 .grid_1 {
width: 960px; width: 60px;
} }

/* `Grid >> Global .container_12 .grid_2 {


---------------------------------------------------------------- width: 140px;
------------------------------------*/ }

.grid_1, .container_12 .grid_3 {


.grid_2, width: 220px;
.grid_3, }
.grid_4,
.grid_5, .container_12 .grid_4 {
.grid_6, width: 300px;
}
.container_12 .prefix_6 {
.container_12 .grid_5 { padding-left: 480px;
width: 380px; }
}
.container_12 .prefix_7 {
.container_12 .grid_6 { padding-left: 560px;
width: 460px; }
}
.container_12 .prefix_8 {
.container_12 .grid_7 { padding-left: 640px;
width: 540px; }
}
.container_12 .prefix_9 {
.container_12 .grid_8 { padding-left: 720px;
width: 620px; }
}
.container_12 .prefix_10 {
.container_12 .grid_9 { padding-left: 800px;
width: 700px; }
}
.container_12 .prefix_11 {
.container_12 .grid_10 { padding-left: 880px;
width: 780px; }
}
/* `Suffix Extra Space >> 12 Columns
.container_12 .grid_11 { ----------------------------------------------------------------
width: 860px; ------------------------------------*/
}
.container_12 .suffix_1 {
.container_12 .grid_12 { padding-right: 80px;
width: 940px; }
}
.container_12 .suffix_2 {
/* `Prefix Extra Space >> 12 Columns padding-right: 160px;
---------------------------------------------------------------- }
------------------------------------*/
.container_12 .suffix_3 {
.container_12 .prefix_1 { padding-right: 240px;
padding-left: 80px; }
}
.container_12 .suffix_4 {
.container_12 .prefix_2 { padding-right: 320px;
padding-left: 160px; }
}
.container_12 .suffix_5 {
.container_12 .prefix_3 { padding-right: 400px;
padding-left: 240px; }
}
.container_12 .suffix_6 {
.container_12 .prefix_4 { padding-right: 480px;
padding-left: 320px; }
}
.container_12 .suffix_7 {
.container_12 .prefix_5 { padding-right: 560px;
padding-left: 400px; }
}
.container_12 .suffix_8 { left: 800px;
padding-right: 640px; }
}
.container_12 .push_11 {
.container_12 .suffix_9 { left: 880px;
padding-right: 720px; }
}
/* `Pull Space >> 12 Columns
.container_12 .suffix_10 { ----------------------------------------------------------------
padding-right: 800px; ------------------------------------*/
}
.container_12 .pull_1 {
.container_12 .suffix_11 { left: -80px;
padding-right: 880px; }
}
.container_12 .pull_2 {
/* `Push Space >> 12 Columns left: -160px;
---------------------------------------------------------------- }
------------------------------------*/
.container_12 .pull_3 {
.container_12 .push_1 { left: -240px;
left: 80px; }
}
.container_12 .pull_4 {
.container_12 .push_2 { left: -320px;
left: 160px; }
}
.container_12 .pull_5 {
.container_12 .push_3 { left: -400px;
left: 240px; }
}
.container_12 .pull_6 {
.container_12 .push_4 { left: -480px;
left: 320px; }
}
.container_12 .pull_7 {
.container_12 .push_5 { left: -560px;
left: 400px; }
}
.container_12 .pull_8 {
.container_12 .push_6 { left: -640px;
left: 480px; }
}
.container_12 .pull_9 {
.container_12 .push_7 { left: -720px;
left: 560px; }
}
.container_12 .pull_10 {
.container_12 .push_8 { left: -800px;
left: 640px; }
}
.container_12 .pull_11 {
.container_12 .push_9 { left: -880px;
left: 720px; }
}
/* `Clear Floated Elements
.container_12 .push_10 {
---------------------------------------------------------------- background-color: #383452;
------------------------------------*/
width: 100%;
.clear { height: 34px;
clear: both; float:left;
display: block; font: 12px/18px Arial, Helvetica, sans-serif;
overflow: hidden; color:#d5d5d5;
visibility: hidden; box-sizing: border-box;
width: 0; -moz-box-sizing: border-box; /*Firefox 1-
height: 0; 3*/
} -webkit-box-sizing: border-box; /* Safari */
}
.clearfix:before,
.clearfix:after, #form textarea {
.container_12:before, height: 293px;
.container_12:after { overflow: auto;
content: '.'; background-color: #383452;
display: block; border: 1px solid #393553;
overflow: hidden; padding: 7px 12px 8px;
visibility: hidden; width: 100%;
font-size: 0; position: relative;
line-height: 0; resize:none;
width: 0; box-sizing: border-box;
height: 0; -moz-box-sizing: border-box; /*Firefox 1-
} 3*/
-webkit-box-sizing: border-box; /* Safari */
.clearfix:after, float:left;
.container_12:after { font: 12px/18px Arial, Helvetica, sans-serif;
clear: both; color:#d5d5d5;
} margin: 0;

/* }
The following zoom:1 rule is specifically for IE6 #form label {
+ IE7. position:relative;
Move to separate stylesheet if invalid CSS is a display: block;
problem. min-height: 41px;
*/ width: 100%;
float: left;
.clearfix, }
.container_12 {
zoom: 1;
}

form.css #form .error, #form .empty {


color: #FF0000;
/****Form****/ display: none;
font-size: 10px;
#form { line-height:14px;
margin-top: -2px; width:auto;
padding-right: 35px; position: absolute;
margin-bottom: 23px; z-index: 999;
} right: 5px;
top: 10px;
#form input { float:left;
border: 1px solid #393553; }
padding: 8px 12px 8px;
#form .error-empty {
display:none; .success_wrapper {
float:left; position: relative;
} }

.btns {
position:relative; form.js
padding-top: 28px;
text-align: right; //forms
;(function($){
} $.fn.forms=function(o){
return this.each(function(){
var th=$(this)
.btns a { ,_=th.data('forms')||{
cursor: pointer; errorCl:'error',
text-transform: capitalize; emptyCl:'empty',
padding-right: 0; invalidCl:'invalid',
background: none;
display: inline-block; notRequiredCl:'notRequired',
font-size: 14px; successCl:'success',
} successShow:'4000',
mailHandlerURL:'#',
.btns a+a { ownerEmail:'#',
margin-left: 20px; stripHTML:true,
}
smtpMailServer:'localhost',
#form .message {
width: 100%; targets:'input,textarea',
} controls:'a[data-
type=reset],a[data-type=submit]',
#form .btns span { validate:true,
display: inline-block; rx:{
width: 13px; ".name":{rx:/^[a-
} zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-
zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
.message br { ".email":
height: 0; {rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|
line-height: 0; ("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]
} +\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|
(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]
#form .success { {1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]
display: none; {1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]
position: absolute; {1,2})\]?$)/i,target:'input'},
width: 100%; ".phone":{rx:/^\
background-color: #383452; +?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
border: 1px solid #393553; ".fax":{rx:/^\+?
text-align: center; (\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
padding: 20px 10px; ".message":{rx:/.
z-index: 999; {20}/,target:'textarea'}
box-sizing: border-box; },
-moz-box-sizing: border-box; /*Firefox 1- preFu:function(){
3*/
-webkit-box-sizing: border-box; /* Safari */ _.labels.each(function(){
} var label=$
(this),
inp=$ _.success=$
(_.targets,this), ('.'+_.successCl,_.form).hide()
},
defVal=inp.val(),
isRequired:function(el){
trueVal=(function(){
return !
var tmp=inp.is('input')? el.hasClass(_.notRequiredCl)
(tmp=label.html().match(/value=['"](.+?)['"]. },
+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html() isValid:function(el){

return defVal==''?defVal:tmp var ret=true

})() $.each(_.rx,function(k,d){
trueVal! if(el.is(k))
=defVal
ret=d.rx.test(el.find(d.target).val())
&&inp.val(defVal=trueVal||defVal)
})
label.data({defVal:defVal}) return ret

inp },
.bind('f isEmpty:function(el){
ocus',function(){ var tmp
return
inp.val()==defVal (tmp=el.find(_.targets).val())==''||
tmp==el.data('defVal')
},
&&(inp.val(''),_.hideEmptyFu(label),label.remov validateFu:function(el)
eClass(_.invalidCl)) {
})
.bind(' el.each(function(){
blur',function(){ var th=$
(this)
_.validateFu(label) ,req=_.
isRequired(th)
if(_.isEmpty(label)) ,empty
=_.isEmpty(th)
inp.val(defVal) ,valid=
_.isValid(th)
,_.hideErrorFu(label.removeClass(_.invalid
Cl))
if(empty&&req)
})
.bind(' _.showEmptyFu(th.addClass(_.invalidCl))
keyup',function(){ else

label.hasClass(_.invalidCl)
_.hideEmptyFu(th.removeClass(_.invalidCl))
&&_.validateFu(label)
}) if(!empty)

if(valid)
label.find('.'+_.errorCl+',.'+_.emptyCl).css({displa
y:'block'}).hide() _.hideErrorFu(th.removeClass(_.invalidCl))
}) else
_.showErrorFu(th.addClass(_.invalidCl))
setTimeout(function(){
})
}, _.success.slideUp()

getValFromLabel:function(label){ _.form.trigger('reset')
var val=$ },_.successS
('input,textarea',label).val() how)
,defVal=lab })
el.data('defVal') },
controlsFu:function(){
return $
label.length?val==defVal?'nope':val:'nope' (_.controls,_.form).each(function(){
} var th=$
,submitFu:function(){ (this)
th
_.validateFu(_.labels) .bind('
click',function(){
if(!
_.form.has('.'+_.invalidCl).length) _.form.trigger(th.data('type'))
$.ajax({
type: return false
"POST", })
})
url:_.mailHandlerURL, },
data:{
showErrorFu:function(label){
name:_.getValFromLabel($
('.name',_.form)), label.find('.'+_.errorCl).slideDown()
},
email:_.getValFromLabel($
('.email',_.form)), hideErrorFu:function(label){

phone:_.getValFromLabel($ label.find('.'+_.errorCl).slideUp()
('.phone',_.form)), },

fax:_.getValFromLabel($('.fax',_.form)), showEmptyFu:function(label){

state:_.getValFromLabel($('.state',_.form)), label.find('.'+_.emptyCl).slideDown()

message:_.getValFromLabel($ _.hideErrorFu(label)
('.message',_.form)), },

owner_email:_.ownerEmail, hideEmptyFu:function(label){

stripHTML:_.stripHTML label.find('.'+_.emptyCl).slideUp()
}, },
init:function(){
success: function(){ _.form=_.me

_.showFu() _.labels=$
} ('label',_.form)
})
}, _.preFu()
showFu:function(){
_.controlsFu()
_.success.slideDown(function(){
_.form
.bind('subm
it',function(){

if(_.validate)

_.submitFu()
else

_.form[0].submit()
return
false
})
.bind('reset'
,function(){

_.labels.removeClass(_.invalidCl)

_.labels.each(function(){

var th=$(this)

_.hideErrorFu(th)

_.hideEmptyFu(th)
})
})

_.form.trigger('reset')
}
}
_.me||
_.init(_.me=th.data({forms:_}))
typeof o=='object'
&&$.extend(_,o)
})
}
})(jQuery)
$(window).load(function(){
$('#form').forms({
ownerEmail:'#'
})
})

You might also like