Difference between revisions of "Team:AFCM-Egypt"

Line 1: Line 1:
 
{{Template:AFCM-Egypt/header}}
 
{{Template:AFCM-Egypt/header}}
−
 
 
<html>
 
<html>
 
<head>
 
<head>
Line 9: Line 8:
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
<style>
+
    <link rel="icon" href="asset/image/logo.ico">
−
#sideMenu{
+
     <link rel="stylesheet" type="text/css" href="asset/style.css">
−
display:none
+
</head>
−
}
+
−
#top_title{display:none}
+
−
#content {
+
−
     width: 100%;
+
−
    padding: 15px;
+
−
    border: none;
+
−
    color: black;
+
−
    margin-left: 20px;
+
−
    margin-right: auto;
+
−
    background-color: rgba(0, 0, 0, .075);
+
−
    position: relative;
+
−
}
+
−
</style>
+
−
  </head>
+
 
<body>
 
<body>
−
     <header class="navbar-fixed-top header-two-bars">
+
     <div id="globalWrapper">
−
        <div class="header-first-bar">
+
        <header class="navbar-fixed-top header-two-bars">
−
            <div class="header-limiter">
+
            <div class="header-first-bar">
−
                <h1><img src="https://static.igem.org/mediawiki/2017/3/32/AFCM-Egypt-logo.jpeg" style="max-height:70px;max-width:70px;border: 1px solid #fff;border-radius: 50px;background-color: #fff;box-shadow: 2px -1px 9px 9px #f5f2f2;" alt="logo"></h1>
+
                <div class="header-limiter">
−
                <h1 style="margin-left: 5%;padding-top: 15px;text-shadow: 3px 6px 3px black;font-weight: bolder;">AFCM TEAM</h1>
+
                    <h1><img src="asset/image/logo.png" style="max-height:70px;max-width:70px;border: 1px solid #fff;border-radius: 50px;background-color: #fff;box-shadow: 2px -1px 9px 9px #f5f2f2;" alt="logo"></h1>
 +
                    <h1 style="margin-left: 5%;padding-top: 15px;text-shadow: 3px 6px 3px black;font-weight: bolder;">AFCM TEAM</h1>
 +
                </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="header-second-bar">
−
        <div class="header-second-bar">
+
                <div class="header-limiter">
−
            <div class="header-limiter">
+
                    <div class="collapse navbar-collapse">
−
                <div class="collapse navbar-collapse">
+
                        <ul id="menu">
−
                    <ul id="menu">
+
                            <li class="active"><a href="home.html">HOME</a> </li>
−
                        <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="meettheteam.html">Meat 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>
+
                                <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="description.html">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="proofofconcept.html">Proof of concept</a></li>
+
                                </ul>
−
                            </ul>
+
                            </li>
−
                        </li>
+
                            <li class="dropdown">
−
                        <li class="dropdown">
+
                                <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="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="basicpart.html">Basic Part</a></li>
+
                                    <li><a href="compositepart.html">Composite Part</a></li>
−
                                <li><a href="compositepart.html">Composite Part</a></li>
+
                                </ul>
−
                            </ul>
+
                            </li>
−
                        </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><a href="humanpractice.html">HUMAN PRACTICE</a></li>
+
                            <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="medalcriteria.html">MEDAL CRITERIA</a></li>
+
                        </ul>
−
                    </ul>
+
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
         </div>
+
         </header>
−
    </header>
+
        <div class="container">
−
    <div class="container">
+
            <div class="allcontain" style="position: relative;margin-bottom: 20px">
−
        <div class="allcontain" style="margin-bottom: 20px;">
+
                 <div class="afcmslider-holder">
−
            <div class="feturedimage">
+
                     <div id="afcmslides">
−
                 <div class="row firstrow">
+
                         <img class="afcmslide afcmshowing" src="asset/image/doc3.jpg" alt="First Slide" style="width:100%">
−
                     <div id="myCarousel" class="carousel slide  center" data-ride="carousel" style="box-shadow: 2px 0px 6px 4px #31402f;">
+
                         <img class="afcmslide" src="asset/image/doc2.jpg" alt="Second Slide" style="width:100%">
