<div class="background">
  <div class="gradient">
    <div class="container">
      <div class="row">

        <div class="col-md-3">
          <mat-card>
            <mat-card-title>Tweets by @WebMEV</mat-card-title>
            <mat-card-content>
              <a class="twitter-timeline"
                 href="https://twitter.com/webmev"
                 data-width="300" data-height="300" data-tweet-limit="3"
                 data-chrome="noheader">
              </a>
            </mat-card-content>
          </mat-card>
        </div>

        <div class="col-md-6">
          <article>
            <h1 class="mat-h1">{{ 'mev.title.long' | translate }}</h1>
            <div class="mev-section">
              <p>WebMeV (Multiple Experiment Viewer) is a cloud-based application supporting <i><b>analysis</b></i>, <i><b>visualization</b></i>,
                and <i><b>stratification</b></i> of large genomic data, particularly for RNASeq and microarray data.</p>
              <p class="">With WebMeV platform, you can:</p>
              <p><span class="mev-heading">Perform RNASeq Analysis</span> - Perform differential expression analysis
                using RNASeq raw count data to draw biological insights.</p>
              <p><span class="mev-heading">Access to Public Domain Data</span> - Directly search and pull TCGA and GEO
                gene expression and sample attribute data in addition to private data for analysis</p>
              <p><span class="mev-heading">Stratify Cohorts using Clinical Attributes</span> - Perform complex cohort
                stratification using sophisticated regular expression, facet filter, and set operations.</p>
            </div>

            <div class="mev-section">
              <p>Web MeV is being built to meet the challenge of exploring large public genomic data set and
                Next-Generation Sequencing data with intuitive graphical interface for analysis. MeV is a free and
                open-source cloud service platform that does not require log in to use.</p>
            </div>

            <div class="mev-section">
              <p><span class="mev-heading">Where to start</span> - A series of videos tutorials are available on <a
                href="https://www.youtube.com/watch?v=VqGpdotr-A4&amp;list=PLSUXpXpbiLkJFbC3LOMgBacvNSdNpw0nv">YouTube</a>
                and accessible after entering the <a ui-sref="root.datasets.imports.tutorials"
                                                     href="#/datasets/tutorials">WebMeV</a>. Example files for count
                matrix and sample attribute are available here.</p>
              <p><span class="mev-heading">Tutorials and Documentation</span> - tutorial documentation is available on
                the <a href="https://github.com/dfci-cccb/mev/wiki">WebMev Wiki</a></p>
              <p><span class="mev-heading">Customized Analysis</span> - Complex bioinformatics analysis outside the
                scope of WebMeV functionalities can contact the Center for Cancer Computational Biology at Dana-Farber
                Cancer Institute as consulting project.
                <a href="http://cccb.dfci.harvard.edu/home">Click here for more information</a>.</p>
            </div>


            <!--div class="actions">
              <a [ngClass]="routeAnimationsElements" mat-raised-button class="actions-main" color="primary" routerLink="../feature-list">
                {{ 'mev.menu.features' | translate }}
              </a>
              <a mat-raised-button class="actions-main" color="accent" routerLink="../examples" [ngClass]="routeAnimationsElements">
                {{ 'mev.menu.examples' | translate }}
              </a>
              <a mat-raised-button class="actions-main" color="warn" routerLink="../settings" [ngClass]="routeAnimationsElements">
                {{ 'mev.about.change-theme' | translate }}
              </a>
              <br>
              <span [ngClass]="routeAnimationsElements">{{ 'mev.about.check-blogs' | translate }}</span>
              <br>
              <a mat-raised-button
                 [ngClass]="routeAnimationsElements"
                 rel="noopener noreferrer"
                 target="_blank"
                 href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1">
                 <fa-icon [icon]="['fab','medium-m']"></fa-icon>
                Material Theming
              </a>

            </div-->
          </article>
        </div>

        <div class="col-md-3 mev-sidebar">
          <!--div class="panel panel-info">
            <div class="panel-body">

              <form action="/signin/google" method="POST">
                <button type="submit" class="btn btn-large btn-info btn-block hp-signin">Sign In With Google</button>
                <input type="hidden" name="scope"
                       value="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo#email https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/tasks https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/latitude.all.best"/>
                <input type="hidden" name="request_visible_actions"
                       value="http://schemas.google.com/AddActivity http://schemas.google.com/BuyActivity http://schemas.google.com/CheckInActivity http://schemas.google.com/CommentActivity http://schemas.google.com/CreateActivity http://schemas.google.com/DiscoverActivity http://schemas.google.com/ListenActivity http://schemas.google.com/ReserveActivity http://schemas.google.com/ReviewActivity http://schemas.google.com/WantActivity"/>
                <input type="hidden" name="access_type" value="offline"/>
              </form>

              <a ui-sref="root.datasets" class="btn btn-info btn-large btn-block hp-signin">Get Started</a>
              <a ui-sref="root.datasets.imports.tutorials"
                 class="btn btn-info btn-large btn-block hp-signin">Tutorials</a>

            </div>
          </div-->

          <mat-card>
            <mat-card-header>
              <mat-card-title>
                Browse
              </mat-card-title>
              <fa-icon [icon]="['fas','info']"></fa-icon>
            </mat-card-header>
            <mat-card-content>
              <a href="https://sourceforge.net/projects/mev-tm4/">TM4 MeV Stand-Alone Client</a>
              <br>
              <a href="https://github.com/dfci-cccb/mev/archive/master.zip">Download Current Stable Version (.zip)</a>
              <br>
              <a href="https://github.com/dfci-cccb/mev/wiki">WebMev Wiki</a>
              <br>
            </mat-card-content>

            <mat-card-header>
              <mat-card-title>
                What's Inside
              </mat-card-title>
              <fa-icon [icon]="['fas','cogs']"></fa-icon>
            </mat-card-header>
            <mat-card-content>
              <a href="http://www.bioconductor.org">Bioconductor</a>
              <br>
              <a href="http://d3js.org/">D3.js</a>
              <br>
              <a href="http://www.r-project.org/">R Statistics Language</a>
              <br>
              <a href="http://openrefine.org/">Open Refine</a>
              <br>
            </mat-card-content>
          </mat-card>

          <mat-card>
            <mat-card-header>
              <mat-card-title>
                GitHub
              </mat-card-title>
              <fa-icon [icon]="['fab','github']"></fa-icon>
            </mat-card-header>

            <mat-card-content>
              See current developments and contribute to the project <a href="https://github.com/dfci-cccb/mev">
              here</a>.
              <br>
              <br>
              <a href="https://github.com/dfci-cccb/mev/issues">Have an issue or want to report a bug? Tell us about
                it.</a>
            </mat-card-content>
          </mat-card>

        </div>
      </div>
    </div>
  </div>
