Created
May 2, 2012 22:15
-
-
Save kraigh/2580960 to your computer and use it in GitHub Desktop.
PennellChing HTML/CSS (with problems)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding: 0; | |
| } | |
| body{ | |
| background-image:url("images/background.jpg"); | |
| background-attachment: fixed; | |
| background-position: top center; | |
| background-repeat: no-repeat; | |
| background-color:#000000; | |
| font-family: "adelle",serif; | |
| } | |
| 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{ | |
| } | |
| .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); | |
| } | |
| #wrapper{ | |
| width:750px; | |
| margin:0px auto; | |
| text-align:left; | |
| height: auto; | |
| } | |
| .body{ | |
| width: 630px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: auto; | |
| } | |
| div.quotewrapper{ | |
| margin-bottom: 25px; | |
| } | |
| div.quotewrapper div#quotetext{ | |
| width: 550px; | |
| } | |
| div.quotewrapper #quotetext p{ | |
| color: rgba(0, 0, 0, 0.83); | |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 0.77); | |
| text-align: center; | |
| margin: auto auto auto auto; | |
| font: italic 1.15em/40px "adelle", serif; | |
| } | |
| 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 .iconcontainer{ | |
| visibility: hidden; | |
| width: 0px; | |
| } | |
| #contact div.quotewrapper div#quotetext{ | |
| width: 600px; | |
| visibility: hidden; | |
| } | |
| #contact div.quotewrapper{ | |
| visibility: hidden; | |
| } | |
| #contact div.quotewrapper #quotetext p{ | |
| color: rgba(0, 0, 0, 0.83); | |
| text-shadow: 0 1px 0 rgba(255, 255, 255, 0.77); | |
| text-align: center; | |
| margin: auto auto auto auto; | |
| font: italic .85em/25px "adelle", serif; | |
| } | |
| #contact #introtext span{ | |
| display: block; | |
| } | |
| /* ABOUT PAGE SPECIFIC CSS */ | |
| #about div#marshall{ | |
| float: right; | |
| } | |
| #about div#jess{ | |
| float: left; | |
| } | |
| .body{ | |
| } | |
| .body p{ | |
| font: 13px/20px "adelle", serif; | |
| margin-left: 20px; | |
| } | |
| .body p .firstword{ | |
| font-variant: small-caps; | |
| font-size: 20px; | |
| font-weight: bold; | |
| } | |
| .frontpage p{ | |
| } | |
| .body #introtext p{ | |
| width: 340px; | |
| } | |
| .body div.fb-like-box{ | |
| float: right; | |
| margin: 0px 20px; | |
| } | |
| div.footer{ | |
| background-color: rgba(0, 0, 0, 0.6); | |
| margin-top: 100px; | |
| font: normal normal 13px/20px "adelle", serif; | |
| width: 750px; | |
| color: rgba(255, 255, 255, 0.74); | |
| text-decoration: none; | |
| text-shadow: 0 -1.5px 0 rgba(0, 0, 0, 0.78); | |
| bottom: 0; | |
| } | |
| div.footer ul{ | |
| list-style: none; | |
| } | |
| div.footer ul li a{ | |
| color: rgba(255, 255, 255, 0.84); | |
| text-shadow: 0 -1.5px 0 rgba(0, 0, 0, 0.78); | |
| text-decoration: none; | |
| font-style: italic; | |
| font-variant: normal; | |
| } | |
| div.footer ul li a:hover{ | |
| } | |
| 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 */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- | |
| PennellChing LLC Website | |
| Developed by Kraig Hufstedler | |
| [email protected] | |
| http://kraigh.com | |
| Development in pure HTML/CSS | |
| Uses HTML5 for Facebook elements | |
| Uses CSS3 for things like opacity, text-shadow, etc | |
| 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" class="active">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="about"> | |
| <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>There are a lot of good development professionals; some of them even understand development for evangelical ministry. PennellChing is led by people who have actually been leaders in one of the world's largest ministries. They understand ministry strategy, funds development, and how they are connected.</p> | |
| </div> | |
| <div class="iconcontainer" id="rightcontainer"> | |
| <img src="images/quoteright.png" class="quoteicon" id="quoteright" alt="Quote Icon"> | |
| </div> | |
| </div> | |
| <!-- ################## ADD SUBORDINATE PAGES HERE!!! ##################--> | |
| <div id="abouttext" class="frontpage"> | |
| <p><span class="firstword"><a href="marshall.html">Marshall Pennell</a></span> is a Christian leader, son of a pastor, innovator and strategic planner. The Pennell’s have 4 daughters, three sons-in-law, and 7 grandchildren.</p> | |
| <div class="aboutphoto" id="marshall"> | |
| <img src="images/Marshall.png" alt="Marshall Pennell"> | |
| <h1 class="caption" id="marshallcaption">Marshall Pennell</h1> | |
| </div> | |
| <p><span class="firstword"><a href="jess.html">Jessica Ching</a></span> was born and raised on the mission field and has a heart dedicated to the Great Commission with experience in administrative ministries and project management.</p> | |
| <div class="aboutphoto" id="jess"> | |
| <img src="images/Jess.png" alt="Jessica Ching"> | |
| <h1 class="caption" id="jesscaption">Jessica Ching</h1> | |
| </div> | |
| <div class="aboutphoto" id="group"> | |
| <img src="images/office.png" alt="PennellChing Development Group"> | |
| <h1 class="caption" id="groupcaption">PennellChing Development Group</h1> | |
| </div> | |
| </div> | |
| <!-- ################## STOP ADDING SUBORDINATE PAGES!!! ##################--> | |
| <!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment