Results Page

by sk8wt

HTML

</div>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox Card Tutorial</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/index.css">
  </head>
  <body>
      <div class="row">
        <!-- CARD 1 -->
        <a href="https://fis.fda.gov/sense/app/d10be6bb-494e-4cd2-82e4-0135608ddc13/sheet/7a47a261-d58b-4203-a8aa-6d3021737452/state/analysis">
        <div class="card">
          <div class="card-header">Medicines</div>
          <div class="card-main">
            <i class="material-icons">enhanced_encryption</i>
            <div class="main-description">Medicines you are taking</div>
          </div>
        </div>
        </a>
        <!-- CARD 2 -->
        <div class="card">
          <div class="card-header">Side Effects</div>
          <div class="card-main">
            <i class="material-icons">face</i>
            <div class="main-description">Summary of side effects</div>
          </div>
        </div>
        <!-- CARD 3 -->
        <div class="card">
          <div class="card-header">Results</div>
          <div class="card-main">
            <i class="material-icons">perm_identity</i>
            <div class="main-description">Refine your results</div>
          </div>
        </div>
      </div>

      <div class="row">
        <!-- CARD 1 -->
        <div class="card" id="or-border">
          <div class="card-header" id="or-header">Adverse Event. <a href="https://open.fda.gov/data/faers/">Link</a>
</div>
          <div class="card-main">
            <i class="material-icons" id="or-color">mood_bad</i>
            <div class="main-description" id="or-color">Define adverse events</div>
          </div>
        </div>
        <!-- CARD 2 -->
        <a...

CSS

div.iframe-link {
    position: relative;
}
a.iframe-link1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

body {
  font-family: 'Proxima Nova', proxima-nova;
  min-height: 95vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 25px;
}

.card {
  width: 150px;                 /* Set width of cards */
  display: flex;                /* Children use Flexbox */
  flex-direction: column;       /* Rotate Axis */
  border: 1px solid #0077cc;    /* Set up Border */
  border-radius: 4px;           /* Slightly Curve edges */
  overflow: hidden;             /* Fixes the corners */
  margin: 5px;                  /* Add space between cards */
}

.card-header {
  color: #0077cc;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #0077cc;
  background-color: #E0F7FA;
  padding: 5px 10px;
}

.card-main {
  display: flex;              /* Children use Flexbox */
  flex-direction: column;     /* Rotate Axis to Vertical */
  justify-content: center;    /* Group Children in Center */
  align-items: center;        /* Group Children in Center (on cross axis) */
  padding: 15px 0;            /* Add padding to the top/bottom */
}

.material-icons {
  font-size: 36px;
  color: #0077cc;
  margin-bottom: 5px;
}

.main-description {
  color: #0077cc;
  font-size: 12px;
  text-align: center;
}

/* IDs for additional colors*/
/* Colors from Google Material Design: https://material.io/guidelines/style/color.html*/

#or-border {
  border-color: #0077cc;
}

#or-header {
  background-color: #96b1d255;
  border-color: #0077cc;
  color: #0077cc;
}

#or-color {
  color: #0077cc;
}

#red-border {
  border-color: #EF9A9A;
}

#red-header {
  background-color: #FFEBEE;
  border-color: #EF9A9A;
  color: #D32F2F;
}

#red-color {
  color: #D32F2F;
}

JavaScript

$(".card-header").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});
<div class="iframe-link">
    <iframe src="https://drive.google.com/file/d/1rSZ1IzYP_QAag6WGe1PNHPy9VBSg-FQH/preview" width="90px" height="60px" frameborder="0" scrolling="no"
     marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
    </iframe>
    <a href="http://search.carrot2.org/stable/search?query=medical+side+effects&results=100&source=web&algorithm=lingo&view=foamtree&skin=fancy-compact&EToolsDocumentSource.language=ALL&EToolsDocumentSource.country=ALL&EToolsDocumentSource.safeSearch=false" target="_top" class="iframe-link1"></a>
</div>