|
|
| Line 26: |
Line 26: |
| | <!--メインコンテンツ--> | | <!--メインコンテンツ--> |
| | <div id="container"> | | <div id="container"> |
| - | <section id="top-first" class="top-content">
| + | |
| - | <p class="logo sprite" data-speed="-1.5" data-offsety="100">KIT-Kyoto</p>
| + | |
| - | <article>
| + | |
| - | <h1>Welcome to KIT-Kyoto Wiki Page!</h1>
| + | |
| - | <p>This is our wiki page.</p>
| + | |
| - | </article>
| + | |
| - | </section>
| + | |
| - | <section id="top-second" class="top-content">
| + | |
| - | <article>
| + | |
| - | <h1 id="toc-only-css">About us</h1>
| + | |
| - | <p>About our team members,our university,and so on...</p>
| + | |
| - | </article>
| + | |
| - | </section>
| + | |
| - | <section id="top-third" class="top-content">
| + | |
| - | <article>
| + | |
| - | <h1 id="toc-without-jquery">Project</h1>
| + | |
| - | <p>You want to know our project details, click here.</p>
| + | |
| - | </article>
| + | |
| - | <img src="images/guernica.jpg" />
| + | |
| - | </section>
| + | |
| - | <section id="top-theend" class="top-content">
| + | |
| - | <article>
| + | |
| - | <h1>Modeling</h1>
| + | |
| - | <p class="sprite" data-speed="0.8" data-offsety="4180">Modeling</p>
| + | |
| - | </article>
| + | |
| - | </section>
| + | |
| | <div class="clear"><hr /></div> | | <div class="clear"><hr /></div> |
| | <div id='kitfooter-box' class='noprint'> | | <div id='kitfooter-box' class='noprint'> |
| Line 93: |
Line 68: |
| | margin:0px 0px 0px 250px; | | margin:0px 0px 0px 250px; |
| | } | | } |
| - | #top-first {
| |
| - | background:rgba(100,100,100,0.7) url(https://static.igem.org/mediawiki/2014/d/d4/Kit_top5.png) 50% 0 fixed;
| |
| - | }
| |
| - | #top-second {
| |
| - | background:rgba(100,100,100,0.6) url(https://static.igem.org/mediawiki/2014/9/9a/Kit_Top4.png) 50% 0 fixed;
| |
| - | }
| |
| - | #top-third {
| |
| - | background: url(https://static.igem.org/mediawiki/2014/5/52/Kit_top3.JPG) 50% 0 fixed;
| |
| - | }
| |
| - | #top-theend {
| |
| - | background: url(https://static.igem.org/mediawiki/2014/3/3a/Kit_top4.JPG) 50% 0 fixed;
| |
| - | }
| |
| - | .top-content {
| |
| - | box-shadow:0px -20px 70px 20px rgba(0,0,0,0.8);
| |
| - | color: #333;
| |
| - | height: 850px;
| |
| - | margin: 0 auto;
| |
| - | padding: 0;
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | /* section first */
| |
| - | .logo {
| |
| - | color: rgba(255, 255, 255, 0.9);
| |
| - | font-size: 4em;
| |
| - | font-weight: bold;
| |
| - | margin: 0;
| |
| - | position: fixed;
| |
| - | top: 100px;
| |
| - | left: 40px;
| |
| - | text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
| |
| - | }
| |
| - |
| |
| - | #top-first article {
| |
| - | background: rgba(255, 255, 255, 0.9);
| |
| - | border: 1px solid rgba(150, 150, 150, 0.1);
| |
| - | box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
| |
| - | padding: 18px;
| |
| - | position: absolute;
| |
| - | top: 200px;
| |
| - | }
| |
| - |
| |
| - | /* section second */
| |
| - | #top-second {
| |
| - | padding: 80px 0;
| |
| - | }
| |
| - | #top-second article {
| |
| - | background: rgba(255, 255, 255, 0.9);
| |
| - | border: 1px solid rgba(150, 150, 150, 0.1);
| |
| - | box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
| |
| - | color: gray;
| |
| - | position:absolute;
| |
| - | left:60px;
| |
| - | top:100px;
| |
| - | padding: 10px 20px;
| |
| - | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
| |
| - | line-height: 1.5em;
| |
| - | width: 445px;
| |
| - | }
| |
| - |
| |
| - | /* section third */
| |
| - | #top-third article {
| |
| - | background: rgba(255, 255, 255, 0.9);
| |
| - | border: 1px solid rgba(150, 150, 150, 0.1);
| |
| - | box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
| |
| - | color: gray;
| |
| - | padding: 10px 20px;
| |
| - | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
| |
| - | line-height: 1.5em;
| |
| - | position: absolute;
| |
| - | top: 100px;
| |
| - | right:100px;
| |
| - | }
| |
| - | #top-third img {
| |
| - | border: 8px solid white;
| |
| - | box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
| |
| - | height: 350px;
| |
| - | width: 560px;
| |
| - | position: absolute;
| |
| - | left: 80px;
| |
| - | top: 300px;
| |
| - | -webkit-transform: rotate(-8deg);
| |
| - | -moz-transform: rotate(-8deg);
| |
| - | -ms-transform: rotate(-8deg);
| |
| - | -o-transform: rotate(-8deg);
| |
| - | transform: rotate(-8deg);
| |
| - | }
| |
| - |
| |
| - | /* section the end */
| |
| - | #top-theend {
| |
| - | padding: 80px 0;
| |
| - | }
| |
| - | #top-theend article {
| |
| - | background: rgba(255, 255, 255, 0.9);
| |
| - | border: 1px solid rgba(150, 150, 150, 0.1);
| |
| - | box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
| |
| - | color: gray;
| |
| - | position:absolute;
| |
| - | top:100px;
| |
| - | left:100px;
| |
| - | padding: 10px 20px;
| |
| - | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
| |
| - | line-height: 1.5em;
| |
| - | width: 445px;
| |
| - | }
| |
| - |
| |
| | </style> | | </style> |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
"
