Difference between revisions of "Template:Paris Bettencourt/Templetes:Header"

Revision as of 22:07, 1 October 2018

/*Bordel CSS de iGEM*/

/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/

/* Clear the default wiki settings */

#home_logo, #sideMenu { display:none; } #sideMenu, #top_title, .patrollink {display:none;} #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

/*anti igem css*/

HQ_page h1, h2, h3, h5 {

       font-family: Didot, Didot LT STD,  Hoefler Text, Garamond, Times New Roman, serif;
       font-weight: 400;
       border : none;
       border : white;

}

mw-content-text h1 {

       border : none;
       border : white;

}

HQ_page h4 {

       color : rgb(64,64,64);

}

HQ_page table {

       border : none;
       border-collapse : separate;
       margin : 0;

}

HQ_page ul {

       list-style-type:disc;
       list-style-image : none;

} groupparts {

       margin :margin-left : 50%;

} /*General CSS*/ body { margin : 0; padding:0;

       width : 100%;

} @media only screen and (max-width: 1200px) {

} @media only screen and (max-width: 800px) {

      body {
             width : 800px;
      }
      #menu {
             height : 130px !important;
     }
     .menulist {
             width : 400px !important;
             overflow : visible !important;
     }
     #fbnoticon{
     }
     #instanoticon {
     }
     #twnoticon{
     }

}

top-button {

position : fixed; right : 20px; bottom : 10px;

       width : 25px;
       height : 25px;

z-index : 100; }

top-button img {

       width : 100%;
       height : 100%;

} .textbody img {

       width : 100%;

} .textbody span {

      font-size : 12px;
      text-align : justify;

} .textbody h4 {

       text-align : left;
       font-size : 20px;
       margin-bottom : 20px;
       color : rgb(64,64,64);

} .textbody h6 {

       text-align : center;
       font-size : 15px;

} .textbody table {

      width : 100%;
      word-wrap : break-word;

} .textbody table tr td {

       border : rgb(94,94,94) solid 1px;
       text-align : left;

} .textbody table tr td img {

       width : 100%;
       margin : 0;

} .header { width : 100%; height : 100vh; background-attachment: fixed; background-position : center; background-repeat : no-repeat; background-size : cover; background-color : rgb(200,200,200); text-align : center;

       line-height : 100px;

font-family : "Avenir", Lato, sans-serif; font-size : 100px; color : white; font-weight : bold;

   display: flex;
   align-items: center;

justify-content: center; } .textbody { width : 75%; margin : 0 auto; text-align : justify; padding-top : 75px; display : block; font-family : "Avenir", Lato, sans-serif; color : rgb(64,64,64); font-size : 15px;

       margin-bottom : 50px;
       text-indent : 15px;

}

HQ_page .textbody p {

      font-family : "Avenir", Lato, sans-serif;

color : rgb(64,64,64); font-size : 15px; }

