asu_bio fiddle

by gpranjan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>ASU Biology 101</title>
  <meta charset="utf-8">
 
  <link href="/asu_bio/site/styles/asu_bio_web.css" rel="stylesheet"/>

</head>
<body>

  <div class="container page">

    <div class="leftPanel">
    </div>

    <div class="midPanel">
      <img class="section-image" src="https://th.bing.com/th/id/OIP.XbLWCZk5jM_32n5owqQYmwHaLH?w=236&h=354&c=7&o=5&dpr=2&pid=1.7"/>
    </div>

    <div class="rightPanel">
    <div class="flex1">
    <div class="rightPanelItems">

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_second_quiz.html">Quiz</a>
      </div>

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_survey.html">Survey</a>
      </div>

      <div class="surveyPanel rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_support.html">Support</a>
      </div>

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_feedback.html">Feedback</a>
      </div>

    </div>

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

</body>
</html>

CSS

* {
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fde3e9;
}

.page {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #fde3e9;
  width: max-content; 
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.leftPanel {
  width: 25vw;
  height: 100%;
}

.midPanel {
  width: max-content;
  height: max-content;
}

.section-image {
  width: 50vw;
  height: auto;
}

.rightPanel {
  display: flex;
  width: 25vw;
  height: inherit;
  background-color: blue;
}

.flex1 {
  flex: 1 0 auto;
  height: inherit;
  background-color: red;
}

.rightPanelItems {
  display: flexbox;
  flex-direction: column nowrap;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

.rightPanelButton {
  background-color: darkolivegreen;

  margin: auto;
  flex: 1 0 auto;
}

.rightPanelButton > a {
  color: white;
}