Difference between revisions of "Team:AFCM-Egypt"

Line 1: Line 1:
{{Template:AFCM-Egypt/header}}
+
{{Template:AFCM-Egypt/bootstrap}}
 +
{{Template:AFCM-Egypt/main}}
 +
{{Template:AFCM-Egypt/owl.carousel}}
 +
{{Template:AFCM-Egypt/owl.carousel}}
 
<html>
 
<html>
 
<head>
 
<head>
Line 10: Line 13:
 
</head>
 
</head>
 
<body>
 
<body>
<header id="js-header">
+
<section class="header" id="header">
                 <div class="header-limiter">
+
 
            <nav style="width: 100%;position: absolute;">
+
        <nav class="navbar navbar-default navbar-fixed-top">
                 <ul id="menu">
+
            <div class="container">
                     <li class="active"><a href="#" id="homtst">HOME</a> </li>
+
                <!-- Brand and toggle get grouped for better mobile display -->
 +
                 <div class="navbar-header">
 +
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                        <span class="sr-only">Toggle navigation</span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                    </button>
 +
                    <a class="navbar-brand" href="index-multipage.html"><span><img src="assets/images/Logo-7.png"  style="width:150px; height:150px;"></span></a>
 +
                 </div>
 +
                <!-- /.navbar-header -->
 +
 
 +
                <!-- Collect the nav links, forms, and other content for toggling -->
 +
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
                    <ul id="menu">
 +
                     <li class="active"><a href="home.html">HOME</a> </li>
 
                     <li>
 
                     <li>
 
                         <a>TEAM <span class="caret"></span></a>
 
                         <a>TEAM <span class="caret"></span></a>
 
                         <ul>
 
                         <ul>
                             <li><a href="meettheteam.html">Meat The Team</a></li>
+
                             <li><a href="meet the team.html">Meet The Team</a></li>
 
                             <li><a href="collaborations.html">Collaborations</a></li>
 
                             <li><a href="collaborations.html">Collaborations</a></li>
 
                         </ul>
 
                         </ul>
 
                     </li>
 
                     </li>
                     <li>
+
                     <li class="dropdown">
 
                         <a>PROJECT <span class="caret"></span></a>
 
                         <a>PROJECT <span class="caret"></span></a>
 
                         <ul>
 
                         <ul>
                             <li><a href="description.html">Descreption</a></li>
+
                             <li><a href="project.html">Project Descreption</a></li>
 
                             <li><a href="experiment.html">Experiment</a></li>
 
                             <li><a href="experiment.html">Experiment</a></li>
                             <li><a href="result.html">Result</a></li>
+
                             <li><a href="Result.html">Result</a></li>
                             <li><a href="proofofconcept.html">Proof of concept</a></li>
+
                             <li><a href="proof of concept.html">Proof of concept</a></li>
 
                         </ul>
 
                         </ul>
 
                     </li>
 
                     </li>
Line 34: Line 52:
 
                         <a>PARTS <span class="caret"></span></a>
 
                         <a>PARTS <span class="caret"></span></a>
 
                         <ul>
 
                         <ul>
                            <li><a href="design.html">Design</a></li>
+
                         
 
                             <li><a href="parts.html">Parts</a></li>
 
                             <li><a href="parts.html">Parts</a></li>
                             <li><a href="basicpart.html">Basic Part</a></li>
+
                             <li><a href="basic parts.html">Basic Parts</a></li>
                             <li><a href="compositepart.html">Composite Part</a></li>
+
                             <li><a href="compopsite parts.html">Composite Parts</a></li>
 
                         </ul>
 
                         </ul>
 
                     </li>
 
                     </li>
 +
<li><a href="design.html">Design</a></li>
 
                     <li><a href="modeling.html">MODELING</a></li>
 
                     <li><a href="modeling.html">MODELING</a></li>
 
                     <li><a href="safety.html">SAFETY</a></li>
 
                     <li><a href="safety.html">SAFETY</a></li>
                     <li><a href="humanpractice.html">HUMAN PRACTICE</a></li>
+
                     <li class="dropdown">
 +
<a>HUMAN PRACTICE <span class="caret"></span></a>
 +
<ul>
 +
                            <li><a href="silver.html">Silver</a></li>
 +
                            <li><a href="gold.html">Gold</a></li>
 +
                            <li><a href="integrated.html">Integrated</a></li>
 +
                         
 +
                    </ul>
 
                     <li><a href="attributions.html">ATTRIBUTIONS</a></li>
 
                     <li><a href="attributions.html">ATTRIBUTIONS</a></li>
                     <li><a href="medalcriteria.html">MEDAL CRITERIA</a></li>
+
                     <li><a href="medal criteria.html">MEDAL CRITERIA</a></li>
 +
                   
 
                 </ul>
 
                 </ul>
            </nav>
+
 
<div class="thumb1"></div>
+
                    <!-- /.nav -->
<div class="stage">
+
                 </div>
            <div class="cubespinner">
+
                 <!-- /.navbar-collapse -->
                <div class="face1"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div>
+
                <div class="face2"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div>
+
                 <div class="face3"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div>
+
                 <div class="face4"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div>
+
                <div class="face5"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div>
+
                <div class="face6"><img id="loading" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="logo"></div>
+
 
             </div>
 
             </div>
        </div>
+
            <!-- /.container -->
         </div>
+
         </nav>
    </header>
+
        <div id="globalWrapper">
+
 
         <div class="container">
 
         <div class="container">
             <div class="allcontain" style="position: relative;margin-bottom: 30px">
+
             <div class="header-table">
                 <div class="afcmslider-holder">
+
                 <div class="header-wrapper">
                     <div id="afcmslides">
+
                     <!--<h1 class="header-title">
                    <button class="afcmcontrols" id="afcmcontrols-left">&#10094;</i></button>
+
TEAM AFCM
                    <button class="afcmcontrols" id="afcmcontrols-right">&#10095;</i></button>
+
</h1>  
                        <img id="i1" class="afcmslide afcmshowing" src="https://static.igem.org/mediawiki/2017/1/11/AFCM-Egypt-home2.jpeg" style="width:100%">
+
<p class="header-subtitle">
                        <img id="i2" class="afcmslide" src="https://static.igem.org/mediawiki/2017/5/58/AFCM-Egypt-home3.jpeg" style="width:100%">
+
since ****
                        <img id="i3" class="afcmslide" src="https://static.igem.org/mediawiki/2017/3/39/AFCM-Egypt-home4.jpeg" alt="Third Slide" style="width:100%">
+
</p>-->
                    </div>
+
                    <div id="sdots" class="text-center" style="width:85%;position:absolute">
+
                        <span class="adots dots" id="1" onclick="goToSlide(0)"></span>
+
                        <span class="dots" id="2" onclick="goToSlide(1)"></span>
+
                        <span class="dots" id="3" onclick="goToSlide(2)"></span>
+
                    </div>
+
 
                 </div>
 
                 </div>
 +
                <!-- /.header-wrapper -->
 
             </div>
 
             </div>
 +
        </div>
 +
<!---intro--->
 +
 +
 +
        <!-- /.container -->
 +
    </section>
 +
    <!-- /#header -->
 +
<div class="twitter-feed purple" style="margin-bottom:50vh;background-color: rgba(0, 0, 0, 0.4);">
 +
        <div class="container section-wrapper">
 +
            <h3 class='text-center' style='margin-bottom:30px'>Abstract</h3>
 +
                <h3>Knock-in of Circular RNA gene in Hepatocellular Carcinoma cells via CRISPR/Cas9</h4>
 
              
 
              
 +
            <div>
 +
<p style='text-align: justify;font-size:18px'>
 +
Hepatocellular Carcinoma (HCC) is the leading cause of cancer deaths worldwide & ranked first among cancers
 +
in males and next to breast cancer among females in Egypt - based upon results of National Cancer Registry Program of Egypt-.
 +
"Grabbing the problem from the roots" is the best way to decently describe the use of CRISPR, a special gene editing technique
 +
that we will be using to modulate a certain circRNA and adjust its gene expression, which is down-regulated in hepatocellular carcinoma.
 +
This in consequence modifies miRNA expression thus amending the mRNA gene expression; which is the visible problem in our trials.
 +
This will lead us to adopt a novel strategy for miRNA suppression by using circRNAs. This is accomplished by utilizing a synthetic circuit to give rise to a springboard in our battle against cancer.
 +
</p>
 +
</div>
 +
        </div>
 +
        <!-- /.container -->
 +
    </div>
 +
<div class="twitter-feed purple" style="margin-bottom:50vh;background-color: rgba(0, 0, 0, 0.4);">
 +
        <div class="container section-wrapper">
 +
<div class='col-md-3'></div>
 +
<div class='col-md-6 text-center'>
 +
<h2 class='text-center' style='margin-bottom:30px'>AFCM-Egypt</h3>
 +
<h3 class='text-center'> We strive to excel</h4>
 +
<a class='btn btn-sub text-center' href='http://www.afcm.ac.eg' target='_blank'>click here</a>
 +
</div>
 +
<div class='col-md-3'><img src="assets/images/afcmlogo.png" alt="logo" style='width: 50%;float: right'></div>
 
              
 
              
             <div class="row" style="background-color: #dbcaf7;border-radius:6px;margin-bottom:20px">
+
                <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 10px 30px 10px 30px;">
+
              
                    <h2>Heading</h2>
+
           
                    <p style="text-align: justify;">
+
        </div>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
        <!-- /.container -->
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
    </div>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
    <!-- site information  -->
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
    <section class="section-wrapper add container">
                        Donec id elit non mi porta gravida at eget metus.
+
<div class="owl-carousel add-owl">
                        <br />
+
<div class="item">
                        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
<img src="assets/images/add-1.png" alt="add" class="add-item">
                    </p>
+
</div> <!-- /.item -->
                </div>
+
<div class="item">
                <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 10px 30px 10px 30px;">
+
<img src="assets/images/add-2.png" alt="add" class="add-item">
                    <h2>Heading</h2>
+
</div> <!-- /.item -->
                    <p style="text-align: justify;">
+
<div class="item">
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
<img src="assets/images/add-3.png" alt="add" class="add-item">
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
</div> <!-- /.item -->
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
<div class="item">
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
<img src="assets/images/add-4.png" alt="add" class="add-item">
                        Donec id elit non mi porta gravida at eget metus.
+
</div> <!-- /.item -->
                        <br />
+
<div class="item">
                        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
<img src="assets/images/add-1.png" alt="add" class="add-item">
                    </p>
+
</div> <!-- /.item -->
                </div>
+
<div class="item">
            </div>
+
<img src="assets/images/add-2.png" alt="add" class="add-item">
            <div class="allcontain" style="margin-bottom:30px">
+
</div> <!-- /.item -->
                <div class="feturedimage">
+
<div class="item">
                    <div class="row firstrow" style="margin-left:160px">
+
<img src="assets/images/add-3.png" alt="add" class="add-item">
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
+
</div> <!-- /.item -->
                            <div class="hovereffect">
+
<div class="item">
                                <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
<img src="assets/images/add-4.png" alt="add" class="add-item">
                                <div class="overlay">
+
</div> <!-- /.item -->
                                    <h2>Hover effect 2</h2>
+
</div> <!-- /.owl-carousel -->
                                    <a class="info" href="#">link here</a>
+
</section>
                                </div>
+
    <!-- /.twitter-feed -->
                            </div>
+
 
                        </div>
+
    <!-- Footer -->
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
+
    <footer>
                            <div class="hovereffects">
+
        <div class="container">
                                <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
            <div class="row">
                                <div class="overlay">
+
                <div class="col-sm-4">
                                    <h2>Hover effect 5</h2>
+
                    <div class="copy">
                                    <a class="info" href="#">link here</a>
+
                        Copyright &copy; 2017 AFCM Egypt
                                </div>
+
                            </div>
+
                        </div>
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
+
                            <div class="hovereffectx">
+
                                <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                <div class="overlay">
+
                                    <h2>Effect 13</h2>
+
                                    <p>
+
                                        <a href="#">LINK HERE</a>
+
                                    </p>
+
                                </div>
+
                            </div>
+
                        </div>
+
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
            </div>
+
                 <div class="col-sm-4 text-center">
            <div class="row" style="border: 1px solid #b091e0;background-color: #efe8fb;border-radius:6px;margin-bottom:20px">
+
                     <div class="social-icon">
                 <div class="col-lg-12 col-md-12 col-sm-12" style="box-shadow: 1px -2px 8px 3px #33354e;padding: 10px 30px 10px 30px;">
+
                         <a href="www.facebook.com">
                    <h2 style="text-decoration: underline;">Heading</h2>
+
                             <div class="icon fb">
                     <p style="text-align: justify;">
+
                                 <i class="ion-social-facebook"></i>
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus.
+
                        <br />
+
                        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus.
+
                        <br />
+
                        <hr />
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
                        Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                        Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
+
                    </p>
+
                </div>
+
            </div>
+
            <div class="allcontain">
+
                <div class="feturedimage">
+
                    <div class="row firstrow">
+
                         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                             <div class="cube-container">
+
                                 <div class="photo-cube">
+
                                    <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <div class="back photo-desc">
+
                                        <h3>test</h3>
+
                                        <p>description</p>
+
                                    </div>
+
                                    <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                </div>
+
 
                             </div>
 
                             </div>
                         </div>
+
                         </a>
                         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                         <a href="www.twitter.com">
                             <div class="cube-container">
+
                             <div class="icon twitter">
                                 <div class="photo-cube">
+
                                 <i class="ion-social-twitter"></i>
                                    <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <div class="back photo-desc">
+
                                        <h3>test</h3>
+
                                        <p>description</p>
+
                                    </div>
+
                                    <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                </div>
+
 
                             </div>
 
                             </div>
                         </div>
+
                         </a>
                         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                         <a href="#">
                             <div class="cube-container">
+
                             <div class="icon google">
                                 <div class="photo-cube">
+
                                 <i class="ion-social-googleplus"></i>
                                    <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <div class="back photo-desc">
+
                                        <h3>test</h3>
+
                                        <p>description</p>
+
                                    </div>
+
                                    <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                </div>
+
 
                             </div>
 
                             </div>
                         </div>
+
                         </a>
                         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                         <a href="#">
                             <div class="cube-container">
+
                             <div class="icon rss">
                                 <div class="photo-cube">
+
                                 <i class="ion-social-rss"></i>
                                    <img class="front" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <div class="back photo-desc">
+
                                        <h3>test</h3>
+
                                        <p>description</p>
+
                                    </div>
+
                                    <img class="left" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                    <img class="right" src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" alt="">
+
                                </div>
+
 
                             </div>
 
                             </div>
                         </div>
+
                         </a>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
            </div>
+
                 <div class="col-sm-4 text-right">
            <div class="allcontain">
+
                     <!--<div class="copy">
                 <div class="feturedimage">
+
Theme by <a href="http://www.themewagon.com">themewagon.com</a>. All Rights Reserved
                    <div class="row firstrow">
+
</div> -->
                        <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12 center">
+
                            <video width="420" height="340" controls style="border:1px solid #000">
+
                                <source src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" type="video/ogg">
+
                                <source src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" type="video/mp4">
+
                            </video>
+
                        </div>
+
                    </div>
+
                </div>
+
            </div>
+
            <div class="row" style="background-color: #b091e0;border-radius:6px;margin-bottom:20px">
+
                <div class="col-lg-4 col-md-4" style="width:28%;background-color: #f5f2f2;margin: 20px;padding: 20px;box-shadow: 1px -2px 8px 3px #33354e;">
+
                    <h2>Heading</h2>
+
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+
                    <p>
+
                        <div class="svg-wrapper">
+
                            <svg height="40" width="150">
+
                                <rect id="shape" height="40" width="150"></rect>
+
                            </svg><div id="text">
+
                                <a href=""><span class="spot"></span>Button 1</a>
+
                            </div>
+
                        </div>
+
                    </p>
+
                </div>
+
                <div class="col-lg-4 col-md-4" style="width:28%;background-color: #e1e9ff;margin: 20px;padding: 20px;box-shadow: 1px -2px 8px 3px #33354e;">
+
                     <h2>Heading</h2>
+
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+
                    <p>
+
                        <div class="svg-wrapper">
+
                            <svg height="40" width="150">
+
                                <rect id="shape" height="40" width="150"></rect>
+
                            </svg><div id="text">
+
                                <a href=""><span class="spot"></span>Button 1</a>
+
                            </div>
+
                        </div>
+
                    </p>
+
                </div>
+
                <div class="col-lg-4 col-md-4" style="width:28%;background-color: #ddd;margin: 20px;padding: 20px;box-shadow: 1px -2px 8px 3px #33354e;">
+
                    <h2>Heading</h2>
+
                    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
