Difference between revisions of "Team:Marburg/MedalCriteria"

Line 63: Line 63:
 
         margin: 1.5rem 0 !important;
 
         margin: 1.5rem 0 !important;
 
         margin-left: -40px !important;
 
         margin-left: -40px !important;
 +
      }
 +
    }
 +
 +
    section {
 +
      padding: 100px 0;
 +
    }
 +
 +
    html,
 +
    body {
 +
      overflow-x: hidden;
 +
    }
 +
 +
    body {
 +
      font-family: 'Roboto';
 +
      font-size: 17px;
 +
      font-weight: 400;
 +
      background-color: #eee;
 +
    }
 +
 +
    h1 {
 +
      font-size: 200%;
 +
      text-transform: uppercase;
 +
      letter-spacing: 3px;
 +
      font-weight: 400;
 +
    }
 +
 +
    header {
 +
      background: #3F51B5;
 +
      color: #FFFFFF;
 +
      padding: 150px 0;
 +
    }
 +
 +
    header p {
 +
      font-family: 'Allura';
 +
      color: rgba(255, 255, 255, 0.2);
 +
      margin-bottom: 0;
 +
      font-size: 60px;
 +
      margin-top: -30px;
 +
    }
 +
 +
    .timeline {
 +
      position: relative;
 +
    }
 +
 +
    .timeline::before {
 +
      content: '';
 +
      background: #C5CAE9;
 +
      width: 5px;
 +
      height: 95%;
 +
      position: absolute;
 +
      left: 50%;
 +
      transform: translateX(-50%);
 +
    }
 +
 +
    .timeline-item {
 +
      width: 100%;
 +
      margin-bottom: 70px;
 +
    }
 +
 +
    .timeline-item:nth-child(even) .timeline-content {
 +
      float: right;
 +
      padding: 40px 30px 10px 30px;
 +
    }
 +
 +
    .timeline-item:nth-child(even) .timeline-content .date {
 +
      right: auto;
 +
      left: 0;
 +
    }
 +
 +
    .timeline-item:nth-child(even) .timeline-content::after {
 +
      content: '';
 +
      position: absolute;
 +
      border-style: solid;
 +
      width: 0;
 +
      height: 0;
 +
      top: 30px;
 +
      left: -15px;
 +
      border-width: 10px 15px 10px 0;
 +
      border-color: transparent #f5f5f5 transparent transparent;
 +
    }
 +
 +
    .timeline-item::after {
 +
      content: '';
 +
      display: block;
 +
      clear: both;
 +
    }
 +
 +
    .timeline-content {
 +
      position: relative;
 +
      width: 45%;
 +
      padding: 10px 30px;
 +
      border-radius: 4px;
 +
      background: #f5f5f5;
 +
      box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 +
    }
 +
 +
    .timeline-content::after {
 +
      content: '';
 +
      position: absolute;
 +
      border-style: solid;
 +
      width: 0;
 +
      height: 0;
 +
      top: 30px;
 +
      right: -15px;
 +
      border-width: 10px 0 10px 15px;
 +
      border-color: transparent transparent transparent #f5f5f5;
 +
    }
 +
 +
    .timeline-img {
 +
      width: 30px;
 +
      height: 30px;
 +
      background: #3F51B5;
 +
      border-radius: 50%;
 +
      position: absolute;
 +
      left: 50%;
 +
      margin-top: 25px;
 +
      margin-left: -15px;
 +
    }
 +
 +
    a {
 +
      background: #3F51B5;
 +
      color: #FFFFFF;
 +
      padding: 8px 20px;
 +
      text-transform: uppercase;
 +
      font-size: 14px;
 +
      margin-bottom: 20px;
 +
      margin-top: 10px;
 +
      display: inline-block;
 +
      border-radius: 2px;
 +
      box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
 +
    }
 +
 +
    a:hover,
 +
    a:active,
 +
    a:focus {
 +
      background: #32408f;
 +
      color: #FFFFFF;
 +
      text-decoration: none;
 +
    }
 +
 +
    .timeline-card {
 +
      padding: 0 !important;
 +
    }
 +
 +
    .timeline-card p {
 +
      padding: 0 20px;
 +
    }
 +
 +
    .timeline-card a {
 +
      margin-left: 20px;
 +
    }
 +
 +
    .timeline-item .timeline-img-header {
 +
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url('https://picsum.photos/1000/800/?random') center center no-repeat;
 +
      background-size: cover;
 +
    }
 +
 +
    .timeline-img-header {
 +
      height: 200px;
 +
      position: relative;
 +
      margin-bottom: 20px;
 +
    }
 +
 +
    .timeline-img-header h2 {
 +
      color: #FFFFFF;
 +
      position: absolute;
 +
      bottom: 5px;
 +
      left: 20px;
 +
    }
 +
 +
    blockquote {
 +
      margin-top: 30px;
 +
      color: #757575;
 +
      border-left-color: #3F51B5;
 +
      padding: 0 20px;
 +
    }
 +
 +
    .date {
 +
      background: #FF4081;
 +
      display: inline-block;
 +
      color: #FFFFFF;
 +
      padding: 10px;
 +
      position: absolute;
 +
      top: 0;
 +
      right: 0;
 +
    }
 +
 +
    @media screen and (max-width: 768px) {
 +
      .timeline::before {
 +
        left: 50px;
 +
      }
 +
 +
      .timeline .timeline-img {
 +
        left: 50px;
 +
      }
 +
 +
      .timeline .timeline-content {
 +
        max-width: 100%;
 +
        width: auto;
 +
        margin-left: 70px;
 +
      }
 +
 +
      .timeline .timeline-item:nth-child(even) .timeline-content {
 +
        float: none;
 +
      }
 +
 +
      .timeline .timeline-item:nth-child(odd) .timeline-content::after {
 +
        content: '';
 +
        position: absolute;
 +
        border-style: solid;
 +
        width: 0;
 +
        height: 0;
 +
        top: 30px;
 +
        left: -15px;
 +
        border-width: 10px 15px 10px 0;
 +
        border-color: transparent #f5f5f5 transparent transparent;
 
       }
 
       }
 
     }
 
     }
