Skip to content

Instantly share code, notes, and snippets.

/contact

Created November 6, 2014 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/31836878e789ae66673f to your computer and use it in GitHub Desktop.
Save anonymous/31836878e789ae66673f to your computer and use it in GitHub Desktop.
Download ZIP
Kiwanis Kennett Square Home Page
Raw
contact
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kiwanis of Kennett Square</title>
<meta charset="utf-8">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ruda' rel='stylesheet' type='text/css'>
</head>
<body class="body">
<div id="page">
<header class="mainHeader">
<div class="socialBar">
<img id="logo" src="images/kiwanis_logo_transparent.png" alt="Kiwanis Logo">
<h1 align="right">Kiwanis of Kennett Square</h1>
<h2>Find us on: </h2>
<a href="https://www.facebook.com/kiwanisKSQ" target="_blank"><img id="socialLogo" src="images/facebook.png" alt="Facebook"></a>
<a href="http://www.twitter.com" target="_blank"><img id="socialLogo" src="images/twitter.png" alt="Twitter"></a>
<a href="http://www.instagram.com" target="_blank"><img id="socialLogo" src="images/instagram.png" alt="Instagram"></a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div>
<iframe id="contactform" src="https://docs.google.com/forms/d/1bUTpWyMaouMEQH68trQlyyx5I8EU5YQXrGvj10NNdrw/viewform?embedded=true" width="690" height="1050" frameborder="0" marginheight="0" marginwidth="0">Loading...
</iframe>
</div>
<div class="mainFooter">
<p>Email us at: <a href="mailto:kiwanisksq@gmail.com" target="_top">KIWANISKSQ@GMAIL.COM</a>
</p>
</div>
</div>
</body>
</html>
Raw
css
.body {
font-family: 'Ruda', sans-serif;
font-size: 87.5%;
background-color:#efefef;
margin: 0 auto;
width: 60%;
clear:both;
line-height:1.5;
}
/*
======= MAIN HEADER =======
*/
.mainHeader {
margin:5px auto 5px auto;
}
.mainHeader img {
width: 15%;
display: inline;
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
}
.mainHeader li {
font-size: 150%;
display:inline;
margin: 0px 25px;
font-weight: bold;
letter-spacing: .5px;
}
.mainHeader nav {
background-color: #00457C;
}
.mainHeader ul {
text-align: center;
padding: 10px;
}
.mainHeader h1 {
color: #193365;
display: inline;
font-size: 300%;
padding: 0px 0px 0px 50px;
}
/*
======= SOCIAL BAR =======
*/
.socialBar {
text-align: right;
}
.socialBar h2 {
display: inline;
padding-right: 5px;
}
.socialBar h1 {
display: block;
}
.socialBar img {
width: 4%;
padding: 0px 5px 0px 5px;
}
.socialBar a {
display:inline;
}
#logo {
float:left;
width:12%;
}
/*
======= MAIN CONTENT =======
*/
.content p {
width: 90%;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
.content img {
width:75%;
display:block;
margin: 0 auto;
padding: 5px 0 5px 0;
}
#contactform {
display:block;
margin-left:auto;
margin-right:auto;
}
a {
text-decoration: none;
text-transform:uppercase;
color: white;
}
a:hover {
text-decoration: underline;
}
/*
======= MAIN FOOTER =======
*/
.mainFooter {
background-color: #00457C;
font-size: 150%;
margin: 0px auto 0px auto;
color:white;
text-align: right;
width:100%;
}
.mainFooter p {
padding: 10px;
}
Raw
home page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kiwanis of Kennett Square</title>
<meta charset="utf-8">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ruda' rel='stylesheet' type='text/css'>
</head>
<body class="body">
<div id="page">
<header class="mainHeader">
<div class="socialBar">
<img id="logo" src="images/kiwanis_logo_transparent.png" alt="Kiwanis Logo">
<h1 align="right">Kiwanis of Kennett Square</h1>
<h2>Find us on: </h2>
<a href="https://www.facebook.com/kiwanisKSQ" target="_blank"><img id="socialLogo" src="images/facebook.png" alt="Facebook"></a>
<a href="http://www.twitter.com" target="_blank"><img id="socialLogo" src="images/twitter.png" alt="Twitter"></a>
<a href="http://www.instagram.com" target="_blank"><img id="socialLogo" src="images/instagram.png" alt="Instagram"></a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<content class="content">
<img src="images/masthead.jpg" alt="Masthead">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet felis nulla. Aliquam at ligula porttitor, eleifend quam at, congue urna. Duis vehicula aliquam lectus, sed pharetra orci aliquet et. Pellentesque felis sem, auctor a erat eu, dignissim gravida enim. Ut eget est justo. In ac pharetra ipsum. In a metus feugiat, aliquam metus in, lobortis lectus. Integer non dolor felis. Suspendisse condimentum a ex faucibus tempus. Curabitur blandit mi aliquam, aliquam libero et, hendrerit tortor. Vivamus non tortor ultrices, auctor arcu ut, luctus risus. Ut a elementum leo, quis porta augue.
</p>
<br>
<p>
Suspendisse eget enim arcu. In arcu dui, faucibus eget vehicula eget, hendrerit ut urna. Nunc venenatis vestibulum luctus. Etiam magna purus, posuere rutrum diam sed, porttitor condimentum velit. Proin dapibus ligula eget tellus efficitur, a maximus lectus tristique. Duis nunc risus, vehicula at dignissim sed, vehicula ut libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed odio lobortis, viverra ipsum ut, tincidunt enim. Fusce est nulla, viverra sed blandit eget, ullamcorper sed ipsum. Donec laoreet euismod tortor, vel dapibus turpis semper a. Duis et lacus nec odio volutpat eleifend id ac mauris. Duis non orci sed urna congue rutrum. Pellentesque id dapibus eros, ut cursus elit. Cras at tellus id nulla posuere tempor. Sed eu pulvinar nibh. Sed eleifend pellentesque imperdiet.
</p>
<br>
<p>
Nunc et orci mauris. Nulla at odio lorem. Donec condimentum commodo elit vitae aliquam. Integer eget sagittis elit. Nulla facilisi. Aenean vel vehicula felis. Integer nec sapien et dui semper sagittis. Vivamus eu ex ut urna mattis iaculis. Maecenas auctor accumsan iaculis. Donec in arcu nisl.
</p>
</content>
<div class="mainFooter">
<p>Email us at: <a href="mailto:kiwanisksq@gmail.com" target="_top">KIWANISKSQ@GMAIL.COM</a>
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment