CSS/gifu/home

From 2014.igem.org

(Difference between revisions)
 
(93 intermediate revisions not shown)
Line 1: Line 1:
-
/* A Free Design by Bryant Smith (bryantsmith.com) */
+
<html>
 +
<head>
 +
<meta http-equiv="Content-Script-Type" content="text/javascript">
 +
<meta http-equiv="Content-Script-Type" content="text/css">
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 +
<!--////// test
 +
//// test-->
-
body {
 
-
margin: 0;
 
-
padding: 0;
 
-
text-align: left;
 
-
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
 
-
font-size: 13px;
 
-
color: #000000;
 
-
background: #000000 url(background.png);
 
-
background-repeat:repeat-x;
 
-
}
 
-
*
 
-
{
 
-
  margin: 0 auto 0 auto;
 
-
text-align:left;}
 
-
#page
+
<style type="text/css">
-
{
+
-
  display: block;
+
-
  height:auto;
+
-
  position: relative;
+
-
  overflow: hidden;
+
-
  width: 670px;
+
-
}
+
-
.topNaviagationLink
+
/*#home{background:url(https://static.igem.org/mediawiki/2014/f/f6/Circular_rna.png) fixed;
-
{
+
width:;
-
text-align:center;
+
background-position:center 80%;
-
position:relative;
+
background-repeat:no-repeat;
-
margin-top:30px;
+
-
font-size:16px;
+
-
margin-left:-10px;
+
-
width:121px;
+
-
height: 35px;
+
-
line-height: 35px;
+
-
float:left;
+
-
color:#000000;
+
-
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
+
}
}
 +
*/
 +
#uroboros {
 +
  position:relative;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  z-index:1;
 +
  }
-
.topNaviagationLink a
+
#boros {
-
{
+
  width:595px;
-
text-decoration:none;
+
  height:292px;
-
color:#000000;
+
-
margin-bottom:0px;
+
}
}
-
.topNaviagationLink a:hover
+
#base{
-
{
+
  position:relative;
-
text-align:center;
+
  margin-top:auto;
-
color:#FFFFFF;
+
  margin-left:auto;
-
display: block;
+
  margin-right:auto;  
-
width:121px;
+
 height:700px;
-
height: 35px;
+
  width:900px;  
-
line-height: 35px;
+
  z-index:100;
-
background-image:url(tab.png);
+
-
border-bottom:none;
+
}
}
-
#mainPicture
+
#ribosome{
-
{
+
  width:120px;
-
clear:both;
+
  height:120px;
-
width:670px;
+
-
height:345px;
+
-
background-color:#000000;
+
}
}
-
#mainPicture .picture
+
#rib{
-
{
+
  font-size:35px;
-
position:relative;
+
  visibility:hidden;
-
width:650px;
+
  color:white;
-
height:325px;
+
-
top:10px;
+
-
margin-left:10px;
+
-
background-image:url(mainImage.jpg);
+
-
background-repeat:no-repeat;
+
}
}
-
#headerTitle
+
#stopme{
-
{
+
  position:absolute;
-
position:relative;
+
  top:180px;
-
top:14px;
+
  left:280px;
-
left:22px;
+
  z-index:900;
-
font-size:27px;
+
  visibility:visible;
-
color:#000000;
+
}
-
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
+
-
}
+
-
#headerSubtext
+
#point{
-
{
+
  position:absolute;
-
position:relative;
+
  top:200px;
-
top:12px;
+
  left:450px;
-
left:22px;
+
  transform: rotate(0 deg);
-
font-size:14px;
+
  z-index:1000;
-
color:#484848;
+
-
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
+
}
}
-
.contentBox
+
#menu1 {
-
{
+
  position:absolute;
-
margin-top:10px;
+
  top:10px;
-
width:670px;
+
  left:370px;
-
height:auto;
+
  width:100px;
-
background-color:#000000;
+
  z-index:10000;
-
}
+
}
-
.contentBox .innerBox
+
#menu2 {
-
{
+
  position:absolute;
-
position:relative;
+
  top:160px;
-
 
+
  left:600px;
-
width:650px;
+
  width:100px;
-
height:auto;
+
  z-index:10000;
-
top:10px;
+
-
margin-left:10px;
+
-
background-image:url(contentBack.png);
+
-
background-color:#FFFFFF;
+
-
background-repeat:repeat-x;
+
}
}
-
 
