<div class="container">
  <header class="header">
    <h1 id="title" class="text-center">She Code Africa Survey Form</h1>
    <p id="description" class="description text-center">
      Thank you for taking the time to help us improve the platform
    </p>
  </header>
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        class="form-control"
        placeholder="Enter your name"
        required
      />
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input
        type="email"
        name="email"
        id="email"
        class="form-control"
        placeholder="Enter your Email"
        required
      />
    </div>
    <div class="form-group">
      <p>Gender</p>
      <label>
        <input
          name="user-recommend"
          value="Female"
          type="radio"
          class="input-radio"
          checked
        />Female</label
      >
      <label>
        <input
          name="user-recommend"
          value="Male"
          type="radio"
          class="input-radio"
        />Male</label
      >
    <div class="form-group">
      <p>Which of the following words would you use to describe our community?</p>
      <select id="dropdown" name="role" class="form-control" required>
        <option disabled selected value>Select all that apply</option>
        <option value="student">Student</option>
        <option value="job">Reliable</option>
        <option value="learner">The best</option>
        <option value="preferNo">Prefer not to say</option>
        <option value="other">Other</option>
      </select>
    </div>

    <div class="form-group">
      <p>Would you recommend SheCode Africa to a friend?</p>
      <label>
        <input
          name="user-recommend"
          value="definitely"
          type="radio"
          class="input-radio"
          checked
        />Definitely</label
      >
      <label>
        <input
          name="user-recommend"
          value="maybe"
          type="radio"
          class="input-radio"
        />Maybe</label
      >

      <label
        ><input
          name="user-recommend"
          value="not-sure"
          type="radio"
          class="input-radio"
        />Not sure</label
      >
    </div>

    <div class="form-group">
      <p>
        What is your favorite feature of SheCodeAfrica?
      </p>
      <select id="most-like" name="mostLike" class="form-control" required>
        <option disabled selected value>Select an option</option>
        <option value="Ask-an-Expert">Ask An Expert</option>
        <option value="projects">Projects</option>
        <option value="community">Community</option>
        <option value="EventOpportunities">Event Opportunities</option>
      </select>
    </div>

    <div class="form-group">
      <p>
        What would you like to see improved?
        <span class="clue">(Check all that apply)</span>
      </p>

      <label><input
          name="prefer"
          value="projects"
          type="checkbox"
          class="input-checkbox"
        /> Projects</label>
      <label>
        <input
          name="prefer"
          value="campus-chapters"
          type="checkbox"
          class="input-checkbox"
        />Campus-Chapters</label
      >
      <label
        ><input
          name="prefer"
          value="city-hapters"
          type="checkbox"
          class="input-checkbox"
        />City-Chapters</label
      >
      <label
        ><input
          name="prefer"
          value="event opportunities"
          type="checkbox"
          class="input-checkbox"
        />Event Opportunities</label
      >
      <label
        ><input
          name="prefer"
          value="open-source-community"
          type="checkbox"
          class="input-checkbox"
        />Open Source Community</label
      >
      <label
        ><input
          name="prefer"
          value="resources"
          type="checkbox"
          class="input-checkbox"
        />Resources</label
      >
      <label
        ><input
          name="prefer"
          value="design-lab"
          type="checkbox"
          class="input-checkbox"
        />Design-Lab</label
      >
      <label
        ><input
          name="prefer"
          value="front-end development"
          type="checkbox"
          class="input-checkbox"
        />Front-end Development</label
      >
      <label
      <label
        ><input
          name="prefer"
          value="city-meetups"
          type="checkbox"
          class="input-checkbox"
        />City Meetups</label
      >
        <input
          name="prefer"
          value="forum"
          type="checkbox"
          class="input-checkbox"
        />Forum</label
      >
      <label
        ><input
          name="prefer"
          value="introduction"
          type="checkbox"
          class="input-checkbox"
        />Introduction</label
      >
    </div>

    <div class="form-group">
      <p>Any comments or suggestions?</p>
      <textarea
        id="comments"
        class="input-textarea"
        name="comment"
        placeholder="Enter your comment here..."
      ></textarea>
    </div>

    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">
        Submit
      </button>
    </div>
  </form>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}

/* mobile friendly alternative to using background-attachment: fixed */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(--color-pink);
  background-image: linear-gradient(
      115deg,
      rgba(255,182,193),
      rgba(136, 136, 206, 0.7)
    ),
    url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBIUFBIREhQUEhISEhISFBISExIUEhQSFxcZGSMXIB0eJCwjHB0qHhkXMjYkKy49NDM0HSJFPkUwPSwzMy8BCwsLDw4PHhISHToqIykvMzcyLzI6MjMyOjQyOjMzNTIyMjUyMjIyMjIyMi8yMzMyMzQyMjIzMjMyMi8yMjIyOv/AABEIAJ8BPgMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABgECAwQHBQj/xAA4EAACAgIBAwIFAgQEBQUAAAABAgADBBESBRMhBjEUIkFRYTJxByMzQhVikaFSgaKxwSRyc4KT/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwUE/8QAJREBAQACAAYDAAIDAAAAAAAAAAECEQMSEyExUQRBYSKRMnGB/9oADAMBAAIRAxEAPwDs0REBERAREQEREBERAREQEREBERAREQKQYkS9XdSyUeuii2vHDo7Nay9y7S+/BP0gAeWdyFGx5Esm2sMbldRLNxOdUdZyGovrx8tHNQFhyCy5WSUJPICtVAB2V465DwdnyNa2B6nFWQuKcm9+bdt3dBcRc+1/WX4rxYr4VOPg75b5DXJXafGzu/x00wDOM9c6/kWK+B1FmKh1dcmgL8y+eLFAQtlZB3oEHwPqJuYnxi2vl0ZLPi2u60cHsNXJgVRXTWqlQaLFgPCaGyRLyOl+FljN5XXr1f8ArrkTneZ6ysxlrexua2F+KGsG1kAXixO0CfLxYjztrCBoLuZrPX5rLG3HY1h1rV6nBZ2ZFsHyMAV+RlJGzonX5M5K5z43EveRPonldB61TmVC+knjyKkMOLK41tSPv5H+s9WZcLLLq+VYiJEIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiB5HXOrfDqoRDdkWllpoBC82A2WZj4RFHlmPsPuSAebP6gqzUzMW3K7mQqG7v1UgYqVq6F6qh/UesBVLMfLcSRsDz5H8SvVVwz8umllCDFXCc65MEciywKf7SxIU/hR7EDUI6F1D4bIpyCNqlg7i63yqYFXXX5RmH/OWXV268PeNmXp0LpVPwesim+o22BOBvPYU0c1YgK/znnxA5MFUAnRP0zdRqpxbsi9qHrIZWpYW82Z7VLgopBVCo5bdiwBHgE6mPrPSKbs3IbvkKCLHU1FWWoqvEiwkVheJXiWYeCPG/E3b+5fTYWOG9FNiaJZ7aq8YLxUE1kWCxNfgN3H+g8dt/b1blLrPe9+frz4jR6Xi42UmOrB1AyWrRXcWk6C2NTzCqeDAn3G1Y/ZjrD0fM6hzusLWoWrahKzyWs5DjjXUiN8nhiDrWlUHfje9/L6ljULVotW5r3Uaaq+4lTjfJVZilHMed7axgRsjwJsGtL6hkpkn4n4RwlmQHCmrn23fiC3asXRVnG1Ibl9SRUudmN3O18b+lc2jEyLVpyDWt677XF3HxNjqGLWIikIrvtlAYMQw8eZq9YryuzW2KrWF7n55OKeXcLJWxKsp2iF+S68eKkB1oCa+ThLXnrfa45X5CWUVcHLF3YceTAcCiMw2yM2wuh7+MfS+rFLrcapK0xWryRZzRbHZUrc9yxm3yO1G1/To6+xhccLJLjdyTffx+6dC9Bqe1azaZmsQO4OxZYlVdbuD9fnRhy+pUn8yWSIei7gFNbKtdrJXyrTkqIy1oTWqNsrxV035I230PiS+ccvLyeN/nVYiJlzIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiIFJzT1161txL7cZ2elRWj09itWuvDL5PcclKlDhgdIzeNiTnrfV6sSlsi48UUqvjWyzMFA8kAeSPJIA+up84+qetPlPU1rO9lVQqsY2JZW1gJ26FfAVhxJA2Ad68ahrGbrP6T9MXdUfIVLVS1FFpa3m3cZ20dsNkHfnej7y/M9LU0Oa8rqWJWwJBShcjJcEfRgiAKfwTPJ6V1nIxhcKHNZyKxU7L+sJy3pT/aT7b+xnngQ6d3UbXxLen0pXl8jU9WNZkGi1FbtJYa0ZPLgcHOm8jdft9s/RcE0FKg21yXUWG2tq2vqCsvZrqb+YwbuNuxgFAI+3mJ/w7zWXIfGBI+Kr4ppuJGTXt0Ib3UnTrsef5kkHUOuGpBWtKh7a67rdm5BxdeSozK4stbiV5M7kb2NDU7YW2afbwMss8enDqmFRblitzkLee2hStK3W1VQBXVmZeAKKpO1IXz9BLmalsilcbKVHpApxq+zY+MSxPyNYSC3NmPJymjy+0zs9KJVZxZOGIUtrVuVtWJk80DIWOz23II3542qN+NzS6R0+lH79NvxJpPJXetsfFqceVe2xz7DwQq7JImtvpxv8f5W9pqetrXy2xwrVqHw7HIfEtJdcfIU8mrDA7RwdlXU7I1vZUzNk9cxy6WoAqsS11BqVWa0fMpstQfzKu5okaBOvKsTsbvproXxFrJUbbsSytly8mxeCW2gsVarfnkrEaJ9vm34bR3Kv4ZWrkoGsSzE5cmbythUeeHH7nwOQPts+PaTeP2nV4E7Z3vr+/wDf6lnorAHFso7buArSzABmqLF2tP2a1yXP44D+2SuWVoAAANAAAAfQD6S+cbdvGzy5srVYiJGSIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiBD/wCKWX2+l5ZADF1SryNgc3VSf3AJ1+dT5yn1pmYldqNVai2VuOLIwBVh+ROe9W/hBhWbbGstxmO9L4tr3+zfNr/7Q3jlI4bNnp2BbkWpRQhe2xuKqNeT77JPgAD3J9p6/qv0hldOZReFatyQl1ZJRiPPE78q2vofzrc3PTloxsDqGaDq216un1OAeSCwF7GU/Rig8EexA+8N29txuXejq8NsZ7up49WSzVW0olNtqg8gVcsPZOQ/UV0dSU+oK7MfKva1EeiutMlAa6rLA1rhe2rupKKLS59jpR4GyJHfUHQbcnq7/Iy4e6LPiCCuOmCldZ5h/C8QgIAB9/zJm65PU8SjNxuPI5GVWBYFKNhNcygMrDTa4J41vwdeZvC6rfA4kxz73tUX6b1Gqx8i+yngFRmtsR7rA9djLW1Th2bkxDkqRryi+NCdA6N6Jx1Snv2NmLWoNaPpcdd7PIVjwxO/diZXp/oxAE77q/Fg4qqrWnGDj+7tr+ph93LfsPaSvHoVEVFGlQBVH2AGh/tLll6dPkfImV1hdL66woCqAABoADQA+2pkiJzfEREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQIj/E7pfxHTckAbelRkJ42d1fMf9U5j/nOK+mnS/HyOm2WJU11lWRi2WHjWMlAUKM39vNG0D9CJ9KW1hlZWG1YFSD7EEaInyb1HF7V11B89m2yrz/kcp/4hvDv2SwemuqKnYzbmw+noQXa/JBoCg+yVqx5t78VA0Tr2nUv4ZdcqyaLqqE7dOJatVKH+oaOC8Xf/ADswsJ/fXnWz886/2nQP4NdWFOcaGOky6yg/+Wvbr/08x+5ELlj2d+iIhzIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiBSfNP8R8ft9Uzl1oG1bP8A9K0ff+rGfSVtqopdiFVQSzMQFAH1JPsJxT1rh4Gdl2Za5jU1CtUNnwlltdjVg7ZNMGdQutsqlQBvfkbNY3Vcymz03vd6k44Y3ixGqCDbGxSCND9xJv0z0X0578XG+NvyGy6mvqNGOtKCsBzti5Yrs1sP0zWqzaaqBfiY7U1U5Ip6gguc5jVkgoe8ADXWzK4IUL8ygedw3zeneem5PcqrsJrZmVefacWVh9DkoYe4B3Nycxws7GtNduFbj4fU7lFzrUzWYVrWHYpuOgO4wP2Dg8tb9jK+keqarGGNkD4TNB4ti2sAzHRO629rEOjor/tDnpJIiIQiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiBSeP1v1DjYgQXuQ1pK1VIj2XWMPoqKCT9PPt5E1PU/qivE7dSI2RmX+KMWv9bsfHJj/Ym/dj9j9jOe+ocfqNF9ebk2AXsn9da2fHwwza7NYAbide7kbblofUm4zd06cLhXiZcse3lZ1+XdwyaGs4g3V9JrKkKi7K25b+2yR8tQ35I8H3Hj2dD6te2DlZGXj4tnL5LbN0ZKJaU1j9riFbTb0pJJLa39J6fpg4pXJ6g+TYhocZOVXj3XrTZYUPzurVo2zpvkDFZTp/Wuni2zqoXIxVZBbeMnD2lvIhEZLAGZWLMp+RipAY8R5MWaukyxuGVxvmNXO9PNb1wPmitqLa7TXQjuX+Hqr4hmCgcV350T5JI8+00P8AAsaijqmThZWLmi6q3WAjDiuOX7g3xfnyRAxGtfpMkfoTqeLdk5WVbk129QuX+nWtyijETyKk7iKWHsWIHk6P5mtR6o6dVRf1Um7Nu7vwosuREZmZOfbrX9NdfEnZ1sgeeXiRN1Fq6rFPTzjtSXsR7+mXrSiJ3gNWYlieVLcv0ufmDa2fPyzTDB6vRVXdVl42RirVamdatVViZa+CQgOypI/4Qp0fYgTz/RPQb6rKMv4TDrxGq762WZN1ttC2jlpOXyK2iN6UAj+6eDkdHtt61n04jtXkl68ivKWxlWlGVHfkAD3FYOAF8eVH03Cug+n/AFRYMj/DOoqtecByrsT+jlV6JDr/AMLaVtqfsdfYTKRXo/pb5qMvqHayOoUggZFaFBrWhsDQdgN6YqNb8ASVQwREQEREBERAREQEREBERAREQEREBERAREQESm5irvVuQVgxRuDaIPFtA8T9jojx+RAzRMNNyOoZGV1YbDKQysPuCPBmTcC6JirtVgGUhlYbDKQVI+4I9xMm4FYlNzFVcjb4sG4sVPEg6ZToqdexB+kDNEpuNwI03pCg9Q/xRmsNyoFRC/8ALVgpTkB7/pJHH28k+58avr/LuWmumihchr7AjI9fcXiBvfH2/Vx+Y+BJduUll1W8M+TKXW9OVdU9IZti4mCBYuPkutme6W7qrCHYrrViSo1v3BHLh9ARNf8AiF09wvTeiU2X3Cy4O1txLsoJKICVAHFQbDr7IP3nWqrFYclIYeRsEEbB0fI/IMyxbszzuWXNfLi/RBYer9RbIXvXUYd6VWUoyVAoioAqfN5Kkj3Pnfvuafpr0Vl5XS78ZkbHtXMqyKviUetXAqNbDyN60T519BO6RIm3N8D0HlXUYuL1LIRsbF1xx8UODYB7K9h1sAeNBR++/M6BRjIhZkRVZ+PIqoBbioUbI99KAB+AJsbmI2ryC8hyILBdjkVBA3r7bI8/mGfLNExWXIv6mVf/AHED/vMm4CJiouVxyVg42y7UhhtSVI2PqCCD+QYttVVLMQqqCzMxACqBskk+wAgZoliuCAQdgjYI9iJduBWJTcbgViU3LeY3rY3revrr76gXRNWvNqZQ62IyFuAZXBUty4cd+2+XjX3mzuC9l0REBERAREQERECk08rJdSAtVlgI2WQ1gL8yjR5MDvRJ8fRT9dA7kQIfmfHt3SleQvN08B6CFpKHQRRYvzh+PMlh/dokalq4Watihe4EfI7juvaJYgUDkw5jSkLaPG/r4PyyYys1t1nFs+ohPSen5yihCbqqVatXUtjllVKruXHW/wCWW7AH92+R8e8uxsbOY0talwC5aWMndqJStqLEYbDfMosI/cE6H0EziOZbxrbbqIOlWfXVW72NStdQFhbstVWBhtycqvk8bgngfnQ1MmDk5FuK5qNzWtcFdRcrGgFAdK5IDjypOiD8x+2jNDKKgA0AAPsPAjmLxd/UQ809SHN92FtFRXyo46+Fr+Yf5u8H1s63+DsjiZiYwSpbld8m9nPKp7wj9xlYnmqk8jXv5vp9RvcyiNp1b6iHZGL1HkSLLtf+oIUNjhdrdX2x7b0yGwnz9APHtNfGszbBY6nIer4i6tgj0K5RMixR2iSOOgFDciCfOvaTmUEcy9bt4iFvR1UcU5O21UWWBqgVaylayV9v0Orv7eeQ1v2marH6gztye5EbICkr2Qq0jvfOpLMSCDSNcQd6Pk7Ml8RtLxrrxEOrx85GDEvXWnbPEGkp5syC7Mo8kBDUdD3/ACR4w9GzL7ce56rHtuSyhwnMMGrUqxVWOl/mKHOjorzAOtCTaWooHsAP2ja9Xc7yIZ2OplCHNvLn2z2XpDEKtjLaCx0FLugI99IPGt7yZeJ1L+YyWXb4ZBVVbHCGxe2UA5DYDN3Pc+w86+syiOb8Otd71ERTHz2sfk9yK1+vlNIUVDvaZSWbxxNII4jzr3OyK2Y2eyYp+Zbexjre6mnkrm6gv77BPEWnx48fXxJbEczPVu/ERezpdllWKL6+9ZXf8zWCpnFIZvJPsdrw2B7zU7XUOTlxeUa8KyVNQpFQNumrYv4XzTsaU6H1PKTMSgjZOLfSG43T81OSq1qq9xbStTqtWzHZivj61Ns73/r4mLIw+oOnbbutvGZDt6e24amxSrDezaXKefbX1Hnc4iOZrrXe9RBuo2ZlXdsZ3rRFCAM9Yqs3ZUERCNsjMvNWdvYtv2AIy9GybntoVb3sqao3W8v1hq2evj+VdmGj7HsHW+UmJUHwfP4lQoH/AGjm7F4ss1pDePUebkpf2ntTaJbR3FUd4HgxbwvLsE+3jfj33fdT1H5dPcS1mSflagCsi0drl7bq7fMsPLeR+AJjEc34nV/Ih1defzXa3EfFlm5PWgNPJffi54gDeguw2jsKSNZMnpuS2WcoIOJdsfwQLRimsje9613Pm17yWRGzrXfaTwheF0vNSqlNuO0vTlFJalkHF6jafv8AKFYDR++tnUuqr6gRjfJeriyt72a2gqTzQWAAN4TjzKjz+wOjJnG45jrX7kBKxEy5EREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQP/2Q==);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

h1 {
  font-weight: 400;
  line-height: 1.2;
}

p {
  font-size: 1.125rem;
}

h1,
p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

input,
button,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  border: none;
}

.container {
  width: 100%;
  margin: 3.125rem auto 0 auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}

.description {
  font-style: italic;
  font-weight: 200;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.clue {
  margin-left: 0.25rem;
  font-size: 0.9rem;
  color: #e4e4e4;
}

.text-center {
  text-align: center;
}

/* form */

form {
  background: var(--color-darkblue-alpha);
  padding: 2.5rem 0.625rem;
  border-radius: 0.25rem;
}

@media (min-width: 480px) {
  form {
    padding: 2.5rem;
  }
}

.form-group {
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}

.form-control {
  display: block;
  width: 100%;
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-radio,
.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1.25rem;
  min-width: 1.25rem;
}

.input-textarea {
  min-height: 120px;
  width: 100%;
  padding: 0.625rem;
  resize: vertical;
}

.submit-button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: var(--color-green);
  color: inherit;
  border-radius: 2px;
  cursor: pointer;
}