Difference between revisions of "Template:Montpellier/Footer"

 
(73 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 +
 +
    <head>
 +
        <meta charset="utf-8" />
 +
 +
<!--FOOTER_STYLE------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 
<style>
 
<style>
  
footer
+
.asso {
 +
  width: 100px;
 +
}
 +
 
 +
.sponsor_icons {
 +
  height: 35px;
 +
}
 +
 
 +
.sponsors {
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  flex-direction: column;
 +
  text-align: center;
 +
}
 +
 
 +
footer {
 +
  margin-top: 100px;
 +
}
 +
 
 +
.p_footer
 
{
 
{
border-top: solid 2px black;
+
    text-align: center !important;
padding-top: 30px;
+
    margin: none !important;
 +
    padding: none !important;
 +
}
 +
 
 +
.footer_sponsors
 +
{
 +
    border-top: solid 1px black;
 +
    margin-top: 10px; 
 +
    padding-top: 20px;
 +
    display: flex;
 +
    justify-content: column;
 +
    align-items: stretch;
 +
    text-align: center;
 
}
 
}
  
Line 16: Line 55:
 
}
 
}
  
.image2
+
.lienimage
 
{
 
{
height: 100px;
+
    text-decoration: none !important;
 +
}
 +
           
 +
.image_snetwork
 +
{
 +
    height: 60px;
 +
    padding: 1% 3%;
 +
    opacity : 0.5;
 +
    filter: grayscale(100%);
 
}
 
}
  
.lienimage{
+
/************FA_ICONS_REACTIVE****************************************************************************************************************************************************/
              text-decoration: none !important;}
+
  
.image2{
+
.fa-facebook
               
+
{
                padding: 1% 3%;
+
    -o-transition:.5s;
                opacity : 0.5;
+
    -ms-transition:.5s;
                filter: grayscale(100%);
+
    -moz-transition:.5s;
               
+
    -webkit-transition:.5s;
            }
+
    transition: .5s;
           
+
    color: #000000;
            .image2:hover{
+
}
              opacity: 1;
+
              filter: grayscale(0%);
+
            }
+
  
 +
.fa-facebook:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
.fa-instagram
 +
{
 +
    -o-transition:.5s;
 +
    -ms-transition:.5s;
 +
    -moz-transition:.5s;
 +
    -webkit-transition:.5s;
 +
    transition: .5s;
 +
    color: #000000;
 +
}
 +
 +
.fa-instagram:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
.fa-twitter-square
 +
{
 +
    -o-transition:.5s;
 +
    -ms-transition:.5s;
 +
    -moz-transition:.5s;
 +
    -webkit-transition:.5s;
 +
    transition: .5s;
 +
    color: #000000;
 +
}
 +
 +
.fa-twitter-square:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
.fa-home
 +
{
 +
    -o-transition:.5s;
 +
    -ms-transition:.5s;
 +
    -moz-transition:.5s;
 +
    -webkit-transition:.5s;
 +
    transition: .5s;
 +
    color: #000000;
 +
}
 +
 +
.fa-home:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
.fa-heart
 +
{
 +
    -o-transition:.5s;
 +
    -ms-transition:.5s;
 +
    -moz-transition:.5s;
 +
    -webkit-transition:.5s;
 +
    transition: .5s;
 +
    color: #000000;
 +
}
 +
 +
.fa-heart:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
.fa-envelope
 +
{
 +
    -o-transition:.5s;
 +
    -ms-transition:.5s;
 +
    -moz-transition:.5s;
 +
    -webkit-transition:.5s;
 +
    transition: .5s;
 +
    color: #000000;
 +
}
 +
 +
.fa-envelope:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
.fa-map-marker-alt
 +
{
 +
    -o-transition:.5s;
 +
    -ms-transition:.5s;
 +
    -moz-transition:.5s;
 +
    -webkit-transition:.5s;
 +
    transition: .5s;
 +
    color: #000000;
 +
}
 +
 +
.fa-map-marker-alt:hover
 +
{
 +
    color: #e64254;
 +
}
 +
 +
/******************************FA_ICONS************************************************************************************************************************************************/
 +
 +
