fisheyelandingpage.Rmd

---
title: ''
output:
  html_document
---

```{r setup, include=FALSE}
library(dplyr)
library(htmltools)

knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)

```

```{css, echo = FALSE}

.header {
  overflow: hidden;
  background-color: white;
  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1600px;
}

.header a {
  float: right;
  color: black;
  text-align: center;
  padding: 18px;
  text-decoration: none;
  font-size: 20px;
  line-height: 35px;
  border-radius: 8px;
  max-width: 1600px;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #a7daf5;
  color: black;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.green_seperator {
    background-color: #a7daf5;
    clear: both;
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1600px;
}

.main-container {
    background-color: #042155;
    max-width: 100%;
}


img.fisheye{  
    box-shadow: 0 0 10px #000;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    width: 100%;
    max-width: 1600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    column-gap: 100px;
}

.column {
  width: auto;
  margin-left: auto;
  margin-right: auto;  
  padding : 20px 0px 20px 0px;
}


.framefooterleftitem {
    border: 0 solid #CCCCCC;
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal;
    background-color: #042155;
    height: 3em;
    float : left;
    padding : 0px 15px 0px 3px;
}

.framefooterrightitem {
    border: 0 solid #CCCCCC;
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal;
    background-color: #042155;
    height: 3em;
    float : right;
    padding : 0px 15px 0px 3px;
}




<title>Data Explorer</title>
    <link href="www/footer.css" rel="stylesheet">


<div class="header">
  <img src="www/Pictures/noaalogo.png" style="float:left">
  <div class="header-right">
  <a href="https://connect.fisheries.noaa.gov/fisheye_contact/" target="_blank">Contact Us</a>
  <a href="https://connect.fisheries.noaa.gov/fisheye_resources/" target="_blank">Resources</a>
  <a href="https://connect.fisheries.noaa.gov/fisheye_literature/" target="_blank">Literature</a>
  <a href="https://connect.fisheries.noaa.gov/fisheye_about/" target="_blank">About</a>
  </div>
</div>

  <div class="green_seperator"></div>
  </header>


<a>
<img class = "image fisheye" src="www/Pictures/homepage_c.png" alt ="fisheye Fisheries Economic Explorer">
</a>


<div class="row">
  <div class="column">
  <a href="https://connect.fisheries.noaa.gov/WestCoastCatchShares/">
    <img src="www/Pictures/perfmetricsbutton.png"></a>
  </div>
  <div class="column">
  <a href="https://connect.fisheries.noaa.gov/Whiting/">
    <img src="www/Pictures/whitingbutton.png">
  </div>
</div>




<div class="framefooterleftitem">
  <a href="http://www.nwfsc.noaa.gov/"> NWFSC </a>
  |
  <a href="http://www.nmfs.noaa.gov/"> NOAA Fisheries </a>
  |
  <a href="https://www.noaa.gov/"> NOAA </a>
  |
  <a href="http://www.nwfsc.noaa.gov/copyright.cfm"> Copyright policy </a>
  |
  <a href="http://www.nwfsc.noaa.gov/disclaimer.cfm"> Disclaimer </a>
  |
  <a href="http://www.nwfsc.noaa.gov/contact/feedback.cfm"> Feedback </a>
  |
  <a href="https://www8.nos.noaa.gov/survey/index.aspx?Location=dataexplorer"> NOAA customer satisfaction survey </a>
  |
  <a href="http://www.nmfs.noaa.gov/aboutus/privacy.html"> NOAA privacy policy </a>
  |
  <a href="https://www.cio.noaa.gov/services_programs/info_quality.html"> NOAA information quality </a>
  </div>
  
<div class="framefooterrightitem">
  <a href="http://www.nwfsc.noaa.gov/contact/feedback.cfm">
  Problems with site? </a>
  |
  <a href=".."> Data Explorer </a>
  |
  </div>
         
       

        
```