−
                         <ol class="carousel-indicators">
+
                        <img class="afcmslide" src="asset/image/doc2.jpg" alt="Third Slide" style="width:100%">
−
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
                        <img class="afcmslide" src="asset/image/test.jpg" alt="Fourth Slide" style="width:100%">
−
                            <li data-target="#myCarousel" data-slide-to="1"></li>
+
−
                            <li data-target="#myCarousel" data-slide-to="2"></li>
+
−
                           
+
−
                         </ol>
+
−
                        <div class="carousel-inner">
+
−
                            <div class="item active">
+
−
                                <img src="https://static.igem.org/mediawiki/2017/1/11/AFCM-Egypt-home2.jpeg" alt="First Slide"style="width:100%">
+
−
                            </div>
+
−
                            <div class="item">
+
−
                                <img src="https://static.igem.org/mediawiki/2017/5/58/AFCM-Egypt-home3.jpeg" alt="First Slide"style="width:100%">
+
−
                            </div>
+
−
                            <div class="item">
+
−
                                <img src="https://static.igem.org/mediawiki/2017/5/58/AFCM-Egypt-home3.jpeg" alt="First Slide"style="width:100%">
+
−
                            </div>
+
−
                           
+
−
                        </div>
+
 
                     </div>
 
                     </div>
 +
                    <button class="afcmcontrols" id="afcmcontrols-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
 +
                    <button class="afcmcontrols" id="afcmcontrols-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="allcontain">
−
        <div class="allcontain">
+
                <div class="feturedimage">
−
            <div class="feturedimage">
+
                    <div class="row firstrow">
−
                <div class="row firstrow">
+
                        <div class="jumbotron" style="background-color:#563d7c;color:#fff">
−
                    <div class="jumbotron" style="background-color:#563d7c;color:#fff">
+
                            <h1>Navbar example</h1>
−
                        <h1>Navbar example</h1>
+
                            <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
−
                        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+
                            <p>
−
                        <p>
+
                                <div class="svg-wrapper">
−
                            <div class="svg-wrapper">
+
                                    <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
−
                                <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
+
                                        <rect id="shape" height="40" width="150"></rect>
−
                                    <rect id="shape" height="40" width="150"></rect>
+
                                    </svg><div id="text">
−
                                </svg><div id="text">
+
                                        <a href=""><span class="spot"></span>Button 1</a>
−
                                    <a href=""><span class="spot"></span>Button 1</a>
+
                                    </div>
 
                                 </div>
 
                                 </div>
−
                             </div>
+
                             </p>
−
                         </p>
+
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="allcontain">
−
        <div class="allcontain">
+
                <div class="feturedimage">
−
            <div class="feturedimage">
+
                    <div class="row firstrow">
−
                <div class="row firstrow">
+
                        <div class="col-lg-12" id="xcarousel">
−
                    <div class="col-lg-12" id="carousel">
+
                            <div class="hideLeft">
−
                        <div class="hideLeft">
+
                                <img class="img-responsive" src="asset/image/gene.png" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
−
                        </div>
+
                            <div class="prevLeftSecond">
−
                        <div class="prevLeftSecond">
+
                                <img class="img-responsive" src="asset/image/test.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
−
                        </div>
+
                            <div class="prev">
−
                        <div class="prev">
+
                                <img class="img-responsive" src="asset/image/doc2.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
−
                        </div>
+
                            <div class="selected">
−
                        <div class="selected">
+
                                <img class="img-responsive" src="asset/image/gene.png" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
−
                        </div>
+
                            <div class="next">
−
                        <div class="next">
+
                                <img class="img-responsive" src="asset/image/doc3.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
−
                        </div>
+
                            <div class="nextRightSecond">
−
                        <div class="nextRightSecond">
+
                                <img class="img-responsive" src="asset/image/test.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
−
                        </div>
+
                            <div class="hideRight">
−
                        <div class="hideRight">
+
                                <img class="img-responsive" src="asset/image/doc2.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="row" style="background-color: #dbcaf7;border-radius:6px;margin-bottom:20px">
−
        <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;">
−
            <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 10px 30px 10px 30px;">
