Making header and footer share the same look

7 年之前 · 61339db27a
--- a/public/index.html
+++ b/public/index.html
@@ -8,13 +8,16 @@
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>Breakups</title>
  </head>
  <header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 80px; left: 0px; top: 0px; right: 0px; color: white;">
    <h1>Breakups</h1>
  </header>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
  <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 80px; color: white;">
  <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 60px; color: white;">
    <h3>Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. Fork this on <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a>.</h5>
  </footer>
 </html>
--- a/src/App.css
+++ b/src/App.css
@@ -1,18 +1,8 @@
 .App {
    margin-top: 100px;
    text-align: center;
 }

 .App-header {
    background-color: #222;
    height: 80px;
    padding: 10px;
    color: white;
 }

 .App-title {
    font-size: 1.5em;
 }

 .Forms {
    align-content: center;
    align-items: center;
--- a/src/App.js
+++ b/src/App.js
@@ -17,9 +17,6 @@ class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Breakups</h1>
        </header>
        <h3>Easy way to split bills among multiple people.</h3>
        <div className="Forms">
          <form className="Main-form" onSubmit={this.populatePeople.bind(this)}>