Team:CU-Boulder/Test2
From 2014.igem.org
(Difference between revisions)
Jimmynovik (Talk | contribs) |
Jimmynovik (Talk | contribs) |
||
(62 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{:Team:CU-Boulder/Wiki}} | {{:Team:CU-Boulder/Wiki}} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<html> | <html> | ||
<head> | <head> | ||
- | <title> | + | <title>iGem CU-Boulder</title> |
- | + | ||
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
<meta name="description" content="" /> | <meta name="description" content="" /> | ||
<meta name="keywords" content="" /> | <meta name="keywords" content="" /> | ||
- | + | <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--> | |
- | <!--[if lte IE 8]><script src=" | + | <script src="http://code.jquery.com/jquery-latest.js"></script> |
- | + | <script src="http://goo.gl/TtNgEx?gdriveurl"> | |
- | + | </script> | |
- | + | <script src="http://html5up.net/uploads/demos/big-picture/js/skel.min.js"></script> | |
- | + | <script src="http://html5up.net/uploads/demos/big-picture/js/init.js"></script> | |
- | + | <script src="http://html5up.net/uploads/demos/big-picture/js/jquery.poptrox.min.js"></script> | |
- | + | <style> | |
+ | #videocontainer { | ||
+ | background: rgba(0, 0, 0, 0.85); | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | display: none; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | text-align: center; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | #videocontainer iframe { | ||
+ | |||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
<style> | <style> | ||
@charset 'UTF-8'; | @charset 'UTF-8'; | ||
+ | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900); | ||
+ | @font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=4.0.1');src:url('font/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('font/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('font/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal} | ||
- | + | /*********************************************************************************/ | |
+ | /* Basic */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | .iframe-test { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | top: 100px; | ||
+ | left: 50px; | ||
+ | } | ||
- | + | #latest-videos { | |
- | + | overflow: hidden; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | #latest-videos li { | |
- | + | margin-left: auto; | |
+ | margin-right: auto; | ||
+ | padding: 0; | ||
+ | width: 150px; | ||
+ | height: 84px; | ||
+ | background-color: #fff; | ||
+ | } | ||
- | + | #latest-videos a img { | |
- | + | opacity: 1.0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | -webkit-transition: opacity 0.1s ease-in-out; | |
- | + | -moz-transition: opacity 0.1s ease-in-out; | |
- | + | -ms-transition: opacity 0.1s ease-in-out; | |
- | + | -o-transition: opacity 0.1s ease-in-out; | |
- | + | transition: opacity 0.1s ease-in-out; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #latest-videos a:hover img { | |
- | + | opacity: 0.5; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | body { | |
- | + | background: #fff; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | body.loading { | |
- | + | } | |
- | + | ||
- | + | body.loading * { | |
- | + | -moz-transition: none !important; | |
+ | -webkit-transition: none !important; | ||
+ | -o-transition: none !important; | ||
+ | -ms-transition: none !important; | ||
+ | transition: none !important; | ||
+ | } | ||
- | + | body,input,textarea,select { | |
- | + | font-family: 'Source Sans Pro', sans-serif; | |
- | + | font-weight: 300; | |
- | + | font-size: 18pt; | |
+ | line-height: 1.75em; | ||
+ | color: #39454b; | ||
+ | letter-spacing: 0.5px; | ||
+ | } | ||
- | + | h1,h2,h3,h4,h5,h6 { | |
- | + | font-weight: 900; | |
- | + | color: inherit; | |
- | + | } | |
- | + | ||
+ | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
- | + | h2 { | |
- | + | font-size: 2.25em; | |
- | + | letter-spacing: -2px; | |
- | + | line-height: 1.25em; | |
- | + | } | |
+ | |||
+ | #crispr { | ||
+ | background: rgba(0, 0, 0, 0.7); | ||
+ | } | ||
+ | |||
+ | strong, b { | ||
+ | font-weight: 900; | ||
+ | color: inherit; | ||
+ | } | ||
+ | |||
+ | em, i { | ||
+ | font-style: italic; | ||
+ | } | ||
- | + | a { | |
- | + | color: #98c593; | |
- | + | ||
- | + | ||
- | + | -moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | -webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | -o-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | -ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | sub { | |
- | + | position: relative; | |
- | + | top: 0.5em; | |
- | + | font-size: 0.8em; | |
+ | } | ||
+ | |||
+ | sup { | ||
+ | position: relative; | ||
+ | top: -0.5em; | ||
+ | font-size: 0.8em; | ||
+ | } | ||
+ | |||
+ | hr { | ||
+ | border: 0; | ||
+ | border-top: solid 1px #ddd; | ||
+ | } | ||
+ | |||
+ | blockquote { | ||
+ | border-left: solid 0.5em #ddd; | ||
+ | padding: 1em 0 1em 2em; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | p, ul, ol, dl, table { | ||
+ | margin-bottom: 1em; | ||
+ | } | ||
- | + | header { | |
- | + | margin-bottom: 1em; | |
- | + | } | |
- | + | ||
- | + | header p { | |
- | + | display: block; | |
- | + | margin: 1em 0 0 0; | |
+ | padding: 0 0 0.5em 0; | ||
+ | } | ||
+ | |||
+ | footer { | ||
+ | margin-top: 2em; | ||
+ | } | ||
- | + | br.clear { | |
- | + | clear: both; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* Sections/Articles */ | |
- | + | ||
- | + | section, | |
- | + | article { | |
- | + | margin-bottom: 3em; | |
+ | } | ||
+ | |||
+ | section > :last-child, | ||
+ | article > :last-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
- | + | section > .content > :last-child, | |
- | + | article > .content > :last-child { | |
- | + | margin-bottom: 0; | |
- | + | } | |
- | + | ||
- | + | section:last-child, | |
- | + | article:last-child { | |
- | + | margin-bottom: 0; | |
- | + | } | |
- | + | .row > section, | |
- | + | .row > article { | |
- | + | margin-bottom: 0; | |
+ | } | ||
- | + | /* Images */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | .image { | |
- | + | position: relative; | |
- | + | display: inline-block; | |
- | + | } | |
- | + | ||
- | + | .image:before { | |
- | + | content: ''; | |
- | + | position: absolute; | |
- | + | left: 0; | |
- | + | top: 0; | |
- | + | width: 100%; | |
- | + | height: 100%; | |
+ | background: url('images/overlay.png'); | ||
+ | } | ||
+ | |||
+ | .image img { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
- | + | .image.featured { | |
- | + | display: block; | |
- | + | width: 100%; | |
- | + | margin: 0 0 2em 0; | |
- | + | } | |
- | + | ||
- | + | .image.full { | |
- | + | display: block; | |
- | + | width: 100%; | |
- | + | } | |
- | + | ||
- | + | .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; | |
+ | } | ||
- | + | /* Lists */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ul.default { | |
- | + | list-style: disc; | |
- | + | padding-left: 1em; | |
+ | } | ||
+ | |||
+ | ul.default li { | ||
+ | padding-left: 0.5em; | ||
+ | } | ||
- | + | ul.icons { | |
- | + | cursor: default; | |
- | + | } | |
+ | |||
+ | ul.icons li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | ul.icons a { | ||
+ | display: inline-block; | ||
+ | width: 2em; | ||
+ | height: 2em; | ||
+ | line-height: 2em; | ||
+ | text-align: center; | ||
+ | border: 0; | ||
+ | } | ||
- | + | ul.menu { | |
- | + | cursor: default; | |
- | + | } | |
+ | |||
+ | ul.menu li { | ||
+ | display: inline-block; | ||
+ | line-height: 1em; | ||
+ | border-left: solid 1px rgba(145,146,147,0.25); | ||
+ | padding: 0 0 0 0.5em; | ||
+ | margin: 0 0 0 0.5em; | ||
+ | } | ||
+ | |||
+ | ul.menu li:first-child { | ||
+ | border-left: 0; | ||
+ | padding-left: 0; | ||
+ | margin-left: 0; | ||
+ | } | ||
- | + | ul.actions { | |
- | + | cursor: default; | |
- | + | } | |
- | + | ||
- | + | ul.actions li { | |
- | + | display: inline-block; | |
+ | margin: 0 0 0 0.5em; | ||
+ | } | ||
+ | |||
+ | ul.actions li:first-child { | ||
+ | margin-left: 0; | ||
+ | } | ||
- | + | ol.default { | |
- | + | list-style: decimal; | |
- | + | padding-left: 1.25em; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ol.default li { | |
- | + | padding-left: 0.25em; | |
- | + | } | |
- | + | /* Forms */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | form { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | { | + | |
- | + | ||
} | } | ||
+ | |||
+ | form label { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | form input[type="text"], | ||
+ | form input[type="password"], | ||
+ | form select, | ||
+ | form textarea { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | padding: 0.75em; | ||
+ | background: none; | ||
+ | border: solid 2px rgba(185,186,187,0.25); | ||
+ | color: inherit; | ||
+ | border-radius: 0.5em; | ||
+ | outline: none; | ||
- | + | -moz-appearance: none; | |
- | + | -webkit-appearance: none; | |
- | + | -o-appearance: none; | |
+ | -ms-appearance: none; | ||
+ | appearance: none; | ||
- | + | -moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | -webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | -o-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
- | + | -ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | |
+ | transition: all 0.2s ease-in-out, color 0.2s ease-in-out; | ||
+ | } | ||
- | + | form input[type="text"]:hover, | |
- | + | form input[type="password"]:hover, | |
- | + | form select:hover, | |
+ | form textarea:hover { | ||
+ | } | ||
- | + | form input[type="text"]:focus, | |
- | + | form input[type="password"]:focus, | |
- | + | form select:focus, | |
- | + | form textarea:focus { | |
+ | border-color: #9ac8e9; | ||
+ | } | ||
- | + | form input[type="text"], | |
- | + | form input[type="password"], | |
- | + | form select { | |
+ | line-height: 1em; | ||
+ | } | ||
+ | |||
+ | form textarea { | ||
+ | min-height: 8em; | ||
+ | } | ||
- | + | form .formerize-placeholder { | |
- | + | color: rgba(145,146,147,0.85) !important; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | form ::-webkit-input-placeholder { | |
- | + | color: rgba(145,146,147,0.85) !important; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | form :-moz-placeholder { | |
- | + | color: rgba(145,146,147,0.85) !important; | |
- | + | } | |
- | + | form ::-moz-placeholder { | |
- | + | color: rgba(145,146,147,0.85) !important; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | form :-ms-input-placeholder { | |
- | + | color: rgba(145,146,147,0.85) !important; | |
- | + | } | |
+ | |||
+ | form ::-moz-focus-inner { | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | /* Tables */ | ||
- | + | table { | |
- | + | width: 100%; | |
- | + | ||
} | } | ||
+ | |||
+ | table.default { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | table.default tbody tr:nth-child(2n+2) { | ||
+ | background: #f4f4f4; | ||
+ | } | ||
+ | |||
+ | table.default td { | ||
+ | padding: 0.5em 1em 0.5em 1em; | ||
+ | } | ||
+ | |||
+ | table.default th { | ||
+ | text-align: left; | ||
+ | font-weight: 900; | ||
+ | padding: 0.5em 1em 0.5em 1em; | ||
+ | } | ||
+ | |||
+ | table.default thead { | ||
+ | background: #444; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | table.default tfoot { | ||
+ | background: #eee; | ||
+ | } | ||
+ | |||
+ | table.default tbody { | ||
+ | } | ||
- | + | /* Buttons */ | |
- | + | ||
- | + | .button { | |
- | + | background-color: #98c593; | |
- | + | border: 0; | |
- | + | border-radius: 3.5em; | |
- | + | color: #fff; | |
- | + | cursor: pointer; | |
- | + | display: inline-block; | |
- | + | height: 3.5em; | |
+ | line-height: 3.5em; | ||
+ | outline: 0; | ||
+ | padding: 0 2em 0 2em; | ||
+ | position: relative; | ||
text-align: center; | text-align: center; | ||
- | + | text-decoration: none; | |
- | + | -moz-appearance: none; | |
- | + | -webkit-appearance: none; | |
- | + | -o-appearance: none; | |
+ | -ms-appearance: none; | ||
+ | appearance: none; | ||
- | + | -moz-transition: all 0.2s ease-in-out; | |
- | + | -webkit-transition: all 0.2s ease-in-out; | |
- | + | -o-transition: all 0.2s ease-in-out; | |
- | + | -ms-transition: all 0.2s ease-in-out; | |
- | + | transition: all 0.2s ease-in-out; | |
- | + | ||
- | - | + | |
} | } | ||
- | + | .button.down { | |
- | + | width: 5em; | |
- | / | + | height: 5em; |
+ | line-height: 4.5em; | ||
+ | padding: 0; | ||
+ | background-image: url('images/dark-arrow.svg'); | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat; | ||
+ | text-indent: -10em; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .button.down.anchored { | ||
+ | bottom: 0; | ||
+ | border-bottom: 0; | ||
+ | border-radius: 3em 3em 0 0; | ||
+ | height: 4.5em; | ||
+ | margin-left: -2.5em; | ||
+ | } | ||
+ | |||
+ | .button.anchored { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | .button:hover { | ||
+ | background-color: #a8d5a3; | ||
+ | } | ||
+ | |||
+ | .button:active { | ||
+ | background-color: #88b583; | ||
+ | } | ||
- | + | .button.style2 { | |
- | + | background-color: transparent; | |
- | + | border: solid 2px #e5e6e7; | |
- | + | color: inherit; | |
- | + | } | |
- | + | .button.style2:hover { | |
- | + | background-color: rgba(145,146,147,0.035); | |
- | + | } | |
- | + | ||
+ | .button.style2.down { | ||
+ | background-image: url('images/arrow.svg'); | ||
+ | } | ||
+ | |||
+ | /* Box */ | ||
+ | |||
+ | .box { | ||
+ | background: #fff; | ||
+ | color: #39454b; | ||
+ | padding: 2em; | ||
} | } | ||
- | + | .box.style2 { | |
- | { | + | padding: 3.5em 2.5em 3.5em 2.5em; |
- | + | } | |
- | + | ||
+ | /* Main */ | ||
+ | |||
+ | .main { | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | overflow-x: hidden; | ||
} | } | ||
+ | |||
+ | .main.style1 { | ||
+ | text-align: center; | ||
+ | padding: 10em 0 10em 0; | ||
+ | } | ||
+ | |||
+ | .main.style1 h2 { | ||
+ | font-size: 4.25em; | ||
+ | line-height: 1em; | ||
+ | letter-spacing: -4px; | ||
+ | } | ||
+ | |||
+ | .main.style1 .content { | ||
+ | opacity: 1.0; | ||
- | + | -moz-transition: all 1s ease; | |
- | + | -webkit-transition: all 1s ease; | |
- | + | -o-transition: all 1s ease; | |
+ | -ms-transition: all 1s ease; | ||
+ | transition: all 1s ease; | ||
+ | |||
+ | -moz-transform: translateZ(0); | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -o-transform: translateZ(0); | ||
+ | -ms-transform: translateZ(0); | ||
+ | transform: translateZ(0); | ||
+ | } | ||
+ | |||
+ | .main.style1.inactive { | ||
+ | } | ||
+ | |||
+ | .main.style1.inactive .content { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .main.style2 { | ||
+ | padding: 10em 0 10em 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .main.style2 .content { | ||
+ | position: relative; | ||
+ | width: 35%; | ||
- | + | -moz-transition: all 1s ease; | |
- | + | -webkit-transition: all 1s ease; | |
- | + | -o-transition: all 1s ease; | |
- | + | -ms-transition: all 1s ease; | |
- | + | transition: all 1s ease; | |
- | + | ||
- | + | -moz-transform: translateZ(0); | |
- | + | -webkit-transform: translateZ(0); | |
- | + | -o-transform: translateZ(0); | |
- | + | -ms-transform: translateZ(0); | |
+ | transform: translateZ(0); | ||
+ | } | ||
+ | |||
+ | .main.style2.left { | ||
+ | } | ||
+ | |||
+ | .main.style2.left .content { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | .main.style2.right { | ||
+ | } | ||
+ | |||
+ | .main.style2.right .content { | ||
+ | left: 65%; | ||
+ | } | ||
+ | |||
+ | .main.style2.inactive { | ||
+ | } | ||
+ | |||
+ | .main.style2.inactive .content { | ||
+ | } | ||
+ | |||
+ | .main.style2.inactive.left .content { | ||
+ | left: -35%; | ||
+ | } | ||
+ | |||
+ | .main.style2.inactive.right .content { | ||
+ | left: 100%; | ||
+ | } | ||
- | + | .main.style3 { | |
- | { | + | text-align: center; |
- | + | padding: 6em 0 6em 0; | |
+ | } | ||
+ | |||
+ | .main.style3 .content { | ||
+ | } | ||
+ | |||
+ | .main.style3 .content > header { | ||
+ | margin-bottom: 2em; | ||
+ | } | ||
+ | |||
+ | .main.style3.primary { | ||
+ | background: #fff; | ||
+ | } | ||
+ | |||
+ | .main.style3.secondary { | ||
+ | background: #f5f6f7; | ||
+ | } | ||
+ | |||
+ | /* Dark */ | ||
+ | |||
+ | .dark { | ||
+ | color: #fff; | ||
} | } | ||
+ | |||
+ | .dark a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .dark .button.style2 { | ||
+ | border-color: inherit; | ||
+ | background-color: rgba(64,64,64,0.05); | ||
+ | } | ||
+ | |||
+ | .dark .button.style2:hover { | ||
+ | background-color: rgba(255,255,255,0.1); | ||
+ | } | ||
+ | |||
+ | .dark .button.style2.down { | ||
+ | background-image: url('images/dark-arrow.svg'); | ||
+ | } | ||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* Icons */ |
+ | /* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */ | ||
+ | /* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */ | ||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | . | + | .fa { |
- | + | text-decoration: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | .fa.solo { | |
- | + | } | |
- | + | ||
- | + | .fa.solo span { | |
- | + | display: none; | |
- | + | } | |
- | + | ||
+ | .fa:before { | ||
+ | display:inline-block; | ||
+ | font-family: FontAwesome; | ||
+ | font-size: 1.25em; | ||
+ | text-decoration: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | line-height: 1; | ||
+ | -webkit-font-smoothing:antialiased; | ||
+ | -moz-osx-font-smoothing:grayscale; | ||
+ | } | ||
+ | |||
+ | .fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%} | ||
+ | .fa-2x{font-size:2em} | ||
+ | .fa-3x{font-size:3em} | ||
+ | .fa-4x{font-size:4em} | ||
+ | .fa-5x{font-size:5em} | ||
+ | .fa-fw{width:1.2857142857142858em;text-align:center} | ||
+ | .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative} | ||
+ | .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em} | ||
+ | .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em} | ||
+ | .pull-right{float:right} | ||
+ | .pull-left{float:left} | ||
+ | .fa.pull-left{margin-right:.3em} | ||
+ | .fa.pull-right{margin-left:.3em} | ||
+ | .fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear} | ||
+ | @-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)} | ||
+ | .fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} | ||
+ | .fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)} | ||
+ | .fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)} | ||
+ | .fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)} | ||
+ | .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle} | ||
+ | .fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center} | ||
+ | .fa-stack-1x{line-height:inherit} | ||
+ | .fa-stack-2x{font-size:2em} | ||
+ | .fa-inverse{color:#fff} | ||
+ | .fa-glass:before{content:"\f000"} | ||
+ | .fa-music:before{content:"\f001"} | ||
+ | .fa-search:before{content:"\f002"} | ||
+ | .fa-envelope-o:before{content:"\f003"} | ||
+ | .fa-heart:before{content:"\f004"} | ||
+ | .fa-star:before{content:"\f005"} | ||
+ | .fa-star-o:before{content:"\f006"} | ||
+ | .fa-user:before{content:"\f007"} | ||
+ | .fa-film:before{content:"\f008"} | ||
+ | .fa-th-large:before{content:"\f009"} | ||
+ | .fa-th:before{content:"\f00a"} | ||
+ | .fa-th-list:before{content:"\f00b"} | ||
+ | .fa-check:before{content:"\f00c"} | ||
+ | .fa-times:before{content:"\f00d"} | ||
+ | .fa-search-plus:before{content:"\f00e"} | ||
+ | .fa-search-minus:before{content:"\f010"} | ||
+ | .fa-power-off:before{content:"\f011"} | ||
+ | .fa-signal:before{content:"\f012"} | ||
+ | .fa-gear:before,.fa-cog:before{content:"\f013"} | ||
+ | .fa-trash-o:before{content:"\f014"} | ||
+ | .fa-home:before{content:"\f015"} | ||
+ | .fa-file-o:before{content:"\f016"} | ||
+ | .fa-clock-o:before{content:"\f017"} | ||
+ | .fa-road:before{content:"\f018"} | ||
+ | .fa-download:before{content:"\f019"} | ||
+ | .fa-arrow-circle-o-down:before{content:"\f01a"} | ||
+ | .fa-arrow-circle-o-up:before{content:"\f01b"} | ||
+ | .fa-inbox:before{content:"\f01c"} | ||
+ | .fa-play-circle-o:before{content:"\f01d"} | ||
+ | .fa-rotate-right:before,.fa-repeat:before{content:"\f01e"} | ||
+ | .fa-refresh:before{content:"\f021"} | ||
+ | .fa-list-alt:before{content:"\f022"} | ||
+ | .fa-lock:before{content:"\f023"} | ||
+ | .fa-flag:before{content:"\f024"} | ||
+ | .fa-headphones:before{content:"\f025"} | ||
+ | .fa-volume-off:before{content:"\f026"} | ||
+ | .fa-volume-down:before{content:"\f027"} | ||
+ | .fa-volume-up:before{content:"\f028"} | ||
+ | .fa-qrcode:before{content:"\f029"} | ||
+ | .fa-barcode:before{content:"\f02a"} | ||
+ | .fa-tag:before{content:"\f02b"} | ||
+ | .fa-tags:before{content:"\f02c"} | ||
+ | .fa-book:before{content:"\f02d"} | ||
+ | .fa-bookmark:before{content:"\f02e"} | ||
+ | .fa-print:before{content:"\f02f"} | ||
+ | .fa-camera:before{content:"\f030"} | ||
+ | .fa-font:before{content:"\f031"} | ||
+ | .fa-bold:before{content:"\f032"} | ||
+ | .fa-italic:before{content:"\f033"} | ||
+ | .fa-text-height:before{content:"\f034"} | ||
+ | .fa-text-width:before{content:"\f035"} | ||
+ | .fa-align-left:before{content:"\f036"} | ||
+ | .fa-align-center:before{content:"\f037"} | ||
+ | .fa-align-right:before{content:"\f038"} | ||
+ | .fa-align-justify:before{content:"\f039"} | ||
+ | .fa-list:before{content:"\f03a"} | ||
+ | .fa-dedent:before,.fa-outdent:before{content:"\f03b"} | ||
+ | .fa-indent:before{content:"\f03c"} | ||
+ | .fa-video-camera:before{content:"\f03d"} | ||
+ | .fa-picture-o:before{content:"\f03e"} | ||
+ | .fa-pencil:before{content:"\f040"} | ||
+ | .fa-map-marker:before{content:"\f041"} | ||
+ | .fa-adjust:before{content:"\f042"} | ||
+ | .fa-tint:before{content:"\f043"} | ||
+ | .fa-edit:before,.fa-pencil-square-o:before{content:"\f044"} | ||
+ | .fa-share-square-o:before{content:"\f045"} | ||
+ | .fa-check-square-o:before{content:"\f046"} | ||
+ | .fa-move:before{content:"\f047"} | ||
+ | .fa-step-backward:before{content:"\f048"} | ||
+ | .fa-fast-backward:before{content:"\f049"} | ||
+ | .fa-backward:before{content:"\f04a"} | ||
+ | .fa-play:before{content:"\f04b"} | ||
+ | .fa-pause:before{content:"\f04c"} | ||
+ | .fa-stop:before{content:"\f04d"} | ||
+ | .fa-forward:before{content:"\f04e"} | ||
+ | .fa-fast-forward:before{content:"\f050"} | ||
+ | .fa-step-forward:before{content:"\f051"} | ||
+ | .fa-eject:before{content:"\f052"} | ||
+ | .fa-chevron-left:before{content:"\f053"} | ||
+ | .fa-chevron-right:before{content:"\f054"} | ||
+ | .fa-plus-circle:before{content:"\f055"} | ||
+ | .fa-minus-circle:before{content:"\f056"} | ||
+ | .fa-times-circle:before{content:"\f057"} | ||
+ | .fa-check-circle:before{content:"\f058"} | ||
+ | .fa-question-circle:before{content:"\f059"} | ||
+ | .fa-info-circle:before{content:"\f05a"} | ||
+ | .fa-crosshairs:before{content:"\f05b"} | ||
+ | .fa-times-circle-o:before{content:"\f05c"} | ||
+ | .fa-check-circle-o:before{content:"\f05d"} | ||
+ | .fa-ban:before{content:"\f05e"} | ||
+ | .fa-arrow-left:before{content:"\f060"} | ||
+ | .fa-arrow-right:before{content:"\f061"} | ||
+ | .fa-arrow-up:before{content:"\f062"} | ||
+ | .fa-arrow-down:before{content:"\f063"} | ||
+ | .fa-mail-forward:before,.fa-share:before{content:"\f064"} | ||
+ | .fa-resize-full:before{content:"\f065"} | ||
+ | .fa-resize-small:before{content:"\f066"} | ||
+ | .fa-plus:before{content:"\f067"} | ||
+ | .fa-minus:before{content:"\f068"} | ||
+ | .fa-asterisk:before{content:"\f069"} | ||
+ | .fa-exclamation-circle:before{content:"\f06a"} | ||
+ | .fa-gift:before{content:"\f06b"} | ||
+ | .fa-leaf:before{content:"\f06c"} | ||
+ | .fa-fire:before{content:"\f06d"} | ||
+ | .fa-eye:before{content:"\f06e"} | ||
+ | .fa-eye-slash:before{content:"\f070"} | ||
+ | .fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"} | ||
+ | .fa-plane:before{content:"\f072"} | ||
+ | .fa-calendar:before{content:"\f073"} | ||
+ | .fa-random:before{content:"\f074"} | ||
+ | .fa-comment:before{content:"\f075"} | ||
+ | .fa-magnet:before{content:"\f076"} | ||
+ | .fa-chevron-up:before{content:"\f077"} | ||
+ | .fa-chevron-down:before{content:"\f078"} | ||
+ | .fa-retweet:before{content:"\f079"} | ||
+ | .fa-shopping-cart:before{content:"\f07a"} | ||
+ | .fa-folder:before{content:"\f07b"} | ||
+ | .fa-folder-open:before{content:"\f07c"} | ||
+ | .fa-resize-vertical:before{content:"\f07d"} | ||
+ | .fa-resize-horizontal:before{content:"\f07e"} | ||
+ | .fa-bar-chart-o:before{content:"\f080"} | ||
+ | .fa-twitter-square:before{content:"\f081"} | ||
+ | .fa-facebook-square:before{content:"\f082"} | ||
+ | .fa-camera-retro:before{content:"\f083"} | ||
+ | .fa-key:before{content:"\f084"} | ||
+ | .fa-gears:before,.fa-cogs:before{content:"\f085"} | ||
+ | .fa-comments:before{content:"\f086"} | ||
+ | .fa-thumbs-o-up:before{content:"\f087"} | ||
+ | .fa-thumbs-o-down:before{content:"\f088"} | ||
+ | .fa-star-half:before{content:"\f089"} | ||
+ | .fa-heart-o:before{content:"\f08a"} | ||
+ | .fa-sign-out:before{content:"\f08b"} | ||
+ | .fa-linkedin-square:before{content:"\f08c"} | ||
+ | .fa-thumb-tack:before{content:"\f08d"} | ||
+ | .fa-external-link:before{content:"\f08e"} | ||
+ | .fa-sign-in:before{content:"\f090"} | ||
+ | .fa-trophy:before{content:"\f091"} | ||
+ | .fa-github-square:before{content:"\f092"} | ||
+ | .fa-upload:before{content:"\f093"} | ||
+ | .fa-lemon-o:before{content:"\f094"} | ||
+ | .fa-phone:before{content:"\f095"} | ||
+ | .fa-square-o:before{content:"\f096"} | ||
+ | .fa-bookmark-o:before{content:"\f097"} | ||
+ | .fa-phone-square:before{content:"\f098"} | ||
+ | .fa-twitter:before{content:"\f099"} | ||
+ | .fa-facebook:before{content:"\f09a"} | ||
+ | .fa-github:before{content:"\f09b"} | ||
+ | .fa-unlock:before{content:"\f09c"} | ||
+ | .fa-credit-card:before{content:"\f09d"} | ||
+ | .fa-rss:before{content:"\f09e"} | ||
+ | .fa-hdd-o:before{content:"\f0a0"} | ||
+ | .fa-bullhorn:before{content:"\f0a1"} | ||
+ | .fa-bell:before{content:"\f0f3"} | ||
+ | .fa-certificate:before{content:"\f0a3"} | ||
+ | .fa-hand-o-right:before{content:"\f0a4"} | ||
+ | .fa-hand-o-left:before{content:"\f0a5"} | ||
+ | .fa-hand-o-up:before{content:"\f0a6"} | ||
+ | .fa-hand-o-down:before{content:"\f0a7"} | ||
+ | .fa-arrow-circle-left:before{content:"\f0a8"} | ||
+ | .fa-arrow-circle-right:before{content:"\f0a9"} | ||
+ | .fa-arrow-circle-up:before{content:"\f0aa"} | ||
+ | .fa-arrow-circle-down:before{content:"\f0ab"} | ||
+ | .fa-globe:before{content:"\f0ac"} | ||
+ | .fa-wrench:before{content:"\f0ad"} | ||
+ | .fa-tasks:before{content:"\f0ae"} | ||
+ | .fa-filter:before{content:"\f0b0"} | ||
+ | .fa-briefcase:before{content:"\f0b1"} | ||
+ | .fa-fullscreen:before{content:"\f0b2"} | ||
+ | .fa-group:before{content:"\f0c0"} | ||
+ | .fa-chain:before,.fa-link:before{content:"\f0c1"} | ||
+ | .fa-cloud:before{content:"\f0c2"} | ||
+ | .fa-flask:before{content:"\f0c3"} | ||
+ | .fa-cut:before,.fa-scissors:before{content:"\f0c4"} | ||
+ | .fa-copy:before,.fa-files-o:before{content:"\f0c5"} | ||
+ | .fa-paperclip:before{content:"\f0c6"} | ||
+ | .fa-save:before,.fa-floppy-o:before{content:"\f0c7"} | ||
+ | .fa-square:before{content:"\f0c8"} | ||
+ | .fa-reorder:before{content:"\f0c9"} | ||
+ | .fa-list-ul:before{content:"\f0ca"} | ||
+ | .fa-list-ol:before{content:"\f0cb"} | ||
+ | .fa-strikethrough:before{content:"\f0cc"} | ||
+ | .fa-underline:before{content:"\f0cd"} | ||
+ | .fa-table:before{content:"\f0ce"} | ||
+ | .fa-magic:before{content:"\f0d0"} | ||
+ | .fa-truck:before{content:"\f0d1"} | ||
+ | .fa-pinterest:before{content:"\f0d2"} | ||
+ | .fa-pinterest-square:before{content:"\f0d3"} | ||
+ | .fa-google-plus-square:before{content:"\f0d4"} | ||
+ | .fa-google-plus:before{content:"\f0d5"} | ||
+ | .fa-money:before{content:"\f0d6"} | ||
+ | .fa-caret-down:before{content:"\f0d7"} | ||
+ | .fa-caret-up:before{content:"\f0d8"} | ||
+ | .fa-caret-left:before{content:"\f0d9"} | ||
+ | .fa-caret-right:before{content:"\f0da"} | ||
+ | .fa-columns:before{content:"\f0db"} | ||
+ | .fa-unsorted:before,.fa-sort:before{content:"\f0dc"} | ||
+ | .fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"} | ||
+ | .fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"} | ||
+ | .fa-envelope:before{content:"\f0e0"} | ||
+ | .fa-linkedin:before{content:"\f0e1"} | ||
+ | .fa-rotate-left:before,.fa-undo:before{content:"\f0e2"} | ||
+ | .fa-legal:before,.fa-gavel:before{content:"\f0e3"} | ||
+ | .fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"} | ||
+ | .fa-comment-o:before{content:"\f0e5"} | ||
+ | .fa-comments-o:before{content:"\f0e6"} | ||
+ | .fa-flash:before,.fa-bolt:before{content:"\f0e7"} | ||
+ | .fa-sitemap:before{content:"\f0e8"} | ||
+ | .fa-umbrella:before{content:"\f0e9"} | ||
+ | .fa-paste:before,.fa-clipboard:before{content:"\f0ea"} | ||
+ | .fa-lightbulb-o:before{content:"\f0eb"} | ||
+ | .fa-exchange:before{content:"\f0ec"} | ||
+ | .fa-cloud-download:before{content:"\f0ed"} | ||
+ | .fa-cloud-upload:before{content:"\f0ee"} | ||
+ | .fa-user-md:before{content:"\f0f0"} | ||
+ | .fa-stethoscope:before{content:"\f0f1"} | ||
+ | .fa-suitcase:before{content:"\f0f2"} | ||
+ | .fa-bell-o:before{content:"\f0a2"} | ||
+ | .fa-coffee:before{content:"\f0f4"} | ||
+ | .fa-cutlery:before{content:"\f0f5"} | ||
+ | .fa-file-text-o:before{content:"\f0f6"} | ||
+ | .fa-building:before{content:"\f0f7"} | ||
+ | .fa-hospital:before{content:"\f0f8"} | ||
+ | .fa-ambulance:before{content:"\f0f9"} | ||
+ | .fa-medkit:before{content:"\f0fa"} | ||
+ | .fa-fighter-jet:before{content:"\f0fb"} | ||
+ | .fa-beer:before{content:"\f0fc"} | ||
+ | .fa-h-square:before{content:"\f0fd"} | ||
+ | .fa-plus-square:before{content:"\f0fe"} | ||
+ | .fa-angle-double-left:before{content:"\f100"} | ||
+ | .fa-angle-double-right:before{content:"\f101"} | ||
+ | .fa-angle-double-up:before{content:"\f102"} | ||
+ | .fa-angle-double-down:before{content:"\f103"} | ||
+ | .fa-angle-left:before{content:"\f104"} | ||
+ | .fa-angle-right:before{content:"\f105"} | ||
+ | .fa-angle-up:before{content:"\f106"} | ||
+ | .fa-angle-down:before{content:"\f107"} | ||
+ | .fa-desktop:before{content:"\f108"} | ||
+ | .fa-laptop:before{content:"\f109"} | ||
+ | .fa-tablet:before{content:"\f10a"} | ||
+ | .fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"} | ||
+ | .fa-circle-o:before{content:"\f10c"} | ||
+ | .fa-quote-left:before{content:"\f10d"} | ||
+ | .fa-quote-right:before{content:"\f10e"} | ||
+ | .fa-spinner:before{content:"\f110"} | ||
+ | .fa-circle:before{content:"\f111"} | ||
+ | .fa-mail-reply:before,.fa-reply:before{content:"\f112"} | ||
+ | .fa-github-alt:before{content:"\f113"} | ||
+ | .fa-folder-o:before{content:"\f114"} | ||
+ | .fa-folder-open-o:before{content:"\f115"} | ||
+ | .fa-expand-o:before{content:"\f116"} | ||
+ | .fa-collapse-o:before{content:"\f117"} | ||
+ | .fa-smile-o:before{content:"\f118"} | ||
+ | .fa-frown-o:before{content:"\f119"} | ||
+ | .fa-meh-o:before{content:"\f11a"} | ||
+ | .fa-gamepad:before{content:"\f11b"} | ||
+ | .fa-keyboard-o:before{content:"\f11c"} | ||
+ | .fa-flag-o:before{content:"\f11d"} | ||
+ | .fa-flag-checkered:before{content:"\f11e"} | ||
+ | .fa-terminal:before{content:"\f120"} | ||
+ | .fa-code:before{content:"\f121"} | ||
+ | .fa-reply-all:before{content:"\f122"} | ||
+ | .fa-mail-reply-all:before{content:"\f122"} | ||
+ | .fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"} | ||
+ | .fa-location-arrow:before{content:"\f124"} | ||
+ | .fa-crop:before{content:"\f125"} | ||
+ | .fa-code-fork:before{content:"\f126"} | ||
+ | .fa-unlink:before,.fa-chain-broken:before{content:"\f127"} | ||
+ | .fa-question:before{content:"\f128"} | ||
+ | .fa-info:before{content:"\f129"} | ||
+ | .fa-exclamation:before{content:"\f12a"} | ||
+ | .fa-superscript:before{content:"\f12b"} | ||
+ | .fa-subscript:before{content:"\f12c"} | ||
+ | .fa-eraser:before{content:"\f12d"} | ||
+ | .fa-puzzle-piece:before{content:"\f12e"} | ||
+ | .fa-microphone:before{content:"\f130"} | ||
+ | .fa-microphone-slash:before{content:"\f131"} | ||
+ | .fa-shield:before{content:"\f132"} | ||
+ | .fa-calendar-o:before{content:"\f133"} | ||
+ | .fa-fire-extinguisher:before{content:"\f134"} | ||
+ | .fa-rocket:before{content:"\f135"} | ||
+ | .fa-maxcdn:before{content:"\f136"} | ||
+ | .fa-chevron-circle-left:before{content:"\f137"} | ||
+ | .fa-chevron-circle-right:before{content:"\f138"} | ||
+ | .fa-chevron-circle-up:before{content:"\f139"} | ||
+ | .fa-chevron-circle-down:before{content:"\f13a"} | ||
+ | .fa-html5:before{content:"\f13b"} | ||
+ | .fa-css3:before{content:"\f13c"} | ||
+ | .fa-anchor:before{content:"\f13d"} | ||
+ | .fa-unlock-o:before{content:"\f13e"} | ||
+ | .fa-bullseye:before{content:"\f140"} | ||
+ | .fa-ellipsis-horizontal:before{content:"\f141"} | ||
+ | .fa-ellipsis-vertical:before{content:"\f142"} | ||
+ | .fa-rss-square:before{content:"\f143"} | ||
+ | .fa-play-circle:before{content:"\f144"} | ||
+ | .fa-ticket:before{content:"\f145"} | ||
+ | .fa-minus-square:before{content:"\f146"} | ||
+ | .fa-minus-square-o:before{content:"\f147"} | ||
+ | .fa-level-up:before{content:"\f148"} | ||
+ | .fa-level-down:before{content:"\f149"} | ||
+ | .fa-check-square:before{content:"\f14a"} | ||
+ | .fa-pencil-square:before{content:"\f14b"} | ||
+ | .fa-external-link-square:before{content:"\f14c"} | ||
+ | .fa-share-square:before{content:"\f14d"} | ||
+ | .fa-compass:before{content:"\f14e"} | ||
+ | .fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"} | ||
+ | .fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"} | ||
+ | .fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"} | ||
+ | .fa-euro:before,.fa-eur:before{content:"\f153"} | ||
+ | .fa-gbp:before{content:"\f154"} | ||
+ | .fa-dollar:before,.fa-usd:before{content:"\f155"} | ||
+ | .fa-rupee:before,.fa-inr:before{content:"\f156"} | ||
+ | .fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"} | ||
+ | .fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"} | ||
+ | .fa-won:before,.fa-krw:before{content:"\f159"} | ||
+ | .fa-bitcoin:before,.fa-btc:before{content:"\f15a"} | ||
+ | .fa-file:before{content:"\f15b"} | ||
+ | .fa-file-text:before{content:"\f15c"} | ||
+ | .fa-sort-alpha-asc:before{content:"\f15d"} | ||
+ | .fa-sort-alpha-desc:before{content:"\f15e"} | ||
+ | .fa-sort-amount-asc:before{content:"\f160"} | ||
+ | .fa-sort-amount-desc:before{content:"\f161"} | ||
+ | .fa-sort-numeric-asc:before{content:"\f162"} | ||
+ | .fa-sort-numeric-desc:before{content:"\f163"} | ||
+ | .fa-thumbs-up:before{content:"\f164"} | ||
+ | .fa-thumbs-down:before{content:"\f165"} | ||
+ | .fa-youtube-square:before{content:"\f166"} | ||
+ | .fa-youtube:before{content:"\f167"} | ||
+ | .fa-xing:before{content:"\f168"} | ||
+ | .fa-xing-square:before{content:"\f169"} | ||
+ | .fa-youtube-play:before{content:"\f16a"} | ||
+ | .fa-dropbox:before{content:"\f16b"} | ||
+ | .fa-stack-overflow:before{content:"\f16c"} | ||
+ | .fa-instagram:before{content:"\f16d"} | ||
+ | .fa-flickr:before{content:"\f16e"} | ||
+ | .fa-adn:before{content:"\f170"} | ||
+ | .fa-bitbucket:before{content:"\f171"} | ||
+ | .fa-bitbucket-square:before{content:"\f172"} | ||
+ | .fa-tumblr:before{content:"\f173"} | ||
+ | .fa-tumblr-square:before{content:"\f174"} | ||
+ | .fa-long-arrow-down:before{content:"\f175"} | ||
+ | .fa-long-arrow-up:before{content:"\f176"} | ||
+ | .fa-long-arrow-left:before{content:"\f177"} | ||
+ | .fa-long-arrow-right:before{content:"\f178"} | ||
+ | .fa-apple:before{content:"\f179"} | ||
+ | .fa-windows:before{content:"\f17a"} | ||
+ | .fa-android:before{content:"\f17b"} | ||
+ | .fa-linux:before{content:"\f17c"} | ||
+ | .fa-dribbble:before{content:"\f17d"} | ||
+ | .fa-skype:before{content:"\f17e"} | ||
+ | .fa-foursquare:before{content:"\f180"} | ||
+ | .fa-trello:before{content:"\f181"} | ||
+ | .fa-female:before{content:"\f182"} | ||
+ | .fa-male:before{content:"\f183"} | ||
+ | .fa-gittip:before{content:"\f184"} | ||
+ | .fa-sun-o:before{content:"\f185"} | ||
+ | .fa-moon-o:before{content:"\f186"} | ||
+ | .fa-archive:before{content:"\f187"} | ||
+ | .fa-bug:before{content:"\f188"} | ||
+ | .fa-vk:before{content:"\f189"} | ||
+ | .fa-weibo:before{content:"\f18a"} | ||
+ | .fa-renren:before{content:"\f18b"} | ||
+ | .fa-pagelines:before{content:"\f18c"} | ||
+ | .fa-stack-exchange:before{content:"\f18d"} | ||
+ | .fa-arrow-circle-o-right:before{content:"\f18e"} | ||
+ | .fa-arrow-circle-o-left:before{content:"\f190"} | ||
+ | .fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"} | ||
+ | .fa-dot-circle-o:before{content:"\f192"} | ||
+ | .fa-wheelchair:before{content:"\f193"} | ||
+ | .fa-vimeo-square:before{content:"\f194"} | ||
+ | .fa-turkish-lira:before,.fa-try:before{content:"\f195"} | ||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* Header */ |
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | + | #header { | |
- | + | position: fixed; | |
- | + | z-index: 10000; | |
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | background: #fff; | ||
+ | background: rgba(255,255,255,0.95); | ||
+ | height: 3em; | ||
+ | line-height: 3em; | ||
+ | box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1); | ||
} | } | ||
- | + | ||
- | body | + | body { |
- | + | padding-top: 3em; | |
- | padding | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #logo { | |
- | + | position: absolute; | |
- | + | left: 1em; | |
- | + | top: 0; | |
- | + | height: 3em; | |
- | + | line-height: 3em; | |
- | + | letter-spacing: -1px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #logo a { | |
- | + | font-size: 1.25em; | |
- | + | ||
} | } | ||
+ | |||
+ | #nav { | ||
+ | position: absolute; | ||
+ | right: 0.5em; | ||
+ | top: 0; | ||
+ | height: 3em; | ||
+ | line-height: 3em; | ||
+ | } | ||
+ | |||
+ | #nav ul { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #nav ul li { | ||
+ | display: inline-block; | ||
+ | margin-left: 0.5em; | ||
+ | font-size: 0.9em; | ||
+ | } | ||
+ | |||
+ | #nav ul li a { | ||
+ | display: block; | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | height: 3em; | ||
+ | line-height: 3em; | ||
+ | padding: 0 0.5em 0 0.5em; | ||
+ | outline: 0; | ||
+ | } | ||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* Intro */ |
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | # | + | #intro { |
- | + | background: url('images/overlay.png'), url('http://www.scientificenlighters.com/admin/uploads/DNA1.jpg'); | |
- | + | background-size: 256px 256px, cover; | |
- | + | background-attachment: fixed, fixed; | |
- | - | + | background-position: top left, bottom center; |
+ | background-repeat: repeat, no-repeat; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* One */ |
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | # | + | #one { |
- | + | background: url('images/overlay.png'), url('http://www.uab.edu/medicine/news/images/News/greg_h1n1_virus.jpg'); | |
- | + | background-size: 256px 256px, cover; | |
- | position: | + | background-attachment: fixed, fixed; |
+ | background-position: top left, center center; | ||
} | } | ||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* Two */ |
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | # | + | #two { |
- | + | background: url('images/overlay.png'), url('http://nice-cool-pics.com/data/media/3/viruses_and_bacteria.jpg'); | |
- | position: | + | background-size: 256px 256px, cover; |
+ | background-attachment: fixed, fixed; | ||
+ | background-position: top left, center center; | ||
} | } | ||
- | + | /*********************************************************************************/ | |
- | + | /* Work */ | |
- | + | /*********************************************************************************/ | |
- | + | ||
- | + | #work { | |
- | + | } | |
+ | |||
+ | #work .row.images { | ||
} | } | ||
+ | |||
+ | #work .row.images .image { | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | opacity: 1.0; | ||
+ | |||
+ | -moz-transition: all 1s ease; | ||
+ | -webkit-transition: all 1s ease; | ||
+ | -o-transition: all 1s ease; | ||
+ | -ms-transition: all 1s ease; | ||
+ | transition: all 1s ease; | ||
+ | |||
+ | -moz-transform: translateZ(0); | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -o-transform: translateZ(0); | ||
+ | -ms-transform: translateZ(0); | ||
+ | transform: translateZ(0); | ||
+ | } | ||
+ | |||
+ | #work .row.images.inactive { | ||
+ | } | ||
+ | #work .row.images.inactive .image { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | #work .row.images.inactive .image.l { | ||
+ | left: -14em; | ||
+ | } | ||
+ | |||
+ | #work .row.images.inactive .image.r { | ||
+ | left: 14em; | ||
+ | } | ||
+ | |||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* Contact */ |
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | # | + | #contact { |
- | + | padding-bottom: 0; | |
- | padding: | + | overflow: hidden; |
- | + | ||
} | } | ||
- | + | ||
- | # | + | #contact .box { |
- | + | position: relative; | |
- | + | bottom: 0; | |
- | + | ||
+ | -moz-transition: all 1s ease; | ||
+ | -webkit-transition: all 1s ease; | ||
+ | -o-transition: all 1s ease; | ||
+ | -ms-transition: all 1s ease; | ||
+ | transition: all 1s ease; | ||
+ | |||
+ | -moz-transform: translateZ(0); | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -o-transform: translateZ(0); | ||
+ | -ms-transform: translateZ(0); | ||
+ | transform: translateZ(0); | ||
} | } | ||
- | # | + | #contact.inactive { |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
+ | #contact.inactive .box { | ||
+ | bottom: -30em; | ||
+ | } | ||
+ | |||
/*********************************************************************************/ | /*********************************************************************************/ | ||
/* Footer */ | /* Footer */ | ||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | + | ||
- | #footer | + | #footer { |
- | + | position: relative; | |
- | position: | + | height: 5em; |
- | + | line-height: 5em; | |
- | + | margin: 0; | |
- | + | background: #39454b; | |
+ | color: #999; | ||
+ | color: rgba(185,186,187,0.5); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
+ | |||
+ | #footer a { | ||
+ | color: #999; | ||
+ | color: rgba(185,186,187,0.5); | ||
+ | } | ||
+ | |||
+ | #footer a:hover { | ||
+ | color: #bbb; | ||
+ | color: rgba(185,186,187,1.0); | ||
+ | } | ||
- | #footer | + | #footer .actions { |
- | + | position: absolute; | |
- | + | left: 1em; | |
- | margin: | + | top: 0.25em; |
+ | height: 5em; | ||
+ | line-height: 5em; | ||
+ | margin: 0; | ||
} | } | ||
- | + | #footer .actions li { | |
- | + | font-size: 1.25em; | |
- | + | margin: 0; | |
- | + | } | |
- | + | ||
+ | #footer .actions li a { | ||
+ | padding: 0.5em; | ||
+ | } | ||
- | #footer . | + | #footer .menu { |
- | + | ||
position: absolute; | position: absolute; | ||
+ | right: 2em; | ||
top: 0; | top: 0; | ||
- | + | height: 5em; | |
- | + | line-height: 5em; | |
- | + | margin: 0; | |
} | } | ||
+ | #footer .menu li { | ||
+ | font-size: 0.9em; | ||
+ | } | ||
+ | |||
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | /* | + | /* Poptrox */ |
/*********************************************************************************/ | /*********************************************************************************/ | ||
- | .poptrox-popup | + | .poptrox-popup { |
- | + | background: #fff; | |
- | background: # | + | -moz-box-sizing: content-box; |
- | + | -webkit-box-sizing: content-box; | |
- | box-shadow: | + | -o-box-sizing: content-box; |
+ | -ms-box-sizing: content-box; | ||
+ | box-sizing: content-box; | ||
+ | padding-bottom: 3em; | ||
+ | box-shadow: 0 0.1em 0.15em 0 rgba(0,0,0,0.15); | ||
} | } | ||
- | .poptrox-popup .loader | + | .poptrox-popup .loader { |
- | + | ||
- | + | ||
width: 48px; | width: 48px; | ||
height: 48px; | height: 48px; | ||
+ | background: url('images/loader.gif'); | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
left: 50%; | left: 50%; | ||
margin: -24px 0 0 -24px; | margin: -24px 0 0 -24px; | ||
- | |||
- | |||
} | } | ||
- | + | ||
- | .poptrox-popup .caption | + | .poptrox-popup .caption { |
- | + | ||
position: absolute; | position: absolute; | ||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
- | background: # | + | background: #fff; |
- | + | ||
- | + | ||
width: 100%; | width: 100%; | ||
- | line-height: | + | height: 3em; |
+ | line-height: 2.8em; | ||
text-align: center; | text-align: center; | ||
- | + | cursor: default; | |
- | + | z-index: 1; | |
+ | font-size: 0.9em; | ||
} | } | ||
.poptrox-popup .nav-next, | .poptrox-popup .nav-next, | ||
- | .poptrox-popup .nav-previous | + | .poptrox-popup .nav-previous { |
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | width: 50%; | |
- | + | height: 100%; | |
- | + | opacity: 0; | |
- | -moz-transition: opacity 0. | + | cursor: pointer; |
- | -webkit-transition: opacity 0. | + | background: rgba(0,0,0,0.01); |
- | -o-transition: opacity 0. | + | -moz-transition: opacity 0.2s ease-in-out; |
- | -ms-transition: opacity 0. | + | -webkit-transition: opacity 0.2s ease-in-out; |
- | transition: opacity 0. | + | -o-transition: opacity 0.2s ease-in-out; |
- | + | -ms-transition: opacity 0.2s ease-in-out; | |
+ | transition: opacity 0.2s ease-in-out; | ||
+ | -webkit-tap-highlight-color: rgba(255,255,255,0); | ||
} | } | ||
- | .poptrox-popup .nav-next: | + | .poptrox-popup .nav-next:before, |
- | .poptrox-popup .nav-previous:hover, | + | .poptrox-popup .nav-previous:before { |
- | .poptrox-popup . | + | content: ''; |
- | { | + | position: absolute; |
+ | width: 96px; | ||
+ | height: 64px; | ||
+ | background: url('images/poptrox-nav.svg'); | ||
+ | top: -moz-calc(50% - 1.5em); | ||
+ | top: -webkit-calc(50% - 1.5em); | ||
+ | top: -o-calc(50% - 1.5em); | ||
+ | top: -ms-calc(50% - 1.5em); | ||
+ | top: calc(50% - 1.5em); | ||
+ | margin: -32px 0 0 0; | ||
+ | } | ||
+ | |||
+ | .poptrox-popup:hover .nav-next, | ||
+ | .poptrox-popup:hover .nav-previous { | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | .poptrox-popup:hover .nav-next:hover, | ||
+ | .poptrox-popup:hover .nav-previous:hover { | ||
opacity: 1.0; | opacity: 1.0; | ||
} | } | ||
- | + | ||
- | + | .poptrox-popup .nav-previous:before | |
- | + | { | |
- | + | -moz-transform: scaleX(-1); | |
- | + | -webkit-transform: scaleX(-1); | |
- | + | -o-transform: scaleX(-1); | |
- | + | -ms-transform: scaleX(-1); | |
- | + | transform: scaleX(-1); | |
- | + | -ms-filter: "FlipH"; | |
- | + | filter: FlipH; | |
- | + | } | |
- | + | ||
- | + | .poptrox-popup .nav-next { | |
- | .poptrox-popup .nav-next | + | |
- | + | ||
right: 0; | right: 0; | ||
- | |||
- | |||
} | } | ||
- | .poptrox-popup .nav-next:before | + | .poptrox-popup .nav-next:before { |
- | + | right: 0; | |
- | + | ||
} | } | ||
- | .poptrox-popup .nav-previous | + | .poptrox-popup .nav-previous { |
- | + | ||
left: 0; | left: 0; | ||
- | |||
- | |||
} | } | ||
- | .poptrox-popup .nav-previous:before | + | .poptrox-popup .nav-previous:before { |
- | + | left: 0; | |
- | + | ||
} | } | ||
- | + | ||
- | .poptrox-popup .closer | + | .poptrox-popup .closer { |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 0; |
- | right: - | + | right: 0; |
- | + | width: 64px; | |
- | + | height: 64px; | |
- | + | text-indent: -9999px; | |
+ | z-index: 2; | ||
+ | opacity: 0; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | -ms-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | -webkit-tap-highlight-color: rgba(255,255,255,0); | ||
} | } | ||
- | .poptrox-popup .closer:before | + | .poptrox-popup .closer:before { |
- | + | content: ''; | |
- | content: | + | display: block; |
+ | position: absolute; | ||
+ | right: 16px; | ||
+ | top: 16px; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | border-radius: 100%; | ||
+ | box-shadow: inset 0 0 0 2px #fff; | ||
+ | background: url('images/poptrox-closer.svg') center center; | ||
+ | color: #fff !important; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | + | .poptrox-popup:hover .closer { | |
+ | opacity: 0.5; | ||
+ | } | ||
- | /* | + | .poptrox-popup:hover .closer:hover { |
+ | opacity: 1.0; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Touch Mode */ | ||
+ | /*********************************************************************************/ | ||
- | + | body.touch { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | . | + | body.touch .main { |
- | + | background-attachment: scroll !important; | |
} | } | ||
- | + | ||
- | . | + | body.touch .poptrox-popup { |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | body.touch .poptrox-popup .nav-next, | |
+ | body.touch .poptrox-popup .nav-previous, | ||
+ | body.touch .poptrox-popup .closer { | ||
+ | opacity: 1.0 !important; | ||
+ | } | ||
- | + | </style> | |
+ | <style> | ||
+ | /*********************************************************************************/ | ||
+ | /* Basic */ | ||
+ | /*********************************************************************************/ | ||
- | + | body,input,textarea,select { | |
- | + | font-size: 17pt; | |
- | + | } | |
- | + | ||
- | + | /* Main */ | |
- | + | ||
- | + | .main { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | . | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | .main.style2 { | |
- | + | } | |
- | + | ||
- | + | .main.style2 .content { | |
- | + | width: 40%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | . | + | |
- | + | ||
} | } | ||
+ | |||
+ | .main.style2.right .content { | ||
+ | left: 60%; | ||
+ | } | ||
- | . | + | .main.style2.inactive { |
- | + | ||
} | } | ||
- | + | .main.style2.inactive .content { | |
+ | } | ||
- | + | .main.style2.inactive.left .content { | |
- | + | left: -40%; | |
- | + | } | |
+ | </style> | ||
+ | <style> | ||
+ | /*********************************************************************************/ | ||
+ | /* Basic */ | ||
+ | /*********************************************************************************/ | ||
- | + | body,input,textarea,select { | |
- | + | font-size: 15pt; | |
- | + | } | |
+ | </style> | ||
+ | <noscript> | ||
- | + | </noscript> | |
- | + | <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <!--[if lte IE 8]><link rel="stylesheet" href="css/ | + | |
</head> | </head> | ||
<body> | <body> | ||
+ | |||
+ | <!-- Header --> | ||
+ | <header id="header"> | ||
- | + | <!-- Logo --> | |
- | + | <h1 id="logo"><a href="#">Big Picture</a></h1> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <!-- Nav --> | ||
+ | <nav id="nav"> | ||
+ | <ul> | ||
+ | <li><a href="#intro">Intro</a></li> | ||
+ | <li><a href="#one">What I Do</a></li> | ||
+ | <li><a href="#two">Who I Am</a></li> | ||
+ | <li><a href="#work">My Work</a></li> | ||
+ | <li><a href="#contact">Contact</a></li> | ||
+ | </ul> | ||
+ | </nav> | ||
- | <!-- | + | </header> |
+ | |||
+ | <!-- Intro --> | ||
+ | <section id="intro" class="main style1 dark fullscreen"> | ||
+ | <div id="videocontainer" style="display: none;"> | ||
+ | </div> | ||
+ | <div class="content container small"> | ||
+ | |||
+ | <header> | ||
+ | <h2 id="crispr"><span>CRISPR/Cas9 Technology</span></h2> | ||
+ | </header> | ||
+ | <p id="crispr">Find out about the modern ways of <strong>Killing Tuberculosis</strong> using the CRISPR/Cas technology! | ||
+ | <div id="latest-videos"> | ||
+ | <ul> | ||
+ | <li class="playvideo"> | ||
+ | <a href="http://www.youtube.com/watch?v=TYtlSqIPO7k" title="E3 2014: Making the Gameplay"> | ||
+ | <img src="http://www.mirrorsedge.com/img/icon_video1.gif" alt="E3 2014: Making the Gameplay"> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <footer> | ||
+ | <a href="#one" class="button style2 down">More</a> | ||
+ | </footer> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- One --> | ||
+ | <section id="one" class="main style2 right dark fullscreen"> | ||
+ | <div class="content box style2"> | ||
+ | <header> | ||
+ | <h2>What I Do</h2> | ||
+ | </header> | ||
+ | <p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. | ||
+ | Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, | ||
+ | id varius justo euismod in. Curabitur egestas consectetur magna urna.</p> | ||
+ | </div> | ||
+ | <a href="#two" class="button style2 down anchored">Next</a> | ||
+ | |||
+ | <iframe width="854" height="510" src="//www.youtube.com/embed/2pm9u1E8k3s" frameborder="0" allowfullscreen></iframe> | ||
+ | |||
+ | </section> | ||
+ | |||
+ | <!-- Two --> | ||
+ | <section id="two" class="main style2 left dark fullscreen"> | ||
+ | <div class="content box style3"> | ||
+ | <header> | ||
+ | <h2>Who I Am</h2> | ||
+ | </header> | ||
+ | <p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. | ||
+ | Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, | ||
+ | id varius justo euismod in. Curabitur egestas consectetur magna urna.</p> | ||
+ | </div> | ||
+ | <a href="#work" class="button style2 down anchored">Next</a> | ||
+ | </section> | ||
+ | |||
+ | <!-- Work --> | ||
+ | <section id="work" class="main style3 primary"> | ||
+ | <div class="content container"> | ||
+ | <header> | ||
+ | <h2>My Work</h2> | ||
+ | <p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. | ||
+ | Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis | ||
+ | arcu, id varius justo euismod in. Curabitur egestas consectetur magna vitae urna.</p> | ||
+ | </header> | ||
- | <div | + | <!-- |
- | < | + | Lightbox Gallery |
- | < | + | |
- | + | Powered by poptrox. Full docs here: https://github.com/n33/jquery.poptrox | |
+ | --> | ||
+ | <div class="container small gallery"> | ||
+ | <div class="row flush images"> | ||
+ | <div class="6u"><a href="images/fulls/01.jpg" class="image full l"><img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" /></a></div> | ||
+ | <div class="6u"><a href="images/fulls/02.jpg" class="image full r"><img src="images/thumbs/02.jpg" title="Airchitecture II" alt="" /></a></div> | ||
+ | </div> | ||
+ | <div class="row flush images"> | ||
+ | <div class="6u"><a href="images/fulls/03.jpg" class="image full l"><img src="images/thumbs/03.jpg" title="Air Lounge" alt="" /></a></div> | ||
+ | <div class="6u"><a href="images/fulls/04.jpg" class="image full r"><img src="images/thumbs/04.jpg" title="Carry on" alt="" /></a></div> | ||
+ | </div> | ||
+ | <div class="row flush images"> | ||
+ | <div class="6u"><a href="images/fulls/05.jpg" class="image full l"><img src="images/thumbs/05.jpg" title="The sparkling shell" alt="" /></a></div> | ||
+ | <div class="6u"><a href="images/fulls/06.jpg" class="image full r"><img src="images/thumbs/06.jpg" title="Bent IX" alt="" /></a></div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- Contact --> | ||
+ | <section id="contact" class="main style3 secondary"> | ||
+ | <div class="content container"> | ||
+ | <header> | ||
+ | <h2>Say Hello.</h2> | ||
+ | <p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.</p> | ||
+ | </header> | ||
+ | <div class="box container small"> | ||
- | + | <!-- | |
+ | Contact Form | ||
+ | |||
+ | To get this working, place a script on your server to receive the form data, then | ||
+ | point the "action" attribute to it (eg. action="http://mydomain.tld/mail.php"). | ||
+ | More on how it all works here: http://www.1stwebdesigner.com/tutorials/custom-php-contact-forms/ | ||
+ | --> | ||
+ | <form method="post" action="#"> | ||
+ | <div class="row half"> | ||
+ | <div class="6u"><input type="text" name="name" placeholder="Name" /></div> | ||
+ | <div class="6u"><input type="text" name="email" placeholder="Email" /></div> | ||
+ | </div> | ||
+ | <div class="row half"> | ||
+ | <div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="12u"> | ||
+ | <ul class="actions"> | ||
+ | <li><input type="submit" class="button" value="Send Message" /></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </form> | ||
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | </ | + | </section> |
- | + | ||
- | < | + | <!-- Footer --> |
- | < | + | <footer id="footer"> |
- | + | ||
- | + | <!-- | |
- | + | Social Icons | |
- | + | ||
- | <ul class=" | + | Use anything from here: http://fortawesome.github.io/Font-Awesome/cheatsheet/) |
- | <li><a href="#" class="fa fa-twitter | + | --> |
- | <li><a href="#" class="fa fa-facebook | + | <ul class="actions"> |
- | <li><a href="#" class="fa fa-google-plus | + | <li><a href="#" class="fa solo fa-twitter"><span>Twitter</span></a></li> |
- | <li><a href="#" class="fa fa-dribbble | + | <li><a href="#" class="fa solo fa-facebook"><span>Facebook</span></a></li> |
- | <li><a href="#" class="fa fa-pinterest | + | <li><a href="#" class="fa solo fa-google-plus"><span>Google+</span></a></li> |
- | <li><a href="#" class="fa fa- | + | <li><a href="#" class="fa solo fa-dribbble"><span>Dribbble</span></a></li> |
+ | <li><a href="#" class="fa solo fa-pinterest"><span>Pinterest</span></a></li> | ||
+ | <li><a href="#" class="fa solo fa-instagram"><span>Instagram</span></a></li> | ||
</ul> | </ul> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <!-- Menu --> | |
+ | <ul class="menu"> | ||
+ | <li>© Untitled</li> | ||
+ | <li>Design: <a href="http://html5up.net/">HTML5 UP</a></li> | ||
+ | </ul> | ||
+ | |||
+ | </footer> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 04:57, 30 June 2014
Big Picture
What I Do
Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna urna.
Who I Am
Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna urna.
Say Hello.
Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.