+
                    <h2>Heading</h2>
−
                <h2>Heading</h2>
+
                    <p style="text-align: justify;">
−
                <p style="text-align: justify;">
+
                        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. 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.
−
                    Donec id elit non mi porta gravida at eget metus.
+
                        <br />
−
                    <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.
−
                    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>
 +
                <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;">
 +
                        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.
 +
                    </p>
 +
                </div>
 
             </div>
 
             </div>
−
             <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 10px 30px 10px 30px;">
+
             <div class="allcontain" style="margin-bottom:30px">
−
                <h2>Heading</h2>
+
                <div class="feturedimage">
−
                <p style="text-align: justify;">
+
                    <div class="row firstrow" style="margin-left:160px">
−
                    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="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
−
                    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="hovereffect">
−
                    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 class="img-responsive" src="asset/image/test.jpg" alt="">
−
                    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="overlay">
−
                    Donec id elit non mi porta gravida at eget metus.
+
                                    <h2>Hover effect 2</h2>
−
                    <br />
+
                                    <a class="info" href="#">link here</a>
−
                    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>
−
                </p>
+
−
            </div>
+
−
        </div>
+
−
        <div class="allcontain" style="margin-bottom:30px">
+
−
            <div class="feturedimage">
+
−
                <div class="row firstrow" style="margin-left:160px">
+
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
+
−
                        <div class="hovereffect">
+
−
                            <img class="img-responsive" src="image/test.jpg" alt="">
+
−
                            <div class="overlay">
+
−
                                <h2>Hover effect 2</h2>
+
−
                                <a class="info" href="#">link here</a>
+
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                    </div>
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
+
                            <div class="hovereffects">
−
                        <div class="hovereffects">
+
                                <img class="img-responsive" src="asset/image/doc2.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                                <div class="overlay">
−
                            <div class="overlay">
+
                                    <h2>Hover effect 5</h2>
−
                                <h2>Hover effect 5</h2>
+
                                    <a class="info" href="#">link here</a>
−
                                <a class="info" href="#">link here</a>
+
                                </div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                    </div>
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-right:50px">
+
                            <div class="hovereffectx">
−
                        <div class="hovereffectx">
+
                                <img class="img-responsive" src="asset/image/doc3.jpg" alt="">
−
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                                <div class="overlay">
−
                            <div class="overlay">
+
                                    <h2>Effect 13</h2>
−
                                <h2>Effect 13</h2>
+
                                    <p>
−
                                <p>
+
                                        <a href="#">LINK HERE</a>
−
                                    <a href="#">LINK HERE</a>
+
                                    </p>
−
                                </p>
+
                                </div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 209: Line 182:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="row" style="border: 1px solid #b091e0;background-color: #efe8fb;border-radius:6px;margin-bottom:20px">
−
        <div class="row" style="border: 1px solid #b091e0;background-color: #efe8fb;border-radius:6px;margin-bottom:20px">
+
                <div class="col-lg-12 col-md-12 col-sm-12" style="box-shadow: 1px -2px 8px 3px #33354e;padding: 10px 30px 10px 30px;">
−
            <div class="col-lg-12 col-md-12 col-sm-12" style="box-shadow: 1px -2px 8px 3px #33354e;padding: 10px 30px 10px 30px;">
+
                    <h2 style="text-decoration: underline;">Heading</h2>
−
                <h2 style="text-decoration: underline;">Heading</h2>
+
                    <p style="text-align: justify;">
−
                <p style="text-align: justify;">
+
                        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. 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.
−
                    Donec id elit non mi porta gravida at eget metus.
+
                        <br />
−
                    <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.
−
                    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. 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.
−
                    Donec id elit non mi porta gravida at eget metus.
+
                        <br />
−
                    <br />
+
                        <hr />
−
                    <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.
−
                    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.
−
                    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.
+
                    </p>
−
                </p>
+
                </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="allcontain">
−
        <div class="allcontain">
+
                <div class="feturedimage">
−
            <div class="feturedimage">
+
                    <div class="row firstrow">
−
                <div class="row firstrow">
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                            <div class="cube-container">
−
                        <div class="cube-container">
