7001–Fake Conference

Requirement

Please use ReactJS to setup several pages for the FakeCon content.

Help

❓ Show help content

Notes

Here is the given text content:

Fake Conference

This is an imaginary conference located in the Fake Village.

- speakers
- agenda
- ticket

---

Speakers

Thomas U
Thomas U is blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah....

Steven Mak
Steven Mak is blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah....

John Mak
John Mak is blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah....

---

Agenda

Agenda area shows what you will do here during the event.

09:00-Breakfast
Chinese style cookies

10:00-Speakers
Learn something new

20:00-Party
Meet people

---

Ticket

Buy now at $300
Price goes up in 14 hours.

There are some starter CSS for the app:

body {
  font-family: Verdana, sans-serif;
}

h1,
h2,
h3 {
  font-size: 1em;
}

ul.menu {
  list-style: none;
  padding: 0;
}
ul.menu li {
  display: inline-block;
  margin: 2px;
}
ul.menu li a {
  text-decoration: none;
  color: black;
  padding: 1em;
  background: #efefef;
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ul.menu li a.active {
  background: TEAL;
  color: white;
}
ul.menu li a.active:hover {
  background: #00b3b3;
}
ul.menu li a:hover {
  background: #dedede;
}

.bio-list {
  list-style: none;
  padding: 0;
}
.bio-list li {
  overflow: auto;
  padding: 1em 0;
}
.bio-list li figure {
  float: left;
  margin: 0;
  margin-right: 1em;
}
.bio-list li figure img {
  max-width: 100px;
}

.speakers-false,
.agenda-false,
.ticket-false {
  display: none;
}

a.active {
  font-weight: bold;
}

.buy-now {
  background: TEAL;
  padding: 1em;
  display: block;
  text-align: center;
  color: white;
  text-decoration: none;
  border-bottom: 3px solid #004d4d;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.buy-now:hover {
  background: #00b3b3;
  border-bottom-color: TEAL;
  border-bottom-width: 6px;
  margin-top: -3px;
}
.buy-now:active {
  border-bottom-width: 3px;
  margin-top: 0;
}

/* App Things */
html,
body {
  height: 100%;
  width: 100%;
  position: fixed;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#app section {
  flex: 1;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.2em;
}
#app section > div {
  min-height: 76vh;
}
#app header {
  flex: 0 1 auto;
  background: #efefef;
  border-top: 3px solid TEAL;
  padding: 0 1.2em;
}
#app footer {
  flex: 0 1 auto;
  background: #efefef;
  border-bottom: 3px solid TEAL;
  padding: 0.5em 1.2em;
}

And some sample data to use:

{
  ticket: {price: "$300", status: "Price goes up in 14 hours."},

  agenda: [
    {time: "09:00", title: "Breakfast", description: "Chinese style cookies"},
    {time: "10:00", title: "Speakers", description: "Learn something new"},
    {time: "20:00", title: "Party", description: "Meet people"}
  ],

  speakers: [
    {
      image_url: "http://placehold.it/300x300&text=Thomas",
      name: "Thomas U",
      bio: "Thomas U is blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah...."
    },
    {
      image_url: "http://placehold.it/300x300&text=Steven",
      name: "Steven Mak",
      bio: "Steven Mak is blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah...."
    },
    {
      image_url: "http://placehold.it/300x300&text=John",
      name: "John Mak",
      bio: "John Mak is blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah.... blah blah blah...."
    }
  ]
}