React

HTML

<div id="app"></div>

CSS

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
#navbar {
  background-color: white;
  width: 100%;
  position: fixed;
}
#navbar a {
  height: 100%;
  display: inline-block;
  font-size: 20px;
  font-family: Lato, sans-serif;
  padding: 18px 20px;
  text-decoration: none;
  color: black;
  float: right;
}
#welcome-section {
  height: calc(100vh - 20px);
  padding: 10px;
  color: black;
  background-image: url(https://lh5.googleusercontent.com/TgLKOOsK8OOu4OvgzeEQxjPJ8j_wguizROxaKTX70o6VeVaRBTCTLyj71I-YXTUmGpM=w2400);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #edefee;
}
#infocard {
  height: calc(100vh - 20px);
  padding: 10px;
  color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #23d27a;
}
.welcome-text {
  margin-top: calc(50vh - 65px - 1vw);
  font-size: calc(65px + 2vw);
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 200;
  margin-bottom: 20px;
  font-weight: 700;
}
.intro {
  font-family: "Muli";
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
#mountains {
  padding: 30px;
  background-color: #edefee;
  color: black;
}
#secTitle {
   font-size: calc(40px + 1vw);
  text-align: center;
  font-family: "Oswald", sans-serif;
  background-color: #edefee;
  font-weight: 600;
}
.mountainGrid {
  display: grid;
  grid-gap:  40px;
  grid-template-columns: 4fr 3fr;
}
.gridItem {
  font-family: "Lato";
  background-size: cover;
  margin-bottom: 20px;
  height: 100vh;
}
.gridItem p {
  padding: 2vw;
  font-size: 24px;
}
.instruction {
  text-align: center;
  width: 100%;
  margin-bottom: 12vh;
  display: block;
  font-family: Lato;
}
#statBar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 30vh 10vh;
  background-color: white;
  width:...

React

class NewHeights extends React.Component {
  constructor(props) {
    super(props);
    this.reserveClick = this.reserveClick.bind(this);
    this.destClick = this.destClick.bind(this);
    this.handler = this.handler.bind(this);
    this.state = {
			destinations: [["5725ft", "34F", "Mount Rushmore and Presidential Trail Loop","Mount Rushmore, South Dakota", "url(https://static01.nyt.com/images/2020/06/27/multimedia/27xp-mount-rushmore-pix/27xp-mount-rushmore-pix-superJumbo.jpg)", "Mount Rushmore, one of the most well-known mountains in the US with the heads of presidents carved on it."],["17057ft", "68-80F", "Naro Moru Route, Sirimon Route", "Mount Kenya, Kenya", "url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Mount_Kenya.jpg/1024px-Mount_Kenya.jpg)", "Along with being declared as a World Heritage site, Mount. Kenya is the second highest mountain on Africa. The development of eco-lodges and hotels and banning of single use plastics has made Kenya more eco-friendly and has minimize damages to practices in the surrounding areas. There are many routes on Mount. Kenya, each with varying difficulty, but each will provide beautiful views and even better experiences."], ["830ft", "74.3F", "Fortuna Mountain Trail", "La Fortuna Mountain, Costa Rica", "url(https://i.ytimg.com/vi/cediRqIIHQ4/hqdefault.jpg)", "A gentle and beautiful mountain that is smaller and does not require much climbing. One can experience the beautiful Costa Rican landscape hardly breaking a sweat and also enjoy the nearby beaches."]],
      selected: [],
      popup: false,
      mountName: "",
      mountTemp: "",
      mountTrails: "",
      mountAlt: "",
      mountURL: "",
      mountText: "",
      curList: [["5725ft", "34F", "Mount Rushmore and Presidential Trail Loop","Mount Rushmore, South Dakota", "url(https://static01.nyt.com/images/2020/06/27/multimedia/27xp-mount-rushmore-pix/27xp-mount-rushmore-pix-superJumbo.jpg)", "Mount Rushmore, one of the most well-known mountains in...