Skip to content

Instantly share code, notes, and snippets.

@kraigh

kraigh/index.html

Created May 11, 2012 18:34
Show Gist options
  • Save kraigh/2661572 to your computer and use it in GitHub Desktop.
Save kraigh/2661572 to your computer and use it in GitHub Desktop.
Download ZIP
PennellChing HTML/CSS
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<!--
PennellChing LLC Website
Developed by Kraig Hufstedler
[email protected]
http://kraigh.com
Uses TypeKit for Fonts
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://use.typekit.com/nua5fjg.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<title>PennellChing LLC</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="wrapper">
<!-- Begin header!-->
<div id="header">
<h1 class="logo">
<a href="index.html">
<img src="images/logo.png" alt="Home" />
</a>
</h1>
</div>
<!--End header!-->
<!--Begin menu!-->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="perspective.html">Our Perspective</a></li>
<li><a href="work.html">Our Work</a></li>
<li><a href="values.html">Our Values</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<!-- End menu!-->
<!-- Begin body!-->
<div class="body" id="index">
<div class="quotewrapper">
<div class="iconcontainer" id="leftcontainer">
<img src="images/quoteleft.png" class="quoteicon" id="quoteleft" alt="Quote Icon">
</div>
<div id="quotetext">
<!-- ################## QUOTE GOES HERE ##################-->
<p>PennellChing exists to meet the need for sufficient funding and the related development strategies for ministries that are busy in the work of the Kingdom.</p>
</div>
<div class="iconcontainer" id="rightcontainer">
<img src="images/quoteright.png" class="quoteicon" id="quoteright" alt="Quote Icon">
</div>
</div>
<div class="fb-like-box" data-href="http://www.facebook.com/pennellching" data-width="250" data-show-faces="false" data-border-color="#A4A4A4" data-stream="true" data-header="true">
</div>
<!-- ################## INTRO TEXT (ONLY 340 px wide) ##################-->
<div id="introtext" class="frontpage">
<p><span class="firstword">Headquartered</span> on North Hutchinson Island in Southeast Florida, PennellChing seeks to provide superior consulting and development services for managing the implementation of development strategies for ministries that are busy in the work of the Kingdom. PennellChing wants to bring a fresh and innovative approach to development services, designing and implementing development strategies that are driven by your own organization's goals and initiatives.</p>
<p>It is the desire of PennellChing to come along side of ministries, understand their heart, and work with them to form and execute a solid, workable development strategy that produces results. We understand funds development to be difficult and complex, but we believe that God will bless diligence and focus with His provision as we work to carry out His great commission. PennellChing wants to help your organization to build on the foundation of your principles and purposes to engage a larger, more passionate base of constituents and donors to propel your ministry forward.</p>
</div>
<!-- End body!-->
</div>
<!-- Begin Footer-->
<div class="footer">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="perspective.html">Perspective</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="values.html">Values</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="contact">
<li id="facebook"><div class="fb-like" data-href="http://www.pennellching.com" data-send="true" data-layout="button_count" data-width="225" data-show-faces="false" data-action="recommend" data-colorscheme="dark"></div></li>
<li><br></li>
<li>PennellChing Development</li>
<li>5047 North Highway A1A</li>
<li>Unit 1703</li>
<li>North Hutchinson Island, FL 34949</li>
</ul>
<ul class="site">
<li id="email">Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li><br></li>
<li class="design">Site Developed by:</li>
<li><a href="mailto:[email protected]">Kraig Hufstedler</a></li>
<li><br></li>
<li id="sitemap"><a href="sitemap">Sitemap</a></li>
</ul>
</div>
<!--End Footer-->
</div>
</body>
</html>
Raw
style.css
/*Basic browser reset*/
*{
margin-left: auto;
margin-right: auto;
padding: 0;
}
/*IE img inside of a tag fix*/
a img{
border:none;
}
body{
background-image:url("images/background.jpg");
background-attachment: fixed;
background-position: top center;
background-repeat: repeat-y;
background-color:#000000;
font-family: "adelle",serif;
}
#wrapper{
width:750px;
margin:0px auto;
text-align:left;
position: relative;
}
h1.logo{
width: 630px;
height: 220px;
top: 10%;
margin-left: auto;
margin-right: auto;
}
div.nav{
height: 64px;
background: url("images/navbar.png") top center no-repeat;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.nav ul li{
list-style: none;
margin-left: auto;
margin-right: auto;
text-align: center;
display: inline-block;
}
.nav ul li a{
display: inline-block;
color: #1d1d1d;
text-decoration: none;
font: bold .8em "adelle", serif;
margin-top: 8.5px;
padding: 7px 15px 3px;
}
.nav ul li a:hover{
background-color: rgba(0, 0, 0, 0.44);
opacity: 1;
-moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
-webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}
.nav ul li a.active{
background-color: rgba(0, 0, 0, 0.44);
opacity: 1;
-moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
-webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}
.body{
width: 630px;
}
div.quotewrapper{
margin-top: 25px;
margin-bottom: 50px;
}
div.quotewrapper div#quotetext{
width: 550px;
}
div.quotewrapper #quotetext p{
color: rgb(52, 52, 52);
text-shadow: 0 1px 0 rgb(208, 208, 208);
text-align: center;
font: italic 1.15em/40px "adelle", serif;
margin: auto auto auto auto;
}
div.quotewrapper .iconcontainer{
width: 40px;
position: relative;
}
div.quotewrapper #leftcontainer{
float: left;
}
div.quotewrapper #rightcontainer{
float: right;
}
div.quotewrapper .iconcontainer #quoteleft{
position: absolute;
top: 0px;
right: 0px;
}
div.quotewrapper .iconcontainer #quoteright{
position: absolute;
bottom: 10px;
left: 0px;
}
/* CONTACT PAGE SPECIFIC CSS */
#contact div.quotewrapper{
visibility: hidden;
}
#contact #introtext span{
display: block;
}
.body p{
font: 13px/20px "adelle", serif;
margin-left: 20px;
}
.body p .firstword{
font-variant: small-caps;
font-size: 20px;
font-weight: bold;
}
.frontpage#workpage h1{
font-size: 1.25em;
}
.frontpage#workpage ul{
margin-left: 40px;
margin-bottom: 40px;
}
/* ABOUT PAGE PHOTO LAYOUT */
.body div.aboutphoto{
text-align: center;
}
.body div.aboutphoto span{
display: block;
margin-top: -10px;
font-size: .80em;
font-weight: bold;
margin-bottom: 10px;
}
a.profile{
color: #32518a;
}
.proprofile h1{
text-align: center;
}
a.backnav{
color: #32518a;
}
.propic1{
float: right;
margin-left: 15px;
margin-bottom: 15px;
}
.propic2{
float: left;
margin-right: 15px;
margin-bottom: 5px;
}
.propic2 img{
margin-bottom: 5px;
}
.body #introtext p{
width: 340px;
}
.body div.fb-like-box{
float: right;
margin: 0px 20px;
}
div.footer{
background-color: rgb(0, 0, 0);
opacity: 0.75;
margin-top: 100px;
padding-top: 25px;
padding-bottom: 25px;
font: normal normal 13px/20px "adelle", serif;
position: absolute;
width: 100%;
/* left: -1px;*/
color: rgb(161, 161, 161);
text-decoration: none;
text-shadow: 0 -1.5px 0 rgb(0, 0, 0);
/* overflow: auto;*/
display: block;
}
div.footer ul{
list-style: none;
}
div.footer ul li a{
color: rgb(206, 206, 206);
text-shadow: 0 -1.5px 0 rgb(0, 0, 0);
text-decoration: none;
font-variant: normal;
}
div.footer ul.menu{
float: left;
width: 225px;
padding-left: 37.5px;
}
div.footer ul.contact{
float: left;
width: 225px;
}
div.footer ul.site{
float: left;
width: 225px;
padding-left: 37.5px;
}
/* @end */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment