Difference between revisions of "Team:AFCM-Egypt"

Line 10: Line 10:
 
     <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>
 +
*{
 +
margin: 0;
 +
padding: 0;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
.theme-mi-slider .nivoSlider{
 +
position:relative;
 +
}
 +
 +
.theme-mi-slider .nivoSlider a {
 +
border:0;
 +
display:block;
 +
}
 +
.nivo-controlNav{
 +
display: flex;
 +
justify-content: center;
 +
}
 +
 +
.theme-mi-slider .nivo-control{
 +
display: block;
 +
width: 18px;
 +
height: 18px;
 +
border-radius: 50%;
 +
background: #545454;
 +
margin: 3px;
 +
text-indent: -9999px
 +
}
 +
 +
.theme-mi-slider .nivo-control:hover{
 +
background: #1B1B1B;
 +
}
 +
 +
.theme-mi-slider .active{
 +
background: #1B1B1B;
 +
}
 +
.nivo-directionNav a{
 +
display: block;
 +
width: 30px;
 +
height: 30px;
 +
}
 +
 +
.nivo-directionNav .nivo-prevNav{
 +
background-image: url(../img/icons/circle-left.png);
 +
background-size: cover;
 +
text-indent: -9999px;
 +
left: 6px;
 +
}
 +
 +
.nivo-directionNav .nivo-nextNav{
 +
background-image: url(../img/icons/circle-right.png);
 +
background-size: cover;
 +
text-indent: -9999px;
 +
right: 6px;
 +
}
 +
.nivo-html-caption{
 +
position: absolute;
 +
}
 +
.nivoSlider {
 +
position:relative;
 +
width:100%;
 +
height:auto;
 +
overflow: hidden;
 +
}
 +
.nivoSlider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
max-width: none;
 +
}
 +
.nivo-main-image {
 +
display: block !important;
 +
position: relative !important;
 +
width: 100% !important;
 +
}
 +
 +
/* If an image is wrapped in a link */
 +
.nivoSlider a.nivo-imageLink {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:100%;
 +
height:100%;
 +
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:6;
 +
display:none;
 +
background:white;
 +
filter:alpha(opacity=0);
 +
opacity:0;
 +
}
 +
/* The slices and boxes in the Slider */
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:5;
 +
height:100%;
 +
top:0;
 +
}
 +
.nivo-box {
 +
display:block;
 +
position:absolute;
 +
z-index:5;
 +
overflow:hidden;
 +
}
 +
.nivo-box img { display:block; }
 +
 +
/* Caption styles */
 +
.nivo-caption {
 +
position:absolute;
 +
top: 40%;
 +
left:0px;
 +
bottom:0px;
 +
font-family: sans-serif;
 +
text-align: center;
 +
color:#fff;
 +
width:100%;
 +
z-index:8;
 +
padding: 5px 10px;
 +
overflow: hidden;
 +
display: none;
 +
}
 +
.nivo-caption p {
 +
padding:5px;
 +
margin:0;
 +
}
 +
.nivo-caption a {
 +
display:inline !important;
 +
}
 +
.nivo-html-caption {
 +
    display:none;
 +
}
 +
/* Direction nav styles (e.g. Next & Prev) */
 +
.nivo-directionNav a {
 +
position:absolute;
 +
top:45%;
 +
z-index:9;
 +
cursor:pointer;
 +
}
 +
.nivo-prevNav {
 +
left:0px;
 +
}
 +
.nivo-nextNav {
 +
right:0px;
 +
}
 +
/* Control nav styles (e.g. 1,2,3...) */
 +
.nivo-controlNav {
 +
text-align:center;
 +
padding: 15px 0;
 +
}
 +
.nivo-controlNav a {
 +
cursor:pointer;
 +
}
 +
.nivo-controlNav a.active {
 +
font-weight:bold;
 +
}
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
Line 162: Line 322:
 
</div> <!-- /.owl-carousel -->
 
</div> <!-- /.owl-carousel -->
 
</section>
 
</section>
 +
<div class="slider-wrapper theme-mi-slider">
 +
<div id="slider" class="nivoSlider" style="max-height:400px">   
 +
    <img src="https://static.igem.org/mediawiki/2017/6/60/9-AFCM-Egypt-sponsers-Benchling.png" alt="" title="#htmlcaption1" />   
 +
    <img src="https://static.igem.org/mediawiki/2017/6/60/9-AFCM-Egypt-sponsers-Benchling.png" alt="" title="#htmlcaption2" />   
 +
    <img src="https://static.igem.org/mediawiki/2017/6/60/9-AFCM-Egypt-sponsers-Benchling.png" alt="" title="#htmlcaption3" />   
 +
</div>
 +
<div id="htmlcaption1" class="nivo-html-caption">   
 +
    <h1>test new slider</h1>
 +
    <p>test new slider</p>
 +
</div>
 +
<div id="htmlcaption2" class="nivo-html-caption">   
 +
    <h1>test new slider</h1>
 +
</div>
 +
<div id="htmlcaption3" class="nivo-html-caption">   
 +
    <h1>test new slider</h1>
 +
</div>
 +
</div>
 
<script src="https://2017.igem.org/Template:AFCM-Egypt/owl.carouseljs/javascript?action=raw&ctype=text/javascript"></script>
 
<script src="https://2017.igem.org/Template:AFCM-Egypt/owl.carouseljs/javascript?action=raw&ctype=text/javascript"></script>
 
<script>
 
<script>

Revision as of 23:52, 16 October 2017

A F C M

add
add
add
add
add
add
add
add
add

test new slider

test new slider

test new slider

test new slider