(19 intermediate revisions by 3 users not shown) | |||
Line 40: | Line 40: | ||
} | } | ||
/*大圖*/ | /*大圖*/ | ||
− | .main-img{ | + | @media screen and (min-width: 768px) { |
+ | .img-container{ | ||
+ | height:100vh ; | ||
+ | overflow:hidden ; | ||
+ | width:100%; | ||
+ | } | ||
+ | .main-img{ | ||
top: 0; | top: 0; | ||
bottom: 0; | bottom: 0; | ||
Line 46: | Line 52: | ||
right: 0; | right: 0; | ||
width: 100%; | width: 100%; | ||
− | |||
margin: auto; | margin: auto; | ||
z-index:999; | z-index:999; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (orientation: portrait) { | ||
+ | .img-container{ | ||
+ | height:auto; | ||
+ | overflow:none; | ||
+ | width:100%; | ||
+ | } | ||
+ | .main-img{ | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | z-index:999; | ||
+ | } | ||
} | } | ||
Line 64: | Line 86: | ||
border-radius:10px; | border-radius:10px; | ||
overflow:hidden; | overflow:hidden; | ||
− | margin-left: | + | margin-left:20%; |
float:left; | float:left; | ||
color:white; | color:white; | ||
font-size:18pt; | font-size:18pt; | ||
font-weight:bold; | font-weight:bold; | ||
− | margin-top: | + | margin-top:3%; |
+ | margin-bottom:3%; | ||
} | } | ||
.img-box1-1{ | .img-box1-1{ | ||
Line 77: | Line 100: | ||
border-radius:10px; | border-radius:10px; | ||
overflow:hidden; | overflow:hidden; | ||
− | margin-left: | + | margin-left:4%; |
float:left; | float:left; | ||
color:white; | color:white; | ||
font-size:18pt; | font-size:18pt; | ||
font-weight:bold; | font-weight:bold; | ||
− | margin-top: | + | margin-top:3%; |
+ | margin-bottom:3%; | ||
} | } | ||
.img-box1-2{ | .img-box1-2{ | ||
Line 90: | Line 114: | ||
border-radius:10px; | border-radius:10px; | ||
overflow:hidden; | overflow:hidden; | ||
− | margin-left: | + | margin-left:4%; |
float:left; | float:left; | ||
color:white; | color:white; | ||
font-size:18pt; | font-size:18pt; | ||
font-weight:bold; | font-weight:bold; | ||
− | margin-top: | + | margin-top:3%; |
+ | margin-bottom:3%; | ||
} | } | ||
Line 164: | Line 189: | ||
position:absolute; | position:absolute; | ||
margin-top:80px; | margin-top:80px; | ||
− | margin-left: | + | margin-left:53px; |
font-family: 'Open Sans', sans-serif; | font-family: 'Open Sans', sans-serif; | ||
text-shadow:2px 2px black; | text-shadow:2px 2px black; | ||
Line 193: | Line 218: | ||
</style> | </style> | ||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
− | <div> | + | <div class="img-container"> |
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/f/f8/NCTU_PROJECT_BIG_PICTURE.png" class="main-img" width="100%"> |
</div> | </div> | ||
<div style="width:80%;margin:auto;margin-bottom:3%;"> | <div style="width:80%;margin:auto;margin-bottom:3%;"> | ||
− | <h1> | + | <h1></h1> |
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
Line 208: | Line 232: | ||
<div class="img-box1"> | <div class="img-box1"> | ||
<div class="text">Description</div> | <div class="text">Description</div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/f/f1/NCTU_descirption_main_project_page.jpg" width="100%" height="100%" class="HP_image"> |
</div> | </div> | ||
</a> | </a> | ||
Line 215: | Line 239: | ||
<div class="img-box1-1"> | <div class="img-box1-1"> | ||
<div class="text1">Design</div> | <div class="text1">Design</div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/a/ab/NCRU_Desigm_project_main_page.jpg" width="100%" height="100%" class="HP_image"> |
</div> | </div> | ||
</a> | </a> | ||
+ | |||
− | <a href="https://2016.igem.org/Team:NCTU_Formosa/ | + | <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate"> |
<div class="img-box1-2"> | <div class="img-box1-2"> | ||
<div class="text2">Device</div> | <div class="text2">Device</div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/7/ | + | <img src="https://static.igem.org/mediawiki/2016/7/75/NCTU_MAIN_PAGE_DEVICE.JPG" width="100%" height="100%" class="HP_image"> |
</div> | </div> | ||
</a> | </a> | ||
− | <a href="https://2016.igem.org/Team:NCTU_Formosa/ | + | <a href="https://2016.igem.org/Team:NCTU_Formosa/Proof"> |
<div class="img-box1"> | <div class="img-box1"> | ||
<div class="text3">Results</div> | <div class="text3">Results</div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/9/96/NCTU_Result_project_main_page.jpg" width="100%" height="100%" class="HP_image"> |
</div> | </div> | ||
</a> | </a> | ||
− | <a href="https://2016.igem.org/Team:NCTU_Formosa/ | + | <a href="https://2016.igem.org/Team:NCTU_Formosa/Model"> |
<div class="img-box1-1"> | <div class="img-box1-1"> | ||
− | <div class="text4"> | + | <div class="text4">Modeling</div> |
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/4/42/NCTU_Modeling_project_main_page.jpg" width="100%" height="100%" class="HP_image"> |
</div> | </div> | ||
</a> | </a> | ||
Line 243: | Line 268: | ||
<div class="img-box1-2"> | <div class="img-box1-2"> | ||
<div class="text5">Safety</div> | <div class="text5">Safety</div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/9/9e/NCTU_safety_main_project_page.jpg" width="100%" height="100%" class="HP_image"> |
</div> | </div> | ||
</a> | </a> |
Latest revision as of 02:50, 4 November 2016
![](https://static.igem.org/mediawiki/2016/f/f8/NCTU_PROJECT_BIG_PICTURE.png)
Description
![](https://static.igem.org/mediawiki/2016/f/f1/NCTU_descirption_main_project_page.jpg)
Design
![](https://static.igem.org/mediawiki/2016/a/ab/NCRU_Desigm_project_main_page.jpg)
Device
Results
![](https://static.igem.org/mediawiki/2016/9/96/NCTU_Result_project_main_page.jpg)
Modeling
![](https://static.igem.org/mediawiki/2016/4/42/NCTU_Modeling_project_main_page.jpg)
Safety
![](https://static.igem.org/mediawiki/2016/9/9e/NCTU_safety_main_project_page.jpg)