Team:ITESM-Guadalajara/Marketing
From 2014.igem.org
(Difference between revisions)
(15 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{CSS/Main}} | {{CSS/Main}} | ||
+ | |||
+ | |||
+ | <html> | ||
+ | |||
+ | <head> | ||
+ | |||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
+ | <meta name="description" content="Team ITESM - Guadalajara Wiki for the iGEM competition of 2014"> | ||
+ | <meta name="keywords" content="iGEM, Chitosan, 2014, ITESM Guadalajara, Wiki"> | ||
+ | <meta name="author" content="Irving Fernando Alvarez Vazquez"> | ||
+ | <meta name="title" content="Team ITESM - Guadalajara Wiki"> | ||
+ | |||
+ | <!-- External scripts --> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' | ||
+ | rel='stylesheet' type='text/css'> | ||
+ | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | ||
+ | |||
+ | <!-- Functionallity and behaviour JS --> | ||
+ | <script> | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | |||
+ | //Loading screen functionallity | ||
+ | $('.loading').animate( | ||
+ | {opacity:0}, | ||
+ | 500, | ||
+ | function(){ | ||
+ | $('.loading').attr("style", "display:none"); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | //Height responsiveness | ||
+ | $(window).resize(function() { | ||
+ | wheight = $(window).height(); | ||
+ | $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;"); | ||
+ | $('.team-member-container').attr("style","height:"+wheight/2.7+"px;"); | ||
+ | }); | ||
+ | |||
+ | $(window).trigger('resize'); | ||
+ | |||
+ | //Menu moveto container on item click functionallity | ||
+ | $('.menu-item').on('click', function(){ | ||
+ | $('.menu-item').removeClass('subselected'); | ||
+ | $(this).addClass('subselected'); | ||
+ | if($(this).attr("data")=="#top"){ | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: 0 | ||
+ | }, 1000); | ||
+ | }else{ | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $($(this).attr("data")).offset().top-70 | ||
+ | }, 1000); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | //Hover of team members | ||
+ | $('.team-member-container').on('mouseenter', function(){ | ||
+ | $(this).children('.team-member-photo').attr("style", "background-image:url('"+$(this).attr("hover")+"');"); | ||
+ | $(this).on('mouseleave', function(){ | ||
+ | $(this).children('.team-member-photo').attr('style', "background-image:url('"+$(this).attr("data")+"');"); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <style> | ||
+ | body, | ||
+ | html{ | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | font-family: font-family: 'Yanone Kaffeesatz', sans-serif; | ||
+ | } | ||
+ | |||
+ | /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */ | ||
+ | .firstHeading{ | ||
+ | display:none; | ||
+ | } | ||
+ | #top-section{ | ||
+ | background:#48af5d; | ||
+ | margin-left:0 !important; | ||
+ | width:100%; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* LOADING SCREEN */ | ||
+ | .loading{ | ||
+ | position:fixed; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | |||
+ | z-index:5; | ||
+ | |||
+ | background-color:#555; | ||
+ | color:#fff; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .loading p{ | ||
+ | position: relative; | ||
+ | width:100%; | ||
+ | height:10%; | ||
+ | top:45%; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | /* MENU STYLING */ | ||
+ | .menu{ | ||
+ | position:fixed; | ||
+ | width:100%; | ||
+ | height:56px; | ||
+ | top:14px; | ||
+ | background-color: #47a3da; | ||
+ | |||
+ | z-index:4; | ||
+ | |||
+ | border-collapse: collapse; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .menu tr td{ | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | |||
+ | font-weight: 700; | ||
+ | font-size:16px; | ||
+ | color:#fff; | ||
+ | width:7%; | ||
+ | } | ||
+ | .menu tr td.menu-item:hover{ | ||
+ | background-color:#258ecd; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .subselected{ | ||
+ | background-color: #258ecd; | ||
+ | } | ||
+ | |||
+ | /* CONTAINERS STYLING */ | ||
+ | .container{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | top:50px; | ||
+ | } | ||
+ | .container .subcontainer{ | ||
+ | position:absolute; | ||
+ | width:95%; | ||
+ | height:90%; | ||
+ | top:5%; | ||
+ | left:2.5%; | ||
+ | } | ||
+ | #top{ | ||
+ | background-size: cover; | ||
+ | background-image: url("http://i1191.photobucket.com/albums/z475/alex0892/Guadalajara%20Minerva/171120111899.jpg"); | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | /* TEAM MEMBERS CARDS STYLING */ | ||
+ | .team-member-container{ | ||
+ | position:relative; | ||
+ | width:14%; | ||
+ | margin-left:2.28%; | ||
+ | |||
+ | float:left; | ||
+ | } | ||
+ | .team-member-container:hover{ | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .row2{ | ||
+ | top:4%; | ||
+ | } | ||
+ | .team-member-container .team-member-photo{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | height:85%; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | .team-member-container .team-member-footer{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | height:15%; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | |||
+ | border:none; | ||
+ | border-collapse: collapse; | ||
+ | background-color: #47a3da; | ||
+ | color:#fff; | ||
+ | |||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | padding-top: 110px; | ||
+ | line-height: 1.8em; | ||
+ | } | ||
+ | |||
+ | .center-block { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navbar-fixed-top { | ||
+ | background: #fff; | ||
+ | filter: none !important; | ||
+ | box-shadow: 0 2px 15px rgba(0,0,0,0.25); | ||
+ | -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25); | ||
+ | -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25); | ||
+ | border-bottom: 1px solid rgba(0,0,0,0.2); | ||
+ | |||
+ | } | ||
+ | |||
+ | .faceBot{ | ||
+ | background: #202020; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Open Sans', Arial;; | ||
+ | } | ||
+ | |||
+ | body | ||
+ | { | ||
+ | font-family: 'Open Sans', Arial; | ||
+ | } | ||
+ | ul.nav a{ | ||
+ | color: gray; | ||
+ | background-color: transparent; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | li.menu-item{ | ||
+ | background: transparent !important; | ||
+ | } | ||
+ | |||
+ | ul.nav a:hover { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color: #008000; | ||
+ | padding-top: 0.5em; | ||
+ | padding-bottom: 1.5em; | ||
+ | border-bottom: 1px solid #AAA; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .menu-item{ | ||
+ | height: 75px; | ||
+ | } | ||
+ | |||
+ | .green-effect{ | ||
+ | display: none; | ||
+ | background-color: #4AAF51; | ||
+ | opacity: 1; | ||
+ | color: #FFF; | ||
+ | transition-property: all; | ||
+ | transition-duration: 0.3s; | ||
+ | transition-timing-function: ease-out; | ||
+ | transition-delay: 0s; | ||
+ | border-color: #288D30; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | width: 100%; | ||
+ | height: 2px; | ||
+ | right: 0px; | ||
+ | } | ||
+ | |||
+ | a:hover .green-effect{ | ||
+ | display: inherit; | ||
+ | } | ||
+ | |||
+ | li.tab a{ | ||
+ | height: inherit; | ||
+ | } | ||
+ | hr{ | ||
+ | margin-top: 60px; | ||
+ | margin-bottom: 60px; | ||
+ | } | ||
+ | |||
+ | li.left_menu_item a{ | ||
+ | height: inherit; | ||
+ | padding: 6px 7px 7px 0px; | ||
+ | } | ||
+ | |||
+ | li.left_menu_item a:hover{ | ||
+ | color:#4AAF51; | ||
+ | } | ||
+ | |||
+ | li.left_menu_item_selected a{ | ||
+ | height: inherit; | ||
+ | padding: 6px 7px 7px 0px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | li.left_menu_item_selected{ | ||
+ | width: 100%; | ||
+ | border-radius: 0px; | ||
+ | border-top: 1px solid #D3CDCD; | ||
+ | border-bottom: 1px solid #D3CDCD; | ||
+ | } | ||
+ | |||
+ | .margeniz{ | ||
+ | border-left: 1px solid #D3CDCD; | ||
+ | padding-left: 50px; | ||
+ | } | ||
+ | .invertir:hover { | ||
+ | -webkit-filter: invert(100%); | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
<div class="navbar navbar-fixed-top" style="margin-top:10px"> | <div class="navbar navbar-fixed-top" style="margin-top:10px"> | ||
<nav class="navbar-inner"> | <nav class="navbar-inner"> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-md-2"></div> | <div class="col-md-2"></div> | ||
- | + | <div class="col-md-3"><a href="https://2014.igem.org/Team:ITESM-Guadalajara"><img class="inicioLogo" src="https://static.igem.org/mediawiki/2014/5/55/BioPhrameIgem_logo.png" height="100" width="auto" ></a></div> | |
<div class="col-md-1"></div> | <div class="col-md-1"></div> | ||
<div class="col-md-6" > | <div class="col-md-6" > | ||
Line 38: | Line 367: | ||
<span class="green-effect"></span> | <span class="green-effect"></span> | ||
</a> | </a> | ||
- | </li> | + | </li><li class="menu-item"> |
+ | <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Notebook"> | ||
+ | <span>Notebook</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li><li> | ||
+ | <a href="http://www.facebook.com/biophrame"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/3/30/BIOPHRAMEGDLFacebookF.png" height="20" width="auto" class="invertir img-rounded"> | ||
+ | </a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
Line 45: | Line 382: | ||
<div class="main-content"> | <div class="main-content"> | ||
<div class="col-md-2 col-md-offset-2 left_menu"> | <div class="col-md-2 col-md-offset-2 left_menu"> | ||
- | <ul class="nav nav-pills nav-stacked"> | + | <ul class="nav nav-pills nav-stacked text-right"> |
<li class="left_menu_item"><a href="https://2014.igem.org/Team:ITESM-Guadalajara/Company">The Company</a></li> | <li class="left_menu_item"><a href="https://2014.igem.org/Team:ITESM-Guadalajara/Company">The Company</a></li> | ||
<li class="left_menu_item"><a href="https://2014.igem.org/Team:ITESM-Guadalajara/Product">Our Product</a></li> | <li class="left_menu_item"><a href="https://2014.igem.org/Team:ITESM-Guadalajara/Product">Our Product</a></li> | ||
Line 63: | Line 400: | ||
<h2>MARKETING</h2> | <h2>MARKETING</h2> | ||
<h4>Sales Plan</h4> | <h4>Sales Plan</h4> | ||
- | <p>Biophrame’s products will be offered online through an online store supported by Shopify. Investment for this online store will be | + | <p align="justify">Biophrame’s products will be offered online through an online store supported by Shopify. Investment for this online store will be $308 USD. Our products are going to be displayed in our online catalog where customers can view and order our products. Customers can get the products shipped for an additional cost or can pick them up from our headquarters. |
- | + | ||
- | + | ||
</p> | </p> | ||
+ | |||
+ | <center><img src="https://static.igem.org/mediawiki/2014/5/5b/BIOPHRAMEGDLBioCommerceIrvi.png"></center> | ||
+ | <p align="justify"> | ||
+ | We will also aim to increase our customer awareness trhough scientific catalogs and journals, trusting mouth-to-mouth promotion of out product. | ||
+ | </p><center><img src="https://static.igem.org/mediawiki/2014/b/ba/BIOPHRAMEGDLBioPromotionIrvi.png"></center> | ||
<hr/> | <hr/> | ||
<h4>Brand and Pricing Strategy</h4> | <h4>Brand and Pricing Strategy</h4> | ||
- | <p> | + | <p align="justify"> |
- | Biophrame’s flagship product is BioK, which is going to be sold in two presentations: medium-low purity and high purity Chitosan | + | Biophrame’s flagship product is BioK, which is going to be sold in two presentations: medium-low purity and high purity Chitosan. |
- | </p><p> | + | </p><center><img src="https://static.igem.org/mediawiki/2014/5/5b/BIOPHRAMEGDLBioMolecularIrvi.PNG"></center><p align="justify"> |
- | Our pricing strategy consists in introducing the product at lower prices. BioK medium purity will be sold at $ | + | Our pricing strategy consists in introducing the product at lower prices. BioK medium purity will be sold at $115 USD per bottle of 100 g. On the other hand, BioK high purity will be sold at $23 USD for bag of 1 g. |
- | </p><p> | + | </p><p align="justify"> |
- | Chitosan market prices for medium purity Chitosan is on average $15 | + | Chitosan market prices for medium purity Chitosan is on average $1.15 USD per gram and $23 USD per gram for high purity Chitosan, which places our prices lower than the market average. We expect to increase the price once we increase the customer awareness and our market share. During our go-to-market period, our market share for medium purity Chitosan will be of 2.17% for phase 1 and 4.71% phase 2.</p> |
<hr/> | <hr/> | ||
+ | </div> | ||
+ | <div class="col-md-12 faceBot"></br> | ||
+ | <div class="col-md-2 col-md-offset-3"><img src="https://static.igem.org/mediawiki/2014/e/ef/Biophrame_logo_footer_500x150.png" class="img-responsive"><small style="color:white">Biophrame Technologies is a biotech company and manufacturer specialized in the production of Chitosan.</small></div> | ||
+ | <div class="col-md-2"> | ||
+ | <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbiophrame&width&height=258&colorscheme=dark&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowTransparency="true"></iframe></div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 01:48, 18 October 2014