Line 75: Line 291:
 
     </div>
 
     </div>
 
     <section style="margin-top: 11vh;">
 
     <section style="margin-top: 11vh;">
 +
      <section class="timeline">
 +
        <div class="container">
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content js--fadeInLeft">
 +
              <h2>Title</h2>
 +
              <div class="date">1 MAY 2016</div>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content timeline-card js--fadeInRight">
 +
              <div class="timeline-img-header">
 +
                <h2>Card Title</h2>
 +
              </div>
 +
              <div class="date">25 MAY 2016</div>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content js--fadeInLeft">
 +
              <div class="date">3 JUN 2016</div>
 +
              <h2>Quote</h2>
 +
              <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor
 +
                iste
 +
                fugit totam quasi inventore!</blockquote>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content js--fadeInRight">
 +
              <h2>Title</h2>
 +
              <div class="date">22 JUN 2016</div>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content timeline-card js--fadeInLeft">
 +
              <div class="timeline-img-header">
 +
                <h2>Card Title</h2>
 +
              </div>
 +
              <div class="date">10 JULY 2016</div>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content timeline-card js--fadeInRight">
 +
              <div class="timeline-img-header">
 +
                <h2>Card Title</h2>
 +
              </div>
 +
              <div class="date">30 JULY 2016</div>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content js--fadeInLeft">
 +
              <div class="date">5 AUG 2016</div>
 +
              <h2>Quote</h2>
 +
              <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor
 +
                iste
 +
                fugit totam quasi inventore!</blockquote>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content timeline-card js--fadeInRight">
 +
              <div class="timeline-img-header">
 +
                <h2>Card Title</h2>
 +
              </div>
 +
              <div class="date">19 AUG 2016</div>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
 +
            <div class="timeline-img"></div>
 +
 +
            <div class="timeline-content js--fadeInLeft">
 +
              <div class="date">1 SEP 2016</div>
 +
              <h2>Title</h2>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate
 +
                saepe
 +
                atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias,
 +
                ullam.
 +
              </p>
 +
              <a class="bnt-more" href="javascript:void(0)">More</a>
 +
            </div>
 +
          </div>
 +
 +
  
 +
        </div>
 +
      </section>
 
     </section>
 
     </section>
 
   </div>
 
   </div>
 
</html>
 
</html>
 
{{Marburg/footer}}
 
{{Marburg/footer}}

Revision as of 07:10, 20 October 2019

M E D A L I C R I T E R I A

Title

1 MAY 2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More

Card Title

25 MAY 2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More
3 JUN 2016

Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!

Title

22 JUN 2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More

Card Title

10 JULY 2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More

Card Title

30 JULY 2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More
5 AUG 2016

Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!

Card Title

19 AUG 2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More
1 SEP 2016

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.

More