Difference between revisions of "Team:Stony Brook"

m
 
(352 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<html>
+
{{Stony Brook Header}}
<!--
+
Design by TEMPLATED
+
http://templated.co
+
Released for free under the Creative Commons Attribution License
+
  
Name      : Embellished
+
<html>
Description: A two-column, fixed-width design with dark color scheme.
+
Version    : 1.0
+
Released  : 20140207
+
  
-->
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title></title>
 
<meta name="keywords" content="" />
 
<meta name="description" content="" />
 
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
 
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
 
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
 
 
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
 
 
</head>
 
<body>
 
<div id="wrapper1">
 
<div id="header-wrapper">
 
<div id="header" class="container">
 
<div id="logo"> <span class="icon icon-cogs"></span>
 
<h1><a href="#">Embellished</a></h1>
 
<span>Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a></span> </div>
 
<div id="menu">
 
<ul>
 
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
 
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
 
<li><a href="#" accesskey="3" title="">About Us</a></li>
 
<li><a href="#" accesskey="4" title="">Careers</a></li>
 
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
 
</ul>
 
</div>
 
</div>
 
</div>
 
<div id="wrapper2">
 
<div id="welcome" class="container">
 
<div class="title">
 
<h2>Welcome to our website</h2>
 
</div>
 
<p>This is <strong>Embellished</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
 
</div>
 
</div>
 
<div id="wrapper3">
 
<div id="portfolio" class="container">
 
<div class="title">
 
<h2>Vivamus fermentum nibh</h2>
 
<span class="byline">Integer sit amet pede vel arcu aliquet pretium</span> </div>
 
<div class="column1">
 
<div class="box">
 
<span class="icon icon-wrench"></span>
 
<h3>Vestibulum venenatis</h3>
 
<p>Fermentum nibh augue praesent a lacus at urna congue rutrum.</p>
 
<a href="#" class="button button-small">Etiam posuere</a> </div>
 
</div>
 
<div class="column2">
 
<div class="box">
 
<span class="icon icon-trophy"></span>
 
<h3>Praesent scelerisque</h3>
 
<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
 
<a href="#" class="button button-small">Etiam posuere</a> </div>
 
</div>
 
<div class="column3">
 
<div class="box">
 
<span class="icon icon-key"></span>
 
<h3>Donec dictum metus</h3>
 
<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
 
<a href="#" class="button button-small">Etiam posuere</a> </div>
 
</div>
 
<div class="column4">
 
<div class="box">
 
<span class="icon icon-lock"></span>
 
<h3>Mauris vulputate dolor</h3>
 
<p>Rutrum fermentum nibh in augue praesent urna congue rutrum.</p>
 
<a href="#" class="button button-small">Etiam posuere</a> </div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div id="footer" class="container">
 
<div class="title">
 
<h2>Get in touch</h2>
 
<span class="byline">Phasellus nec erat sit amet nibh pellentesque congue</span> </div>
 
<ul class="contact">
 
<li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
 
<li><a href="#" class="icon icon-facebook"><span></span></a></li>
 
<li><a href="#" class="icon icon-dribbble"><span>Pinterest</span></a></li>
 
<li><a href="#" class="icon icon-tumblr"><span>Google+</span></a></li>
 
<li><a href="#" class="icon icon-rss"><span>Pinterest</span></a></li>
 
</ul>
 
</div>
 
<div id="copyright" class="container">
 
<p>&copy; Untitled. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
 
</div>
 
</body>
 
 
<style>
 
<style>
html, body
 
{
 
height: 100%;
 
}
 
 
body
 
{
 
margin: 0px;
 
padding: 0px;
 
background: #1B1B1B url(images/overlay.png) repeat;
 
font-family: 'Varela Round', sans-serif;
 
font-size: 11pt;
 
font-weight: 400;
 
color: #000000;
 
}
 
 
 
h1, h2, h3
 
{
 
margin: 0;
 
padding: 0;
 
}
 
 
p, ol, ul
 
{
 
margin-top: 0;
 
}
 
 
ol, ul
 
{
 
padding: 0;
 
list-style: none;
 
}
 
 
p
 
{
 
line-height: 180%;
 
}
 
 
strong
 
{
 
}
 
 
a
 
{
 
color: #0000FF;
 
}
 
 
a:hover
 
{
 
text-decoration: none;
 
}
 
 
  
.container
+
#sideMenu, #top_title {display:none;}
{
+
body {background-color:B61C1D; }
margin: 0px auto;
+
#content { padding:0px; width:100%; margin-top:0px; margin-left:0px;}
width: 1200px;
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
}
+
+
  
/*********************************************************************************/
+
#Plswork { text-align: center;
/* Form Style                                                                    */
+
position: absolute;
/*********************************************************************************/
+
margin-left: 400px;
 
+
margin-top: 16px;
form
+
{
+
}
+
+
form label
+
{
+
display: block;
+
text-align: left;
+
margin-bottom: 0.5em;
+
}
+
+
form .submit
+
{
+
margin-top: 2em;
+
background: #67128F;
+
border-radius: 8px;
+
line-height: 1.5em;
+
font-size: 1.3em;
+
}
+
+
form input.text,
+
form select,
+
form textarea
+
{
+
position: relative;
+
-webkit-appearance: none;
+
display: block;
+
border: 0;
+
background: #fff;
+
background: rgba(255,255,255,0.75);
+
width: 100%;
+
border-radius: 0.50em;
+
margin: 1em 0em;
+
padding: 1.50em 1em;
+
box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
+
border: solid 1px rgba(0,0,0,0.15);
+
-moz-transition: all 0.35s ease-in-out;
+
-webkit-transition: all 0.35s ease-in-out;
+
-o-transition: all 0.35s ease-in-out;
+
-ms-transition: all 0.35s ease-in-out;
+
transition: all 0.35s ease-in-out;
+
font-family: 'Source Sans Pro', sans-serif;
+
font-size: 1em;
+
outline: none;
+
}
+
 
+
form input.text:hover,
+
form select:hover,
+
form textarea:hover
+
{
+
}
+
 
+
form input.text:focus,
+
form select:focus,
+
form textarea:focus
+
{
+
box-shadow: 0 0 2px 1px #E0E0E0;
+
background: #fff;
+
}
+
+
form textarea
+
{
+
min-height: 12em;
+
}
+
 
+
form .formerize-placeholder
+
{
+
color: #555 !important;
+
}
+
 
+
form ::-webkit-input-placeholder
+
{
+
color: #555 !important;
+
}
+
 
+
form :-moz-placeholder
+
{
+
color: #555 !important;
+
}
+
 
+
form ::-moz-placeholder
+
{
+
color: #555 !important;
+
}
+
 
+
form :-ms-input-placeholder
+
{
+
color: #555 !important;
+
}
+
 
+
form ::-moz-focus-inner
+
{
+
border: 0;
+
}
+
 
+
 
+
/*********************************************************************************/
+
/* Image Style                                                                  */
+
/*********************************************************************************/
+
 
+
.image
+
{
+
display: inline-block;
+
border: 1px solid rgba(0,0,0,.1);
+
}
+
+
.image img
+
{
+
display: block;
+
width: 100%;
+
}
+
+
.image-full
+
{
+
display: block;
+
width: 100%;
+
margin: 0 0 3em 0;
+
}
+
+
.image-left
+
{
+
float: left;
+
margin: 0 2em 2em 0;
+
}
+
+
.image-centered
+
{
+
display: block;
+
margin: 0 0 2em 0;
+
}
+
+
.image-centered img
+
{
+
margin: 0 auto;
+
width: auto;
+
}
+
 
+
/*********************************************************************************/
+
/* List Styles                                                                  */
+
/*********************************************************************************/
+
 
+
ul.style1
+
{
+
}
+
 
+
 
+
/*********************************************************************************/
+
/* Social Icon Styles                                                            */
+
/*********************************************************************************/
+
 
+
ul.contact
+
{
+
margin: 0;
+
padding: 1em 0em 0em 0em;
+
list-style: none;
+
}
+
+
ul.contact li
+
{
+
display: inline-block;
+
padding: 0em 0.20em;
+
font-size: 1.2em;
+
}
+
+
ul.contact li span
+
{
+
display: none;
+
margin: 0;
+
padding: 0;
+
}
+
+
ul.contact li a
+
{
+
color: rgba(255,255,255,1);
+
}
+
+
ul.contact li a:before
+
{
+
display: inline-block;
+
width: 60px;
+
height: 60px;
+
line-height: 60px;
+
background: #6C2A6A;
+
border-radius: 30px;
+
text-align: center;
+
}
+
+
 
+
/*********************************************************************************/
+
/* Button Style                                                                  */
+
/*********************************************************************************/
+
 
+
.button
+
{
+
display: inline-block;
+
margin-top: 2em;
+
padding: 0.6em 1em;
+
background: #6C2A6A;
+
border-radius: 4px;
+
line-height: 1.8em;
+
text-decoration: none;
+
font-weight: 400;
+
font-size: 1.2em;
+
color: #FFF;
+
}
+
+
.button:before
+
{
+
display: inline-block;
+
background: #8DCB89;
+
margin-right: 1em;
+
width: 40px;
+
height: 40px;
+
line-height: 40px;
+
border-radius: 20px;
+
text-align: center;
+
color: #272925;
+
}
+
+
.button-small
+
{
+
}
+
+
/*********************************************************************************/
+
/* Heading Titles                                                                */
+
/*********************************************************************************/
+
 
+
.title
+
{
+
margin-bottom: 3em;
+
}
+
+
.title h2
+
{
+
font-size: 2.8em;
+
color: #261300;
+
}
+
+
.title .byline
+
{
+
letter-spacing: 0.15em;
+
text-transform: uppercase;
+
font-weight: 400;
+
font-size: 1.1em;
+
color: #6F6F6F;
+
}
+
 
+
/*********************************************************************************/
+
/* Header                                                                        */
+
/*********************************************************************************/
+
 
+
#header-wrapper
+
{
+
overflow: hidden;
+
padding: 5em 0em;
+
}
+
 
+
#header
+
{
+
}
+
 
+
/*********************************************************************************/
+
/* Logo                                                                          */
+
/*********************************************************************************/
+
 
+
#logo
+
{
+
padding: 5em 0em;
+
text-align: center;
+
}
+
+
#logo h1
+
{
+
font-size: 3.5em;
+
}
+
+
+
#logo h1 a
+
{
+
color: #6C2A6A;
+
}
+
 
+
#logo a
+
{
+
text-decoration: none;
+
}
+
+
#logo span
+
{
+
letter-spacing: 0.10em;
+
text-transform: uppercase;
+
font-size: 0.90em;
+
color: #3C3C3C;
+
}
+
 
+
#logo span a
+
{
+
color: #3C3C3C;
+
}
+
+
#logo .icon
+
{
+
display: inline-block;
+
margin-bottom: 2em;
+
padding: 1em;
+
background: #6C2A6A;
+
border-radius: 50%;
+
font-size: 1.6em;
+
color: #FFF;
+
}
+
+
 
+
/*********************************************************************************/
+
/* Menu                                                                          */
+
/*********************************************************************************/
+
 
+
#menu
+
{
+
}
+
+
#menu ul
+
{
+
text-align: center;
+
}
+
+
#menu li
+
{
+
display: inline-block;
+
}
+
+
#menu li a, #menu li span
+
{
+
display: inline-block;
+
margin-left: 0.50em;
+
padding: 1em 1.5em;
+
letter-spacing: 0.20em;
+
text-decoration: none;
+
font-size: 0.90em;
+
font-weight: 600;
+
text-transform: uppercase;
+
outline: 0;
+
color: #3C3C3C;
+
}
+
+
#menu li:hover a, #menu li.active a, #menu li.active span
+
{
+
}
+
+
#menu .current_page_item a
+
{
+
border: 1px solid #3C3C3C;
+
border-radius: 4px;
+
}
+
+
 
+
/*********************************************************************************/
+
/* Banner                                                                        */
+
/*********************************************************************************/
+
 
+
#banner
+
{
+
}
+
 
+
/*********************************************************************************/
+
/* Wrapper                                                                      */
+
/*********************************************************************************/
+
 
+
#wrapper1
+
{
+
background: #FFF;
+
}
+
 
+
#wrapper2
+
{
+
background: #6C2A6A;
+
}
+
 
+
#wrapper3
+
{
+
overflow: hidden;
+
padding: 0em 0em 8em 0em;
+
background: #FFF;
+
}
+
+
#wrapper4
+
{
+
overflow: hidden;
+
padding: 8em 0em 4em 0em;
+
}
+
 
+
/*********************************************************************************/
+
/* Welcome                                                                      */
+
/*********************************************************************************/
+
 
+
#welcome
+
{
+
overflow: hidden;
+
width: 1000px;
+
padding: 8em 100px 8em 100px;
+
text-align: center;
+
color: rgba(255,255,255,0.4);
+
}
+
+
#welcome .content
+
{
+
padding: 0em 8em;
+
}
+
+
#welcome .title h2
+
{
+
color: rgba(255,255,255,1);
+
}
+
+
#welcome a,
+
#welcome strong
+
{
+
color: rgba(255,255,255,0.6);
+
}
+
 
+
/*********************************************************************************/
+
/* Page                                                                          */
+
/*********************************************************************************/
+
 
+
#page
+
{
+
}
+
 
+
/*********************************************************************************/
+
/* Content                                                                      */
+
/*********************************************************************************/
+
 
+
#content
+
{
+
}
+
 
+
/*********************************************************************************/
+
/* Sidebar                                                                      */
+
/*********************************************************************************/
+
 
+
#sidebar
+
{
+
}
+
 
+
/*********************************************************************************/
+
/* Footer                                                                        */
+
/*********************************************************************************/
+
 
+
#footer
+
{
+
padding: 8em 0em 5em 0em;
+
text-align: center;
+
}
+
 
+
+
#footer .title h2
+
{
+
color: rgba(255,255,255,1);
+
}
+
 
+
 
+
#footer .title .byline
+
{
+
letter-spacing: normal;
+
text-transform: capitalize;
+
font-size: 1.6em;
+
color: rgba(255,255,255,0.2);
+
}
+
 
+
/*********************************************************************************/
+
/* Copyright                                                                    */
+
/*********************************************************************************/
+
 
+
#copyright
+
{
+
overflow: hidden;
+
padding: 5em 0em;
+
border-top: 1px solid rgba(255,255,255,0.08);
+
}
+
+
#copyright p
+
{
+
text-align: center;
+
color: rgba(255,255,255,0.2);
+
}
+
+
#copyright a
+
{
+
text-decoration: none;
+
color: rgba(255,255,255,0.4);
+
}
+
 
+
/*********************************************************************************/
+
/* Newsletter                                                                    */
+
/*********************************************************************************/
+
 
+
#newsletter
+
{
+
overflow: hidden;
+
padding: 8em 0em;
+
background: #EDEDED;
+
text-align: center;
+
}
+
+
#newsletter .title h2
+
{
+
color: rgba(0,0,0,0.8);
+
}
+
+
#newsletter .content
+
{
+
width: 600px;
+
margin: 0px auto;
+
}
+
+
/*********************************************************************************/
+
/* Portfolio                                                                    */
+
/*********************************************************************************/
+
 
+
#portfolio
+
{
+
padding-top: 8em;
+
}
+
+
#portfolio .box
+
{
+
text-align: center;
+
color: rgba(0,0,0,0.7);
+
}
+
+
#portfolio h3
+
{
+
display: block;
+
padding-bottom: 1em;
+
text-transform: uppercase;
+
font-size: 1em;
+
color: rgba(0,0,0,0.9);
+
}
+
 
+
#portfolio .title
+
{
+
margin-bottom: 5em;
+
text-align: center;
+
}
+
 
+
#portfolio .title h2
+
{
+
color: rgba(0,0,0,0.8);
+
}
+
 
+
#portfolio .title .byline
+
{
+
letter-spacing: normal;
+
text-transform: capitalize;
+
font-size: 1.6em;
+
color: rgba(0,0,0,0.6);
+
}
+
+
#portfolio .icon
+
{
+
display: inline-block;
+
margin-bottom: 2em;
+
font-size: 1.6em;
+
color: rgba(0,0,0,0.8);
+
}
+
 
+
.column1,
+
.column2,
+
.column3,
+
.column4
+
{
+
width: 282px;
+
}
+
+
.column1,
+
.column2,
+
.column3
+
{
+
float: left;
+
margin-right: 24px;
+
}
+
+
.column4
+
{
+
float: right;
+
}
+
 
+
/*********************************************************************************/
+
/* Three Columns                                                                */
+
/*********************************************************************************/
+
 
+
#three-column
+
{
+
overflow: hidden;
+
padding-bottom: 4em;
+
text-align: center;
+
}
+
+
#three-column h2
+
{
+
margin: 1em 0em;
+
text-transform: uppercase;
+
font-size: 1.5em;
+
font-weight: 700;
+
}
+
+
#three-column .icon
+
{
+
position: relative;
+
display: block;
+
margin: 0px auto 0.80em auto;
+
line-height: 150px;
+
font-size: 4em;
+
width: 150px;
+
height: 150px;
+
border-radius: 100px;
+
text-align: center;
+
color: #632F00;
+
+
}
+
+
#three-column #tbox1,
+
#three-column #tbox2,
+
#three-column #tbox3
+
{
+
float: left;
+
width: 320px;
+
padding: 80px 40px 80px 40px;
+
}
+
+
#three-column .title
+
{
+
letter-spacing: 0.10em;
+
text-align: center;
+
text-transform: uppercase;
+
}
+
+
#three-column .title h2
+
{
+
font-size: 1.60em;
+
font-weight: 900;
+
font-family: 'Open Sans', sans-serif;
+
color: #261300;
+
}
+
+
#three-column .title .byline
+
{
+
padding-top: 0.50em;
+
font-size: 0.90em;
+
color: #858585;
+
}
+
 
+
#three-column .arrow-down
+
{
+
border-top-color: #292929;
+
}
+
@charset 'UTF-8';
+
 
+
@font-face
+
{
+
font-family: 'FontAwesome';
+
src: url('fonts/fontawesome-webfont.eot?v=3.0.1');
+
src: url('fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
+
    url('fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'),
+
    url('fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype'),
+
    url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
+
font-weight: normal;
+
font-style: normal;
+
 
}
 
}
 
+
h1 {color:#B61C1D;
@font-face
+
font-size: 350%
{
+
font-family: 'Font-Awesome-Social';
+
src: url('fonts/fontawesome-social-webfont.eot');
+
src: url('fonts/fontawesome-social-webfont.eot?#iefix') format('embedded-opentype'),
+
    url('fonts/fontawesome-social-webfont.woff') format('woff'),
+
url('fonts/fontawesome-social-webfont.ttf') format('truetype'),
+
url('fonts/fontawesome-social-webfont.svg#Font-Awesome-More') format('svg');
+
font-weight: normal;
+
font-style: normal;
+
 
}
 
}
 +
h2 {color: #B61C1D;
 +
font-size: 200%}
  
/*********************************************************************************/
+
</style>
/* Icons                                                                        */
+
</head>
/*********************************************************************************/
+
  
/*
+
<body>
Powered by:
+
<div id= "Plswork">
+
<h1 style="font-family: Georgia; -webkit-text-stroke: 0.5px white;
Font Awesome (http://fortawesome.github.com/Font-Awesome/)
+
  color: ;#B61C1D
Font Awesome More (http://gregoryloucas.github.com/Font-Awesome-More/)
+
  text-shadow:
*/
+
      3px 3px 0 #FFFFFF,
 +
    -1px -1px 0 #FFFFFF, 
 +
      1px -1px 0 #FFFFFF,
 +
      -1px 1px 0 #FFFFFF,
 +
      1px 1px 0 #FFFFFF;" <!--- border:2px; border-style:solid; border-color:#FFFFFF; padding: 1em;" --!> <strong> Stony Brook University
 +
<br>
 +
<br>
 +
<br> iGEM </strong></h1>
 +
</div>
 +
<div id = "img-back-header">
  
.icon
+
<img src="https://static.igem.org/mediawiki/2016/d/d8/T--Stony_Brook--YoSimonsWeLit.jpeg" style="width:100%">
{
+
<!---
text-decoration: none;
+
<img src="https://static.igem.org/mediawiki/2016/a/a6/T--Stony_Brook--SbuYasssslayyyyy.jpeg" style="width:100%">
}
+
<img src = "https://static.igem.org/mediawiki/2014/a/a5/Stony_brook_home_background.png" style = "width:100%">
 +
<img src= "https://static.igem.org/mediawiki/2016/d/d7/T--Stony_Brook--SBUGOESFARBEYOND.jpeg" style="width:100%">
 +
--!>
  
.icon:before
+
</div>
{
+
font-size: 1.25em;
+
text-decoration: none;
+
font-family: FontAwesome;
+
font-weight: normal;
+
font-style: normal;
+
-webkit-text-rendering: optimizeLegibility;
+
-moz-text-rendering: optimizeLegibility;
+
-ms-text-rendering: optimizeLegibility;
+
-o-text-rendering: optimizeLegibility;
+
text-rendering: optimizeLegibility;
+
-webkit-font-smoothing: antialiased;
+
-moz-font-smoothing: antialiased;
+
-ms-font-smoothing: antialiased;
+
-o-font-smoothing: antialiased;
+
font-smoothing: antialiased;
+
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
+
-moz-font-feature-settings: "liga=1, dlig=1";
+
-ms-font-feature-settings: "liga" 1, "dlig" 1;
+
-o-font-feature-settings: "liga" 1, "dlig" 1;
+
font-feature-settings: "liga" 1, "dlig" 1;
+
}
+
  
.icon-glass:before                { content: "\f000"; }
+
<div class= "footer">
.icon-music:before                { content: "\f001"; }
+
<a href= "https://twitter.com/igemsbu"><img src= "https://static.igem.org/mediawiki/2016/7/72/T--Stony_Brook--Twitter_Square_.png" width= 100px</a>
.icon-search:before              { content: "\f002"; }
+
.icon-envelope:before            { content: "\f003"; }
+
.icon-heart:before                { content: "\f004"; }
+
.icon-star:before                { content: "\f005"; }
+
.icon-star-empty:before          { content: "\f006"; }
+
.icon-user:before                { content: "\f007"; }
+
.icon-film:before                { content: "\f008"; }
+
.icon-th-large:before            { content: "\f009"; }
+
.icon-th:before                  { content: "\f00a"; }
+
.icon-th-list:before              { content: "\f00b"; }
+
.icon-ok:before                  { content: "\f00c"; }
+
.icon-remove:before              { content: "\f00d"; }
+
.icon-zoom-in:before              { content: "\f00e"; }
+
  
.icon-zoom-out:before            { content: "\f010"; }
+
<a href = "https://www.facebook.com/iGEMatstonybrook/"><img src= "https://static.igem.org/mediawiki/2016/f/fa/T--Stony_Brook--Facebook_Logo_.png"</a>
.icon-off:before                  { content: "\f011"; }
+
.icon-signal:before              { content: "\f012"; }
+
.icon-cog:before                  { content: "\f013"; }
+
.icon-trash:before                { content: "\f014"; }
+
.icon-home:before                { content: "\f015"; }
+
.icon-file:before                { content: "\f016"; }
+
.icon-time:before                { content: "\f017"; }
+
.icon-road:before                { content: "\f018"; }
+
.icon-download-alt:before        { content: "\f019"; }
+
.icon-download:before            { content: "\f01a"; }
+
.icon-upload:before              { content: "\f01b"; }
+
.icon-inbox:before                { content: "\f01c"; }
+
.icon-play-circle:before          { content: "\f01d"; }
+
.icon-repeat:before              { content: "\f01e"; }
+
  
/* \f020 doesn't work in Safari. all shifted one down */
+
<a href = "http://igem.today/"><img src= "https://static.igem.org/mediawiki/2016/0/04/T--Stony_Brook--WEWORKWITHOTHERHUMANSWOO.jpeg" width="60" height="60" </a>
.icon-refresh:before              { content: "\f021"; }
+
.icon-list-alt:before            { content: "\f022"; }
+
.icon-lock:before                { content: "\f023"; }
+
.icon-flag:before                { content: "\f024"; }
+
.icon-headphones:before          { content: "\f025"; }
+
.icon-volume-off:before          { content: "\f026"; }
+
.icon-volume-down:before          { content: "\f027"; }
+
.icon-volume-up:before            { content: "\f028"; }
+
.icon-qrcode:before              { content: "\f029"; }
+
.icon-barcode:before              { content: "\f02a"; }
+
.icon-tag:before                  { content: "\f02b"; }
+
.icon-tags:before                { content: "\f02c"; }
+
.icon-book:before                { content: "\f02d"; }
+
.icon-bookmark:before            { content: "\f02e"; }
+
.icon-print:before                { content: "\f02f"; }
+
  
.icon-camera:before              { content: "\f030"; }
 
.icon-font:before                { content: "\f031"; }
 
.icon-bold:before                { content: "\f032"; }
 
.icon-italic:before              { content: "\f033"; }
 
.icon-text-height:before          { content: "\f034"; }
 
.icon-text-width:before          { content: "\f035"; }
 
.icon-align-left:before          { content: "\f036"; }
 
.icon-align-center:before        { content: "\f037"; }
 
.icon-align-right:before          { content: "\f038"; }
 
.icon-align-justify:before        { content: "\f039"; }
 
.icon-list:before                { content: "\f03a"; }
 
.icon-indent-left:before          { content: "\f03b"; }
 
.icon-indent-right:before        { content: "\f03c"; }
 
.icon-facetime-video:before      { content: "\f03d"; }
 
.icon-picture:before              { content: "\f03e"; }
 
  
.icon-pencil:before              { content: "\f040"; }
+
</div>
.icon-map-marker:before          { content: "\f041"; }
+
.icon-adjust:before              { content: "\f042"; }
+
.icon-tint:before                { content: "\f043"; }
+
.icon-edit:before                { content: "\f044"; }
+
.icon-share:before                { content: "\f045"; }
+
.icon-check:before                { content: "\f046"; }
+
.icon-move:before                { content: "\f047"; }
+
.icon-step-backward:before        { content: "\f048"; }
+
.icon-fast-backward:before        { content: "\f049"; }
+
.icon-backward:before            { content: "\f04a"; }
+
.icon-play:before                { content: "\f04b"; }
+
.icon-pause:before                { content: "\f04c"; }
+
.icon-stop:before                { content: "\f04d"; }
+
.icon-forward:before              { content: "\f04e"; }
+
  
.icon-fast-forward:before        { content: "\f050"; }
 
.icon-step-forward:before        { content: "\f051"; }
 
.icon-eject:before                { content: "\f052"; }
 
.icon-chevron-left:before        { content: "\f053"; }
 
.icon-chevron-right:before        { content: "\f054"; }
 
.icon-plus-sign:before            { content: "\f055"; }
 
.icon-minus-sign:before          { content: "\f056"; }
 
.icon-remove-sign:before          { content: "\f057"; }
 
.icon-ok-sign:before              { content: "\f058"; }
 
.icon-question-sign:before        { content: "\f059"; }
 
.icon-info-sign:before            { content: "\f05a"; }
 
.icon-screenshot:before          { content: "\f05b"; }
 
.icon-remove-circle:before        { content: "\f05c"; }
 
.icon-ok-circle:before            { content: "\f05d"; }
 
.icon-ban-circle:before          { content: "\f05e"; }
 
  
.icon-arrow-left:before          { content: "\f060"; }
 
.icon-arrow-right:before          { content: "\f061"; }
 
.icon-arrow-up:before            { content: "\f062"; }
 
.icon-arrow-down:before          { content: "\f063"; }
 
.icon-share-alt:before            { content: "\f064"; }
 
.icon-resize-full:before          { content: "\f065"; }
 
.icon-resize-small:before        { content: "\f066"; }
 
.icon-plus:before                { content: "\f067"; }
 
.icon-minus:before                { content: "\f068"; }
 
.icon-asterisk:before            { content: "\f069"; }
 
.icon-exclamation-sign:before    { content: "\f06a"; }
 
.icon-gift:before                { content: "\f06b"; }
 
.icon-leaf:before                { content: "\f06c"; }
 
.icon-fire:before                { content: "\f06d"; }
 
.icon-eye-open:before            { content: "\f06e"; }
 
  
.icon-eye-close:before            { content: "\f070"; }
+
</body>
.icon-warning-sign:before        { content: "\f071"; }
+
.icon-plane:before                { content: "\f072"; }
+
.icon-calendar:before            { content: "\f073"; }
+
.icon-random:before              { content: "\f074"; }
+
.icon-comment:before              { content: "\f075"; }
+
.icon-magnet:before              { content: "\f076"; }
+
.icon-chevron-up:before          { content: "\f077"; }
+
.icon-chevron-down:before        { content: "\f078"; }
+
.icon-retweet:before              { content: "\f079"; }
+
.icon-shopping-cart:before        { content: "\f07a"; }
+
.icon-folder-close:before        { content: "\f07b"; }
+
.icon-folder-open:before          { content: "\f07c"; }
+
.icon-resize-vertical:before      { content: "\f07d"; }
+
.icon-resize-horizontal:before    { content: "\f07e"; }
+
 
+
.icon-bar-chart:before            { content: "\f080"; }
+
.icon-twitter-sign:before        { content: "\f081"; }
+
.icon-facebook-sign:before        { content: "\f082"; }
+
.icon-camera-retro:before        { content: "\f083"; }
+
.icon-key:before                  { content: "\f084"; }
+
.icon-cogs:before                { content: "\f085"; }
+
.icon-comments:before            { content: "\f086"; }
+
.icon-thumbs-up:before            { content: "\f087"; }
+
.icon-thumbs-down:before          { content: "\f088"; }
+
.icon-star-half:before            { content: "\f089"; }
+
.icon-heart-empty:before          { content: "\f08a"; }
+
.icon-signout:before              { content: "\f08b"; }
+
.icon-linkedin-sign:before        { content: "\f08c"; }
+
.icon-pushpin:before              { content: "\f08d"; }
+
.icon-external-link:before        { content: "\f08e"; }
+
 
+
.icon-signin:before              { content: "\f090"; }
+
.icon-trophy:before              { content: "\f091"; }
+
.icon-github-sign:before          { content: "\f092"; }
+
.icon-upload-alt:before          { content: "\f093"; }
+
.icon-lemon:before                { content: "\f094"; }
+
.icon-phone:before                { content: "\f095"; }
+
.icon-check-empty:before          { content: "\f096"; }
+
.icon-bookmark-empty:before      { content: "\f097"; }
+
.icon-phone-sign:before          { content: "\f098"; }
+
.icon-twitter:before              { content: "\f099"; }
+
.icon-facebook:before            { content: "\f09a"; }
+
.icon-github:before              { content: "\f09b"; }
+
.icon-unlock:before              { content: "\f09c"; }
+
.icon-credit-card:before          { content: "\f09d"; }
+
.icon-rss:before                  { content: "\f09e"; }
+
 
+
.icon-hdd:before                  { content: "\f0a0"; }
+
.icon-bullhorn:before            { content: "\f0a1"; }
+
.icon-bell:before                { content: "\f0a2"; }
+
.icon-certificate:before          { content: "\f0a3"; }
+
.icon-hand-right:before          { content: "\f0a4"; }
+
.icon-hand-left:before            { content: "\f0a5"; }
+
.icon-hand-up:before              { content: "\f0a6"; }
+
.icon-hand-down:before            { content: "\f0a7"; }
+
.icon-circle-arrow-left:before    { content: "\f0a8"; }
+
.icon-circle-arrow-right:before  { content: "\f0a9"; }
+
.icon-circle-arrow-up:before      { content: "\f0aa"; }
+
.icon-circle-arrow-down:before    { content: "\f0ab"; }
+
.icon-globe:before                { content: "\f0ac"; }
+
.icon-wrench:before              { content: "\f0ad"; }
+
.icon-tasks:before                { content: "\f0ae"; }
+
 
+
.icon-filter:before              { content: "\f0b0"; }
+
.icon-briefcase:before            { content: "\f0b1"; }
+
.icon-fullscreen:before          { content: "\f0b2"; }
+
 
+
.icon-group:before                { content: "\f0c0"; }
+
.icon-link:before                { content: "\f0c1"; }
+
.icon-cloud:before                { content: "\f0c2"; }
+
.icon-beaker:before              { content: "\f0c3"; }
+
.icon-cut:before                  { content: "\f0c4"; }
+
.icon-copy:before                { content: "\f0c5"; }
+
.icon-paper-clip:before          { content: "\f0c6"; }
+
.icon-save:before                { content: "\f0c7"; }
+
.icon-sign-blank:before          { content: "\f0c8"; }
+
.icon-reorder:before              { content: "\f0c9"; }
+
.icon-list-ul:before              { content: "\f0ca"; }
+
.icon-list-ol:before              { content: "\f0cb"; }
+
.icon-strikethrough:before        { content: "\f0cc"; }
+
.icon-underline:before            { content: "\f0cd"; }
+
.icon-table:before                { content: "\f0ce"; }
+
 
+
.icon-magic:before                { content: "\f0d0"; }
+
.icon-truck:before                { content: "\f0d1"; }
+
.icon-pinterest:before            { content: "\f0d2"; }
+
.icon-pinterest-sign:before      { content: "\f0d3"; }
+
.icon-google-plus-sign:before    { content: "\f0d4"; }
+
.icon-google-plus:before          { content: "\f0d5"; }
+
.icon-money:before                { content: "\f0d6"; }
+
.icon-caret-down:before          { content: "\f0d7"; }
+
.icon-caret-up:before            { content: "\f0d8"; }
+
.icon-caret-left:before          { content: "\f0d9"; }
+
.icon-caret-right:before          { content: "\f0da"; }
+
.icon-columns:before              { content: "\f0db"; }
+
.icon-sort:before                { content: "\f0dc"; }
+
.icon-sort-down:before            { content: "\f0dd"; }
+
.icon-sort-up:before              { content: "\f0de"; }
+
 
+
.icon-envelope-alt:before        { content: "\f0e0"; }
+
.icon-linkedin:before            { content: "\f0e1"; }
+
.icon-undo:before                { content: "\f0e2"; }
+
.icon-legal:before                { content: "\f0e3"; }
+
.icon-dashboard:before            { content: "\f0e4"; }
+
.icon-comment-alt:before          { content: "\f0e5"; }
+
.icon-comments-alt:before        { content: "\f0e6"; }
+
.icon-bolt:before                { content: "\f0e7"; }
+
.icon-sitemap:before              { content: "\f0e8"; }
+
.icon-umbrella:before            { content: "\f0e9"; }
+
.icon-paste:before                { content: "\f0ea"; }
+
.icon-lightbulb:before            { content: "\f0eb"; }
+
.icon-exchange:before            { content: "\f0ec"; }
+
.icon-cloud-download:before      { content: "\f0ed"; }
+
.icon-cloud-upload:before        { content: "\f0ee"; }
+
 
+
.icon-user-md:before              { content: "\f0f0"; }
+
.icon-stethoscope:before          { content: "\f0f1"; }
+
.icon-suitcase:before            { content: "\f0f2"; }
+
.icon-bell-alt:before            { content: "\f0f3"; }
+
.icon-coffee:before              { content: "\f0f4"; }
+
.icon-food:before                { content: "\f0f5"; }
+
.icon-file-alt:before            { content: "\f0f6"; }
+
.icon-building:before            { content: "\f0f7"; }
+
.icon-hospital:before            { content: "\f0f8"; }
+
.icon-ambulance:before            { content: "\f0f9"; }
+
.icon-medkit:before              { content: "\f0fa"; }
+
.icon-fighter-jet:before          { content: "\f0fb"; }
+
.icon-beer:before                { content: "\f0fc"; }
+
.icon-h-sign:before              { content: "\f0fd"; }
+
.icon-plus-sign-alt:before        { content: "\f0fe"; }
+
 
+
.icon-double-angle-left:before    { content: "\f100"; }
+
.icon-double-angle-right:before  { content: "\f101"; }
+
.icon-double-angle-up:before      { content: "\f102"; }
+
.icon-double-angle-down:before    { content: "\f103"; }
+
.icon-angle-left:before          { content: "\f104"; }
+
.icon-angle-right:before          { content: "\f105"; }
+
.icon-angle-up:before            { content: "\f106"; }
+
.icon-angle-down:before          { content: "\f107"; }
+
.icon-desktop:before              { content: "\f108"; }
+
.icon-laptop:before              { content: "\f109"; }
+
.icon-tablet:before              { content: "\f10a"; }
+
.icon-mobile-phone:before        { content: "\f10b"; }
+
.icon-circle-blank:before        { content: "\f10c"; }
+
.icon-quote-left:before          { content: "\f10d"; }
+
.icon-quote-right:before          { content: "\f10e"; }
+
 
+
.icon-spinner:before              { content: "\f110"; }
+
.icon-circle:before              { content: "\f111"; }
+
.icon-reply:before                { content: "\f112"; }
+
.icon-github-alt:before          { content: "\f113"; }
+
.icon-folder-close-alt:before    { content: "\f114"; }
+
.icon-folder-open-alt:before      { content: "\f115"; }
+
 
+
.icon-blogger-sign:before,.icon-blogger:before,.icon-delicious:before,.icon-dribbble-sign:before,.icon-dribbble:before,.icon-dropbox:before,.icon-drupal:before,.icon-evernote-sign:before,.icon-evernote:before,.icon-flickr-sign:before,.icon-flickr:before,.icon-forrst-sign:before,.icon-forrst:before,.icon-foursquare-sign:before,.icon-foursquare:before,.icon-git-fork:before,.icon-hacker-news:before,.icon-instagram:before,.icon-lastfm-sign:before,.icon-lastfm:before,.icon-paypal:before,.icon-picasa-sign:before,.icon-picasa:before,.icon-reddit:before,.icon-share-this-sign:before,.icon-share-this:before,.icon-skype:before,.icon-soundcloud:before,.icon-spotify:before,.icon-stack-overflow:before,.icon-tumblr-sign:before,.icon-tumblr:before,.icon-vimeo-sign:before,.icon-vimeo:before,.icon-wordpress-sign:before,.icon-wordpress:before,.icon-yelp-sign:before,.icon-yelp:before,.icon-youtube-sign:before,.icon-youtube:before              {font-family:'Font-Awesome-Social'; }
+
 
+
.icon-dropbox:before              { content: "\f300"; }
+
.icon-drupal:before              { content: "\f301"; }
+
.icon-git-fork:before            { content: "\f302"; }
+
.icon-instagram:before            { content: "\f303"; }
+
.icon-share-this-sign:before      { content: "\f304"; }
+
.icon-share-this:before          { content: "\f305"; }
+
.icon-foursquare-sign:before      { content: "\f306"; }
+
.icon-foursquare:before          { content: "\f307"; }
+
.icon-hacker-news:before          { content: "\f308"; }
+
.icon-skype:before                { content: "\f309"; }
+
.icon-spotify:before              { content: "\f30a"; }
+
.icon-soundcloud:before          { content: "\f30b"; }
+
.icon-paypal:before              { content: "\f30c"; }
+
.icon-youtube-sign:before        { content: "\f30d"; }
+
.icon-youtube:before              { content: "\f30e"; }
+
.icon-reddit:before              { content: "\f30f"; }
+
.icon-blogger-sign:before        { content: "\f310"; }
+
.icon-blogger:before              { content: "\f311"; }
+
.icon-dribbble-sign:before        { content: "\f312"; }
+
.icon-dribbble:before            { content: "\f313"; }
+
.icon-evernote-sign:before        { content: "\f314"; }
+
.icon-evernote:before            { content: "\f315"; }
+
.icon-flickr-sign:before          { content: "\f316"; }
+
.icon-flickr:before              { content: "\f317"; }
+
.icon-forrst-sign:before          { content: "\f318"; }
+
.icon-forrst:before              { content: "\f319"; }
+
.icon-delicious:before            { content: "\f31a"; }
+
.icon-lastfm-sign:before          { content: "\f31b"; }
+
.icon-lastfm:before              { content: "\f31c"; }
+
.icon-picasa-sign:before          { content: "\f31d"; }
+
.icon-picasa:before              { content: "\f31e"; }
+
.icon-stack-overflow:before      { content: "\f320"; }
+
.icon-tumblr-sign:before          { content: "\f321"; }
+
.icon-tumblr:before              { content: "\f322"; }
+
.icon-vimeo-sign:before          { content: "\f323"; }
+
.icon-vimeo:before                { content: "\f324"; }
+
.icon-wordpress-sign:before      { content: "\f325"; }
+
.icon-wordpress:before            { content: "\f326"; }
+
.icon-yelp-sign:before            { content: "\f327"; }
+
.icon-yelp:before                { content: "\f328"; }
+
.icon-cloud-upload:before   { content: "\f0ee"; }
+
.icon-cloud-download:before   { content: "\f0ed"; }
+
 
+
 
+
</style>
+
 
</html>
 
</html>

Latest revision as of 16:19, 19 October 2016

Stony Brook University


iGEM