@supports (-webkit-appearance:none) { .textbody { color : #404040; font-weight : 150; } } .textbody h1 { text-align : center; font-size : 50px;

       line-height : 50px;

margin-bottom : 75px; font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif; color : rgb(56,78,119);

} .textbody h2 {

       font-size : 30px;

font-variant: small-caps;

       line-height : 30px;
       text-decoration : none;

} .textbody ul {

       list-style-position: inside;
       list-style-type: circle;

} .textbody a {

       text-style : none;
       color : rgb(64,64,64);

} /* text in one block*/ .text1 { width : 100%; display : inline-block; margin-top : 25px;

       position : relative;
       font-size : 16px;

} .text1 img {

      width : 50%;
      margin-left : 25%;
      margin-right : 25%;

} .text1 span {

      width : 50%;
      margin-left : 25%;
      margin-right : 25%;
      display : inline-block;

} /*Text in two equal block*/ .text2 { width : 100%; display : inline-block; margin-top : 25px;

       position : relative;

} .text2left { width : 45%; display : inline-block; margin-top : 20px; margin-bottom : 20px; float : left; } .text2right { width : 45%; display : inline-block; float : right; margin-top : 20px; margin-bottom : 20px; } /*Text in three equal block*/ .text3 { width : 100%; display : inline-block; margin-top : 25px;

       position : relative;

} .text3left { width : 30%; display : inline-block; margin-top : 20px; margin-bottom : 20px; float : left; } .text3center { width : 30%; display : inline-block; margin-left : 5%; margin-top : 20px; margin-bottom : 20px; float : left; } .text3right { width : 30%; float : right; display : inline-block; margin-top : 20px; margin-bottom : 20px; } /*Text in two block with the left one larger*/ .text4 { width : 100%; display : inline-block; margin-top : 25px;

       position : relative;

} .text4left { width : 65%; display : inline-block; margin-top : 20px; margin-bottom : 20px; } .text4right { width : 30%; display : inline-block; float : right; margin-top : 20px; margin-bottom : 20px; } /*Text in two block with the right one larger*/ .text5 { width : 100%; display : inline-block; margin-top : 25px;

       position : relative;

} .text5left { width : 30%; display : inline-block; margin-top : 20px; margin-bottom : 20px; } .text5right { width : 65%; display : inline-block; float : right; margin-top : 20px; margin-bottom : 20px; } .text6 {

      width : 60%;
      display : inline-block
      margin-top : 20px;
      margin-bottom : 20px;
      margin-left : 20%;
     margin-rigth : 20%;

}

.divseparator {

       width : 20%;
       height : 0px;
       border : solid 0.5px rgb(64,64,64);
       margin : 25px auto;
       position : relative;
       display : block;

} .horiline {

 height: 3px;
 width: 300px;
 margin: -0.5em 0;
 color: rgb(64,64,64) ;
 display: block;
   margin-left: auto;
   margin-right: auto

} /*Nav bar CSS*/ /*

menu {

position : fixed; width : 100%; background : rgb(94,94,94); height : 65px;

       z-index : 100;

}

home {

width : 60px; top : 0;

       margin-left : 10px;

}

mainpage {

float : left;

}

menu ul li {

display: inline-block; vertical-align: top; }

menu ul li a {

display: inline-block; }

.menulist { overflow: hidden; margin : auto; background : rgb(94,94,94);

       margin-left : 100px !important;

padding : 0px;

       margin-top : 0px;
       height : 60px;
       font-size : 16px;

}

.menulist .list a { display: block; text-align: center; text-decoration : none; color: white;

       padding-left : 5px;
       padding-right : 5px;
       padding-top : 15px;
       padding-bottom : 15px;

} .menulist .list a:hover { background-color: rgb(124, 124, 124); /*here to change the color when you pass the mouse over, look down a bit*/ } .menulist .list .dropdownlist { display: none; position: absolute; text-align : left;

       margin-top : 0px;
       padding-left : 5px;
       padding-right : 5px;
       background : rgb(94,94,94);
       list-style-position : inside;
       margin-left : 0px;
       z-index : 99;

}

.dropdownlist li .droprightlist { display: none; position: absolute; background : rgb(94,94,94);

       padding-left : 5px;
       padding-right : 5px;
       margin-top : 0px;
       text-align : left;
       z-index : 100;
       margin-left : 0px;

}

.menulist .list:hover .dropdownlist { display: block; }

.menulist .list .dropdownlist li { display: block; position: relative; text-align : center; background : rgb(94,94,94); z-index: 90; padding : auto; } .menulist .list .dropdownlist li a:hover { background-color: rgb(124, 124, 124); /*And here also*/ } .dropdownlist li .droprightlist li a { color: white; }

menu u.dropdownlist li .droprightlist li {

display: block; position: relative; text-align : center; background : rgb(94,94,94); padding : auto; }

.menulist .list .dropdownlist li a { display: table-cell; text-align: left; text-align : center; color: white; text-decoration : none;

       z-index : 99;

vertical-align : middle; } .dropdownlist li .droprightlist li a { display: table-cell; text-align: left; text-align : center; text-decoration : none; color: white;

} .list ul li {

       display : table-cell;

} .dropdownlist li .droprightlist { top: 0; left: 100%; z-index: -1; } .dropdownlist li:hover .droprightlist { display: block; }

exception {

       line-height : normal;

}

fbnoticon{

margin-left : 90px; }