+
                    <p>
+
                        <div class="svg-wrapper">
+
                            <svg height="40" width="150">
+
                                <rect id="shape" height="40" width="150"></rect>
+
                            </svg><div id="text">
+
                                <a href=""><span class="spot"></span>Button 1</a>
+
                            </div>
+
                        </div>
+
                    </p>
+
                </div>
+
            </div>
+
            <div class="row">
+
                <div class="col-lg-8 col-md-8 col-centered text-center">
+
                    <hr style="margin-bottom:0px"/>
+
                    <h3 style="color: #05526c;font-weight: bolder;margin:0px">OUR SPONSORS</h3>
+
                    <hr style="margin-top:0px" />
+
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
+
                        <img src="https://static.igem.org/mediawiki/2017/b/bd/3-AFCM-Egypt-sponsers-Pharco_Logo.png" alt="logo">
+
                    </div>
+
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
+
                      <img src="https://static.igem.org/mediawiki/2017/b/b4/8-AFCM-Egypt-sponsers-Zewail_logo.png" alt="logo">
+
                    </div>
+
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
+
                        <img src="https://static.igem.org/mediawiki/2017/e/eb/6-AFCM-Egypt-sponsers-SimEra.png" alt="logo">
+
                    </div>
+
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
+
                        <img src="https://static.igem.org/mediawiki/2017/3/3b/4-AFCM-Egypt-sponsers-Nationel_Research.png" alt="logo">
+
                    </div>
+
                </div>
+
            </div>
+
            <br />
+
            <div class="row">
+
                <div class="col-lg-10 col-md-10 col-centered">
+
                        <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12" style="margin-right: 30px;">
+
                            <img src="https://static.igem.org/mediawiki/2017/3/37/5-AFCM-Egypt-sponsers-IDT.png" style="height:150px">
+
                        </div>
+
                        <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12" style="margin-right: 30px;">
+
                            <img src="https://static.igem.org/mediawiki/2017/f/f1/1-AFCM-Egypt-sponsers-vitabiotics.png" style="height:150px">
+
                        </div>
+
                        <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12" style="margin-right: 30px;">
+
                            <img src="https://static.igem.org/mediawiki/2017/b/bb/2-AFCM-Egypt-sponsers-EFIA_LOGO.png" style="height:150px">
+
                        </div>
+
                        <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12" style="margin-right: 30px;">
+
                            <img src="https://static.igem.org/mediawiki/2017/6/67/7-AFCM-Egypt-sponsers-Image-2.jpeg" style="height:150px">
+
                        </div>
+
                        <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
+
                            <img src="https://static.igem.org/mediawiki/2017/6/60/9-AFCM-Egypt-sponsers-Benchling.png" style="height:150px">
+
                        </div>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
            <!-- /.row -->
 
         </div>
 
         </div>
         <button onclick="topFunction()" id="myBtn" title="Go to top">&#128070;</button>
+
         <!-- /.container -->
        <footer class="footer-distributed">
+
    </footer>
            <div class="footer-left">
+
                <h3><img src="https://static.igem.org/mediawiki/2017/8/80/AFCM-Egypt-logopng.png" style="max-height:70px;max-width:70px"></h3>
+
                <p class="footer-links">
+
                    <a href="#">Home</a>
+
                    ·
+
                    <a href="#">Blog</a>
+
                    ·
+
                    <a href="#">About</a>
+
                    ·
+
                    <a href="#">Contact</a>
+
                </p>
+
 
+
                <p class="footer-company-name">Team © 2017</p>
+
            </div>
+
            <div class="footer-center">
+
                <div>
+
                    <i class="fa fa-map-marker"></i>
+
                    <p><span>Ehsan Abd El Kodous Street</span> Cairo, Egypt</p>
+
                </div>
+
                <div>
+
                    <i class="fa fa-phone"></i>
+
                    <p>01000000000</p>
+
                </div>
+
 
+
                <div>
+
                    <i class="fa fa-envelope"></i>
+
                    <p><a href="Igem.afcm@gmail.com" target="_blank">Igem.afcm@gmail.com</a></p>
+
                </div>
+
            </div>
+
            <div class="footer-right">
+
                <p class="footer-company-about">
+
                    <span>About the us</span>
+
                    AFCM afcm test afcm TEST AFCM afcm test afcm TESTAFCM afcm test afcm TEST