+
 
-
h1
+
#menu3 {
-
{
+
  position:absolute;
-
font-size:25px;
+
  top:410px;
-
margin-bottom:10px;
+
  left:520px;
-
padding-top:18px;
+
  width:100px;
-
margin-left:15px;
+
  z-index:10000;
-
margin-top:15px;
+
-
color:#1F1603;
+
}
}
-
 
+
 
-
.contentText
+
#menu4 {
-
{
+
  position:absolute;
-
font-size:13px;
+
  top:410px;
-
line-height:24px;
+
  left:240px;
-
margin-left:13px;
+
  width:100px;
-
margin-right:13px;
+
  z-index:10000;
}
}
 +
 
 +
#menu5 {
 +
  position:absolute;
 +
  top:160px;
 +
  left:160px;
 +
  width:120px;
 +
  z-index:10000;
 +
-
h4 {
+
#fukidasi1{
-
text-align:center;
+
  position:absolute;
-
padding-top:30px;
+
  top:40px;
-
font-size:9px;
+
  left:245px;
-
font-family:Arial, Helvetica, sans-serif;
+
  z-index:20000;
-
color:#000000;
+
  visibility:hidden;
-
margin:0px;
+
  width:400px;
 +
  height:400px;
}
}
-
h4
+
#fukidasi2{
-
{
+
  position:absolute;
-
text-decoration:none;
+
  top:140px;
-
font-size:9px;
+
  left:320px;
 +
  z-index:20000;
 +
  visibility:hidden;
}
}
-
a
+
#fukidasi3{
-
{
+
  position:absolute;
-
color:#484848;
+
  top:130px;
-
border-bottom:dotted 1px;
+
  left:330px;
 +
  z-index:20000;
 +
  visibility:hidden;
}
}
-
a:hover
+
#fukidasi4{
-
{
+
  position:absolute;
-
color:#000000;
+
  top:100px;
-
text-decoration:none;
+
  left:300px;
-
border-bottom:dotted 2px;
+
  z-index:20000;
 +
  visibility:hidden;
}
}
-
a:visited
 
-
{
 
-
color:#000000;
 
 +
#fukidasi5{
 +
  position:absolute;
 +
  top:150px;
 +
  left:290px;
 +
  z-index:20000;
 +
  visibility:hidden;
}
}
 +
.tabs {
 +
    position: relative;
 +
    padding: 0;
 +
  margin-left:auto;   
 +
    margin-right:auto; 
-
blockquote {
+
}
-
font-size:12px;
+
.tabs li {
-
text-align:justify;
+
    list-style: none;
-
width:400px;
+
    display: inline-block;
-
color:#000000;
+
}
-
padding:15px;
+
.tabs input[type=radio] {
-
margin:10px;
+
    display: none;
-
font-family:Arial, Helvetica, sans-serif;
+
}
-
background-image:url(blockquote.png);
+
.tabs label {
-
background-repeat:no-repeat;
+
    display: block;
-
border:dashed 1px;
+
    cursor: pointer;
-
border-color:#484848;
+
    padding: 5px;
 +
    line-height: 20px;
 +
    background-color: #dcdcdc;
 +
    color: #000000;
 +
margin:0;
 +
}
 +
.tabs label:hover {
 +
    background-color: #e0ffff;
 +
    color: #000000;
 +
}
 +
.tabs input[type=radio]:checked + label {
 +
    background-color: #afeeee;
 +
    color: #000000;
 +
}
 +
.tabs .contents {
 +
    display: none;
 +
    position: absolute;
 +
    top:30px;
 +
    left: 0;
 +
    padding: 0px;
 +
    background: #f0f8ff;
 +
}
 +
.tabs input[type=radio]:checked + label + .contents{
 +
    display: block;
}
}
-
html, body {
+
#kouzityuu {
-
text-align: center;
+
  font-size:500%;
 +
  color:white;
}
}
-
p {text-align: left;}
+
</style>
 +
</style>
 +
</head>
 +
 
 +
 
 +
</html>

Latest revision as of 14:24, 17 October 2014