instanoticon {

margin-left : 135px;

       margin-top : -19px;

}

twnoticon{

margin-left : 45px; }

igemlogo{

} .sidelogos { }

logolist {

float : right; display : inline-block; height : 60px; width : 175px; margin-top : -50px; margin-right : 50px; }

twnoticon img, #fbnoticon img, #igemlogo img, #instanoticon img{

width : 40px; position : absolute; display : inline-block; }

twitapp, #fbapp {

display:none; width:250px; height:auto; background: white; }

fbapp{

}

twitapp{

}

/

    .image-span{
                               display:block;
                           }
                           
                           .top50 {
                            margin-top: 50px;
                           }
        body

{

   margin: 0;
   padding: 0;
   font-family: sans-serif;

} nav {

   width: 100%;
   background: #66b24c;

} ul {

 width:  80%;
 margin:  0 auto;
 padding: 0;

} ul li {

   list-style: none;
   display: inline-block;
   padding: 20px;

} ul li:hover {

  background: #339933;

} ul li a {

   color: #fff;
   text-decoration:  none;

} ul.wtf-menu{

                               height:65px;
                               padding-bottom: 0;
                               margin-bottom: 0;
                               margin-top: 0;
                           
                               margin-right: 30px;
                           }
                           
                           
                              ul.wtf-menu li{
                               list-style: none;
                               float: left;
                               padding: 0px 0px;
                               margin: 0px 0px;
                               line-height: 65px;
                               display: block;
                               position: relative; 
                               text-transform: uppercase;
                              }
                               
                              ul.wtf-menu li a{
                               color: #66b24c;;
                               text-decoration: none;
                               display:block;
                               
                           
                               padding: 0px 15px;
                               margin: 0px 0px;
                               display: block;
                           
                              }
                               
                              ul.wtf-menu li:hover, ul.wtf-menu li:hover >a{
                               background-color /*:#66b24c*/:rgb(51, 153, 51);
                               color: white;
                              }
                           
                              ul.wtf-menu li.parent:hover:after  {
                               color:white;
                           }
                           
                              .wtf-menu ul.submenu{
                               
                               width: 200px;
                               padding: 0px 0px;
                               margin: 0px;
                               background: #fff;
                               position: absolute;
                               top:65px;
                               left:0px;
                               display:none;
                            
                               /*  Dropdown shadow */
                               -webkit-box-shadow: 0 2px 2px 0 rgb(217, 255, 179);
                               box-shadow: 0 2px 2px 0 rgb(217, 255, 179);
                           }
                           
                           .wtf-menu li.main-item >a{
                               color: white;
                           }
                           
                           .wtf-menu ul.submenu ul{
                               left: 200px;
                               top:0px;
                           }
                            
                           .wtf-menu ul.submenu li{
                               padding: 0px;
                               margin: 0px;
                               display: block;
                               float: none;
                               border-bottom: 1px solid #eee;
                               line-height: 40px;
                               text-transform: none;
                           }
                            
                           .wtf-menu ul.submenu li:last-child{
                               border: none;
                           }
                           
                           ul.wtf-menu ul li.parent:after {
                               font-family: 'Fontawesome';
                               content: "\f0da";
                               color: #bdf5bd;
                               position: absolute;
                               right: 10px;
                               top: 0px;
                               margin-left: 5px;
                           }
                           
                           
                           
                           .wtf-menu li:hover > ul{
                               display: block;
                               -moz-animation: zoomIn .3s ease-in;
                               -webkit-animation: zoomIn .3s ease-in ;
                               animation: zoomIn .3s ease-in;
                            
                           }
                            
                           .wtf-menu ul li:hover > ul{
                               display:block;
                               -moz-animation: zoomIn .3s ease-in ;
                               -webkit-animation: zoomIn .3s ease-in ;
                               animation: zoomIn .3s ease-in;
                           }
                           
                           .top-menu{
                               background-color: rgb(94,94,94); color:white;
                               
                               z-index: 2000;
                               position: fixed;
                               width: 100%;
                               padding-right: 30px;
                           }

                       .top5{
                           margin-top: 5px;
                       }
                       #logoigem img{
   width:38px;
   height:38px;

}