+
                    AFCM afcm test afcm TEST AFCM afcm test afcm TESTAFCM afcm test afcm TEST
+
                </p>
+
                <div class="footer-icons">
+
                <a href="https://www.facebook.com/igem.egy" target="_blank" style="background-color: #3b5998;margin-right: 15px;;padding: 0px;"><i class="fa fa-facebook"></i></a>   
+
                    <a href="https://insta724.com/profile/afcmigem" style="padding"><i class="fa fa-instagram" aria-hidden="true"></i></a>
+
                </div>
+
            </div>
+
        </footer>
+
    </div>
+
        <script type="text/javascript">
+
        var slides = document.querySelectorAll('#afcmslides .afcmslide');
+
        var xdots = document.querySelectorAll('#sdots .dots');
+
        var currentSlide = 0;
+
        var slideInterval = setInterval(nextSlide, 5000);
+
        var controls = document.querySelectorAll('.afcmcontrols');
+
        var playing = true;
+
        var pauseButton = document.getElementById('afcmslides');
+
        var next = document.getElementById('afcmcontrols-left');
+
        var previous = document.getElementById('afcmcontrols-right');
+
        for (var i = 0; i < slides.length; i++) {
+
            slides[i].style.position = 'absolute';
+
        }
+
        for (var i = 0; i < controls.length; i++) {
+
            controls[i].style.display = 'inline-block';
+
        }
+
        function nextSlide() {
+
            goToSlide(currentSlide + 1);
+
        }
+
        function previousSlide() {
+
            goToSlide(currentSlide - 1);
+
        }
+
        function goToSlide(n) {
+
            if (playing) {
+
                slides[currentSlide].className = 'afcmslide';
+
                xdots[currentSlide].className = 'dots';
+
                currentSlide = (n + slides.length) % slides.length;
+
                //slides[currentSlide].className = 'afcmslide afcmshowing';
+
                $(slides[currentSlide]).css({ opacity: 0.0 }, "slow")
+
                .addClass('afcmshowing')
+
                .animate({
+
                    opacity: 1.0
+
                }, "slow", function () {
+
                    $(slides[currentSlide]).removeClass('active');
+
                });
+
                xdots[currentSlide].className = 'adots dots';
+
            }
+
        }
+
        $('.afcmslide').click(function () {
+
            if (playing) {
+
                pauseSlideshow();
+
            } else {
+
                playSlideshow();
+
            }
+
           
+
        })
+
        function pauseSlideshow() {
+
            playing = false;
+
            clearInterval(slideInterval);
+
        }
+
        function playSlideshow() {
+
            playing = true;
+
            slideInterval = setInterval(nextSlide, 3000);
+
        }
+
        next.onclick = function () {
+
            playing = true;
+
            nextSlide();
+
            pauseSlideshow();
+
        };
+
        previous.onclick = function () {
+
            playing = true;
+
            previousSlide();
+
            pauseSlideshow();
+
        };
+
        window.onscroll = function () { scrollFunction() };
+
        function scrollFunction() {
+
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+
                document.getElementById("myBtn").style.display = "block";
+
            } else {
+
                document.getElementById("myBtn").style.display = "none";
+
            }
+
        }
+
        function topFunction() {
+
            document.body.scrollTop = 0;
+
            document.documentElement.scrollTop = 0;
+
        }
+
        window.smoothScroll = function (target) {
+
            var scrollContainer = target;
+
            do { //find scroll container
+
                scrollContainer = scrollContainer.parentNode;
+
                if (!scrollContainer) return;
+
                scrollContainer.scrollTop += 1;
+
            } while (scrollContainer.scrollTop == 0);
+
 
+
            var targetY = 0;
+
            do { //find the top of target relatively to the container
+
                if (target == scrollContainer) break;
+
                targetY += target.offsetTop;
+
            } while (target = target.offsetParent);
+
  
            scroll = function (c, a, b, i) {
 
                i++; if (i > 30) return;
 
                c.scrollTop = a + (b - a) / 30 * i;
 
                setTimeout(function () { scroll(c, a, b, i); }, 20);
 
            }
 
            // start scrolling
 
            scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
 
        }
 
    </script>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:07, 16 October 2017

A F C M

Copyright © 2017 AFCM Egypt