Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

m
Line 1: Line 1:
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
  <link rel="stylesheet" href="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--cssvectormap?action=raw&ctype=text/css" type="text/css" media="screen"/>
+
   
−
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
    <!-------TEMPORAL QUITALO ALV ---->
−
  <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--jsvectormap?action=raw&ctype=text/javascript"></script>
+
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
  <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--worldmillvectormap?action=raw&ctype=text/javascript"></script>
+
   
−
  <style>
+
   
−
    .full-masthead {
+
   
−
      width: 100%;
+
   
−
    }
+
   
−
    .full-masthead img {
+
 
−
      width: 100%;
+
    <link rel="stylesheet" href="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--cssvectormap?action=raw&ctype=text/css" type="text/css" media="screen" />
−
    }
+
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
−
    #collabs {
+
    <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--jsvectormap?action=raw&ctype=text/javascript"></script>
−
      width: 100%;
+
    <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--worldmillvectormap?action=raw&ctype=text/javascript"></script>
−
      height: auto;
+
 
−
      background: #70c27c;
+
    <style>
−
      z-index: 1;
+
        .hp-title {
−
      display: block;
+
            position: absolute;
−
    }
+
            top: 10vh;
−
    #meetings {
+
            color: white;
−
      width: 100%;
+
            font-family: "Norwester";
−
      height: auto;
+
            font-size: 4vw;
−
      background: #2a4081;
+
            margin: 0 30%;
−
      z-index: 1;
+
            z-index: 2;
−
      display: block;
+
            width: 40%;
−
    }
+
            line-height: 1.5em;
−
    .collab-container {
+
            text-align: center;
−
      width: 90%;
+
        }
−
      height: auto;
+
 
−
      left: 5%;
+
        .div-image {
−
      top: 5%;
+
            float: left;
−
      background: black;
+
            width: 16.66%;
−
      position: relative;
+
            height: 100%;
−
      display: flex;
+
            text-align: center;
−
    }
+
            overflow: hidden;
−
    .container-left {
+
            background: black;
−
      margin: 1.5% 0 1.5% 1.5%;
+
            position: relative;
−
      background: white;
+
        }
−
      display: flex;
+
 
−
      width: 33.33%;
+
        .div-image img {
−
    }
+
            position: absolute;
−
    .container-center {
+
            margin-left: -110%;
−
      margin: 1.5% 0 1.5% 0;
+
            cursor: pointer;
−
      background: white;
+
            opacity: 0.85;
−
      display: inline-block;
+
            transition: all 0.8s;
−
      width: 33.33%;
+
            -webkit-transition: all 0.8s;
−
    }
+
        }
−
    .container-right {
+
 
−
      margin: 1.5% 1.5% 1.5% 0;
+
        .div-image img:hover {
−
      background: white;
+
            opacity: 0.4;
−
      display: flex;
+
            margin-left: -50%;
−
      width: 33.33%;
+
        }
−
    }
+
       
−
    .column-container {
+
       
−
      width: 50%;
+
       
−
    }
+
       
−
    .team-logo {
+
        /******* WORLD MAP ******/
−
      width: 90%;
+
 
−
      height: 120px;
+
        #worldMapSection {
−
      background: blue;
+
            width: 100%;
−
      margin: 10px 5%;
+
            height: auto;
−
    }
+
            background: #70c27c;
−
    .tec-logo {
+
            z-index: 1;
−
      width: 100%;
+
            display: block;
−
      height: 90%;
+
        }
−
      margin: 5% 0;
+
       
−
      background: blue;
+
        #world-map {
−
    }
+
            width: 80%;
−
    .collab-info {
+
            height: 50vh;
−
      width: 80%;
+
            margin-left: auto;
−
      height; 500px;
+
            margin-right: auto;
−
      left: 10%;
+
            padding-top: 5vh;
−
      margin: 10% 0;
+
        }
−
      background: white;
+
       
−
      position: relative;
+
        .collapsedInfo {
−
      display: inline-block;
+
            top: calc(8vh + 18px);
−
      z-index: 2;
+
            position: fixed;
−
    }
+
            z-index: 1;
−
  </style>