home{

   margin-top: 2px;
   margin-right: 10px;

width : 60px; top : 0;

       margin-left : 10px;

}

logolist2 div {

   margin-right: 20px;
   width: 38px;

}

logolist2{

                           float: right;
   display: flex;
  
   width: 175px;
   margin-top: -54px;
   margin-right: 50px;

                       }
                           #logolist2  a{
                               
                                   color: white;
                                   text-decoration: none;
                           }

                           #logolist2  a i {
                               font-size: 30px;
                           }

mainpage {

   float: left;

}

 </style>

                               <a href="https://2018.igem.org/Team:Paris_Bettencourt" id="mainpage"><img id="home" src="" class=" b-error"></a>

                                                   <a href="https://2018.igem.org/Main_Page" title="iGEM 2018" target="_blank">
                                                       <img src="" class=" b-error">
                                                   </a>

                                                   <a href="http://twitter.com/iGEM_Paris" target="_blank">

</a>

                                                           </a><a class="twitter-timeline" width="250" height="400" data-dnt="true" href="https://twitter.com/iGEM_Paris" data-widget-id="368144501119795201">@iGEM_Paris</a>

                                                   <a href="https://www.facebook.com/ParisiGEM2018/" target="_blank">

                                                   </a>

                                                   <a href="https://www.instagram.com/igem_paris_bettencourt/" target="_blank">

                                                   </a>

               </nav>

@@ Line 1: / Line 1: @@
-<script type='text/javascript'         src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
-        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
-        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
-        <script type='text/javascript'         src ='/wiki/skins/Igem/resources/2018_skin.js'></script>
-    <div id='globalWrapper'>
-        <div id='top_menu_under' class='noprint'></div>
-        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
-		<script>jQuery('#top_menu_14').load('https://2018.igem.org/cgi/top_menu_14/menubar_reply.cgi',
-						    {   t:"Team%3AParis%20Bettencourt%2FModel",
-							a:"View+%2FTeam%3AParis_Bettencourt%2FModel++View source+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AParis_Bettencourt%2FModel%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AParis_Bettencourt%2FModel%26action%3Dhistory++Watch+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3AParis_Bettencourt%2FModel%26action%3Dwatch%26token%3Dd494d1513fe94a1bcd96e6b9690354ae%252B%255C++Page+%2FTeam%3AParis_Bettencourt%2FModel++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTalk%3ATeam%3AParis_Bettencourt%2FModel%26action%3Dedit%26redlink%3D1++" });
-		</script>
-        <!-- Content div contains HQ_page for HQ styles, Logo and title div, and USER CONTENT -->
-		<div id="content" class="mw-body" role="main">
-		    <a id="top"></a>
-            <div id="top_title">
-                <div class="logo_2018">
-                    <a href="https://2018.igem.org">
-                    <img src="https://static.igem.org/mediawiki/2018/8/8b/HQ_page_logo.jpg" width="100px">
-                    </a>
-                </div>
- 		        <h1 id="firstHeading" class="firstHeading">
-		            <span dir="auto">Team:Paris Bettencourt/Model</span>
-		        </h1>
-            </div>
-            <div id="HQ_page">
-                <div id="bodyContent">
-		            <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>
-<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
-<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
-<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
 <style type="text/css">
   /*Bordel CSS de iGEM*/
@@ Line 745: / Line 704: @@
    </style>
+<nav class="row top-menu">
-<head>
-	<!-- This tells the browser that your page is responsive -->
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-<div style="clear: both;"></div>
- <nav class="row top-menu">
                          <!--div class="col-md-4 home-link"><a href="index.html"><i class="fa fa-home fa-3" aria-hidden="true"></i></a></div-->
                          <div class="col-md-8">
@@ Line 862: / Line 806: @@
                  </nav>
-<a><img id="top-button" src="https://static.igem.org/mediawiki/2018/e/e2/Arrow2PB.png"></a>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-<script type="text/javascript">
-function scrollToTop(tag){
-	console.log('titi');
-	var aTag = tag;
-	$('html,body').animate({scrollTop: aTag.offset().top},'slow');
-}
-$("#top-button").click(function() {
-	scrollToTop($('#header1'));
-});
-</script>