#HQ_page .fab, .fab {
 +
    font-family: "Font Awesome 5 Brands";
 +
}
 +
 +
.fa, .far, .fas, #HQ_page .fa, #HQ_page .far, #HQ_page .fas {
 +
    font-family: "Font Awesome 5 Free";
 +
}
 +
 +
.fab fa-facebook:before
 +
{
 +
    content: "\f09a";
 +
}
 +
 +
.fab fa-instagram:before
 +
{
 +
    content: "\f16d";
 +
}
 +
 +
.fab fa-twitter-square:before
 +
{
 +
    content: "\f081";
 +
}
 +
 +
.fas fa-home:before
 +
{
 +
    content: "\f015";
 +
}
 +
 +
.fas fa-heart:before
 +
{
 +
    content: "\f004";
 +
}
 +
 +
.fas fa-map-marker-alt:before
 +
{
 +
    content: "\f3c5";
 +
}
 +
 +
.fas fa-envelope:before
 +
{
 +
    content: "\f0e0";
 +
}
 +
 +
/******END_FA_ICONS*************************************************************************************************************************************************************************/
 +
 +
.usefull_links
 +
{
 +
    text-align: center;
 +
    width: 33.3%;
 +
}
 +
 +
.follow_us
 +
{
 +
    text-align: center;
 +
    border-right: solid 1px black;
 +
    border-left: solid 1px black;
 +
    width: 33.3%;
 +
    display: flex;
 +
    justify-content: space-between;
 +
    flex-direction: column;
 +
}
 +
 +
.follow_us_icons
 +
{
 +
    display: flex;
 +
    justify-content: space-around;
 +
}
 +
 +
.contact_us
 +
{
 +
    text-align: center;
 +
    width: 33.3%;
 +
}
 +
 +
.footer_sponsors > div {
 +
    padding: 10px;
 +
}
  
 
</style>
 
</style>
 +
 +
</head>
 +
 +
<!--DEBUT HTML------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
  
 
<body>
 
<body>
 +
 
<footer>
 
<footer>
        <div id="conteneur">
 
            <div class="element"> <a class="lienimage" href="http://www.cbs.cnrs.fr/index.php/fr/">
 
            <img class="image2" src="https://static.igem.org/mediawiki/2018/d/d7/T--Montpellier--Logo_CBS.png"/>
 
            </a> </div>
 
  
            <div class="element"> <a class="lienimage" href="https://www.umontpellier.fr/">
+
<!--ICONES SOCIAL NETWORKS------------------------------------------------------------------------------------------------------------------------------------------------------------------>
            <img class="image2" src="https://static.igem.org/mediawiki/2018/1/16/T--Montpellier--Logo_UM.png"/>
+
            </a> </div>
+
  
            <div class="element"> <a class="lienimage" href="http://reseau-figure.fr/">
 
            <img class="image2" src="https://static.igem.org/mediawiki/2018/3/32/T--Montpellier--Logo_r%C3%A9seaufigure.png"/>
 
            </a> </div>
 
          </div>
 
          <br/>
 
        <div id="conteneur">
 
  
            <div class="element"> <a class="lienimage" href="http://muse.edu.umontpellier.fr/">
+
    <div class="footer_sponsors">
            <img class="image2" src="https://static.igem.org/mediawiki/2018/3/3e/T--Montpellier--Logo_MUSE.png"/>
+
         
            </a> </div>
+
<div class="contact_us">
 +
<h3> Sponsors </h3><br/>
  
            <div class="element"> <a class="lienimage" href="https://www.france-science.org/-Accueil-Francais-.html">
+
<div class="sponsors">
            <img class="image2" src="https://static.igem.org/mediawiki/2018/6/63/T--Pasteur_Paris--Logo-AmbassadeUSA.jpg"/>
+
            </a> </div>
+
            <div class="element"> <a class="lienimage" href="https://www.epigenmed.fr/">
+
            <img class="image2" src="https://static.igem.org/mediawiki/2018/5/57/T--Montpellier--logo_labex_epigenmed.png"/>
+
            </a> </div>
+
  
        </div>
+
<div>
        <br/>
+
<a href="https://2018.igem.org/Team:Montpellier/Sponsors"><img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/b/b8/T--Montpellier--logo_cbs_mtp.jpg"/>
        <div id="conteneur">
