Team:XMU-China/css

From 2013.igem.org

(Difference between revisions)
(Created page with ".pix_diapo { background: #000 url(../images/progress.gif) no-repeat center center; -moz-box-shadow: 0 3px 6px #000; -webkit-box-shadow: 0 3px 6px #000; box-shadow: 0 3px 6px ...")
Line 1: Line 1:
-
.pix_diapo {
+
<html>
-
background: #000 url(../images/progress.gif) no-repeat center center;
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-
-moz-box-shadow: 0 3px 6px #000;
+
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-
-webkit-box-shadow: 0 3px 6px #000;
+
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
-
box-shadow: 0 3px 6px #000;
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
-
border:2px solid #0b0b0d;
+
 
-
height: 347px;
+
<head>
-
margin: 0 10px;
+
    <meta charset="utf-8">
-
overflow: hidden;
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
position: relative;
+
    <title>Oreva Business Template</title>
-
width: 940px;
+
    <meta name="description" content="">
-
}
+
   
-
.pix_diapo > div {
+
    <meta name="viewport" content="width=device-width">
-
display: none;
+
 
-
height: 100%;
+
 
-
left: 0;
+
    <link rel="stylesheet" href="http://demo.sc.chinaz.com/Files/DownLoad/moban/201306/chahua2901/css/diapo.css">
-
position: absolute;
+
-
top: 0;
+
    <!-- JQuery Plugins -->
-
width: 100%;
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-
}
+
  <script type="text/javascript" src="js/libs/diapo.js"></script>
-
#pix_prev, #pix_next {
+
 
-
cursor: pointer;
+
  <script>
-
display: block;
+
$(function(){
-
height: 26px;
+
$('.pix_diapo').diapo();
-
margin-top: -20px;
+
});
-
position: absolute;
+
</script>
-
top: 50%;
+
      
-
width: 16px;
+
     <!--[if lt IE 9]>
-
z-index: 1001;
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-
}
+
<![endif]-->
-
#pix_prev {
+
</head>
-
background: url(../images/slider_arrow.png) no-repeat top left;
+
</body>
-
left: 10px;
+
<div class="container_12">
-
}
+
        <div id="slider">
-
#pix_prev:hover{
+
            <div class="pix_diapo">
-
background-position:bottom left;
+
                    <div>
-
}
+
                        <img src="images/slider_img1.jpg">
-
#pix_next {
+
                        <div class="caption elemHover fromLeft">
-
background: url(../images/slider_arrow.png) no-repeat top right;
+
                            <div class="caption-txt">
-
left: auto!important;
+
                            <h2>Great Work Always Remember</h2>
-
right: 10px!important;
+
                                <p>Nullam commodo imperdiet nulla in vulputate. Fusce in mauris quis massa fringilla consequat in eget elit. Suspendisse id est libero, vel ullamcorper dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-
}
+
                                <div><a href="#">read more</a></div>
-
#pix_next:hover{
+
                            </div>
-
background-position:bottom right;
+
                        </div>
-
}
+
                    </div>
-
#pix_pag {
+
                    <div>
-
margin: 0 auto;
+
                        <img src="images/slider_img2.jpg">
-
position: relative;
+
                        <div class="caption elemHover fromLeft">
-
width: 940px;
+
                            <div class="caption-txt">
-
z-index: 1002;
+
                            <h2>Anothr Heading Here</h2>
-
}
+
                                <p>Nullam commodo imperdiet nulla in vulputate. Fusce in mauris quis massa fringilla consequat in eget elit. Suspendisse id est libero, vel ullamcorper dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-
#pix_commands {
+
                                <div><a href="#">read more</a></div>
-
cursor: pointer;
+
                            </div>
-
display: block;
+
                        </div>
-
float: left;
+
                       
-
height: 26px;
+
                    </div>
-
margin: 15px 0 0 13px;
+
                    <div>
-
position: relative;
+
                        <img src="images/slider_img3.jpg">
-
width: 24px;
+
                        <div class="caption elemHover fromLeft">
-
}
+
                            <div class="caption-txt">
-
#pix_play {
+
                            <h2>Some Awesome Lines</h2>
-
background: url(images/diapo/play.html) center no-repeat;
+
                                <p>Nullam commodo imperdiet nulla in vulputate. Fusce in mauris quis massa fringilla consequat in eget elit. Suspendisse id est libero, vel ullamcorper dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-
height: 24px;
+
                                <div><a href="#">read more</a></div>
-
left: 0;
+
                            </div>
-
position: absolute;
+
                        </div>
-
top: 0;
+
                       
-
width: 24px;
+
                    </div>
-
}
+
              </div>
-
#pix_stop {
+
 
-
background: url(images/diapo/pause.html) center no-repeat;
+
</body>
-
height: 24px;
+
 
-
left: 0;
+
</html>
-
position: absolute;
+
-
top: 0;
+
-
width: 24px;
+
-
}
+
-
#pix_pag_ul {
+
-
float: right;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
#pix_pag_ul > li {
+
-
cursor: pointer;
+
-
display: block;
+
-
.display: inline-block;
+
-
float: left;
+
-
list-style: none;
+
-
margin: 0 10px 0 0;
+
-
padding: 20px 8px 0;
+
-
text-align: center;
+
-
text-indent: -9999px;
+
-
width: 16px;
+
-
}
+
-
#pix_pag_ul > li > span {
+
-
background: #222;
+
-
-webkit-border-radius: 8px;
+
-
-moz-border-radius: 8px;
+
-
border-radius: 8px;
+
-
display: block;
+
-
height: 16px;
+
-
width: 16px;
+
-
}
+
-
#pix_pag_ul > li:hover > span > span {
+
-
background: #ccc;
+
-
}
+
-
#pix_pag_ul > li > span > span {
+
-
-webkit-border-radius: 8px;
+
-
-moz-border-radius: 8px;
+
-
border-radius: 8px;
+
-
display: block;
+
-
float: left;
+
-
height: 8px;
+
-
margin: 4px;
+
-
width: 8px;
+
-
}
+
-
#pix_pag_ul > li.diapocurrent > span > span {
+
-
background: #ff0;
+
-
-webkit-border-radius: 8px;
+
-
-moz-border-radius: 8px;
+
-
border-radius: 8px;
+
-
}
+
-
#pix_pag_ul > li > .pix_thumb {
+
-
border: 4px solid #f2f2f2;
+
-
.border: 4px solid #e6e6e6;
+
-
border: 4px solid #e6e6e6\9;
+
-
-moz-box-shadow: 0 1px 8px #000;
+
-
-webkit-box-shadow: 0 1px 8px #000;
+
-
box-shadow: 0 1px 8px #000;
+
-
height: 58px;
+
-
left: -17px;
+
-
position: absolute;
+
-
top: -40px;
+
-
width: 58px;
+
-
}
+
-
#pix_pag_ul > li > .thumb_arrow {
+
-
     border-left: 4px solid transparent;
+
-
     border-right: 4px solid transparent;
+
-
    border-top: 4px solid  #e6e6e6;
+
-
top: 26px;
+
-
left: 12px;
+
-
position: absolute;
+
-
}
+
-
.pix_relativize {
+
-
overflow: hidden;
+
-
position: relative;
+
-
}
+
-
.imgFake {
+
-
cursor: pointer;
+
-
}
+
-
.elemHover {
+
-
position: absolute;
+
-
}
+
-
.caption {
+
-
/* background: rgba(0, 0, 0, 0.8);
+
-
    .filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
+
-
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;
+
-
*/ background:url(../images/slider_caption_bg.png) no-repeat left center;
+
-
top: 0;
+
-
color: #fff;
+
-
display: block;
+
-
font-size: 13px;
+
-
padding: 21px 10px 22px 10px;
+
-
width: 900px;
+
-
}
+
-
.ui-loader {
+
-
display: none;
+
-
}
+
-
.caption-txt{
+
-
width:365px;
+
-
padding:55px;
+
-
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.69);
+
-
}
+
-
.caption-txt h2{
+
-
background:url(../images/slider_seperator.png) no-repeat center bottom;
+
-
padding:0 0 20px 0;
+
-
font-size:23px;
+
-
color:#fefefe;
+
-
font-weight:normal;
+
-
text-transform:uppercase;
+
-
}
+
-
.caption-txt a{
+
-
background:url(../images/btn_glow.png) #A88A58 repeat-x;
+
-
text-shadow:none;
+
-
padding:5px 8px;
+
-
color:#FFF;
+
-
border-radius:3px;
+
-
-webkit-border-radius: 3px;
+
-
-moz-border-radius: 3px;
+
-
-o-border-radius: 3px;
+
-
font-size:12px;
+
-
}
+
-
.caption-txt a:hover{
+
-
color:#FFF;
+
-
background:#cf302d url(../images/btn_glow.png) repeat-x;
+
-
}
+

Revision as of 15:14, 4 September 2013

Oreva Business Template

Great Work Always Remember

Nullam commodo imperdiet nulla in vulputate. Fusce in mauris quis massa fringilla consequat in eget elit. Suspendisse id est libero, vel ullamcorper dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Anothr Heading Here

Nullam commodo imperdiet nulla in vulputate. Fusce in mauris quis massa fringilla consequat in eget elit. Suspendisse id est libero, vel ullamcorper dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Some Awesome Lines

Nullam commodo imperdiet nulla in vulputate. Fusce in mauris quis massa fringilla consequat in eget elit. Suspendisse id est libero, vel ullamcorper dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Retrieved from "http://2013.igem.org/Team:XMU-China/css"