Line 1: | Line 1: | ||
{{DUT_China_B/test_style.css}} | {{DUT_China_B/test_style.css}} | ||
{{Template:DUT_China_B/nav}} | {{Template:DUT_China_B/nav}} | ||
− | |||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
Line 72: | Line 71: | ||
positon:fixed; | positon:fixed; | ||
top:20px; | top:20px; | ||
− | + | } | |
− | + | ||
− | + | .blue-bg { | |
+ | background-color: #fff; | ||
+ | color: #ED8D8D; | ||
+ | height: 100%; | ||
} | } | ||
− | + | ||
− | + | .circle { | |
− | + | font-weight: bold; | |
− | padding: 20px | + | padding: 15px 20px; |
− | border- | + | border-radius: 50%; |
− | + | background-color: #ED8D8D; | |
− | + | color: #fff; | |
− | + | max-height: 50px; | |
− | + | z-index: 2; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .how-it-works.row { | |
− | + | display: flex; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .how-it-works.row .col-2 { | |
− | + | display: inline-flex; | |
− | + | align-self: stretch; | |
+ | align-items: center; | ||
+ | justify-content: center; | ||
} | } | ||
− | + | .how-it-works.row .col-2::after { | |
− | + | content: ""; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | left: | + | border-left: 3px solid #ED8D8D; |
− | + | z-index: 1; | |
− | - | + | |
− | + | ||
} | } | ||
− | + | .how-it-works.row .col-2.bottom::after { | |
− | + | height: 50%; | |
− | + | left: 50%; | |
− | + | top: 50%; | |
} | } | ||
− | + | .how-it-works.row .col-2.full::after { | |
− | + | height: 100%; | |
+ | left: calc(50% - 3px); | ||
} | } | ||
− | + | .how-it-works.row .col-2.top::after { | |
− | + | height: 50%; | |
− | + | left: 50%; | |
− | + | top: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | left: | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .timeline div { | |
− | + | ||
− | + | ||
− | + | ||
padding: 0; | padding: 0; | ||
− | + | height: 40px; | |
− | + | ||
− | height: | + | |
} | } | ||
− | + | .timeline hr { | |
− | + | border-top: 3px solid #ED8D8D; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
margin: 0; | margin: 0; | ||
− | + | top: 17px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | top: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: relative; | position: relative; | ||
− | |||
− | |||
− | |||
} | } | ||
− | + | .timeline .col-2 { | |
− | + | display: flex; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
overflow: hidden; | overflow: hidden; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .timeline .corner { | |
− | + | border: 3px solid #ED8D8D; | |
− | + | width: 100%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | width: | + | |
− | + | ||
− | + | ||
position: relative; | position: relative; | ||
− | + | border-radius: 15px; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .timeline .top-right { | |
− | + | left: 50%; | |
+ | top: -50%; | ||
} | } | ||
− | + | .timeline .left-bottom { | |
− | + | left: -50%; | |
+ | top: calc(50% - 3px); | ||
} | } | ||
− | + | .timeline .top-left { | |
− | + | left: -50%; | |
− | + | top: -50%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | left: | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .timeline .right-bottom { | |
− | + | left: 50%; | |
− | + | top: calc(50% - 3px); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 408: | Line 182: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | <div | + | <div id="maintest"> |
− | + | ||
− | + | <div class="cart"> | |
− | + | ||
− | + | <div class="container-fluid blue-bg"> | |
− | + | <div class="container"> | |
− | + | <h2 class="pb-3 pt-2" style="color:#C27099;"><img style="width:50%;" src="https://static.igem.org/mediawiki/2019/c/cf/T--DUT_China_B--HPbanner1.svg">Contact lab with society</h2> | |
− | + | <!--first section--> | |
− | + | <div class="row align-items-center how-it-works"> | |
− | + | <div class="col-2 text-center bottom"> | |
− | + | <div class="circle">1</div> | |
− | + | </div> | |
− | + | <div class="col-6"> | |
− | + | <h5 style="color:#ED8D8D;">Fully Responsive</h5> | |
− | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!--path between 1-2--> | |
− | + | <div class="row timeline"> | |
− | + | <div class="col-2"> | |
− | + | <div class="corner top-right"></div> | |
− | + | </div> | |
− | + | <div class="col-8"> | |
− | + | <hr/> | |
− | + | </div> | |
− | + | <div class="col-2"> | |
− | + | <div class="corner left-bottom"></div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!--second section--> | |
− | + | <div class="row align-items-center justify-content-end how-it-works"> | |
− | + | <div class="col-6 text-right"> | |
− | + | <h5 style="color:#ED8D8D;">Using Bootstrap</h5> | |
− | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p> | |
− | + | </div> | |
− | + | <div class="col-2 text-center full"> | |
− | + | <div class="circle">2</div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!--path between 2-3--> | |
− | + | <div class="row timeline"> | |
− | + | <div class="col-2"> | |
− | + | <div class="corner right-bottom"></div> | |
− | + | </div> | |
− | + | <div class="col-8"> | |
− | + | <hr/> | |
− | + | </div> | |
− | + | <div class="col-2"> | |
− | + | <div class="corner top-left"></div> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | <!--second section--> | |
− | + | <div class="row align-items-center how-it-works"> | |
− | + | <div class="col-2 text-center full"> | |
− | + | <div class="circle">3</div> | |
− | + | </div> | |
− | + | <div class="col-6"> | |
− | + | <h5 style="color:#ED8D8D;">Fully Responsive</h5> | |
− | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!--path between 2-3--> | |
− | + | <div class="row timeline"> | |
− | + | ||
− | + | <div class="col-2"> | |
− | + | <div class="corner top-right"></div> | |
− | + | </div> | |
− | + | <div class="col-8"> | |
− | + | <hr/> | |
− | + | </div> | |
− | + | <div class="col-2"> | |
− | + | <div class="corner left-bottom"></div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="row align-items-center justify-content-end how-it-works"> | |
− | + | <div class="col-6 text-right"> | |
− | + | <h5 style="color:#ED8D8D;">Using Bootstrap</h5> | |
− | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p> | |
− | + | </div> | |
− | + | <div class="col-2 text-center top"> | |
− | + | <div class="circle">4</div> | |
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <hr> | ||
</div> | </div> | ||
− | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 519: | Line 298: | ||
} | } | ||
</script> | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 00:54, 19 October 2019
![parts](https://static.igem.org/mediawiki/2019/d/d0/T--DUT_China_B--HP.jpg)
Contact lab with society
1
Fully Responsive
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
Using Bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
2
3
Fully Responsive
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
Using Bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
4