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

Line 1: Line 1:
 +
<!-- GENERAL TEMPLATE BEGINS -->
 +
<!doctype html>
 
<html>
 
<html>
−
<head>
+
    <head>
−
<style>
+
       
−
/********************************* Custom scrollbar *********************************************/     
+
        <!-- Bootstrap required meta tags -->
−
html {
+
        <meta charset="utf-8">
−
    overflow: auto;
+
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
    overflow-x: hidden;
+
       
−
}
+
        <!-- Bootstrap css-->
−
::-webkit-scrollbar {
+
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
−
    background: #cccccc;
+
        <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
}
+
       
−
::-webkit-scrollbar-thumb {
+
        <!-- Custom scripts for this template -->
−
    background: #103010;
+
        <script src="js/stylish-portfolio.js" type="text/javascript"></script>
−
}
+
       
−
::-webkit-scrollbar-thumb:hover{
+
        <!-- Fonts -->
−
    background: #155015;
+
        <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
}
+
        <style>
 +
            /****************************************  
 +
            Clear the default wiki settings *********************************/
 +
           
 +
           
 +
           
 +
            /*** Custom scrollbar ***/     
 +
            html {
 +
                overflow: auto;
 +
                overflow-x: hidden;
 +
            }
 +
            ::-webkit-scrollbar {
 +
                background: #cccccc;
 +
            }
 +
            ::-webkit-scrollbar-thumb {
 +
                background: #103010;
 +
            }
 +
            ::-webkit-scrollbar-thumb:hover{
 +
                background: #155015;
 +
            }
 +
                #home_logo, #sideMenu {
 +
                display:none;
 +
                }
 +
                #sideMenu, #top_title, .patrollink  {
 +
                display:none;
 +
                }
 +
                #content, #HQ_page {
 +
                    width: 100%;
 +
                    padding: 0;
 +
                    margin: 0;
 +
                    background-color: white;
 +
                }
 +
            /*Bootstrap.min altered the way the top menu looks by changing box-sizing: from border-box to initial, the damage is undone*/
 +
                #top_menu_14 {
 +
                    box-sizing: initial;
 +
                }
 +
           
 +
            /**** Footer ****/
  
 +
            footer.footer {
 +
              padding-top: 5rem;
 +
              padding-bottom: 5rem;
 +
            }
 +
 +
            footer.footer .social-link {
 +
              display: block;
 +
              height: 4rem;
 +
              width: 4rem;
 +
              line-height: 4.3rem;
 +
              font-size: 1.5rem;
 +
              background-color: #1D809F;
 +
              transition: background-color 0.15s ease-in-out;
 +
              box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
 +
            }
 +
 +
            footer.footer .social-link:hover {
 +
              background-color: #155d74;
 +
              text-decoration: none;
 +
            }
 +
           
 +
        </style>
 +
    </head>
 +
    <body id="page-top">
 +
   
 +
    <!--Scroll to top button-->
 +
    <a class="scroll-to-top rounded" href="#page-top">
 +
      <i class="fa fa-angle-up"></i>
 +
    </a>
 +
 +
    </body>
 +
</html>
 +
<!-- GENERAL TEMPLATE ENDS -->
 +
 +
<html>
 +
    <head>
 +
        <link rel="stylesheet" type="text/css" href="main.css">
 +
        <style>
 
/*Override iGem default wiki settings */
 
/*Override iGem default wiki settings */
 
#home_logo, #sideMenu {
 
#home_logo, #sideMenu {
Line 30: Line 107:
 
         background-color: white;
 
         background-color: white;
 
     }
 
     }
−
/*Bootstrap.min altered the way the top menu looks by changing box-sizing: from border-box to initial, the damage is undone*/
+
 
−
     #top_menu_14 {
+
 
−
        box-sizing: initial;
+
/****  custom css    ****/
 +
body, html {
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
body {
 +
    font-family:sans-serif;
 +
}
 +
 
 +
ul{
 +
    margin: 0 !important;
 +
}
 +
.btn-xl {
 +
    padding: 1.25rem 2.5rem;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
    font-weight: 700;
 +
}
 +
.text-faded {
 +
    color: rgba(255, 255, 255, 0.7);
 +
}
 +
 
 +
ul {
 +
    margin:0;
 +
}
 +
.scroll-to-top {
 +
    position: fixed;
 +
    right: 10px;
 +
    bottom: 10px;
 +
    display: none;
 +
    width: 50px;
 +
    height: 50px;
 +
    text-align: center;
 +
    color: white;
 +
    background: rgba(52, 58, 64, 0.5);
 +
    line-height: 45px;
 +
}
 +
 
 +
.scroll-to-top:focus, .scroll-to-top:hover {
 +
    color: white;
 +
}
 +
 
 +
.scroll-to-top:hover {
 +
    background: #343a40;
 +
}
 +
 
 +
.scroll-to-top i {
 +
    font-weight: 800;
 +
}           
 +
 
 +
/*** HEADER ***/
 +
.masthead {
 +
     position: fixed;
 +
    top: 20;
 +
    z-index: 1;
 +
    height: 60px;
 +
    width: 100%;
 +
}
 +
 
 +
/**** NAVBAR ****/
 +
#navBar {
 +
    height: 60px;
 +
    width: 100%;
 +
    position: fixed;
 +
    background-color: #eef;
 +
}
 +
 
 +
#navbar-linkContainer {
 +
    height: 100%;
 +
    width: 100px;
 +
    background-color: greenyellow;
 +
    position: relative;
 +
    float: left;
 +
}
 +
 
 +
#navbar-link:hover + .navbar {
 +
    background-color: aquamarine;
 +
}
 +
 
 +
#collapseProject, #collapseParts, #collapsePeople, #collapsePeople, #collapseHP, #collapseModeling {
 +
    top: 60px;
 +
    position: fixed;
 +
    background-color: aqua;
 +
    width: 100%;
 +
}
 +
/*** NAVBAR ENDS ***/
 +
 
 +
/*** HEADER ENDS ***/
 +
 
 +
 
 +
/*** INTRO ***/
 +
 
 +
#intro {
 +
    min-height: 30rem;
 +
    top: 20;
 +
    position: relative;
 +
    width: 100%;
 +
    padding-top: 8rem;
 +
    padding-bottom: 8rem;
 +
    color: rgba(57,187,104,0.7);
 +
}
 +
 
 +
#intro h1 {
 +
  font-size: 4rem;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
#intro video {
 +
    position: absolute;
 +
    top: 0;
 +
    margin: auto;
 +
    height: 100%;
 +
}
 +
 
 +
@media (min-width: 992px) {
 +
    #intro {
 +
        height: 100vh;
 
     }
 
     }
 +
    #intro h1 {
 +
        font-size: 5.5rem;
 +
    }
 +
   
 +
    #intro video {
 +
        height: auto;
 +
        width: 100%;
 +
    }
 +
}
 +
 +
/*** INTRO ENDS ***/
 +
 +
#project {
 +
    -webkit-transition: height 4s;
 +
  -moz-transition: height 4s;
 +
  -ms-transition: height 4s;
 +
  -o-transition: height 4s;
 +
    transition: height 4s;
 +
    height: auto;
 +
    background-image: url('/img/logoOficialCirculos.png');
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: contain;
 +
}
 +
 +
#project.active {
 +
    -webkit-transition: height 4s;
 +
  -moz-transition: height 4s;
 +
  -ms-transition: height 4s;
 +
  -o-transition: height 4s;
 +
    transition: height 4s;
 +
    height: 100%;
 +
    background-image: url('/img/logoOficialCirculos.png');
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: contain;
 +
}
 +
 +
.container-multiple-items {
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  width: 90%;
 +
  justify-content: space-evenly;
 +
  margin: 0 auto;
 +
}
 +
 +
.profile-picture {
 +
  height: 300px;
 +
  width: 300px;
 +
  border-radius: 50%
 +
  background-size: 100%;
 +
}
 +
 +
 +
.service-icon {
 +
  background-color: #fff;
 +
  color: #1D809F;
 +
  height: 7rem;
 +
  width: 7rem;
 +
  display: block;
 +
  line-height: 7.5rem;
 +
  font-size: 2.25rem;
 +
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 +
.callout {
 +
  padding: 15rem 0;
 +
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
 +
  background-position: center center;
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
}
 +
 +
.callout h2 {
 +
  font-size: 3.5rem;
 +
  font-weight: 700;
 +
  display: block;
 +
  max-width: 30rem;
 +
}
 +
 +
.portfolio-item {
 +
  display: block;
 +
  position: relative;
 +
  overflow: hidden;
 +
  max-width: 530px;
 +
  margin: auto auto 1rem;
 +
}
 +
 +
.portfolio-item .caption {
 +
  display: flex;
 +
  height: 100%;
 +
  width: 100%;
 +
  background-color: rgba(33, 37, 41, 0.2);
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  z-index: 1;
 +
}
 +
 +
.portfolio-item .caption .caption-content {
 +
  color: #fff;
 +
  margin: auto 2rem 2rem;
 +
}
 +
 +
.portfolio-item .caption .caption-content h2 {
 +
  font-size: 0.8rem;
 +
  text-transform: uppercase;
 +
}
 +
 +
.portfolio-item .caption .caption-content p {
 +
  font-weight: 300;
 +
  font-size: 1.2rem;
 +
}
 +
 +
@media (min-width: 992px) {
 +
  .portfolio-item {
 +
    max-width: none;
 +
    margin: 0;
 +
  }
 +
  .portfolio-item .caption {
 +
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
 +
    -webkit-clip-path: inset(0px);
 +
    clip-path: inset(0px);
 +
  }
 +
  .portfolio-item .caption .caption-content {
 +
    transition: opacity 0.25s;
 +
    margin-left: 5rem;
 +
    margin-right: 5rem;
 +
    margin-bottom: 5rem;
 +
  }
 +
  .portfolio-item img {
 +
    -webkit-transition: -webkit-clip-path 0.25s ease-out;
 +
    -webkit-clip-path: inset(-1px);
 +
    clip-path: inset(-1px);
 +
  }
 +
  .portfolio-item:hover img {
 +
    -webkit-clip-path: inset(2rem);
 +
    clip-path: inset(2rem);
 +
  }
 +
  .portfolio-item:hover .caption {
 +
    background-color: rgba(29, 128, 159, 0.9);
 +
    -webkit-clip-path: inset(2rem);
 +
    clip-path: inset(2rem);
 +
  }
 +
}
 +
 +
footer.footer {
 +
  padding-top: 5rem;
 +
  padding-bottom: 5rem;
 +
}
 +
 +
footer.footer .social-link {
 +
  display: block;
 +
  height: 4rem;
 +
  width: 4rem;
 +
  line-height: 4.3rem;
 +
  font-size: 1.5rem;
 +
  background-color: #1D809F;
 +
  transition: background-color 0.15s ease-in-out;
 +
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 +
footer.footer .social-link:hover {
 +
  background-color: #155d74;
 +
  text-decoration: none;
 +
}
 +
 +
 +
/**** CSS ? ****/
 +
a {
 +
  color: #1D809F;
 +
}
 +
 +
a:hover, a:focus, a:active {
 +
  color: #155d74;
 +
}
 +
 +
.btn-primary {
 +
  background-color: #1D809F !important;
 +
  border-color: #1D809F !important;
 +
  color: #fff !important;
 +
}
 +
 +
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
 +
  background-color: #155d74 !important;
 +
  border-color: #155d74 !important;
 +
}
 +
 +
.btn-secondary {
 +
  background-color: #ecb807 !important;
 +
  border-color: #ecb807 !important;
 +
  color: #fff !important;
 +
}
 +
 +
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
 +
  background-color: #ba9106 !important;
 +
  border-color: #ba9106 !important;
 +
}
 +
 +
.btn-dark {
 +
  color: #fff !important;
 +
}
 +
 +
.btn {
 +
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
 +
  font-weight: 700;
 +
}
 +
 +
 +
.bg-primary {
 +
  background-color: #1D809F !important;
 +
}
 +
 +
.text-primary {
 +
  color: #1D809F !important;
 +
}
 +
 +
.text-secondary {
 +
  color: #ecb807 !important;
 +
}
 +
 +
.hide {
 +
    display: none;
 +
}
  
−
/************************************************* Loader ********************************************/
+
/************Loader**************/
−
/************************************************* Loader ********************************************/
+
 
#loader-wrapper {
 
#loader-wrapper {
 
     position: fixed;
 
     position: fixed;
Line 63: Line 481:
 
}
 
}
  
−
    #loader-wrapper .loader-section {
+
#loader-wrapper .loader-section {
−
        position: fixed;
+
    position: fixed;
−
        width: 100%;
+
    width: 100%;
−
        height: 51%;
+
    height: 51%;
−
        background: rgb(216,228,222);
+
    background: rgb(216,228,222);
−
        z-index: 1000;
+
    z-index: 1000;
−
        -webkit-transform: translateY(0);
+
    -webkit-transform: translateY(0);
−
        -ms-transform: translateY(0);
+
    -ms-transform: translateY(0);
−
        transform: translateY(0);
+
    transform: translateY(0);
−
    }
+
}
−
    #loader-wrapper .loader-section.section-top {
+
#loader-wrapper .loader-section.section-top {
−
        top: 0;
+
    top: 0;
−
    }
+
}
−
    #loader-wrapper .loader-section.section-bottom {
+
#loader-wrapper .loader-section.section-bottom {
−
        bottom: 0;
+
    bottom: 0;
−
    }
+
}
−
    /* Loaded */
+
/* Loaded */
−
    .loaded #loader-wrapper .loader-section.section-top {
+
.loaded #loader-wrapper .loader-section.section-top {
−
        -webkit-transform: translateY(-100%);
+
    -webkit-transform: translateY(-100%);
−
        -ms-transform: translateY(-100%);
+
    -ms-transform: translateY(-100%);
−
        transform: translateY(-100%);
+
    transform: translateY(-100%);
−
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
        -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
    }
+
}
−
    .loaded #loader-wrapper .loader-section.section-bottom {
+
.loaded #loader-wrapper .loader-section.section-bottom {
−
        -webkit-transform: translateY(100%);
+
    -webkit-transform: translateY(100%);
−
        -ms-transform: translateY(100%);
+
    -ms-transform: translateY(100%);
−
        transform: translateY(100%);
+
    transform: translateY(100%);
−
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
        -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
    }
+
}
−
    .loaded #loader {
+
.loaded #loader {
−
        opacity: 0;
+
    opacity: 0;
−
        -webkit-transition: all 0.3s ease-out;
+
    -webkit-transition: all 0.3s ease-out;
−
                -o-transition: all 0.3s ease-out;
+
            -o-transition: all 0.3s ease-out;
−
                transition: all 0.3s ease-out;
+
            transition: all 0.3s ease-out;
−
    }
+
}  
−
    .loaded #loader-wrapper {
+
.loaded #loader-wrapper {
−
        visibility: hidden;
+
    visibility: hidden;
−
    }
+
}
−
    /* JavaScript Turned Off */
+
/* JavaScript Turned Off */
−
    .no-js #loader-wrapper {
+
.no-js #loader-wrapper {
−
        display: none;
+
    display: none;
−
    }
+
}
−
</style>
+
        </style>
−
</head>
+
    </head>
−
<body>HOLA</body>
+
    <body id="page-top">
 +
     
 +
     
 +
        <!-- Header/NavBar-->
 +
        <header class="masthead d-flex">
 +
            <div id="navBar">
 +
                <div class="container" id="navbar-linkContainer" >
 +
                    <a class="nav-link" id="navbar-link" href="#collapseProject" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseProject"> Project </a>
 +
                </div>
 +
                <div class="container" id="navbar-linkContainer" >
 +
                    <a class="nav-link" id="navbar-link" href="#collapseParts" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseParts"> Parts </a>
 +
                </div>
 +
                <div class="container" id="navbar-linkContainer" >
 +
                    <a class="nav-link" id="navbar-link" href="#collapsePeople" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapsePeople"> People </a>
 +
                </div>
 +
                <div class="container" id="navbar-linkContainer" >
 +
                    <a class="nav-link" id="navbar-link" href="#collapseHP" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseHP"> Human Practices </a>
 +
                </div>
 +
                <div class="container" id="navbar-linkContainer" >
 +
                    <a class="nav-link" id="navbar-link" href="#collapseModeling" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseModeling">  Modeling</a>
 +
                </div>
 +
            </div>
 +
           
 +
            <!-- Project collapsed -->
 +
            <div class="collapse" id="collapseProject">
 +
                <div class="container">
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            <a href="#page-top">Overview</a>
 +
                            <a href="#page-top">Description</a>
 +
                            <a href="#page-top">Background</a>
 +
                            <a href="#page-top">Design</a>
 +
                            <a href="#page-top">Results</a>
 +
                            <a href="#page-top">Safety</a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
            <!-- Parts collapsed -->
 +
            <div class="collapse" id="collapseParts">
 +
                <div class="container">
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            <a href="#page-top">Overview</a>
 +
                            <a href="#page-top">Basic parts</a>
 +
                            <a href="#page-top">Composite Parts</a>
 +
                            <a href="#page-top">Parts Collection</a>
 +
                            <a href="#page-top">Improved parts</a>
 +
                            <a href="#page-top">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
            <!-- People collapsed -->
 +
            <div class="collapse" id="collapsePeople">
 +
                <div class="container" id="collapsedMenu">
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
 
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
            <!-- HP collapsed -->
 +
            <div class="collapse" id="collapseHP">
 +
                <div class="container">
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            <a href="#page-top">Overview</a>
 +
                            <a href="#page-top">Silver HP</a>
 +
                            <a href="#page-top">Integrated HP</a>
 +
                            <a href="#page-top">Education</a>
 +
                            <a href="#page-top">Public Engagement</a>
 +
 
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
            <!-- Modeling collapsed -->
 +
            <div class="collapse" id="collapseModeling">
 +
                <div class="container">
 +
                    <ul class="navbar-nav mr-auto">
 +
                        <li class="nav-item">
 +
                            <a href="#page-top">Overview</a>
 +
                            <a href="#page-top">Interlab</a>
 +
                            <a href="#page-top">Software Tool</a>
 +
                            <a href="#page-top">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
           
 +
           
 +
        </header>
 +
        <div id="mask"></div>
 +
       
 +
        <!-- Main -->
 +
        <main>
 +
            <!-- Intro -->
 +
            <section id="intro">
 +
                <video autoplay muted loop>
 +
                    <source src="/Videos/videoTec.mp4">
 +
                </video>
 +
                <div class="container text-center my-auto" style="position: relative;">
 +
                <h1 class="mb-1">iGEM: Tec de Monterrey</h1>
 +
                <h3 class="mb-5">
 +
                <em>Project: E-Coding</em>
 +
                </h3>
 +
                <a class="btn btn-primary btn-xl" href="#project">Learn about the project</a>
 +
                  </div>
 +
                <div class="overlay"></div>
 +
            </section>
 +
 
 +
            <!-- Project -->
 +
            <section id="project" style="background: #eeeeee;">
 +
              <div class="container text-center">
 +
                <div class="row" id="projectDescription">
 +
                  <div class="col-lg-10 mx-auto">
 +
                    <h2>E-Coding</h2>
 +
                    <p class="lead mb-5">Description of the project</p>
 +
                  </div>
 +
                </div>
 +
                    <a class="btn btn-dark btn-xl" href="#team" id="btnKnowTeam">Know the team</a>
 +
              </div>
 +
            </section>
 +
 
 +
            <!-- Team-->
 +
            <section class="bg-primary text-white text-center" id="team">
 +
              <div class="container-multiple-items">
 +
                <div>
 +
                  <h3 class="text-secondary mb-0">Learn about us</h3>
 +
                  <h2 class="mb-5">TEAM</h2>
 +
                </div>
 +
                <div class="row">
 +
                  <div class="profile-picture">
 +
                    <span class="service-icon rounded-circle mx-auto mb-3">
 +
                        <img class="img-fluid" src="img/portfolio-4.jpg" style="border-radius: 50px;">
 +
                    </span>
 +
                    <h4>
 +
                      <strong>Leader 1</strong>
 +
                    </h4>
 +
                    <p class="text-faded mb-0">Name 1</p>
 +
                  </div>
 +
                  <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
 +
                    <span class="service-icon rounded-circle mx-auto mb-3">
 +
                      <i class="icon-pencil"></i>
 +
                    </span>
 +
                    <h4>
 +
                      <strong>Redesigned</strong>
 +
                    </h4>
 +
                    <p class="text-faded mb-0">Freshly redesigned for Bootstrap 4.</p>
 +
                  </div>
 +
                  <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
 +
                    <span class="service-icon rounded-circle mx-auto mb-3">
 +
                      <i class="icon-like"></i>
 +
                    </span>
 +
                    <h4>
 +
                      <strong>Favorited</strong>
 +
                    </h4>
 +
                    <p class="text-faded mb-0">Millions of users
 +
                      <i class="fa fa-heart"></i>
 +
                      Start Bootstrap!</p>
 +
                  </div>
 +
                  <div class="col-lg-3 col-md-6">
 +
                    <span class="service-icon rounded-circle mx-auto mb-3">
 +
                      <i class="icon-mustache"></i>
 +
                    </span>
 +
                    <h4>
 +
                      <strong>Question</strong>
 +
                    </h4>
 +
                    <p class="text-faded mb-0">I mustache you a question...</p>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </section>
 +
 
 +
            <!-- Callout -->
 +
            <section class="callout">
 +
              <div class="container text-center">
 +
                <h2 class="mx-auto mb-5">Welcome to
 +
                  <em>your</em>
 +
                  next website!</h2>
 +
                <a class="btn btn-primary btn-xl" href="">Download Now!</a>
 +
              </div>
 +
            </section>
 +
 
 +
            <!-- Portfolio
 +
            <section id="portfolio">
 +
              <div class="container">
 +
                <div class="text-center">
 +
                  <h3 class="text-secondary mb-0">Portfolio</h3>
 +
                  <h2 class="mb-5">Recent Projects</h2>
 +
                </div>
 +
                <div class="row no-gutters">
 +
                  <div class="col-lg-6">
 +
                    <a class="portfolio-item" href="#">
 +
                      <span class="caption">
 +
                        <span class="caption-content">
 +
                          <h2>Stationary</h2>
 +
                          <p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
 +
                        </span>
 +
                      </span>
 +
                      <img class="img-fluid" src="img/portfolio-1.jpg" alt="">
 +
                    </a>
 +
                  </div>
 +
                  <div class="col-lg-6">
 +
                    <a class="portfolio-item" href="#">
 +
                      <span class="caption">
 +
                        <span class="caption-content">
 +
                          <h2>Ice Cream</h2>
 +
                          <p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
 +
                        </span>
 +
                      </span>
 +
                      <img class="img-fluid" src="img/portfolio-2.jpg" alt="">
 +
                    </a>
 +
                  </div>
 +
                  <div class="col-lg-6">
 +
                    <a class="portfolio-item" href="#">
 +
                      <span class="caption">
 +
                        <span class="caption-content">
 +
                          <h2>Strawberries</h2>
 +
                          <p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
 +
                        </span>
 +
                      </span>
 +
                      <img class="img-fluid" src="img/portfolio-3.jpg" alt="">
 +
                    </a>
 +
                  </div>
 +
                  <div class="col-lg-6">
 +
                    <a class="portfolio-item" href="#">
 +
                      <span class="caption">
 +
                        <span class="caption-content">
 +
                          <h2>Workspace</h2>
 +
                          <p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
 +
                        </span>
 +
                      </span>
 +
                      <img class="img-fluid" src="img/portfolio-4.jpg" alt="">
 +
                    </a>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </section>
 +
            -->
 +
 
 +
            <!-- Call to Action -->
 +
            <section class="bg-primary text-white">
 +
              <div class="container text-center">
 +
                <h2 class="mb-4">The buttons below are impossible to resist...</h2>
 +
                <a href="#" class="btn btn-xl btn-light mr-4">Click Me!</a>
 +
                <a href="#" class="btn btn-xl btn-dark">Look at Me!</a>
 +
              </div>
 +
            </section>
 +
        </main>
 +
       
 +
       
 +
       
 +
        <!-- Optional JavaScript -->
 +
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 +
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 +
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 +
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 +
    </body>
 
</html>
 
</html>
 +
 +
 +
<!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} -->

Revision as of 17:46, 18 June 2018

<!doctype html>

iGEM: Tec de Monterrey

Project: E-Coding

Learn about the project

E-Coding

Description of the project

Know the team

Learn about us

TEAM

Leader 1

Name 1

Redesigned

Freshly redesigned for Bootstrap 4.

Favorited

Millions of users Start Bootstrap!

Question

I mustache you a question...

Welcome to your next website!

Download Now!

The buttons below are impossible to resist...

Click Me! Look at Me!