Difference between revisions of "Team:William and Mary/OutreachDatabase"

Line 1: Line 1:
 
{{Team:William_and_Mary/CSS_RESET}}
 
{{Team:William_and_Mary/CSS_RESET}}
 
{{Team:William_and_Mary/CSS_FIX}}
 
{{Team:William_and_Mary/CSS_FIX}}
 +
{{Team:William_and_Mary/SOURCE3}}
  
 +
 +
 +
<!---DOCTYPE HTML--->
 +
<!--
 +
Spatial by TEMPLATED
 +
templated.co @templatedco
 +
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 +
-->
 
<html>
 
<html>
 +
<head>
 +
<title>Generic - Spatial by TEMPLATED</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<link rel="stylesheet" href="assets/css/main.css" />
 +
</head>
 +
<body>
  
−
<style>
+
<!-- Header -->
 +
<header id="header">
 +
<h1><strong><a href="index.html">Spatial</a></strong> by Templated</h1>
 +
<nav id="nav">
 +
<ul>
 +
<li><a href="index.html">Home</a></li>
 +
<li><a href="generic.html">Generic</a></li>
 +
<li><a href="elements.html">Elements</a></li>
 +
</ul>
 +
</nav>
 +
</header>
  
−
* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
+
<a href="#menu" class="navPanelToggle"><span class="fa fa-bars"></span></a>
−
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
+
−
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}
+
−
html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
+
−
.clear {display: block; }
+
−
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}
+
−
+
−
/*GENERIC STYLES*/
+
−
body { background: #f2f2f2;color: #222;-webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.05em;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;}
+
−
/*NAV*/
+
−
header {
+
−
background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%);
+
−
border-bottom: 1px solid rgba(0,0,0,.1);
+
−
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+
−
display: block;
+
−
position: fixed;
+
−
width: 100%;
+
−
z-index: 1000;
+
−
}
+
−
+
−
header > nav > ul {
+
−
display: flex;
+
−
flex-wrap: wrap;
+
−
justify-content: flex-start;
+
−
list-style: none;
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
+
−
header > nav > ul > li {
+
−
flex: 0 1 auto;
+
−
margin: 0;
+
−
padding: 0;
+
−
position: relative;
+
−
transition: all linear 0.1s;
+
−
}
+
−
+
−
header > nav > ul > li:hover {
+
−
background: rgba(58,162,173,1);
+
−
}
+
−
+
−
header > nav > ul > li a + div {
+
−
background: linear-gradient(to bottom,rgba(58,162,173,1) 0,rgba(62,188,207,0.96) 100%);;
+
−
border-radius: 0 0 2px 2px;
+
−
box-shadow: 0 3px 1px rgba(0,0,0,.05);
+
−
display: none;
+
−
font-size: 1rem;
+
−
position: absolute;
+
−
width: 195px;
+
−
}
+
−
+
−
header > nav > ul > li:hover a + div {
+
−
display: block;
+
−
}
+
−
+
−
header > nav > ul > li a + div > ul {
+
−
list-style-type: none;
+
−
}
+
−
+
−
header > nav > ul > li a + div > ul > li {
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
+
−
header > nav > ul > li a + div > ul > li > a {
+
−
color: rgba(255,255,255,.9);
+
−
display: block;
+
−
font-size: .75rem;
+
−
letter-spacing: 1.5px;
+
−
padding: .25rem 1.5rem;
+
−
text-decoration: none;
+
−
text-transform: uppercase;
+
−
}
+
−
+
−
header > nav > ul > li a + div > ul > li:hover > a {
+
−
background-color: rgba(0,0,0,.15);
+
−
}
+
−
+
−
header > nav > ul > li > a {
+
−
align-items: flex-start;
+
−
color: #fff;
+
−
display: flex;
+
−
font-size: 1.55rem;
+
−
font-weight: 200;
+
−
letter-spacing: 1px;
+
−
max-width: 130px;
+
−
padding: 1rem 1.5rem;
+
−
text-decoration: none;
+
−
text-shadow: 0 1px 1px rgba(0,0,0,.1);
+
−
transition: all linear 0.1s;
+
−
}
+
−
+
−
header > nav > ul > li > a > div > span {
+
−
color: rgba(255,255,255,.75);
+
−
display: block;
+
−
font-family: Georgia, "Times New Roman", Times, serif;
+
−
font-size: .7rem;
+
−
font-style: italic;
+
−
line-height: 1rem;
+
−
max-width: 260px;
+
−
}
+
  
−
@media (min-width: 990px) {
+
<!-- Main -->
−
  header > nav > ul > li > a {
+
<section id="main" class="wrapper">
−
    max-width: 500px;
+
<div class="container">
−
    font-size: 1.7rem;
+
−
line-height: 2rem;
+
−
  }
+
−
 
+
−
  header > nav > ul > li > a > div > span {
+
−
  margin: 4px 0 0; 
+
−
  }
+
−
}
+
  
 +
<header class="major special">
 +
<h2>Generic</h2>
 +
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
 +
</header>
  
−
</style>
+
<a href="#" class="image fit"><img src="images/pic01.jpg" alt="" /></a>
 +
<p>Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.</p>
 +
<p>Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat placerat arcu commodo lobortis adipiscing semper ornare pellentesque.</p>
 +
<p>Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet blandit adipiscing arcu ante.</p>
  
 +
</div>
 +
</section>
  
−
<header>
+
<!-- Footer -->
−
<nav role="navigation">
+
<footer id="footer">
−
<ul>
+
<div class="container">
−
<li>
+
<ul class="icons">
−
<a href="/">
+
<li><a href="#" class="icon fa-facebook"></a></li>
−
<div>
+
<li><a href="#" class="icon fa-twitter"></a></li>
−
Home
+
<li><a href="#" class="icon fa-instagram"></a></li>
−
+
</ul>
−
</div>
+
<ul class="copyright">
−
</a>
+
<li>&copy; Untitled</li>
−
</li>
+
<li>Design: <a href="http://templated.co">TEMPLATED</a></li>
−
<li>
+
<li>Images: <a href="http://unsplash.com">Unsplash</a></li>
−
<a href="/blog">
+
−
<div>
+
−
Blog
+
−
+
−
</div>
+
−
</a><div>
+
−
<ul>
+
−
<li><a href="#">Me</a></li>
+
−
<li><a href="#">Gaming</a></li>
+
−
<li><a href="#">Sport</a></li>
+
−
<li><a href="#">Web Design</a></li>
+
−
<li><a href="#">Web Development</a></li>
+
 
</ul>
 
</ul>
 
</div>
 
</div>
−
</li>
+
</footer>
−
<li>
+
−
<a href="/contact">
+
−
<div>
+
−
Contact
+
−
<span>drop me a line</span>
+
−
</div>
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="/forum">
+
−
<div>
+
−
Forum
+
−
<span>chat with others</span>
+
−
</div>
+
−
</a>
+
−
</li>
+
−
</ul>
+
−
</nav>
+
−
</header>
+
−
 
+
−
 
+
  
 +
<!-- Scripts -->
 +
<script src="assets/js/jquery.min.js"></script>
 +
<script src="assets/js/skel.min.js"></script>
 +
<script src="assets/js/util.js"></script>
 +
<script src="assets/js/main.js"></script>
  
 +
</body>
 
</html>
 
</html>

Revision as of 22:59, 17 August 2017


Generic - Spatial by TEMPLATED

Generic

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.

Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat placerat arcu commodo lobortis adipiscing semper ornare pellentesque.

Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet blandit adipiscing arcu ante.