</div>

./about.component.scss

@import '../../../../styles-variables';

h1 {
  text-align: center;
  font-size: 2em;
  text-transform: uppercase;
}

h2 {
  font-size: 1.5em;
  text-transform: uppercase;
}

.background {
  padding: 50px 0 0 0;
  position: relative;

  .actions {
    text-align: center;
    margin: 50px;
    z-index: 1;

    span {
      display: inline-block;
      font-weight: bold;
      padding: 20px 10px 30px 10px;
    }

    a {
      margin: 0 5px 10px 0;
      text-decoration: none;

      &.actions-main {
        text-transform: uppercase;
        padding: 3px 24px;
      }

      fa-icon {
        position: relative;
        bottom: 1px;
      }
    }
  }

  .get-started {
    max-width: 700px;
    margin: 50px auto;
    letter-spacing: 0.01px;
    overflow-wrap: break-word;
    z-index: 1;
    overflow: hidden;

    code {
      font-size: 0.9em;
      display: inline-block;
      word-wrap: break-word;
      white-space: normal;
      margin: 0 0 10px 0;
    }
  }

  /* &::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('../../../../assets/logo.png') no-repeat center top;
    background-size: cover;
    opacity: 0.7;
    content: '';
    z-index: 0;
  }*/

  .gradient {
    &::before {
      position: absolute;
      top: 51%;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
      z-index: 0;
    }
  }

  .container {
    position: relative;
    max-width: none;
  }
}

.follow-releases {
  max-width: 700px;
  margin: 0 auto 60px auto;

  p {
    line-height: 40px;
  }

  img {
    display: block;
    max-width: 80%;
    margin: 20px auto 0 auto;
    border-radius: 5px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
}

.mev-section {
  margin: 30px auto 30px auto;
}

.mev-heading {
  font-weight: bold;
}

mat-card {
  margin: 0 0 20px 0;
}
.mat-card-header {
  justify-content: space-between;
}

.contributors {
  max-width: 700px;
  margin: 0 auto 60px auto;

  .contributors-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;

    a {
      margin: 8px;
      width: 100px;
      display: inline-block;
      text-align: center;

      span {
        display: inline-block;
        padding: 10px 0 0 0;
        line-height: 16px;
      }

      img {
        border-radius: 50%;
        width: 100px;
        border: 5px solid;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
          0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      }
    }
  }
}

@media (max-width: map-get($grid-breakpoints, md)) {
  .background {
    .actions {
      margin: 50px 0;
    }
    .get-started {
      width: auto;
    }
  }
  .follow-releases {
    width: auto;

    img {
      max-width: 100%;
    }
  }
}

@media (max-width: map-get($grid-breakpoints, sm)) {
  .background {
    padding: 40px 0 0 0;

    h1 {
      line-height: 1em;
    }

    .actions {
      margin: 40px 0 0 0;

      span {
        padding: 10px 0 20px 0;
      }

      a {
        width: 100%;
      }
    }

    .get-started {
      width: auto;
      margin: 40px auto 40px auto;
    }
  }

  .follow-releases {
    margin: 0 auto 40px auto;
  }
}