SonyaMoisset/Pocketbook | Codecademy | My solution.markdown

## index.html
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="header">
    <div class="container">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/pocketbook/logo.svg" width="50">
    </div>
  </div>

  <div class="main">
    <div class="container">
      <div class="" row>
        <div class="col-md-7">
          <h1>Join Pocketbook</h1>
          <form role="form">
            <div class="form-group">
              <label for="first">First name</label>
              <input type="text" class="form-control" id="first">
            </div>
            <div class="form-group">
              <label for="last">Last name</label>
              <input type="text" class="form-control" id="last">
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" id="email">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password">
            </div>
            <button type="submit" class="btn">Create account</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="container">
      <ul>
        <li>Contact</li>
        <li>Help Center</li>
        <li>About</li>
      </ul>
    </div>
  </div>
</body>

</html>

## Pocketbook | Codecademy | My solution.markdown

      
    Raw
  

              Pocketbook | Codecademy | My solution.markdown
            
          
    Pocketbook | Codecademy | My solution

A Pen by Sonya Moisset on CodePen.
License.

  
## style.css
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/pocketbook/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #140e07;
  color: #fff;
}

.container {
  max-width: 940px;
}
/* Header */

.header {
  text-align: center;
  margin-bottom: 50px;
}

.header .container {
  padding: 30px 0;
  border-bottom: 1px solid #e5e5e5;
}
/* Main */

.main {
  margin: 80px 0;
}

.main h1 {
  font-size: 30px;
  margin: 0 0 20px 0;
}

form input.form-control {
  border: 0px;
  border-radius: 0px;
}

.main .btn {
  margin-top: 30px;
  color: #fff;
  background: rgba(0, 240, 190, 0.25);
  border: 0px;
  border-radius: 0px;
}
/* Footer */

.footer .container {
  padding: 20px;
  border-top: 1px solid #e5e5e5;
}

.footer ul {
  list-style: none;
  padding: 0 20px;
  margin-bottom: 80px;
}

.footer li {
  display: inline;
  margin-right: 20px;
}
	<html>

	<head>
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<div class="header">
	<div class="container">
	<img src="https://s3.amazonaws.com/codecademy-content/projects/pocketbook/logo.svg" width="50">
	</div>
	</div>

	<div class="main">
	<div class="container">
	<div class="" row>
	<div class="col-md-7">
	<h1>Join Pocketbook</h1>
	<form role="form">
	<div class="form-group">
	<label for="first">First name</label>
	<input type="text" class="form-control" id="first">
	</div>
	<div class="form-group">
	<label for="last">Last name</label>
	<input type="text" class="form-control" id="last">
	</div>
	<div class="form-group">
	<label for="email">Email</label>
	<input type="email" class="form-control" id="email">
	</div>
	<div class="form-group">
	<label for="password">Password</label>
	<input type="password" class="form-control" id="password">
	</div>
	<button type="submit" class="btn">Create account</button>
	</form>
	</div>
	</div>
	</div>
	</div>

	<div class="footer">
	<div class="container">
	<ul>
	<li>Contact</li>
	<li>Help Center</li>
	<li>About</li>
	</ul>
	</div>
	</div>
	</body>

	</html>
	html,
	body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	}

	body {
	background: url("https://s3.amazonaws.com/codecademy-content/projects/pocketbook/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #140e07;
	color: #fff;
	}

	.container {
	max-width: 940px;
	}
	/* Header */

	.header {
	text-align: center;
	margin-bottom: 50px;
	}

	.header .container {
	padding: 30px 0;
	border-bottom: 1px solid #e5e5e5;
	}
	/* Main */

	.main {
	margin: 80px 0;
	}

	.main h1 {
	font-size: 30px;
	margin: 0 0 20px 0;
	}

	form input.form-control {
	border: 0px;
	border-radius: 0px;
	}

	.main .btn {
	margin-top: 30px;
	color: #fff;
	background: rgba(0, 240, 190, 0.25);
	border: 0px;
	border-radius: 0px;
	}
	/* Footer */

	.footer .container {
	padding: 20px;
	border-top: 1px solid #e5e5e5;
	}

	.footer ul {
	list-style: none;
	padding: 0 20px;
	margin-bottom: 80px;
	}

	.footer li {
	display: inline;
	margin-right: 20px;
	}