|
|
| Line 73: |
Line 73: |
| | } | | } |
| | | | |
| − | .blue-bg {
| |
| − | background-color: #fff;
| |
| − | color: #ED8D8D;
| |
| − | height: 100%;
| |
| − | }
| |
| | | | |
| − | .circle {
| |
| − | font-weight: bold;
| |
| − | padding: 15px 20px;
| |
| − | 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;
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | .timeline div {
| |
| − | padding: 0;
| |
| − | height: 40px;
| |
| − | }
| |
| − | .timeline hr {
| |
| − | border-top: 3px solid #ED8D8D;
| |
| − | margin: 0;
| |
| − | top: 17px;
| |
| − | position: relative;
| |
| − | }
| |
| − | .timeline .col-2 {
| |
| − | display: flex;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .timeline .corner {
| |
| − | border: 3px solid #ED8D8D;
| |
| − | width: 100%;
| |
| − | 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%;
| |
| − | }
| |
| − | .timeline .right-bottom {
| |
| − | left: 50%;
| |
| − | top: calc(50% - 3px);
| |
| | } | | } |
| | | | |
| Line 186: |
Line 106: |
| | <div class="cart"> | | <div class="cart"> |
| | | | |
| − | <div class="container-fluid blue-bg"> | + | |
| − | <div class="container">
| + | </div> |
| − | <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>
| + | <hr> |
| − | <!--first section-->
| + | </div> |
| − | <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>
| + | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| | | | |
