Chris.isaac (Talk | contribs) |
|||
Line 1: | Line 1: | ||
− | {{Lethbridge_HS}} | + | {{Team:Lethbridge_HS/bootstrapcss}} |
+ | <html lang="en"> | ||
+ | <head> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Wiki Style Reset (From U of C)--> | ||
+ | <style type="text/css"> | ||
+ | /* Reset the wiki style by overriding with a reset stylesheet. | ||
+ | The relevant wiki css rules are reset by using rules with higher priority. | ||
+ | (Written by Florian Albrecht) | ||
+ | Shoutout to the 2016 U of C wiki */ | ||
− | + | /* Start general reset ================================================== */ | |
+ | html body {font-size: inherit;font-family: inherit;background-color: transparent;color: inherit;padding: 0;} | ||
+ | div#globalWrapper {font-size: inherit;margin: 0;padding: 0;position: static;width: auto;} | ||
+ | /* Start top-section reset ============================================== */ | ||
+ | div#top-section {border: 0;height: auto;margin: 0;position: static;width: auto;} | ||
+ | div#p-logo {height: auto;position: static;width: auto;z-index: auto;} | ||
+ | div#p-logo a, div#p-logo a:hover {text-decoration: none; font-family: 'Roboto', sans-serif;} | ||
+ | div#menubar {font-family: inherit;font-size: inherit;line-height: inherit;position: static;top: 0px;white-space: normal;width: auto;z-index: auto;} | ||
+ | div.left-menu, div.left-menu a {color: inherit;left: 0;text-align: left;text-transform: none;font-family: 'Roboto', sans-serif;} | ||
+ | div#menubar ul {color: inherit;list-style: disc outside none;margin: 0;padding: 0; font-family: 'Roboto', sans-serif;} | ||
+ | div#menubar li {cursor: auto;display: list-item;padding: 0;margin: 0;position: static; font-family: 'Roboto', sans-serif;} | ||
+ | div.left-menu li a {padding: 0; font-family: 'Roboto', sans-serif;} | ||
+ | div.left-menu:hover {color: inherit;background-color: transparent;} | ||
+ | div.left-menu:hover a {color: inherit;font-family: 'Roboto', sans-serif;} | ||
+ | div.right-menu, div.right-menu a {color: inherit;right: 0;text-align: left;font-family: 'Roboto', sans-serif;} | ||
+ | div.right-menu li a {background-color: transparent;color: inherit;padding: 0;font-family: 'Roboto', sans-serif;} | ||
+ | div.right-menu li a:hover {color: inherit;text-decoration: none;font-family: 'Roboto', sans-serif;} | ||
+ | div#search-controls {background-color: transparent;height: auto;position: static;right: 0;text-align: left;top: 0;width: auto;z-index: auto;} | ||
+ | /* Start content reset ================================================== */ | ||
+ | div#content {background: transparent;border: 0;color: inherit;line-height: inherit;margin: 0;padding: 0;position: static;width: auto;z-index: auto;} | ||
+ | body li {margin: 0; font-family: 'Roboto', sans-serif;} | ||
+ | body h1, body h2, body h3, body h4, body h5, body h6 {background: transparent;border: 0;color: inherit;padding: 0; font-family: 'Roboto', sans-serif;} | ||
+ | body .firstHeading {margin: 0;} | ||
+ | div#contentSub {color: inherit;font-size: inherit;line-height: inherit;margin: 0;width: auto;} | ||
+ | div#catlinks {background-color: transparent;border: 0;clear: both;margin: 0;padding: 0;} | ||
+ | /* Start footer reset =================================================== */ | ||
+ | div#footer-box {background-color: transparent;border: 0;margin: 0;padding: 0;width: auto;} | ||
+ | div#footer {color: inherit;font-size: inherit;text-align: left;} | ||
+ | div#f-poweredbyico, div#f-copyrightico {float: none;} | ||
+ | div#footer li {margin: 0;display: list-item; font-family: 'Roboto', sans-serif;} | ||
+ | </style> | ||
+ | <!-- SideMenu for iGEM Stuff --> | ||
+ | <style type="text/css"> | ||
+ | #sideMenu{width: 200px;position: absolute;top: 20px;left: 1020px;z-index: 10;padding-top: 0px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: white;text-align: left;display: none;z-index: 9996;} | ||
+ | #content{width: 100%;padding: 0px;margin-left: 0px;} | ||
+ | #top_title{overflow: hidden;display: none;} | ||
+ | #top_menu_14{height: 20px;} | ||
+ | #top_menu_under{height: 0px;} | ||
+ | #globalWrapper{padding-bottom: 200px;} | ||
+ | </style> | ||
+ | <!-- Custom Styling --> | ||
+ | <style> | ||
+ | a {list-style-image: none;} | ||
+ | ul {list-style-image: none;} | ||
+ | ol {list-style-image: none;} | ||
+ | li {list-style-image: none;} | ||
+ | </style> | ||
+ | <style> | ||
+ | body{ | ||
+ | background-color: white; | ||
+ | font-family: 'Open Sans', sans-serif; | ||
+ | } | ||
+ | .jumbotron { | ||
+ | background-color: white; | ||
+ | position: relative; | ||
+ | } | ||
+ | .slide{ | ||
+ | width:100%; | ||
+ | |||
+ | margin: 0; | ||
+ | |||
+ | } | ||
+ | #slide0{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/9/9c/T—lethbridgehs--IMG_4553_cover_and.png"); | ||
+ | background-size:cover; | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat; | ||
+ | height: 50vh; | ||
+ | overflow: hidden; | ||
+ | margin: 0; | ||
+ | padding-top: 5%; | ||
+ | background-color: #333333; | ||
+ | } | ||
+ | #firsttitle{ | ||
+ | vertical-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | text-align: left; | ||
+ | color: white; | ||
+ | vertical-align: center; | ||
+ | position:absolute; | ||
+ | bottom:0; | ||
+ | |||
+ | font-size: 8em; | ||
+ | } | ||
+ | #secondtitle{ | ||
+ | vertical-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | text-align: center; | ||
+ | color: white; | ||
+ | vertical-align: middle; | ||
+ | top: 25%; | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | .slidesecondlist{ | ||
+ | list-style-type: none; | ||
+ | margin-left: 15%; | ||
+ | } | ||
+ | .slidesecondlist ul{ | ||
+ | margin: 0; | ||
+ | padding: 20px; | ||
+ | background-color: none; | ||
+ | } | ||
+ | #slidesecond{ | ||
− | + | overflow: hidden; | |
+ | margin: 0; | ||
+ | padding-top: 0; | ||
+ | padding: 0; | ||
+ | background-color: #eee7dd; | ||
+ | } | ||
+ | #slide_project_0{ | ||
+ | background-image: url("images/funnyteamcover.png"); | ||
+ | background-size:cover; | ||
+ | background-position: center -10%; | ||
+ | background-repeat: no-repeat; | ||
+ | height: 90%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #slide_team_0{ | ||
+ | background-image: url("images/IMG_4553.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position: center -10%; | ||
+ | background-repeat: no-repeat; | ||
+ | height: 90%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #slide_hp_0{ | ||
+ | background-image: url("images/funnyteamcover.png"); | ||
+ | background-size:cover; | ||
+ | background-position: center -10%; | ||
+ | background-repeat: no-repeat; | ||
+ | height: 90%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #slide0title{ | ||
+ | color: white; | ||
+ | display: block; | ||
+ | margin: auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #blooddrop{ | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | margin: 0 auto; | ||
+ | z-index: 1; | ||
+ | -webkit-animation: fadeInOut 2s infinite; | ||
+ | -moz-animation: fadeInOut 2s infinite; | ||
+ | -o-animation: fadeInOut 2s infinite; | ||
+ | animation: fadeInOut 2s infinite; | ||
+ | } | ||
+ | #slide1{ | ||
+ | /*background-color:#eee7dd;*/ | ||
+ | background-color:white; | ||
+ | /* background-image: url("images/289680_1231091663_large.jpg"); | ||
+ | background | ||
+ | background-size:cover; | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat;*/ | ||
+ | color: black; | ||
+ | |||
+ | } | ||
+ | #slide1Sub{ | ||
+ | margin-left: 10%; | ||
+ | margin-right: 10%; | ||
+ | |||
+ | } | ||
+ | #slide2{ | ||
+ | /* background-image: url("images/anotherteamcover.png");*/ | ||
+ | background-color: green; | ||
+ | background-size: cover; | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | #slide6{ | ||
+ | |||
+ | } | ||
+ | #slide3{ | ||
+ | background-color: #cf4848; | ||
+ | height: 90%; | ||
+ | padding-top:2%; | ||
+ | }ding-top:1%; | ||
+ | #slide1title{ | ||
+ | color:red; | ||
+ | text-align: center; | ||
+ | font-size:60px; | ||
+ | margin-top:0%; | ||
+ | } | ||
+ | #slide12ndline{ | ||
+ | color:red; | ||
+ | text-align: center; | ||
+ | font-size:50px; | ||
+ | } | ||
+ | #slide1para{ | ||
+ | font-size: 1.1em; | ||
+ | color: black; | ||
+ | } | ||
+ | .logo{ | ||
+ | float:left; | ||
+ | margin-left:9%; | ||
+ | margin-top: 1%; | ||
+ | } | ||
+ | .navbar-header{ | ||
+ | margin-top:-20px; | ||
+ | } | ||
+ | .navbar-default{ | ||
+ | /** box-shadow: 0px 8px 6px -6px #999;**/ | ||
+ | |||
+ | } | ||
+ | .navbar-default .navbar-nav>li>a { | ||
+ | color: white; | ||
+ | font-size: 15px; | ||
+ | padding-top:2px; | ||
+ | padding-top:2px; | ||
+ | margin-top: 12px; | ||
+ | } | ||
+ | .navbar-collapse.collapse { | ||
+ | padding-bottom: 6px; | ||
+ | padding-top: 3px; | ||
+ | } | ||
+ | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { | ||
+ | color: white; | ||
+ | background-color: transparent; | ||
+ | } | ||
− | + | .removeNavBarColor{ | |
− | + | background-color: transparent; | |
− | + | ||
+ | } | ||
+ | .makeNavBarColor{ | ||
+ | /** background-color: #CC141C ;*/ | ||
+ | background-color: #dc4640 ; | ||
+ | |||
+ | |||
+ | } | ||
+ | .navbar-default .navbar-nav>li>a{ | ||
+ | padding-top: 30px; | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 0%; | ||
+ | padding-bottom: 15px; | ||
+ | color:white; | ||
+ | } | ||
+ | .navbar-collapse.collapse{ | ||
+ | padding-top: 0; | ||
+ | padding-bottom: 0; | ||
+ | } | ||
+ | @-webkit-keyframes fadeInOut{ | ||
+ | 0% { opacity: 0;} | ||
+ | 50% { opacity: 1; } | ||
+ | 100% { opacity:0;} | ||
+ | } | ||
+ | @-moz-keyframes fadeInOut{ | ||
+ | 0% { opacity: 0;} | ||
+ | 50% { opacity: 1; } | ||
+ | 100% { opacity:0;} | ||
+ | } | ||
+ | @-o-keyframes fadeInOut{ | ||
+ | 0% { opacity: 0;} | ||
+ | 50% { opacity: 1; } | ||
+ | 100% { opacity:0;} | ||
+ | } | ||
+ | @keyframes fadeInOut{ | ||
+ | 0% { opacity: 0;} | ||
+ | 50% { opacity: 1; } | ||
+ | 100% { opacity:0;} | ||
+ | } | ||
− | + | [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { | |
− | + | font-family: Flaticon; | |
− | + | font-size: 30px; | |
− | + | font-style: normal; | |
+ | margin-left: 0px; | ||
+ | color: white; | ||
+ | |||
+ | } | ||
− | |||
+ | .glyph { | ||
+ | display: inline-block; | ||
+ | width: 9em; | ||
+ | margin: 1em; | ||
+ | text-align: center; | ||
+ | vertical-align: top; | ||
+ | background: #FFF; | ||
+ | float: left; | ||
+ | } | ||
+ | .glyph .glyph-icon { | ||
+ | display:inline-block; | ||
+ | float: left; | ||
+ | |||
+ | font-family:"Flaticon"; | ||
+ | font-size: 64px; | ||
+ | } | ||
+ | .glyph .glyph-icon:before { | ||
+ | font-size: 64px; | ||
+ | color: white; | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | .menuIcon{ | ||
+ | |||
+ | } | ||
+ | .active{ | ||
+ | background-color: red; | ||
+ | color: white !important; | ||
+ | } | ||
+ | [class^="active"]:before, [class*="active"]:before, [class^="active"]:after, [class*="active"]:after { | ||
+ | color: white; | ||
+ | } | ||
+ | .menuIcon:before, | ||
+ | .menuIcon:after { | ||
+ | font-size: 20px; | ||
+ | |||
+ | } | ||
+ | .menuIcon2:after { | ||
+ | |||
+ | font-size: 40px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .coverCircle{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | .sidebar{ | ||
+ | list-style-type: none; | ||
+ | list-style-position: inside; | ||
+ | color: #cc141c; | ||
+ | font-size: 1em; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | .sidebar li{ | ||
+ | list-style-position: inside; | ||
+ | padding-top: 20px; | ||
+ | color: #cc141c; | ||
+ | font-size: 2em; | ||
+ | |||
+ | |||
+ | } | ||
+ | a:visited { | ||
+ | color: #cc141c; | ||
+ | |||
+ | } | ||
+ | |||
+ | .fixSideBar{ | ||
+ | position: fixed; | ||
+ | top: 8%; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | .removeFixSideBar{ | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | .outerBar{ | ||
+ | position: relative; | ||
+ | word-wrap:break-word; | ||
+ | } | ||
+ | .fixNoteBookSideBar{ | ||
+ | position: fixed; | ||
+ | top: 8%; | ||
+ | right: 0; | ||
+ | |||
+ | } | ||
+ | .removeFixNoteBookSideBar{ | ||
+ | |||
+ | } | ||
+ | .profilePicBox{ | ||
+ | width: 100%; | ||
+ | |||
+ | |||
+ | background-color: red; | ||
+ | margin-top: 10px; | ||
+ | padding: 0; | ||
+ | |||
+ | } | ||
+ | .profilePicBox img{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | |||
+ | } | ||
+ | .profileInfoBox{ | ||
+ | display: none; | ||
+ | background-color: white; | ||
+ | position: absolute; | ||
+ | z-index: 1000; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding-right: 2em; | ||
+ | } | ||
+ | .showInfoBox{ | ||
+ | display: block; | ||
+ | } | ||
+ | .makeGray{ | ||
+ | -webkit-filter: grayscale(100%); | ||
+ | filter: grayscale(100%); | ||
+ | } | ||
+ | .noteBookMonthLabels{ | ||
+ | margin: left:3%; | ||
+ | } | ||
+ | #datelist{ | ||
+ | display: none; | ||
+ | } | ||
+ | #dateList li{ | ||
+ | list-style-type: none; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | .notebookSidebar{ | ||
+ | width: inherit; | ||
+ | } | ||
+ | .notebookSideBar h1{ | ||
+ | padding-top:5px; | ||
+ | padding-bottom: 5px; | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | .notebookIcon { | ||
+ | font-size: 0px; | ||
+ | cursor: pointer; | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | color: #fff; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .notebookIcon:before { | ||
+ | font-family: 'Flaticon'; | ||
+ | speak: none; | ||
+ | font-size: 35px; | ||
+ | line-height: 35xp; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | font-variant: normal; | ||
+ | text-transform: none; | ||
+ | color: white; | ||
+ | display: block; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | text-align:center; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | vertical-align: center; | ||
+ | position: relative; | ||
+ | top:5%; | ||
+ | transform: translateY(-5%); | ||
+ | } | ||
+ | /*****************************************Time line*********************************/ | ||
+ | .timeline{ | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .timeline li{ | ||
+ | position: relative; | ||
+ | } | ||
+ | .tl_month{ | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | background-color: #ee4d4d; | ||
+ | margin-bottom: 15px; | ||
+ | vertical-align: center; | ||
+ | padding-top: 0.75%; | ||
+ | padding-left: auto; | ||
+ | padding-right: auto; | ||
+ | color:white; | ||
+ | } | ||
+ | .tl_month h2{ | ||
+ | float:inherit; | ||
+ | margin-top: auto; | ||
+ | margin-bottom: auto; | ||
+ | color: white; | ||
+ | } | ||
+ | .tl_time { | ||
+ | display: block; | ||
+ | width: 25%; | ||
+ | margin-top:2%; | ||
+ | padding-right: 100px; | ||
+ | position: absolute; | ||
+ | font-size:20; | ||
+ | color:#ee4d4d; | ||
+ | } | ||
+ | /**************************How to make font size on notebook responsive*******/ | ||
+ | .tl_label{ | ||
+ | margin-bottom: 15px; | ||
+ | margin-left: 25%; | ||
+ | color: black; | ||
+ | border: 3px solid #ee4d4d; | ||
+ | position: relative; | ||
+ | border-radius: 5px; | ||
+ | background: white; | ||
+ | padding-left: 2%; | ||
+ | padding-right: 2%; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .tl_label h2{ | ||
+ | margin-bottom: 15px; | ||
+ | font-size: 1.3em; | ||
+ | } | ||
+ | .tl_label:before{ | ||
+ | right: 100%; | ||
+ | border: solid transparent; | ||
+ | content: ''; | ||
+ | height: 0; | ||
+ | width: 0; | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | border-right-color: #ee4d4d; | ||
+ | border-width: 1vw; | ||
+ | /*top: 1vw;*/ | ||
+ | } | ||
+ | .dateContent{ | ||
+ | display: none; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .tl_icon{ | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | position: absolute; | ||
+ | background: #ee4d4d; | ||
+ | margin-top:1%; | ||
+ | border-radius: 50%; | ||
+ | box-shadow: 0 0 0 8px #ee4d4d; | ||
+ | top:0; | ||
+ | |||
+ | position: relative; | ||
+ | float: left; | ||
+ | left: auto; | ||
+ | left: 20%; | ||
+ | margin-left: -25px; | ||
+ | } | ||
+ | .tl_icon img{ | ||
+ | margin-top:4px; | ||
+ | margin-left: 2px; | ||
+ | } | ||
+ | .caption{ | ||
+ | text-align:center; | ||
+ | } | ||
+ | .topOfTimeLineEntry{ | ||
+ | |||
+ | } | ||
+ | .dropdown:hover .dropdown-menu { | ||
+ | display: block; | ||
+ | } | ||
+ | /*******************************************************************/ | ||
+ | .an-slide-title{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | .an-slide-img{ | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | .animatedSlide{ | ||
+ | background-color: transparent; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .carousel-indicators{ | ||
+ | bottom: -8%; | ||
+ | padding-bottom: 0; | ||
+ | margin-bottom: | ||
+ | |||
+ | } | ||
+ | .sidebar{ | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | #homepageslide5{ | ||
+ | background-color: #343838 ; | ||
+ | height: 30%; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { | ||
+ | color: white; | ||
+ | } | ||
+ | .containerForExploreTeam{ | ||
+ | height: 100%; | ||
+ | } | ||
+ | .exploreteam{ | ||
+ | display: inline-block; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | color: white; | ||
+ | vertical-align: middle; | ||
+ | position: relative; | ||
+ | top: 25%; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | #homepageslide6{ | ||
+ | background-color: black; | ||
+ | } | ||
+ | #credits{ | ||
+ | color: white; | ||
+ | } | ||
+ | .button{ | ||
+ | float: left; | ||
+ | display: inline-block; | ||
+ | border-radius: 30px; | ||
+ | background-color: #ee4d4d; | ||
+ | padding: 1.5% 2%; | ||
+ | color: white; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | .constantSidebar{ | ||
+ | background-color: red; | ||
+ | position: fixed; | ||
+ | |||
+ | } | ||
+ | .jumbotron { | ||
+ | padding: 0; | ||
+ | } | ||
+ | .menuitem{ | ||
+ | width: 100%; | ||
+ | padding-right: 20px; | ||
+ | padding-top: 8px; | ||
+ | } | ||
+ | .menuitem p{ | ||
+ | float: right; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .subHeaderContainer{ | ||
+ | width: 100%; | ||
+ | background-color: red; | ||
+ | } | ||
+ | .doublepic1 h1{ | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | color: white; | ||
+ | vertical-align: middle; | ||
+ | font-size: 3em; | ||
+ | top: 25%; | ||
+ | } | ||
+ | .doublepic2 h1{ | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | color: white; | ||
+ | font-size: 3em; | ||
+ | vertical-align: middle; | ||
+ | top: 25%; | ||
+ | } | ||
+ | .doublepic1{ | ||
+ | float: left; | ||
+ | height: 50%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 50%; | ||
+ | background-image: url("images/Learning-More-About-The-Latest-Science-Research-1.jpg"); | ||
+ | background-size:cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .doublepic2{ | ||
+ | float: left; | ||
+ | height: 50%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 50%; | ||
+ | background-image: url("images/LethHS_Group_Photo1.jpg"); | ||
+ | background-size:cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .sidebarright{ | ||
+ | float:left; | ||
+ | width:20%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .contentleft{ | ||
+ | float:left; | ||
+ | width:80%; | ||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- Import Google Icon Font --> | ||
+ | <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
+ | <!-- Roboto Font --> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
+ | <!--Import materialize.css--> | ||
+ | <!--Let browser know website is optimized for mobile--> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
+ | <!-- Page Title --> | ||
+ | <title>Lethbridge HS iGEM 2016</title> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | |||
+ | <!--<link rel="stylesheet" href="https://2016.igem.org/Team:Lethbridge_HS/bootstrapcss?action=raw&ctype=text/css"> | ||
+ | <link rel="stylesheet" href="https://2016.igem.org/Team:Lethbridge_HS/maincss?action=raw&ctype=text/css"> --> | ||
+ | <link rel="stylesheet" href="flaticon.css"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | ||
+ | <script src="https://2016.igem.org/Team:Lethbridge_HS/bootstrapmin?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2016.igem.org/Team:Lethbridge_HS/localscrollmin?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | <script src="https://2016.igem.org/Team:Lethbridge_HS/scrolltomin?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | |||
+ | |||
+ | |||
+ | <link rel="stylesheet" href="animations.css"> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $('#blooddrop').addClass('delay-2000 animated pulse'); | ||
+ | var s = $(".menu"); | ||
+ | s.addClass("removeNavBarColor"); | ||
+ | $(window).scroll(function(){ | ||
+ | var windowPos = $(window).scrollTop(); | ||
+ | |||
+ | if (windowPos >= 50){ | ||
+ | s.addClass("makeNavBarColor"); | ||
+ | s.removeClass("removeNavBarColor"); | ||
+ | |||
+ | } | ||
+ | else{ | ||
+ | s.addClass("removeNavBarColor"); | ||
+ | s.removeClass("makeNavBarColor"); | ||
+ | } | ||
+ | }) | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | </script> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <nav class="navbar navbar-default navbar-fixed-top menu" style="border:none;"> | ||
+ | <div class="container-fluid" style="padding-left:10%; padding-right:10%;"> | ||
+ | <div class="navbar-header"> | ||
+ | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" aria-expanded="false"> | ||
+ | <span class="sr-only">Toggle navgiation</span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand" href="https://2016.igem.org/Team:Lethbridge_HS" style="color:#CC141C; margin-top:20%;"><img src="https://static.igem.org/mediawiki/2016/5/50/T—lethbridgehs--whitelogo_and.png" width="70"></a> | ||
+ | </div> | ||
+ | |||
+ | <div class="collapse navbar-collapse" id="navbar1"> | ||
+ | <ul class="nav navbar-nav navbar-right" > | ||
+ | |||
+ | |||
+ | <li class= "dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PROJECT<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Description">DESCRIPTION</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Design">DESIGN</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Proof">PROOF OF CONCEPT</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Experiments">EXPERIMENTS</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Results">RESULTS</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class= "dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PARTS<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Basic_Part">BASIC PARTS</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Composite_Part">COMPOSITE PARTS</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | <li class= "dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle = "dropdown">HUMAN PRACTICES<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Human_Practices">HUMAN PRACTICES</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/HP/Silver">SILVER</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/HP/Gold">GOLD</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Integrated_Practices">INTEGRATED HUMAN PRACTICES</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Engagement">ENGAGEMENT</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li><a href="https://2016.igem.org/Team:Lethbridge_HS/Notebook" style="" class="menuitem" style="margin:0; padding:0;">NOTEBOOK</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Lethbridge_HS/Safety" style="" class="menuitem" style="margin:0; padding:0; ">SAFETY</a></li> | ||
+ | |||
+ | <li class= "dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle = "dropdown">TEAM<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">STUDENTS</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">ADVISORS</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">SPONSORS</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Attributions">ATTRIBUTIONS</a> | ||
+ | <a href="https://2016.igem.org/Team:Lethbridge_HS/Collaborations">COLLABORATIONS</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://igem.org/Main_Page" style="" class="menuitem" style="margin:0; padding:0 ">IGEM</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | |||
+ | <div class="jumbotron slide" id="slide0" style=""> | ||
+ | <div class="container-fluid" style="margin-left:10%;"> | ||
+ | <h1 id="firsttitle" style=""> <b>PROOF OF CONCEPT</b></h1> | ||
+ | <!--<div style="position:relative;"> | ||
+ | <video width="100%" autoplay muted loop style="float:left; position:absolute; z-index:5;"> | ||
+ | <source src="Product%20Demonstration%20Video%20for%20Lumify%20USB%20Solar%20Fairy%20Lights.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | </div>--> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="container-fluid" style="margin-left:10%; margin-right:10%;"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-2"> | ||
+ | <ul class="sidebar"> | ||
+ | <li><a href="#first">First title</a></li> | ||
+ | <li><a href="#first">First title</a></li> | ||
+ | <li><a href="#first">First title</a></li> | ||
+ | <li><a href="#first">First title</a></li> | ||
+ | <li><a href="#first">First title</a></li> | ||
+ | </ul> | ||
</div> | </div> | ||
+ | <div class="col-md-10"> | ||
+ | <h3>Market Research</h3> | ||
+ | <a name="first"></a> | ||
+ | <p>In order to understand what types of products are available or that are in the testing phase, our team did some research to look at how we could design our product to improve upon the issues in the products we found.</p> | ||
+ | <p>The above table shows a comparison between Coagu.coli and blood coagulants that are currently in the market. As you can see, most of these products are not available to be used yet, and are not affordable. Looking at each coagulant more specifically though, we can recognize the faults present in each:</p> | ||
+ | <p>QuikClot: According to the official QuikClot website, this coagulant intercepts in the natural blood clotting cascade at the very beginning. It uses a substance known as kaolin, which starts the clotting process with the activation of factor XII. Since this factor is located at the start of the clotting cascade, this product will not be as “quick” as the name suggests (Z-Medica, 2014). QuikClot has also been known to be troublesome to remove from a wound after application as the material can become too hard if it is left too long in the wound. Bleeding can also resume after removal (NurseAmyandDrBones, 2015).</p> | ||
+ | <p>VetiGel:This coagulant seems to be the best out of all the others. It is fast and affordable. The only problem is that it is not yet ready to be revealed in the market for human use, and has only been focused on being used in veterinarian clinics on animals (Weller, 2014).</p> | ||
+ | <p>Tisseel: Although this factor has not been included in the table, Tisseel is known to be made from substances made of human plasma, which “can contain infectious agents”(Center & Evaluation, 2014) and transmit diseases. Looking into the other faults that this coagulant contains, Tisseel is not available to be used in a home setting by an individual. Instead, it is supposed to be applied by a healthcare professional in a medical setting (Drugs, n.d.). And since Tisseel is a fibrin sealant, it is found to be more expensive than other types of coagulants (2009). </p> | ||
+ | <p>Duraseal and Floseal: These are both surgical compounds and would not be beneficial to an individual for use on a normal wound. (Corporation, 2016; pdriscoll, 2015).</p> | ||
+ | <p>Xyntha: This coagulant is only useful to people with a deficiency of factor VIII (classic hemophilia), and isn’t useful to other types of hemophilia or Von Willebrand's disease (Pfizer Inc, 2016). </p> | ||
+ | <p>Overall, the table shows just why our product Coagu.coli is the perfect coagulant. </p> | ||
+ | <h3>References</h3> | ||
+ | <a name="second"></a> | ||
+ | <p>Center, & Evaluation, B. (2014, December 31). Product information. Retrieved October 16, 2016, from http://www.fda.gov/BiologicsBloodVaccines/BloodBloodProducts/ApprovedProducts/LicensedProductsBLAs/FractionatedPlasmaProducts/ucm089262.htm</p> | ||
+ | <p>Corporation, B. H. (2016). FLOSEAL Hemostatic matrix. Retrieved October 16, 2016, from http://www.floseal.com/us/</p> | ||
+ | <p>Drugs. Tisseel medical facts from drugs.Com. Retrieved October 16, 2016, from https://www.drugs.com/mtm/tisseel.html </p> | ||
+ | <p>hemostatguy@gmail.com. (2009, June 14). Medical Hemostat. Retrieved October 16, 2016, from http://medicalhemostat.blogspot.ca/2009/06/hemostasis-market-review-of-gelfoam.html</p> | ||
+ | <p>NurseAmyandDrBones. (2015, September 25). Celox and Quikclot to control bleeding. Retrieved October 16, 2016, from active shooter, https://www.doomandbloom.net/celox-and-quikclot-to-control-bleeding/</p> | ||
+ | <p>Pfizer, Inc. (2016, February ). Home. Retrieved October 16, 2016, from http://www.xyntha.com/</p> | ||
+ | <p>pdriscoll. (2015, May 4). Synthetic surgical sealants | | advanced medical technologies. Retrieved October 16, 2016, from http://blog.mediligence.com/2015/05/04/synthetic-surgical-sealants/</p> | ||
+ | <p>Weller, C. (2014, November 20). Tomorrow’s band-aid stops bleeding instantly [VIDEO]. Innovation. Retrieved from http://www.medicaldaily.com/pulse/vetigel-stops-bleeding-seconds-polymer-could-be-band-aid-future-311514</p> | ||
+ | <p>Z-Medica. (2014). QuikClot® - stop bleeding fast. Retrieved October 16, 2016, from http://www.quikclot.com/</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | </body> | ||
</html> | </html> |
Revision as of 22:32, 17 October 2016
Market Research
In order to understand what types of products are available or that are in the testing phase, our team did some research to look at how we could design our product to improve upon the issues in the products we found.
The above table shows a comparison between Coagu.coli and blood coagulants that are currently in the market. As you can see, most of these products are not available to be used yet, and are not affordable. Looking at each coagulant more specifically though, we can recognize the faults present in each:
QuikClot: According to the official QuikClot website, this coagulant intercepts in the natural blood clotting cascade at the very beginning. It uses a substance known as kaolin, which starts the clotting process with the activation of factor XII. Since this factor is located at the start of the clotting cascade, this product will not be as “quick” as the name suggests (Z-Medica, 2014). QuikClot has also been known to be troublesome to remove from a wound after application as the material can become too hard if it is left too long in the wound. Bleeding can also resume after removal (NurseAmyandDrBones, 2015).
VetiGel:This coagulant seems to be the best out of all the others. It is fast and affordable. The only problem is that it is not yet ready to be revealed in the market for human use, and has only been focused on being used in veterinarian clinics on animals (Weller, 2014).
Tisseel: Although this factor has not been included in the table, Tisseel is known to be made from substances made of human plasma, which “can contain infectious agents”(Center & Evaluation, 2014) and transmit diseases. Looking into the other faults that this coagulant contains, Tisseel is not available to be used in a home setting by an individual. Instead, it is supposed to be applied by a healthcare professional in a medical setting (Drugs, n.d.). And since Tisseel is a fibrin sealant, it is found to be more expensive than other types of coagulants (2009).
Duraseal and Floseal: These are both surgical compounds and would not be beneficial to an individual for use on a normal wound. (Corporation, 2016; pdriscoll, 2015).
Xyntha: This coagulant is only useful to people with a deficiency of factor VIII (classic hemophilia), and isn’t useful to other types of hemophilia or Von Willebrand's disease (Pfizer Inc, 2016).
Overall, the table shows just why our product Coagu.coli is the perfect coagulant.
References
Center, & Evaluation, B. (2014, December 31). Product information. Retrieved October 16, 2016, from http://www.fda.gov/BiologicsBloodVaccines/BloodBloodProducts/ApprovedProducts/LicensedProductsBLAs/FractionatedPlasmaProducts/ucm089262.htm
Corporation, B. H. (2016). FLOSEAL Hemostatic matrix. Retrieved October 16, 2016, from http://www.floseal.com/us/
Drugs. Tisseel medical facts from drugs.Com. Retrieved October 16, 2016, from https://www.drugs.com/mtm/tisseel.html
hemostatguy@gmail.com. (2009, June 14). Medical Hemostat. Retrieved October 16, 2016, from http://medicalhemostat.blogspot.ca/2009/06/hemostasis-market-review-of-gelfoam.html
NurseAmyandDrBones. (2015, September 25). Celox and Quikclot to control bleeding. Retrieved October 16, 2016, from active shooter, https://www.doomandbloom.net/celox-and-quikclot-to-control-bleeding/
Pfizer, Inc. (2016, February ). Home. Retrieved October 16, 2016, from http://www.xyntha.com/
pdriscoll. (2015, May 4). Synthetic surgical sealants | | advanced medical technologies. Retrieved October 16, 2016, from http://blog.mediligence.com/2015/05/04/synthetic-surgical-sealants/
Weller, C. (2014, November 20). Tomorrow’s band-aid stops bleeding instantly [VIDEO]. Innovation. Retrieved from http://www.medicaldaily.com/pulse/vetigel-stops-bleeding-seconds-polymer-could-be-band-aid-future-311514
Z-Medica. (2014). QuikClot® - stop bleeding fast. Retrieved October 16, 2016, from http://www.quikclot.com/