character-item.html

<div class="base-item">
  <header class="base-item__header">
    <img src="..." class="base-item__img">
    <div class="base-item__header-content">
      <h3 class="base-item__title">Rick Sanchez</h3>
      <span class="base-item__subtitle">Human from Earth (C-137)</span>
    </div>
  </header>
</div>

comment-item.html

<div class="base-item">
  <header class="base-item__header">
    <div class="base-item__header-content">
      <h3 class="base-item__title">Hodor</h3>
      <span class="base-item__subtitle">1 day ago</span>
    </div>
  </header>
  
  <p class="base-item__content">
    Hold the door!
  </p>
</div>

comments.html

<section class="comments">
  <form class="comments__form">
    <textarea placeholder="Your comment here"></textarea>
    <div class="comments__bar">
      <input type="text" placeholder="Username">
      <button type="submit">
        <!-- Plus Icon -->
      </button>
    </div>
  </form>
  
  <!-- Comment Items -->
</section>

episode-item.html

<div class="episode-item">
  <h3 class="episode-item__num">Episode 1</h3>
  <h2 class="episode-item__name">Pilot</h2>
  <span class="episode-item__season-badge">Season 1</span>

  <!-- optional info -->
  <div class="episode-info">
    <span class="episode-info__label">Air date</span>
    <span class="episode-info__value">December 2, 2013</span>
  </div>
</div>

episode-view.html

<h1>Episode</h1>

<a href="/" class="go-back-link">
    <!-- arrow icon -->
    Search results
</a>

<div class="episode__content">
    <div class="episode__left-col">
        <!-- Episode Item with extra info -->

        <h2>Characters</h2>

        <div class="characters-list">
            <!-- Character Items -->
          
          <div class="link-container">
            <button class="primary-link is-big">
              Show more
            </button>
          </div>
        </div>
    </div>
        
    <div class="episode__right-col">
      <h2>Comments</h2>
      <!-- Comments -->
    </div>
</div>

episodes-view.html

<h1 class="episodes__title">Episodes</h1>

<div class="episodes__search">
  <!-- search icon -->
  <input type="text" placeholder="Search">
</div>

<ul class="episodes__list">
  <li>
    <!-- Episode Item -->
  </li>
  <!-- ... -->
</ul>

<div class="episodes__loader">
  Loading more
</div>

layout.html

<header class="header">
  <a href="/" class="header__logo">
    <!-- Logo -->
  </a>
  
  <button class="header__nav-trigger">
    <!-- Hamburger Icon -->
  </button>

  <nav class="header__nav"> <!-- .is-visible -->
    <a class="header__nav-link" href="/">
      Episodes
    </a>
    <a class="header__nav-link" href="/quiz">
      Quiz
    </a>
  </nav>
</header>

<main class="main">
  <!-- content -->
</main>

quiz-questions.html

<section class="quiz">
  <form class="quiz__form">
    <div class="quiz__container">
      <div class="quiz__image-box quiz__image-box--hideable"></div>

      <div class="quiz__question-box">
        <div class="quiz__question-info">
          <h1 class="quiz__step">Question 1</h1>
          <div class="quiz__wizard">
            <span class="quiz__wizard-text">X questions left</span>
            <div class="quiz__wizard--inner" style="width: 33.3333%;"></div>
          </div>
          <span class="quiz__question">How old are you?</span>
        </div>
        
        <div class="quiz__bottom-panel">
          <input type="text" name="How old are you?" class="quiz__answer quiz__answer--text">
          <button
            class="quiz__button quiz__button--primary">
            Next
          </button>
        </div>
      </div>
    </div>
  </form>
</section>

quiz-start.html

<section class="quiz">
  <div class="quiz__container">
    <div class="quiz__image-box quiz__image-box--flexible"></div>
    <div class="quiz__text-box">
      <header class="quiz__header">
        <h1>Which character are you?</h1>
        <h2>Find out which character from the series you are</h2>
      </header>
      <div class="quiz__bottom-panel">
        <button class="quiz__button quiz__button--primary">
          Start
        </button>
      </div>
    </div>
  </div>
</section>

quiz-summary.html

<section class="quiz">
  <div class="quiz__container">
    <img
      src="https://rickandmortyapi.com/api/character/avatar/2.jpeg"
      class="quiz__image-box quiz__image-box--fixed"
    >

    <div class="quiz__text-box">
      <header class="quiz__header">
        <h1 class="quiz__character-name">You're one and only.</h1>
        <h2>Find out which character from the series you are</h2>
      </header>

      <div class="quiz__bottom-panel">
        <button class="quiz__button quiz__button--primary">
          Start again
        </button>
        
        <a href="/">
          <button class="quiz__button quiz__button--secondary">
            Back to home
          </button>
        </a>
      </div>
    </div>
  </div>
</section>

styles.html

<link href="http://tiny-rick-demo.tk/css/app.cd1210d8.css" rel="stylesheet">