+
                                <div class="photo-cube">
−
                            <div class="photo-cube">
+
                                    <img class="front" src="asset/image/test.jpg" alt="">
−
                                <img class="front" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                                    <div class="back photo-desc">
−
                                <div class="back photo-desc">
+
                                        <h3>test</h3>
−
                                    <h3>test</h3>
+
                                        <p>description</p>
−
                                    <p>description</p>
+
                                    </div>
 +
                                    <img class="left" src="asset/image/test.jpg" alt="">
 +
                                    <img class="right" src="asset/image/doc3.jpg" alt="">
 
                                 </div>
 
                                 </div>
−
                                <img class="left" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
−
                                <img class="right" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                    </div>
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                            <div class="cube-container">
−
                        <div class="cube-container">
+
                                <div class="photo-cube">
−
                            <div class="photo-cube">
+
                                    <img class="front" src="asset/image/doc3.jpg" alt="">
−
                                <img class="front" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                                    <div class="back photo-desc">
−
                                <div class="back photo-desc">
+
                                        <h3>test</h3>
−
                                    <h3>test</h3>
+
                                        <p>description</p>
−
                                    <p>description</p>
+
                                    </div>
 +
                                    <img class="left" src="asset/image/test.jpg" alt="">
 +
                                    <img class="right" src="asset/image/doc2.jpg" alt="">
 
                                 </div>
 
                                 </div>
−
                                <img class="left" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
−
                                <img class="right" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                    </div>
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                            <div class="cube-container">
−
                        <div class="cube-container">
+
                                <div class="photo-cube">
−
                            <div class="photo-cube">
+
                                    <img class="front" src="asset/image/test.jpg" alt="">
−
                                <img class="front" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                                    <div class="back photo-desc">
−
                                <div class="back photo-desc">
+
                                        <h3>test</h3>
−
                                    <h3>test</h3>
+
                                        <p>description</p>
−
                                    <p>description</p>
+
                                    </div>
 +
                                    <img class="left" src="asset/image/doc3.jpg" alt="">
 +
                                    <img class="right" src="asset/image/test.jpg" alt="">
 
                                 </div>
 
                                 </div>
−
                                <img class="left" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
−
                                <img class="right" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
−
                    </div>
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
                            <div class="cube-container">
−
                        <div class="cube-container">
+
                                <div class="photo-cube">
−
                            <div class="photo-cube">
+
                                    <img class="front" src="asset/image/doc3.jpg" alt="">
−
                                <img class="front" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
+
                                    <div class="back photo-desc">
−
                                <div class="back photo-desc">
+
                                        <h3>test</h3>
−
                                    <h3>test</h3>
+
                                        <p>description</p>
−
                                    <p>description</p>
+
                                    </div>
 +
                                    <img class="left" src="asset/image/test.jpg" alt="">
 +
                                    <img class="right" src="asset/image/test.jpg" alt="">
 
                                 </div>
 
                                 </div>
−
                                <img class="left" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
−
                                <img class="right" src="https://static.igem.org/mediawiki/2017/3/34/AFCM-Egypt-home1.jpeg" alt="">
 
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 290: Line 263:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="allcontain">
−
        <div class="allcontain">
+
                <div class="feturedimage">
−
            <div class="feturedimage">
+
                    <div class="row firstrow">
−
                <div class="row firstrow">
+
                        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 center">
−
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 center">
+
                            <video width="420" height="340" controls style="border:1px solid #000">
−
                        <video width="420" height="340" controls style="border:1px solid #000">
+
                                <source src="asset/video/movie.ogg" type="video/ogg">
−
                           
+
                                <source src="asset/video/movie.mp4" type="video/mp4">
−
                            <source src=https://static.igem.org/mediawiki/2017/5/58/AFCM-Egypt-CRISPR_Giffy.mp4" type="video/mp4">
+
                            </video>
−
                        </video>
+
                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="row" style="background-color: #b091e0;border-radius:6px;margin-bottom:20px">
−
        <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;">
−
            <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>
−
                <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>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>
−
                <p>
+
                        <div class="svg-wrapper">