+
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/1/16/T--Montpellier--Logo_UM.png"/>
            <div class="element"> <a class="lienimage" href="https://www.sanofi.fr/">
+
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/3/32/T--Montpellier--Logo_r%C3%A9seaufigure.png"/>
            <img class="image2" src="https://static.igem.org/mediawiki/2018/2/2a/T--Montpellier--logo_sanofi_mtp.png"/>
+
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/3/3e/T--Montpellier--Logo_MUSE.png"/>
            </a> </div>
+
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/2/2a/T--Montpellier--logo_sanofi_mtp.png"/></a>
 +
</div>
 +
<br/>
 +
<div>
 +
<a href="https://2018.igem.org/Team:Montpellier/Sponsors"><img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/6/63/T--Pasteur_Paris--Logo-AmbassadeUSA.jpg"/>
 +
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/5/57/T--Montpellier--logo_labex_epigenmed.png"/>
 +
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/c/c5/T--Montpellier--logo_irn_mtp.png"/>
 +
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/8/8d/T--WashU_StLouis--idtlogo.jpeg"/>
 +
<img class="sponsor_icons" src="https://static.igem.org/mediawiki/2018/9/9f/T--Leiden--NewEnglandBiolabs.png"/></a>
 +
</div>
  
         
+
</div>
 +
</div>
 +
            <div class="follow_us">
  
            <div class="element"> <a class="lienimage" href="https://eu.idtdna.com/pages">
+
                <h3> Follow us on </h3>
             <img class="image2" src="https://static.igem.org/mediawiki/2018/8/8d/T--WashU_StLouis--idtlogo.jpeg"/>
+
 
             </a> </div>
+
                <div class="follow_us_icons">
 +
                    <div>
 +
                    <a href="https://www.facebook.com/igemmontpellier/" target="_blank"> <i class="fab fa-facebook fa-4x"></i></a>
 +
                    </div>
 +
 
 +
                    <div>
 +
                    <a href="https://www.instagram.com/igem_montpellier/" target="_blank"> <i class="fab fa-instagram fa-4x"></i></a>
 +
                    </div>
 +
 
 +
                    <div>
 +
                    <a href="https://twitter.com/igem_mtp?lang=en" target="_blank"> <i class="fab fa-twitter-square fa-4x"></i></a>
 +
                    </div>
 +
                </div>
 +
                <br/>
 +
             </div>
 +
 
 +
            <div class="contact_us">
 +
 
 +
                <h3> Contact us </h3>
 +
 
 +
                <div class="contact_us_icons">
 +
 
 +
 
 +
<div class="deux_colonnes">
 +
<div class="colonne_2_70">
 +
                    <div>
 +
                    <p class="p_footer"><a href="mailto:igem.assomtp@gmail.com"><i class="fas fa-envelope fa-1x"></i></a> igem.assomtp@gmail.com </p>
 +
                    </div>
 +
 
 +
                    <div>
 +
                    <p class="p_footer"><a href="https://www.google.fr/maps/place/Centre+de+Biochimie+Structurale/@43.6356553,3.7841981,12z/data=!4m5!3m4!1s0x0:0x9b0b3015d4255002!8m2!3d43.6356553!4d3.8454812" target="_blank"> <i class="fas fa-map-marker-alt fa-1x"></i></a> Centre de Biochimie Structurale, 29 Rue de Navacelles, 34090 Montpellier, France </p>
 +
                    </div>
 +
</div>
 +
<div class="colonne_1_30">
 +
<br/><img class="asso" src="https://static.igem.org/mediawiki/2018/d/d5/T--Montpellier--asso_igem_mtp.png"/>
 +
</div>
 +
</div>
 +
 
 +
             </div>
 +
 
 +
    </div>
  
            <div class="element"> <a class="lienimage" href="https://international.neb.com/">
 
            <img class="image2" src="https://static.igem.org/mediawiki/2018/9/9f/T--Leiden--NewEnglandBiolabs.png"/>
 
            </a> </div>
 
        </div>
 
 
     </footer>
 
     </footer>
 +
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 23:15, 17 October 2018