+
            width: 100%;
 +
            background-color: aquamarine;
 +
        }
 +
    </style>
 
</head>
 
</head>
−
<body>
 
−
  <header class="full-masthead">
 
−
    <div id="world-map" style="width: 600px; height: 400px"></div>
 
−
  <script>
 
−
    $(function(){
 
−
      $('#world-map').vectorMap({map: 'world_mill'});
 
−
    });
 
−
  </script>
 
−
  </header>
 
  
−
  <section id="collabs">
+
<body>
−
     <div class="collab-container">
+
     <header class="full-masthead" style="height: 100%;">
−
      <div class="container-left">
+
         <div class="hp-title">Human Practices</div>
−
         <div class="column-container">
+
        <div class="div-image">
−
          <div class="team-logo">
+
            <img src="http://4.bp.blogspot.com/-kmtsk1ekeZg/TcgJpVAis1I/AAAAAAAAAUI/LF0qrXnVX9c/s1600/beautiful+rivers+by+cool+wallpapers+at+cool+wallpapers+and+cool+and+beautiful+wallpapers+%252810%2529.jpg">
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
 
         </div>
 
         </div>
−
         <div class="column-container">
+
         <div class="div-image">
−
          <div class="team-logo">
+
            <img src="http://www.hdiphone6wallpapers.net/iphone-6-backgrounds/iphone-6-wallpapers-2/iphone-6-wallpapers-hd-2198am2m1-1080x1920.jpg">
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
 
         </div>
 
         </div>
−
      </div>
+
        <div class="div-image">
−
      <div class="container-center">
+
            <img src="https://wallpaper-house.com/data/out/6/wallpaper2you_85542.jpg">
−
        <div class="tec-logo">
+
 
         </div>
 
         </div>
−
      </div>
+
         <div class="div-image">
−
      <div class="container-right">
+
            <img src="http://www.ewallpapers.eu/sites/default/files/1315857928.jpg">
−
         <div class="column-container">
+
−
          <div class="team-logo">
+
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
 
         </div>
 
         </div>
−
         <div class="column-container">
+
         <div class="div-image">
−
          <div class="team-logo">
+
            <img src="https://wallpapershome.com/images/pages/pic_h/5284.jpg">
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
−
          <div class="team-logo">
+
−
          </div>
+
 
         </div>
 
         </div>
−
      </div>
+
        <div class="div-image">
−
    </div>
+
            <img src="http://www.extension.unach.mx/carrerapncs/assets/img/slide1.jpg">
−
  </section>
+
        </div>
 +
    </header>
  
−
  <section id="meetings">
+
    <section id="worldMapSection">
−
    <div class="collab-container">
+
        <div id="world-map" ></div>
−
    </div>
+
        <script>
−
    <div class="collab-info">
+
            $(function() {
−
    </div>
+
                $('#world-map').vectorMap({
−
  </section>
+
                    map: 'world_mill',
 +
                    scaleColors: ['#C8EEFF', '#0071A4'],
 +
                    normalizeFunction: 'polynomial',
 +
                    hoverOpacity: 0.7,
 +
                    hoverColor: false,
 +
                    markerStyle: {
 +
                      initial: {
 +
                        fill: '#F8E23B',
 +
                        stroke: '#383f47'
 +
                      }
 +
                    },
 +
                    backgroundColor: '#383f47',
 +
                    markers: [
 +
                      {latLng: [43.29, 5.37], name: 'Marseille'},
 +
                      {latLng: [40.41, -3.42], name: 'Madrid'},
 +
                      {latLng: [58.38, 26.73], name: 'Tartu'},
 +
                      {latLng: [17.84, -92.62], name: 'Tabasco'},
 +
                      {latLng: [16.76, -93.13], name: 'Chiapas'}
 +
                    ]
 +
                   
 +
                });
 +
            });
 +
        </script>
 +
        <div>
 +
        <div class="collapse collapsedInfo" id="worldCityInfo">
 +
           
 +
        </div>
 +
        </div>
 +
    </section>
 
</body>
 
</body>
 +
 
</html>
 
</html>
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Revision as of 07:56, 26 September 2018

Human Practices

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors