<header>
  
<meta name="viewport" content="width=device-width, initial-scale=1">
</header>
<body>
  <div class="container">
    <section class='wrapper'>
      <h1>Random Generator</h1>
      <h3>Placeholder text </h3>
      <button id="generate-name">Click Here</button>
      <h2>
          <span class='title' id='title-name'></span> <span class='surname' id='sur-name'></span>
      </h2>
    </section>
  </div>
</body>
body {
  overflow-x: hidden;
  overflow-y: hidden; 
  height: 100%;
  width: 100%;
  /*background-image: url("https://scontent-ber1-1.xx.fbcdn.net/v/t1.0-9/54377105_2592781334281953_6514650778764836864_n.jpg?_nc_cat=107&_nc_oc=AQkRFEUj2m8lJzxjnhkL7-Tn4FCiT5uJWzvA4PLkwixgpPEjm6LTK7mr8tdKzbn1liSK5GT5vRHwzFkRlnXEKChc&_nc_ht=scontent-ber1-1.xx&oh=980fe7daed07b2634f728a0e8f91ccd3&oe=5E2B2785"); */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 25%; 
  background-size: cover;
}

.container {
  height: 600px;
  background: #fff4;
  width: 40%;
  margin: 50px auto;
}

.wrapper {
  padding: 30px 15px 15px;
}

h1 {
  text-align: center;
  font: 400 2.4rem 'Poppins', sans-serif;
  text-transform: uppercase;
  margin: 0 0 40px;
  text-shadow: 2px 2px 4px #333;
}

h2 {
  font: 200 2.6rem 'Poppins', sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .05em;
  padding: 20px 0 0;
}

h3 {
  text-align: center;
  font: 300 1.6rem 'Poppins', sans-serif;
  margin: 0 0 50px;
  letter-spacing: 1px;
}

button {
  font: 400 1.8rem 'Poppins', sans-serif;
  display: block;
  text-align: center;
  border-radius: 0;
  border: 4px solid #111;
  background: transparent;
  padding: 20px 40px;
  margin: 0 auto;
  outline: none;
}

@media(max-width:740px) {
  .container {
  height: 100%;
  background: #fff4;
  width: 100%;
  margin: 0 auto;
  }
  .wrapper {
    width: 100%;
    height:100%;
    margin: 0;
  }

  
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 2.4rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  button {
    font-size: 1.4rem
  }
}
var createName = function(titleName, surName) {

var titleList = [
'comodoro', 'diplomata', 'sommelier', 'doutor renato', 'subprefeito', 'dono', 'maestro', 'robespierre', 'foucault', 'erudito', 'drake', 'kendrick', 'kanye', 'professor adjunto', 'Dedé Santanna', 'piloto', 'Ronaldo Angelim', 'sabotage', 'adam smith', 'caramuru', 'âncora', 'herzog', 'coach quântico', 'copolla', 'maria antonieta'];

var surnameList = [
'do Grajaú', 'da Baixada', 'de carreira', 'do afrojazz', 'da escola da vida', 'da federal fluminense', 'da Marvel', 'da Sansalva', 'da feirinha da glicério', 'do circo voador', 'da cobal', 'do ifcs', 'de big field', 'da zona oeste', 'da torcida do flamengo', 'do condomínio', 'de nikity', 'que pilota uber pra complementar a renda', 'que paga meia no cinema', 'que dá teleaula no twitter', 'da Fox News', 'da revista Época', 'de carteira assinada', 'da repartição'];

var randomTitle = titleList[Math.floor(Math.random() * titleList.length)];
$(titleName).html(randomTitle);

var randomSurname = surnameList[Math.floor(Math.random() * surnameList.length)];
$(surName).html(randomSurname);
};

$('#generate-name').on('click', function() {createName('#title-name', '#sur-name');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js