−
                    <div class="svg-wrapper">
+
                            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
−
                        <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
+
                                <rect id="shape" height="40" width="150"></rect>
−
                            <rect id="shape" height="40" width="150"></rect>
+
                            </svg><div id="text">
−
                        </svg><div id="text">
+
                                <a href=""><span class="spot"></span>Button 1</a>
−
                            <a href=""><span class="spot"></span>Button 1</a>
+
                            </div>
 
                         </div>
 
                         </div>
−
                     </div>
+
                     </p>
−
                 </p>
+
                 </div>
−
            </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;">
−
            <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>
−
                <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>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>
−
                <p>
+
                        <div class="svg-wrapper">
−
                    <div class="svg-wrapper">
+
                            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
−
                        <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
+
                                <rect id="shape" height="40" width="150"></rect>
−
                            <rect id="shape" height="40" width="150"></rect>
+
                            </svg><div id="text">
−
                        </svg><div id="text">
+
                                <a href=""><span class="spot"></span>Button 1</a>
−
                            <a href=""><span class="spot"></span>Button 1</a>
+
                            </div>
 
                         </div>
 
                         </div>
−
                     </div>
+
                     </p>
−
                 </p>
+
                 </div>
−
            </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;">
−
            <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>
−
                <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>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>
−
                <p>
+
                        <div class="svg-wrapper">
−
                    <div class="svg-wrapper">
+
                            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
−
                        <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
+
                                <rect id="shape" height="40" width="150"></rect>
−
                            <rect id="shape" height="40" width="150"></rect>
+
                            </svg><div id="text">
−
                        </svg><div id="text">
+
                                <a href=""><span class="spot"></span>Button 1</a>
−
                            <a href=""><span class="spot"></span>Button 1</a>
+
                            </div>
 
                         </div>
 
                         </div>
−
                     </div>
+
                     </p>
−
                 </p>
+
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
    </div>
+
        <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
−
    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
+
        <footer class="footer-distributed">
−
    <footer class="footer-distributed">
+
            <div class="footer-left">
−
 
+
                <h3><img src="asset/image/logo.png" style="max-height:70px;max-width:70px;border: 1px solid #fff;border-radius: 50px;background-color: #fff;box-shadow: 2px -1px 9px 9px #f5f2f2;" alt="logo"></h3>
−
        <div class="footer-left">
+
                <p class="footer-links">
−
 
+
                    <a href="#">Home</a>
−
            <h3><img src="https://static.igem.org/mediawiki/2017/3/32/AFCM-Egypt-logo.jpeg" style="max-height:70px;max-width:70px;border: 1px solid #fff;border-radius: 50px;background-color: #fff;box-shadow: 2px -1px 9px 9px #f5f2f2;" alt="logo"></h3>
+
                    ·
−
 
+
                    <a href="#">Blog</a>
−
            <p class="footer-links">
+
                    ·
−
                <a href="#">Home</a>
+
                    <a href="#">About</a>
−
                ·
+
                    ·
−
                <a href="#">Blog</a>
+
                    <a href="#">Contact</a>
−
                ·
+
                </p>
−
                <a href="#">About</a>
+
−
                ·
+
−
                <a href="#">Contact</a>
+
−
            </p>
+
−
 
+
−
            <p class="footer-company-name">Team © 2017</p>
+
−
        </div>
+
−
 
+
−
        <div class="footer-center">
+
  
−
            <div>
+
                 <p class="footer-company-name">Team © 2017</p>
−
                 <i class="fa fa-map-marker"></i>
+
−
                <p><span>Ehsan Abd El Kodous Street</span> Cairo, Egypt</p>
+
 
             </div>
 
             </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>
+
                <div>
−
                <i class="fa fa-phone"></i>
+
                    <i class="fa fa-envelope"></i>
−
                <p>01000000000</p>
+
                    <p><a href="tst@afcm.com">test@afcm.com</a></p>
 +
                </div>
 
             </div>
 
             </div>
−
 
+
             <div class="footer-right">
−
             <div>
+
                 <p class="footer-company-about">
−
                 <i class="fa fa-envelope"></i>
+
                    <span>About the us</span>
