Jackyang0216 (Talk | contribs) |
Jackyang0216 (Talk | contribs) |
||
Line 20: | Line 20: | ||
font-family: 'Ubuntu' !important; } | font-family: 'Ubuntu' !important; } | ||
+ | img.center { | ||
+ | display: block; | ||
+ | margin: 0 auto; } | ||
− | .bg-container { | + | .pdfbtn { |
+ | width: 100%; | ||
+ | margin: 20px 0 10px 0; | ||
+ | padding: 10px 20px; | ||
+ | border-radius: 5px; | ||
+ | background-color: #556b7e; | ||
+ | color: white; | ||
+ | display: block; | ||
+ | position: relative; } | ||
+ | .pdfbtn i { | ||
+ | position: absolute; | ||
+ | right: 50px; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); } | ||
+ | |||
+ | .brown-btn { | ||
+ | background-color: #603813; } | ||
+ | |||
+ | .hp-title { | ||
+ | position: relative; | ||
+ | top: 20px; | ||
+ | text-align: center; | ||
+ | font-size: 60px; | ||
+ | font-weight: 700; | ||
+ | font-family: 'Arizonia' !important; | ||
+ | margin-bottom: 1rem; } | ||
+ | |||
+ | .hp-bg-container { | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
− | max-height: 200vh; } | + | max-height: 200vh; |
− | .bg-container > img { | + | background-color: #fdf8e3; } |
+ | .hp-bg-container > img { | ||
width: 100%; | width: 100%; | ||
margin-top: -45px; } | margin-top: -45px; } | ||
− | . | + | .hp-main-container { |
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Line 39: | Line 70: | ||
overflow: hidden; } | overflow: hidden; } | ||
− | .main-content { | + | .hp-main-content{ |
background-color: white; | background-color: white; | ||
width: 80%; | width: 80%; | ||
margin-left: 10%; | margin-left: 10%; | ||
padding: 50px; | padding: 50px; | ||
− | min-height: | + | margin-top: 600px; |
− | z-index: 10; } | + | min-height: 300vh; |
+ | z-index: 10; | ||
+ | } | ||
− | . | + | .img-container { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
− | + | text-align: center; | |
− | + | display: none; } | |
− | + | .img-container img { | |
− | + | width: 100%; } | |
− | + | ||
− | display: | + | |
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.pdf-container { | .pdf-container { | ||
Line 82: | Line 92: | ||
height: 90vh; | height: 90vh; | ||
display: none; } | display: none; } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .top { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: fixed; | position: fixed; | ||
right: 50px; | right: 50px; | ||
Line 109: | Line 102: | ||
.top img { | .top img { | ||
width: 100%; } | width: 100%; } | ||
+ | |||
+ | #HQ_page .text-area p { | ||
+ | font-size: 22px; | ||
+ | font-family: 'Ubuntu'; | ||
+ | font-weight: 500; } | ||
+ | |||
+ | .my-main-container { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 50px 7%; | ||
+ | min-height: 200vh; | ||
+ | overflow: hidden; } | ||
+ | |||
+ | .main-content { | ||
+ | background-color: white; | ||
+ | width: 80%; | ||
+ | margin-left: 10%; | ||
+ | padding: 50px; | ||
+ | min-height: 180vh; | ||
+ | z-index: 10; } | ||
+ | |||
+ | .text-area { | ||
+ | margin-bottom: 80px; } | ||
+ | .text-area h1 { | ||
+ | font-size: 60px; | ||
+ | font-weight: 700; | ||
+ | font-family: 'Arizonia' !important; | ||
+ | text-align: center; | ||
+ | margin-bottom: 1rem; } | ||
+ | .text-area p { | ||
+ | font-size: 22px; | ||
+ | font-weight: 500; } | ||
</style> | </style> | ||
<body> | <body> | ||
Line 118: | Line 146: | ||
<h1>Parts</h1> | <h1>Parts</h1> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.</p> | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.</p> | ||
− | + | </div> | |
− | + | ||
</div> | </div> | ||
<div class="pdf-area"> | <div class="pdf-area"> | ||
<span class="pdfbtn" id="parts-btn-1">Basic Parts<i class="fa fa-caret-down" aria-hidden="true"></i></span> | <span class="pdfbtn" id="parts-btn-1">Basic Parts<i class="fa fa-caret-down" aria-hidden="true"></i></span> | ||
− | <div class=" | + | <div class="img-container" id="parts-1"> |
<img class="center" src="https://static.igem.org/mediawiki/2017/d/dd/T--CSMU_NCHU_Taiwan--basic_part.png" alt="" style="width: 90%; margin-top: -30px;"> | <img class="center" src="https://static.igem.org/mediawiki/2017/d/dd/T--CSMU_NCHU_Taiwan--basic_part.png" alt="" style="width: 90%; margin-top: -30px;"> | ||
</div> | </div> | ||
<span class="pdfbtn" id="parts-btn-2">Component Parts<i class="fa fa-caret-down" aria-hidden="true"></i></span> | <span class="pdfbtn" id="parts-btn-2">Component Parts<i class="fa fa-caret-down" aria-hidden="true"></i></span> | ||
− | <div class=" | + | <div class="img-container" id="parts-2"> |
<img class="center" src="https://static.igem.org/mediawiki/2017/9/94/T--CSMU_NCHU_Taiwan--composit.png" alt="" style="width: 90%; margin-top: -30px;"> | <img class="center" src="https://static.igem.org/mediawiki/2017/9/94/T--CSMU_NCHU_Taiwan--composit.png" alt="" style="width: 90%; margin-top: -30px;"> | ||
</div> | </div> |
Revision as of 08:27, 30 October 2017
Parts
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum veritatis quaerat obcaecati, nobis assumenda reprehenderit nisi minus tenetur. Quae, debitis? ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit officiis fugiat accusamus quia eaque adipisci, odio rem saepe odit sint quasi, officia consequuntur praesentium laboriosam magni corporis. Quos, vero.
Basic Parts
Component Parts