HELLO

my name is

by edwardsharp

HTML

<div class="card">
  <div class="cardHeader">
    <div class="hello">HELLO</div>
    <div class="mynameis">my name is</div>
  </div>
  <div class="cardBody">
    <input type="text">
  </div>
  <div class="cardFooter">
  &nbsp;
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker|Raleway');

.card {
  border-radius: 10px;
  background-color: black;
  color: white;
  text-align: center;
  width: 75vw;
  min-width: 370px;
  max-width: 470px;
  margin: 0 auto;
}
.card .cardHeader {
  font-family: 'Raleway', monospace;
  padding: 0.5em;
}
.card .cardHeader .hello{
  font-size: 2em;
  font: monospace;
  letter-spacing: 5px;
}
.card .cardHeader .mynameis{
  font-size: 1.2em;
  font: monospace;
  letter-spacing: 2px;
}
.card .cardBody{
  background-color: white;
  color: black;
  min-height: 3em;
  padding: 1em;
}
.card .cardBody input{
  font-size: 2em;
  font-family: 'Permanent Marker', cursive;
  border: none;
  border-bottom: 3px solid black;
  text-align: center;
}