−
                <p><a href="tst@afcm.com">test@afcm.com</a></p>
+
                    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="#"><i class="fa fa-facebook"></i></a>
 +
                    <a href="#"><i class="fa fa-twitter"></i></a>
 +
                    <a href="#"><i class="fa fa-linkedin"></i></a>
 +
                </div>
 
             </div>
 
             </div>
 +
        </footer>
 +
    </div>
 +
    <script type="text/javascript">
 +
        var slides = document.querySelectorAll('#afcmslides .afcmslide');
 +
        var currentSlide = 0;
 +
        var slideInterval = setInterval(nextSlide, 2000);
 +
        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');
  
−
         </div>
+
         for (var i = 0; i < slides.length; i++) {
−
 
+
            slides[i].style.position = 'absolute';
−
         <div class="footer-right">
+
         }
−
 
+
        for (var i = 0; i < controls.length; i++) {
−
             <p class="footer-company-about">
+
            controls[i].style.display = 'inline-block';
−
                <span>About the us</span>
+
        }
−
                AFCM afcm test afcm TEST AFCM afcm test afcm TESTAFCM afcm test afcm TEST
+
        function nextSlide() {
−
                AFCM afcm test afcm TEST AFCM afcm test afcm TESTAFCM afcm test afcm TEST
+
             goToSlide(currentSlide + 1);
−
             </p>
+
        }
−
 
+
        function previousSlide() {
−
             <div class="footer-icons">
+
            goToSlide(currentSlide - 1);
−
 
+
        }
−
                <a href="#"><i class="fa fa-facebook"></i></a>
+
        function goToSlide(n) {
−
                <a href="#"><i class="fa fa-twitter"></i></a>
+
            slides[currentSlide].className = 'afcmslide';
−
                 <a href="#"><i class="fa fa-linkedin"></i></a>
+
             currentSlide = (n + slides.length) % slides.length;
−
             </div>
+
            slides[currentSlide].className = 'afcmslide afcmshowing';
−
 
+
        }
−
         </div>
+
        function pauseSlideshow() {
−
 
+
             playing = false;
−
    </footer>
+
            clearInterval(slideInterval);
−
    <script>
+
        }
−
                    window.onscroll = function () { scrollFunction() };
+
        function playSlideshow() {
−
 
+
            playing = true;
−
                    function scrollFunction() {
+
            slideInterval = setInterval(nextSlide, 2000);
−
                        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+
        }
−
                            document.getElementById("myBtn").style.display = "block";
+
        pauseButton.onclick = function () {
−
                        } else {
+
            if (playing) {
−
                            document.getElementById("myBtn").style.display = "none";
+
                 pauseSlideshow();
−
                        }
+
            } else {
−
                    }
+
                playSlideshow();
−
 
+
            }
−
                    // When the user clicks on the button, scroll to the top of the document
+
        };
−
                    function topFunction() {
+
        next.onclick = function () {
−
                        document.body.scrollTop = 0; // For Chrome, Safari and Opera
+
             pauseSlideshow();
−
                        document.documentElement.scrollTop = 0; // For IE and Firefox
+
            nextSlide();
−
                    }
+
         };
 +
        previous.onclick = function () {
 +
            pauseSlideshow();
 +
            previousSlide();
 +
        };
 +
        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;
 +
        }
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>
−
{{Template:AFCM-Egypt/jquery}}
 
−
{{Template:AFCM-Egypt/bootstrapjs}}
 
−
{{Template:AFCM-Egypt/index}}
 

Revision as of 14:00, 13 October 2017

A F C M

A F C M

logo

AFCM TEAM

First Slide Second Slide Third Slide Fourth Slide

Navbar example

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

Button 1

Heading

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.
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.

Heading

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.
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.

Hover effect 2

link here

Hover effect 5

link here

Effect 13

LINK HERE

Heading

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.
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.

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.

test

description

test

description

test

description

test

description

Heading

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.

Button 1

Heading

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.

Button 1

Heading

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.

Button 1

logo

Home · Blog · About · Contact

Team © 2017

Ehsan Abd El Kodous Street Cairo, Egypt

01000000000

About the us 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