Skip to content

Instantly share code, notes, and snippets.

@cgsmith

cgsmith/header.php

Created October 4, 2013 00:16
Show Gist options
  • Save cgsmith/6819128 to your computer and use it in GitHub Desktop.
Save cgsmith/6819128 to your computer and use it in GitHub Desktop.
Download ZIP
Standard Jetz File
Raw
header.php
<link rel="stylesheet" href = "<?php echo $this->getThemePath(); ?>/css/jetz_css.css" />
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header-container"><!-- start main container -->
<!-- logo section -->
<div class="logo-cont">
<div class="logo-layout"><a href = "index.php"><img src="<?php echo $this->getThemePath(); ?>/images/jetz_logo.png" /></a></div>
</div>
<!-- section one -->
<div id="h-sec-one">
<div class="h-lines">
<div class="main-cont">
<div class="h-links">
<!-- Start Main Content Area -->
<?php
$a = new GlobalArea('TopNav');
$a->display($c);
?>
<!-- End Main Content Area -->
</div>
</div>
</div>
</div>
<!-- section two -->
<div id="h-sec-two">
<div class="main-cont">
<div class="find-jetz"><input type = "text" name = "f-jetz" placeholder="Find My Jetz" /></div>
<div class="go-button"><input type = "image" src="<?php echo $this->getThemePath(); ?>/images/go_button.png" /></div>
</div>
</div>
<!-- section three -->
<div id="h-sec-three">
<div class="main-cont">
<div class="ref-jetz">Refresh at Jetz... We Reward!</div>
<div class="loc-fam">A Local Family Owned Company Since 1957</div>
</div>
</div>
</div><!-- end main container -->
Raw
jetz_css.css
@charset "utf-8";
/* CSS Document */
body {
padding:0px;
margin:0px;
font-family:arial;
font-size:12px;
}
.body-back {
}
@font-face {
font-family: 'handel_gothic_fsbold';
src: url('fonts/HandelGothic-Bold-webfont.eot');
src: url('fonts/HandelGothic-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HandelGothic-Bold-webfont.woff') format('woff'),
url('fonts/HandelGothic-Bold-webfont.ttf') format('truetype'),
url('fonts/HandelGothic-Bold-webfont.svg#handel_gothic_fsbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'handel_gothic_fsregular';
src: url('fonts/HandelGothic-Medium-webfont.eot');
src: url('fonts/HandelGothic-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HandelGothic-Medium-webfont.woff') format('woff'),
url('fonts/HandelGothic-Medium-webfont.ttf') format('truetype'),
url('fonts/HandelGothic-Medium-webfont.svg#handel_gothic_fsregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'handel_gothic_fsbold';
font-size:25px;
margin:65px 0px 5px 0px;
}
h2 {
font-family: 'handel_gothic_fsbold';
font-size:18px;
margin:0px;
padding:0px;
margin:0px 0px 5px 0px;
}
p {
margin:5px 0px 5px 0px;
}
a {
color:#000;
text-decoration:none;
}
a:hover {
color:#ee2f25;
text-decoration:underline;
}
#hs_top {
background-image:url(../images/header_sec_1.jpg);
background-repeat:repeat;
height:34px;
}
.header-link {
font-family: 'handel_gothic_fsbold';
display:inline;
color:#fff;
font-size:14px;
padding:0px 15px 0px 15px;
border-left:1px solid #c21f1d;
}
.header-link a{
color:#fff;
text-decoration:none;
}
.header-link a:hover{
color:#d6d6d6;
text-decoration:none;
}
#container_header {
width:1015px;
margin-left:auto;
margin-right:auto;
}
#container_header > ul > li a {
display:inline;
}
#hs_app {
background-image:url(../images/header_app_section.jpg);
background-repeat:repeat;
height:61px;
}
#hs_ref {
background-image:url(../images/header_refresh_sec.png);
background-repeat:repeat;
height:54px;
}
#slider_sec {
height:428px;
}
#comm_partners {
background-color:#333029;
height:54px;
border-bottom:1px solid #b9b9b9;
}
#comm-cont {
width:1015px;
margin-left:auto;
margin-right:auto;
}
.comm-partners-title {
font-size:21px;
color:#fff;
font-family: 'handel_gothic_fsregular';
padding-top:15px;
}
.comm-logos > div{
display:inline-block;
padding-right:15px;
padding-top:18px;
}
#comm_partners_div {
background-image:url(../images/comm_part_back.jpg);
background-repeat:repeat;
height:114px;
}
.form-box {
float:left;
width:65%;
position:relative;
}
.su-form {
width:550px;
height:325px;
background-image:url(../images/su_form_back.jpg);
background-repeat:no-repeat;
position:relative;
top:30px;
left:6px;
z-index:5;
}
.su-form > .content {
position:absolute;
z-index:11;
top:95px;
left:15px;
}
.su-form-header {
position:absolute;
top:-15px;
left:-6px;
z-index:10;
background-image:url(../images/su_form_header.png);
background-repeat:no-repeat;
width:588px;
height:56px;
padding-top:40px;
}
.otg-form {
float:left;
padding-left:25px;
width:275px;
position:relative;
}
.otg-back {
background-image:url(../images/otg_form_back.png);
background-repeat:no-repeat;
width:250px;
height:321px;
position:absolute;
top:10px;
left:0px;
z-index:5;
}
.otg-phone {
position:absolute;
top:0px;
right:20px;
z-index:10;
}
.otg-content {
padding:15px 0px 0px 15px;
}
.otg-content > .header {
font-size:18px;
font-weight:bold;
width:80%;
}
.otg-content > .content {
width:97%;
padding-top:15px;
}
.clear {
clear:both;
}
.su-form-header > div {
display:inline;
}
.jetz-link-card {
padding:0px 25px 0px 25px;
font-size:22px;
font-weight:bold;
color:#fff;
}
.jetz-tag {
padding:0px 25px 0px 25px;
font-size:22px;
color:#f4b7b4;
font-weight:bold;
}
input[id=su-fn]{
background: url(../images/f_name_img.png) 5px 5px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 205px;
padding-left: 30px;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../images/f_name_img.png) 5px 5px no-repeat, #FFF;
}
}
input[id=otg-fn]{
background: url(../images/f_name_img.png) 5px 5px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 190px;
padding-left: 30px;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../images/f_name_img.png) 5px 5px no-repeat, #FFF;
}
}
input[id=su-em]{
background: url(../images/email_img.png) 5px 8px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 205px;
padding-left: 30px;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../images/email_img.png) 5px 8px no-repeat, #FFF;
}
}
input[id=su-ph]{
background: url(../images/phone_img.png) 5px 5px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 205px;
padding-left: 30px;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../images/phone_img.png) 5px 5px no-repeat, #FFF;
}
}
input[id=otg-ph]{
background: url(../images/phone_img.png) 5px 5px no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 190px;
padding-left: 30px;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../images/phone_img.png) 5px 5px no-repeat, #FFF;
}
}
.nl-submit {
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
padding:6px 15px 6px 15px;
cursor:pointer;
width:240px;
font-size:17px;
font-weight:bold;
}
.nl-submit {
color: #fef4e9;
border: solid 1px #004400;
background: #008100;
background: -webkit-gradient(linear, left top, left bottom, from(#008100), to(#004400));
background: -moz-linear-gradient(top, #008100, #004400);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008100', endColorstr='#004400');
}
.nl-submit:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#636363));
background: -moz-linear-gradient(top, #2a2a2a, #636363);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2a2a', endColorstr='#636363');
}
.otg-submit {
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
padding:6px 15px 6px 15px;
cursor:pointer;
width:220px;
font-size:17px;
font-weight:bold;
}
.otg-submit {
color: #fef4e9;
border: solid 1px #05468a;
background: #0957ab;
background: -webkit-gradient(linear, left top, left bottom, from(#0957ab), to(#05468a));
background: -moz-linear-gradient(top, #0957ab, #05468a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0957ab', endColorstr='#05468a');
}
.otg-submit:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#636363));
background: -moz-linear-gradient(top, #2a2a2a, #636363);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2a2a', endColorstr='#636363');
}
.logo-sec {
position:absolute;
top:5px;
left:165px;
z-index:999;
}
.su-title {
font-size:18px;
padding-left:10px;
font-family: 'handel_gothic_fsbold';
margin-bottom:-20px;
}
.jetz-social {
background-image:url(../images/jetz_social_back.png); background-repeat:repeat-x; height:273px;
}
#jetz-container {
width:1015px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.jetz-title {
position:absolute;
top:0px;
left:0px;
z-index:25;
}
.footer {
height:87px; background-color:#2079c6;
}
.app-links {
padding-top:10px;
}
.app-links > div {
display:inline;
padding:20px 45px 0px 0px;
}
#hiw-container {
width:1015px;
margin-left:auto;
margin-right:auto;
}
#hiw-container > .card-box {
display:inline-block;
}
.card-box {
position:relative;
height:612px;
width:250px;
}
.gift-box {
width:218px;
height:612px;
/*position:absolute;*/
top:55px;
left:0px;
border:2px solid #ee2e24;
z-index:1;
background-color:#fff;
}
.gift-box > .content {
position:absolute;
/*top:12%;*/
left:0%;
}
.gift-box > .content > .title {
font-size:28px;
font-weight:bold;
font-family: 'handel_gothic_fsbold';
position:absolute;
top:0%;
left:50px;
}
.red {
color:#ee2e24;
}
.gift-card {
/*position:absolute;*/
top:1%;
left:9%;
z-index:1000;
}
.blue-box {
width:218px;
height:612px;
/*position:absolute;*/
top:55px;
left:0px;
border:2px solid #012f51;
z-index:1;
background-color:#fff;
}
.blue-box > .content {
position:absolute;
/*top:12%;*/
left:0%;
}
.blue-box > .content > .title {
font-size:28px;
font-weight:bold;
font-family: 'handel_gothic_fsbold';
position:absolute;
top:0%;
left:50px;
}
.blue {
color:#012f51;
}
.blue-card {
/*position:absolute;*/
top:1%;
left:8%;
z-index:1000;
}
.gold-box {
width:218px;
height:612px;
/*position:absolute;*/
top:55px;
left:0px;
border:2px solid #8b680c;
z-index:1;
background-color:#fff;
}
.gold-box > .content {
position:absolute;
/*top:12%;*/
left:0%;
}
.gold-box > .content > .title {
font-size:28px;
font-weight:bold;
font-family: 'handel_gothic_fsbold';
position:absolute;
top:0%;
left:50px;
}
.gold {
color:#8b680c;
}
.gold-card {
/*position:absolute;*/
top:1%;
left:8%;
z-index:1000;
}
.black-box {
width:218px;
height:612px;
/*position:absolute;*/
top:55px;
left:0px;
border:2px solid #000;
z-index:1;
background-color:#fff;
}
.black-box > .content {
position:absolute;
/*top:12%;*/
left:0%;
}
.black-box > .content > .title {
font-size:28px;
font-weight:bold;
font-family: 'handel_gothic_fsbold';
position:absolute;
top:0%;
left:45px;
}
.black {
color:#8b680c;
}
.black-card {
/*position:absolute;*/
top:1%;
left:6.5%;
z-index:1000;
}
#card-body {
position:absolute;
top:55px;
left:5px;
width:95%;
}
.cb-cont {
position:relative;
}
.sm-title {
width: 200px;
font-size:14px;
font-weight:bold;
padding-left:5px;
}
.card-contents {
width:200px;
padding-left:5px;
}
.card-contents > ul {
margin:10px 0px 20px 15px;
padding:0px;
}
.card-contents > ul > li {
margin:10px 0px 0px 0px;
}
.su-button {
position:absolute;
top:485px;
left:22px;
}
.comm-partners-logos img {
padding:50px;
}
#body-container {
width:1014px;
margin-left:auto;
margin-right:auto;
position:relative;
top:160px;
padding-top:25px;
}
.hiw-page-title {
font-size:22px;
font-family: 'handel_gothic_fsbold';
padding-bottom:15px;
}
.page-content {
padding:0px 15px 25px 0px;
}
.clear {
clear:both;
}
#header-container {
position:relative;
}
#h-sec-one {
background-image:url(../images/h_secone_back.jpg);
background-repeat:repeat;
height:46px;
position:absolute;
top:0px;
left:0px;
width:100%;
z-index:5;
}
.h-lines {
background-image:url(../images/jetz_lines.png);
background-repeat:repeat;
background-position:center;
height:46px;
position:absolute;
top:0px;
left:0px;
width:100%;
z-index:6;
}
#h-sec-two {
background-image:url(../images/h_sectwo_back.jpg);
background-repeat:repeat;
height:50px;
position:absolute;
top:46px;
left:0px;
width:100%;
z-index:5;
}
#h-sec-three {
background-color:#000;
height:53px;
position:absolute;
top:96px;
left:0px;
width:100%;
z-index:5;
}
.main-cont {
width:1014px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.logo-cont {
width:1014px;
margin-left:auto;
margin-right:auto;
z-index:100;
position:relative;
}
.logo-layout {
position:absolute;
top:0px;
left:0px;
}
.h-links {
position:absolute;
top:14px;
left:180px;
}
.h-links > a {
display:inline;
}
.h-links a {
font-family: 'handel_gothic_fsbold';
font-size:17px;
color:#fff;
font-style:italic;
padding-right:35px;
text-decoration:none;
text-shadow:
-1px -1px 0 #9d1211,
1px -1px 0 #9d1211,
-1px 1px 0 #9d1211,
1px 1px 0 #9d1211;
}
.h-links a:hover {
font-family: 'handel_gothic_fsbold';
font-size:17px;
color:#000;
font-style:italic;
padding-right:35px;
text-decoration:none;
}
.find-jetz {
position:absolute;
z-index:20;
top:10px;
right:100px;
}
.find-jetz > input {
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari, Chrome */
-khtml-border-radius: 5px; /* KHTML */
border-radius: 5px; /* CSS3 */
height:24px;
width:228px;
font-size:16px;
font-style:italic;
color:#8e8e8e;
font-family: 'handel_gothic_fsbold';
}
.go-button {
position:absolute;
top:10px;
right:60px;
}
.ref-jetz {
position:absolute;
top:12px;
left:150px;
font-size:24px;
color:#ebebeb;
font-style:italic;
font-family: 'handel_gothic_fsbold';
}
.loc-fam {
position:absolute;
top:14px;
right:50px;
font-size:23px;
color:#ee2e24;
font-weight:bold;
font-style:italic;
font-family: 'Alex Brush', cursive;
}
.main_slider {
}
.slider-cont {
position:relative;
height:363px;
width:245px;
float:left;
margin-right:5px;
}
.slider-cont > .img {
position:absolute;
top:0px;
left:0px;
z-index:5;
}
.slider-cont > .footer-title {
position:absolute;
bottom:0px;
left:0px;
height:62px;
width:100%;
background-color:#000;
z-index:20;
text-align:center;
}
.slider-cont > .footer-title > .footer-content {
font-size:19px;
font-family: 'handel_gothic_fsbold';
color:#fff;
padding-top:5px;
}
Raw
standard.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php Loader::element('header_required');?>
<?php require_once('header.php');?>
<div id="body-container">
<div class="hiw-page-title"><?php $a = new Area('Title');$a->setBlockLimit(1);$a->display($c);?></div>
<div class="page-content"><?php $a = new Area('Subsection');$a->display($c);?></div>
<!-- start cards -->
<div id="hiw-container">
<?php
$a = new Area('Card Options');
$a->setBlockWrapperStart('<div class="card-box">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);
?>
</div>
<!-- end cards -->
</div>
<?php Loader::element('footer_required'); ?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment