Difference between revisions of "Team:EPFL/Team"

Line 1: Line 1:
 
{{EPFL}}
 
{{EPFL}}
 
<html>
 
<html>
−
 
−
 
−
 
−
  <script>
 
−
       
 
−
//show the descriptions on mobile
 
−
$(function () {       
 
−
$(".ImgContainer").click(function() {
 
−
  $(".ImgContainer").not(this).removeClass("mobileShow");
 
−
  $(this).toggleClass("mobileShow");
 
−
});
 
−
});
 
−
 
−
    </script>
 
 
<!-- Wrapper-->
 
<!-- Wrapper-->
 
         <div class="wrapper">
 
         <div class="wrapper">
 
             <!-- Page Header-->
 
             <!-- Page Header-->
−
             <section class="module-page-title bg-blue">
+
             <section class="module-page-title bg-gray">
 
                 <div class="container">
 
                 <div class="container">
 
                     <div class="row align-items-center">
 
                     <div class="row align-items-center">
 
                         <div class="col-md-6">
 
                         <div class="col-md-6">
 
                             <div class="page-title-desc">
 
                             <div class="page-title-desc">
−
                                 <h2>Team</h2>
+
                                 <h1 class="page-title-heading">Modal</h1>
 
                                 <!--p This theme will shake your world.-->
 
                                 <!--p This theme will shake your world.-->
 
                             </div>
 
                             </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <ol class="breadcrumb">
 +
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
 +
                                <li class="breadcrumb-item"><a href="#">Elements</a></li>
 +
                                <li class="breadcrumb-item active">Modal</li>
 +
                            </ol>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 31: Line 24:
 
             </section>
 
             </section>
 
             <!-- Page Header end-->
 
             <!-- Page Header end-->
−
<center>
+
 
−
             <!-- Team-->
+
             <!-- Modal-->
 
             <section class="module">
 
             <section class="module">
 
                 <div class="container">
 
                 <div class="container">
−
                     <div class="row">
+
                     <div class="row align-items-center">
−
                         <div class="col-md-4">
+
                         <div class="col-lg-6">
−
                             <div class="team-item">
+
                             <p class="m-b-30"><img src="assets/images/main/about-4.jpg" alt=""></p>
−
                                <div class="team-image" id="Laura"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Laura</h6>
+
−
                                            <div class="team-role">Team Leader - Create a colorimetric signal </div>
+
−
                                        </div>
+
−
 
+
−
 
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
 
+
                         <div class="col-lg-5 offset-lg-1">
−
                         <div class="col-md-4">
+
                             <h2>Easy and Simple.</h2>
−
                             <div class="team-item">
+
                            <p class="lead m-b-30">Map where your photos were taken and discover local points of interest. Map where your photos.</p>
−
                                <div class="team-image"id="Leonard"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                            <button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-1">Open modal</button>
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                          <h6 class="team-name">Leonard</h6>
+
−
                                            <div class="team-role">Toehold switches, grammar corrector</div>
+
−
                                        </div>
+
−
                                     
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
                        <div class="col-md-4">
+
                    </div>
−
                            <div class="team-item">
+
                    <!-- Modal-->
−
                                <div class="team-image" id="Theo"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                    <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
−
                                    <div class="team-wrap">
+
                        <div class="modal-dialog" role="document">
−
                                        <div class="team-content">
+
                            <div class="modal-content">
−
                                            <h6 class="team-name">Théo</h6>
+
                                <div class="modal-header">
−
                                            <div class="team-role">Make amplification by RPA work </div>
+
                                    <h5 class="modal-title">Modal title</h5>
−
                                        </div>
+
                                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
−
                                       
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
−
                            </div>
+
                                 <div class="modal-body">...</div>
−
                        </div>
+
                                <div class="modal-footer">
−
                        <div class="col-md-4">
+
                                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
−
                            <div class="team-item">
+
                                    <button class="btn btn-primary" type="button">Save changes</button>
−
                                 <div class="team-image" id="Dana"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
 
+
−
<button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-1">Dana</button>
+
−
                                        </div>
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
−
 
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                        <div class="col-md-4">
+
                    </div>
−
                            <div class="team-item">
+
                </div>
−
                                <div class="team-image" id="Hana"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
            </section>
−
                                    <div class="team-wrap">
+
            <!-- Modal-->
−
                                        <div class="team-content">
+
            <section class="module divider-top">
−
                                            <h6 class="team-name">Hana</h6>
+
                <div class="container">
−
                                            <div class="team-role">DNA extraction with micro needle patch and wiki creation</div>
+
                    <div class="row align-items-center">
−
                                        </div>
+
                        <div class="col-lg-5">
−
                                        <div class="team-content-social">
+
                            <h2>Easy and Simple.</h2>
−
                                            <ul>
+
                            <p class="lead m-b-30">Map where your photos were taken and discover local points of interest. Map where your photos.</p>
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
                            <button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-2">Large modal</button>
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
 
                         </div>
 
                         </div>
−
                         <div class="col-md-4">
+
                         <div class="col-lg-6 offset-lg-1">
−
                             <div class="team-item">
+
                             <p class="m-b-30"><img src="assets/images/main/about-4.jpg" alt=""></p>
−
                                <div class="team-image" id="Luc"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
                        </div>
−
                                    <div class="team-wrap">
+
                    </div>
−
                                        <div class="team-content">
+
                    <!-- Modal-->
−
                                            <h6 class="team-name">Luc</h6>
+
                    <div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
−
                                            <div class="team-role">Make amplification by RPA work</div>
+
                        <div class="modal-dialog modal-lg" role="document">
−
                                        </div>
+
                            <div class="modal-content">
−
                                        <div class="team-content-social">
+
                                <div class="modal-header">
−
                                            <ul>
+
                                     <h5 class="modal-title">Modal title</h5>
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
                                     <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
 
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
−
</div>
+
−
                        <div class="col-md-4">
+
−
                            <div class="team-item">
+
−
                                <div class="team-image" id="Konstantinos" ><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Konstantinos</h6>
+
−
                                            <div class="team-role">One Pot</div>
+
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
−
</div>
+
−
                        <div class="col-md-4">
+
−
                            <div class="team-item">
+
−
                                <div class="team-image" id="Junyan" ><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                    <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Junyan</h6>
+
−
                                            <div class="team-role"><3</div>
+
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                     </div>
+
−
                               
+
−
</div>
+
−
</div>
+
−
 
+
−
</div>
+
−
                        <div class="col-md-4">
+
−
                            <div class="team-item">
+
−
                                <div class="team-image" id="Stefania"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt="">
+
−
                                     <div class="team-wrap">
+
−
                                        <div class="team-content">
+
−
                                            <h6 class="team-name">Stefania</h6>
+
−
                                            <div class="team-role">wiki & DNA extraction</div>
+
−
                                        </div>
+
−
                                        <div class="team-content-social">
+
−
                                            <ul>
+
−
                                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
+
−
                                                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
 
                                 </div>
 
                                 </div>
 +
                                <div class="modal-body">...</div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                  
+
                    </div>
−
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+
                 </div>
−
                         <div class="modal-dialog" role="document">
+
            </section>
 +
            <!-- Modal-->
 +
            <section class="module module divider-top">
 +
                <div class="container">
 +
                    <div class="row align-items-center">
 +
                        <div class="col-lg-6">
 +
                            <p class="m-b-30"><img src="assets/images/main/about-4.jpg" alt=""></p>
 +
                        </div>
 +
                        <div class="col-lg-5 offset-lg-1">
 +
                            <h2>Easy and Simple.</h2>
 +
                            <p class="lead m-b-30">Map where your photos were taken and discover local points of interest. Map where your photos.</p>
 +
                            <button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-3">Small modal</button>
 +
                        </div>
 +
                    </div>
 +
                    <!-- Modal-->
 +
                    <div class="modal fade" id="modal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 +
                         <div class="modal-dialog modal-sm" role="document">
 
                             <div class="modal-content">
 
                             <div class="modal-content">
 
                                 <div class="modal-header">
 
                                 <div class="modal-header">
Line 196: Line 104:
 
                                     <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 
                                     <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 
                                 </div>
 
                                 </div>
−
                                 <div class="modal-body">
+
                                 <div class="modal-body">...</div>
−
 
+
−
<article class="post row align-items-center">
+
−
                                    <div class="col-md-5">
+
−
                                        <div class="post-preview"><a href="#"><img src="https://static.igem.org/mediawiki/2019/2/2d/T--EPFL--dana.jpeg" alt=""></a></div>
+
−
                                    </div>
+
−
                                    <div class="col-md-7">
+
−
                                        <div class="post-wrapper">
+
−
                                            <div class="post-header">
+
−
                                                <h2 class="post-title"><a >Dana Mozaffari</a></h2>
+
−
                                                <ul class="post-meta">
+
−
                                                    <li> <strong> Mission: </strong> Create a colorimetric signal</li>
+
−
                                                </ul>
+
−
                                            </div>
+
−
                                            <div class="post-content">
+
−
                                                <p> <strong>Studies: </strong> Master in Chemical Engineering <br>
+
−
<strong> Fun fact: </strong> He once found a giant pickle jar for the whole team <br>
+
−
<strong> Favourite wine: </strong> les Portes de Novembre
+
−
</p>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </article>
+
−
</div>
+
−
                                <div class="modal-footer">
+
−
                                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
+
−
                                    <button class="btn btn-primary" type="button">Save changes</button>
+
−
                                </div>
+
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
−
 
−
 
−
                 
 
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
−
</center>
 
−
            <!-- Team end-->
 
  
  
 
</html>
 
</html>
 
{{EPFL/Footer}}
 
{{EPFL/Footer}}

Revision as of 10:42, 30 September 2019

Modal

  1. Home
  2. Elements
  3. Modal

Easy and Simple.

Map where your photos were taken and discover local points of interest. Map where your photos.

Easy and Simple.

Map where your photos were taken and discover local points of interest. Map where your photos.

Easy and Simple.

Map where your photos were taken and discover local points of interest. Map where your photos.



© iGEM EPFL 2019