|
|
| Line 161: |
Line 161: |
| | </nav> | | </nav> |
| | <!-- ////////////////////// END OF HEADER /////////////////////// --> | | <!-- ////////////////////// END OF HEADER /////////////////////// --> |
| − | <!-- ////////////////////// START SLIDER /////////////////////// --> | + | <!-- ////////////////////// START VIDEO /////////////////////// --> |
| − | | + | |
| | <head> | | <head> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Line 181: |
Line 180: |
| | </video> | | </video> |
| | </body> | | </body> |
| − | <!-- ////////////////////// END OF SLIDER /////////////////////// --> | + | <!-- ////////////////////// END OF VIDEO /////////////////////// --> |
| − | <!-- ////////////////////// START TABS /////////////////////// --> | + | <!-- ////////////////////// START ABSTRACT /////////////////////// --> |
| | + | <head> |
| | <style> | | <style> |
| − | body {
| + | .AB { |
| − | background-color: white;
| + | color: blue; |
| − | }
| + | |
| − | .tabs { | + | |
| − | position: absolute;
| + | |
| − | left: 700px;
| + | |
| − | top: 770px;
| + | |
| − | height: 50%;
| + | |
| − | min-width: 450px;
| + | |
| − | transform: translate(-50%, -50%);
| + | |
| − | color: black;
| + | |
| − | font-size: 16px;
| + | |
| − | font-weight: bolder;
| + | |
| − | -webkit-transition-duration: 0.4s; /* Safari */
| + | |
| − | transition-duration: 0.4s;
| + | |
| − | margin: 4px 2px;
| + | |
| − | padding-top: 10px; | + | |
| − | padding-right: 10px;
| + | |
| − | padding-bottom: 10px;
| + | |
| − | padding-left: 10px;
| + | |
| − | border-radius: 4px;
| + | |
| − | padding: 20px;
| + | |
| − | }
| + | |
| − | .tabs: hover {
| + | |
| − | font-color: #86BCFF;
| + | |
| − | }
| + | |
| − | label, #slider {
| + | |
| − | display: inline-block;
| + | |
| − | font-weight: bold;
| + | |
| − | text-align: center;
| + | |
| − | font color: black;
| + | |
| − | width: 150px;
| + | |
| − | height: 40px;
| + | |
| − | border-radius: 4px;
| + | |
| − | background-color: #86BCFF;
| + | |
| − | padding-top: 10px;
| + | |
| − | padding-bottom: 10px;
| + | |
| − | -webkit-transition-duration: 0.4s; /* Safari */
| + | |
| − | transition-duration: 0.4s;
| + | |
| − | margin: 4px 2px;
| + | |
| − | padding: 40px auto;
| + | |
| | } | | } |
| | | | |
| − | label:hover {
| + | .TI { |
| − | background-color: white;
| + | color: black; |
| − | font-size: 16px;
| + | font-size: 200%; |
| − | font-weight: bolder;
| + | font-weight: bold; |
| − | font color: #86BCFF;
| + | |
| − | text-align: center;
| + | |
| − | -webkit-transition-duration: 0.4s; /* Safari */
| + | |
| − | transition-duration: 0.4s;
| + | |
| − | margin: 4px 2px;
| + | |
| − | border: 2px solid #86BCFF;
| + | |
| − | }
| + | |
| − | .tabs [type=radio] { | + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .content {
| + | |
| − | position: absolute;
| + | |
| − | top: 90px; right: 0; bottom: 0; left: -450px;
| + | |
| − | background: white;
| + | |
| − | padding: 20px;
| + | |
| − | display: none;
| + | |
| − | width:1350px;
| + | |
| − | }
| + | |
| − | #slider {
| + | |
| − | background-color: transparent;
| + | |
| − | position: absolute;
| + | |
| − | border-bottom: 3px solid white;
| + | |
| − | margin: 7px 10px;
| + | |
| − | transition: transform 0.5s;
| + | |
| − | width: 130px;
| + | |
| − | }
| + | |
| − | [type=radio],#r1:checked ~ #slider {
| + | |
| − |
| + | |
| − | }
| + | |
| − | [type=radio],#r2:checked ~ #slider {
| + | |
| − |
| + | |
| − | }
| + | |
| − | [type=radio],#r3:checked ~ #slider {
| + | |
| − |
| + | |
| − | }
| + | |
| − | [type=radio]:checked + label {
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | [type=radio]:checked + label + .content {
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .con1 {
| + | |
| − | position: relative;
| + | |
| − | left: 600px;
| + | |
| − | top: 0px;
| + | |
| − | font-family: Calibri;
| + | |
| − | font-size: 200px;
| + | |
| − | font-weight: bolder;
| + | |
| − | font-color: black;
| + | |
| − | }
| + | |
| − | .con2 {
| + | |
| − | position: relative;
| + | |
| − | left: 30px;
| + | |
| − | font-family: Calibri;
| + | |
| − | font-size: 100%;
| + | |
| − | font-weight: bolder;
| + | |
| − | font-color: black;
| + | |
| − | }
| + | |
| − | | + | |
| − | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
| + | |
| − | | + | |
| − | * {
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | box-sizing:border-box;
| + | |
| − | -webkit-box-sizing:border-box;
| + | |
| − | -moz-box-sizing:border-box;
| + | |
| − | -webkit-font-smoothing:antialiased;
| + | |
| − | -moz-font-smoothing:antialiased;
| + | |
| − | -o-font-smoothing:antialiased;
| + | |
| − | font-smoothing:antialiased;
| + | |
| − | text-rendering:optimizeLegibility;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | font-family:"Open Sans", Helvetica, Arial, sans-serif;
| + | |
| − | font-weight:300;
| + | |
| − | font-size: 12px;
| + | |
| − | line-height:30px;
| + | |
| − | color:#777;
| + | |
| − | }
| + | |
| − | | + | |
| − | .container {
| + | |
| − | max-width:400px;
| + | |
| − | width:100%;
| + | |
| − | margin:0 auto;
| + | |
| − | position:relative;
| + | |
| − | top: -90px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
| + | |
| − | | + | |
| − | #contact {
| + | |
| − | background:#F9F9F9;
| + | |
| − | padding:25px;
| + | |
| − | margin:50px 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact h3 {
| + | |
| − | color: #F96;
| + | |
| − | display: block;
| + | |
| − | font-size: 30px;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact h4 {
| + | |
| − | margin:5px 0 15px;
| + | |
| − | display:block;
| + | |
| − | font-size:13px;
| + | |
| − | }
| + | |
| − | | + | |
| − | fieldset {
| + | |
| − | border: medium none !important;
| + | |
| − | margin: 0 0 10px;
| + | |
| − | min-width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
| + | |
| − | width:100%;
| + | |
| − | border:1px solid #CCC;
| + | |
| − | background:#FFF;
| + | |
| − | margin:0 0 5px;
| + | |
| − | padding:10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
| + | |
| − | -webkit-transition:border-color 0.3s ease-in-out;
| + | |
| − | -moz-transition:border-color 0.3s ease-in-out;
| + | |
| − | transition:border-color 0.3s ease-in-out;
| + | |
| − | border:1px solid #AAA;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact textarea {
| + | |
| − | height:100px;
| + | |
| − | max-width:100%;
| + | |
| − | resize:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact button[type="submit"] {
| + | |
| − | cursor:pointer;
| + | |
| − | width:100%;
| + | |
| − | border:none;
| + | |
| − | background:#0CF;
| + | |
| − | color:#FFF;
| + | |
| − | margin:0 0 5px;
| + | |
| − | padding:10px;
| + | |
| − | font-size:15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact button[type="submit"]:hover {
| + | |
| − | background:#09C;
| + | |
| − | -webkit-transition:background 0.3s ease-in-out;
| + | |
| − | -moz-transition:background 0.3s ease-in-out;
| + | |
| − | transition:background-color 0.3s ease-in-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | #contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
| + | |
| − | | + | |
| − | #contact input:focus, #contact textarea:focus {
| + | |
| − | outline:0;
| + | |
| − | border:1px solid #999;
| + | |
| − | }
| + | |
| − | ::-webkit-input-placeholder {
| + | |
| − | color:#888;
| + | |
| − | }
| + | |
| − | :-moz-placeholder {
| + | |
| − | color:#888;
| + | |
| − | }
| + | |
| − | ::-moz-placeholder {
| + | |
| − | color:#888;
| + | |
| − | }
| + | |
| − | :-ms-input-placeholder {
| + | |
| − | color:#888;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .box1 {
| + | |
| − | width: 800px; | + | |
| − | border: 10px solid #97CBFF;
| + | |
| − | padding: 25px;
| + | |
| − | margin: 25px;
| + | |
| − | border-radius: 8px;
| + | |
| − | font-size: 25px;
| + | |
| − | font-family: Calibri;
| + | |
| − | font-color: black;
| + | |
| − | line-height: 100px;
| + | |
| − | position: relative;
| + | |
| − | left: 200px;
| + | |
| − | text-align:justify;
| + | |
| − | top: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #rig {
| + | |
| − | max-width:900px;
| + | |
| − | margin:0 auto; /*center aligned*/
| + | |
| − | padding:0;
| + | |
| − | font-size:0; /* Remember to change it back to normal font size if have captions */ | + | |
| − | list-style:none;
| + | |
| − | background-color:#000;
| + | |
| − | }
| + | |
| − | #rig li {
| + | |
| − | display: inline-block;
| + | |
| − | *display:inline;/*for IE6 - IE7*/
| + | |
| − | width:25%;
| + | |
| − | vertical-align:middle; | + | |
| − | box-sizing:border-box;
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /* The wrapper for each item */
| + | |
| − | .rig-cell {
| + | |
| − | /*margin:12px;
| + | |
| − | box-shadow:0 0 6px rgba(0,0,0,0.3);*/
| + | |
| − | display:block;
| + | |
| − | position: relative;
| + | |
| − | overflow:hidden;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /* If have the image layer */
| + | |
| − | .rig-img {
| + | |
| − | display:block;
| + | |
| − | width: 100%;
| + | |
| − | height: auto;
| + | |
| − | border:none;
| + | |
| − | transform:scale(1);
| + | |
| − | transition:all 1s;
| + | |
| − | }
| + | |
| − | | + | |
| − | #rig li:hover .rig-img {
| + | |
| − | transform:scale(1.05);
| + | |
| − | }
| + | |
| − |
| + | |
| − | /* If have the overlay layer */
| + | |
| − | .rig-overlay {
| + | |
| | position: absolute; | | position: absolute; |
| − | display:block;
| + | left: 50%; |
| − | top: 0;
| + | |
| − | left: 0; | + | |
| − | bottom: 0;
| + | |
| − | right: 0;
| + | |
| − | margin: auto;
| + | |
| − | background: #3DC0F1 url(img/link.png) no-repeat center 20%;
| + | |
| − | background-size:50px 50px;
| + | |
| − | opacity:0;
| + | |
| − | filter:alpha(opacity=0);/*For IE6 - IE8*/
| + | |
| − | transition:all 0.6s;
| + | |
| | } | | } |
| − | #rig li:hover .rig-overlay {
| |
| − | opacity:0.8;
| |
| − | }
| |
| − |
| |
| − | /* If have captions */
| |
| − | .rig-text {
| |
| − | display:block;
| |
| − | padding:0 30px;
| |
| − | box-sizing:border-box;
| |
| − | position: relative;
| |
| − | left:200px;
| |
| − | width:100%;
| |
| − | text-align:center;
| |
| − | text-transform:capitalize;
| |
| − | font-size:28px;
| |
| − | font-weight: bold;
| |
| − | font-family: Calibri;
| |
| − | font-weight:normal!important;
| |
| − | top:40%;
| |
| − | color:white;
| |
| − | opacity:0;
| |
| − | filter:alpha(opacity=0);/*For older IE*/
| |
| − | transform:translateY(-20px);
| |
| − | transition:all .3s;
| |
| − | }
| |
| − | #rig li:hover .rig-text {
| |
| − | transform:translateY(0px);
| |
| − | opacity:0.9;
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 9000px) {
| |
| − | #rig li {
| |
| − | width:25%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 700px) {
| |
| − | #rig li {
| |
| − | width:33.33%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 550px) {
| |
| − | #rig li {
| |
| − | width:50%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| | </style> | | </style> |
| − | <div class='tabs'>
| + | </head> |
| − | <input type='radio' id='r1' name='t' checked>
| + | <body class="AB"> |
| − | <label for='r1'>CONTACT US</label>
| + | |
| − | <div class='content'>
| + | |
| − | <p class='con1'>CONTACT US</p>
| + | |
| − | <p class='con2'>Chang Gung University</p>
| + | |
| − | <div class="container">
| + | |
| − | <form id="contact" action="" method="post">
| + | |
| − | <h3>Quick Contact</h3>
| + | |
| − | <h4>Contact us today, and get reply with in 24 hours!</h4>
| + | |
| − | <fieldset>
| + | |
| − | <input placeholder="Your name" type="text" tabindex="1" required autofocus>
| + | |
| − | </fieldset>
| + | |
| − | <fieldset>
| + | |
| − | <input placeholder="Your Email Address" type="email" tabindex="2" required>
| + | |
| − | </fieldset>
| + | |
| − | <fieldset>
| + | |
| − | <input placeholder="Your Phone Number" type="tel" tabindex="3" required>
| + | |
| − | </fieldset>
| + | |
| − | <fieldset>
| + | |
| − | <input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
| + | |
| − | </fieldset>
| + | |
| − | <fieldset>
| + | |
| − | <textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
| + | |
| − | </fieldset>
| + | |
| − | <fieldset>
| + | |
| − | <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
| + | |
| − | </fieldset>
| + | |
| − | </form>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| − | <input type='radio' id='r2' name='t'>
| + | <h1>ABSTRACT</h1> |
| − | <label for='r2'>PROJECT</label>
| + | <p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p> |
| − | <div class='content'>
| + | |
| − | <p class='con1'> PROJECT</p> | + | |
| − | <div class="box1" style='line-height: 25px;'>hihihihihihihihihihihihihi</div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <input type='radio' id='r3' name='t'>
| + | |
| − | <label for='r3'>NEWS</label>
| + | |
| − | <div class='content'>
| + | |
| − | <ul id="rig">
| + | |
| − | <li>
| + | |
| − | <a class="rig-cell" href="#">
| + | |
| − | <img class="rig-img" style="width:300px; height:200px;" src="https://static.igem.org/mediawiki/2016/c/cd/CGU_Taiwan--macrophage.jpg">
| + | |
| − | <span class="rig-overlay"></span>
| + | |
| − | <span class="rig-text">2016/04</span>
| + | |
| − | </a>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a class="rig-cell" href="#">
| + | |
| − | <img class="rig-img" style="width:300px; height:200px;" src="https://static.igem.org/mediawiki/2016/7/7c/CGU_Taiwan--HA.jpg">
| + | |
| − | <span class="rig-overlay"></span>
| + | |
| − | <span class="rig-text">2016/05</span>
| + | |
| − | </a>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a class="rig-cell" href="#">
| + | |
| − | <img class="rig-img" style="width:300px; height:200px;" src="https://static.igem.org/mediawiki/2016/4/40/CGU_Taiwan--t4.jpg">
| + | |
| − | <span class="rig-overlay"></span>
| + | |
| − | <span class="rig-text">2016/06</span>
| + | |
| − | </a>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a class="rig-cell" href="#">
| + | |
| − | <img class="rig-img" style="width:300px; height:200px;" src="https://static.igem.org/mediawiki/2016/c/cd/CGU_Taiwan--mhc.jpg">
| + | |
| − | <span class="rig-overlay"></span>
| + | |
| − | <span class="rig-text">2016/06</span>
| + | |
| − | </a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div id='slider'></div>
| + | |
| − | </div>
| + | |
| − | <!-- "><div"s are required to avoid spaces between display: inline-block elements. http://css-tricks.com/fighting-the-space-between-inline-block-elements/ -->
| + | |
| − | <!-- ////////////////////// END OF TABS /////////////////////// -->
| + | |
| | | | |
| | + | </body> |
| | </html> | | </html> |
This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.
