diff --git a/README.md b/README.md
index 2b3a702..210ec2f 100644
--- a/README.md
+++ b/README.md
@@ -5,3 +5,32 @@ Video: https://www.youtube.com/watch?v=dFgzHOX84xQ
 Simple landing page tutorial using barebones Tailwind CSS
 
 Tailwind CSS Docs: https://tailwindcss.com/docs/installation
+
+## Notes
+
+Since this is a simple project we are just going to look for content in the root
+
+```
+module.exports = {
+  content: ['./*.html'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+Same with out .css files
+
+### Build
+
+```
+npx tailwindcss -i ./input.css -o ./dist/output.css --watch
+```
+
+or run the package.json script
+
+```
+npm run build
+``
+```
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..2831870
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,797 @@
+/*
+! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Ensure the default browser behavior of the `hidden` attribute.
+*/
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 480px) {
+  .container {
+    max-width: 480px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 976px) {
+  .container {
+    max-width: 976px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1440px;
+  }
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mb-32 {
+  margin-bottom: 8rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0px * var(--tw-space-y-reverse));
+}
+
+.space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.self-baseline {
+  align-self: baseline;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.bg-brightRed {
+  --tw-bg-opacity: 1;
+  background-color: hsl(12 88% 59% / var(--tw-bg-opacity));
+}
+
+.bg-brightRedLight {
+  --tw-bg-opacity: 1;
+  background-color: hsl(12 88% 69% / var(--tw-bg-opacity));
+}
+
+.bg-brightRedSupLight {
+  --tw-bg-opacity: 1;
+  background-color: hsl(12 88% 95% / var(--tw-bg-opacity));
+}
+
+.bg-darkBlue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(228 39% 23% / var(--tw-bg-opacity));
+}
+
+.bg-darkGrayishBlue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(227 12% 61% / var(--tw-bg-opacity));
+}
+
+.bg-veryDarkBlue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(233 12% 13% / var(--tw-bg-opacity));
+}
+
+.bg-veryPaleRed {
+  --tw-bg-opacity: 1;
+  background-color: hsl(13 100% 96% / var(--tw-bg-opacity));
+}
+
+.bg-veryLightGray {
+  --tw-bg-opacity: 1;
+  background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.align-baseline {
+  vertical-align: baseline;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-darkBlue {
+  --tw-text-opacity: 1;
+  color: hsl(228 39% 23% / var(--tw-text-opacity));
+}
+
+.text-darkGrayishBlue {
+  --tw-text-opacity: 1;
+  color: hsl(227 12% 61% / var(--tw-text-opacity));
+}
+
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.hover\:bg-brightRedLight:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(12 88% 69% / var(--tw-bg-opacity));
+}
+
+.hover\:text-darkGrayishBlue:hover {
+  --tw-text-opacity: 1;
+  color: hsl(227 12% 61% / var(--tw-text-opacity));
+}
+
+@media (min-width: 768px) {
+  .md\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .md\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .md\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .md\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
+
diff --git a/img/avatar-ali.png b/img/avatar-ali.png
new file mode 100644
index 0000000..560269f
Binary files /dev/null and b/img/avatar-ali.png differ
diff --git a/img/avatar-anisha.png b/img/avatar-anisha.png
new file mode 100644
index 0000000..62f0bfb
Binary files /dev/null and b/img/avatar-anisha.png differ
diff --git a/img/avatar-richard.png b/img/avatar-richard.png
new file mode 100644
index 0000000..c4376af
Binary files /dev/null and b/img/avatar-richard.png differ
diff --git a/img/avatar-shanai.png b/img/avatar-shanai.png
new file mode 100644
index 0000000..927ee89
Binary files /dev/null and b/img/avatar-shanai.png differ
diff --git a/img/bg-simplify-section-desktop.svg b/img/bg-simplify-section-desktop.svg
new file mode 100644
index 0000000..9ba0192
--- /dev/null
+++ b/img/bg-simplify-section-desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1439" height="360"><g fill="#FFF0EC" fill-rule="evenodd" opacity=".071" transform="translate(-171 -373)"><rect width="310.431" height="708" x="205" y="410" rx="155.215" transform="scale(1 -1) rotate(-45 -1484.244 0)"/><rect width="310.431" height="708" x="1269" y="7" rx="155.215" transform="scale(1 -1) rotate(-45 552.684 0)"/></g></svg>
\ No newline at end of file
diff --git a/img/bg-simplify-section-mobile.svg b/img/bg-simplify-section-mobile.svg
new file mode 100644
index 0000000..f946553
--- /dev/null
+++ b/img/bg-simplify-section-mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="302"><rect width="310.431" height="708" x="-357" y="-17" fill="#FFF0EC" fill-rule="evenodd" opacity=".071" rx="155.215" transform="scale(1 -1) rotate(-45 -951.398 26.5)"/></svg>
\ No newline at end of file
diff --git a/img/bg-tablet-pattern.svg b/img/bg-tablet-pattern.svg
new file mode 100644
index 0000000..3e145b2
--- /dev/null
+++ b/img/bg-tablet-pattern.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="814" height="814"><rect width="436" height="970" x="774" y="-62" fill="#FFF0EC" fill-rule="evenodd" rx="218" transform="rotate(45 718.814 -291.157)"/></svg>
\ No newline at end of file
diff --git a/img/favicon-32x32.png b/img/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/img/favicon-32x32.png differ
diff --git a/img/icon-close.svg b/img/icon-close.svg
new file mode 100644
index 0000000..b097701
--- /dev/null
+++ b/img/icon-close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22"><path fill="#242D52" fill-rule="evenodd" d="M17.925.747l2.828 2.828L13.328 11l7.425 7.425-2.828 2.828-7.425-7.425-7.425 7.425-2.828-2.828L7.671 11 .247 3.575 3.075.747 10.5 8.171 17.925.747z"/></svg>
\ No newline at end of file
diff --git a/img/icon-facebook.svg b/img/icon-facebook.svg
new file mode 100644
index 0000000..0704bd5
--- /dev/null
+++ b/img/icon-facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#FFF" d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/></svg>
\ No newline at end of file
diff --git a/img/icon-hamburger.svg b/img/icon-hamburger.svg
new file mode 100644
index 0000000..9282d5d
--- /dev/null
+++ b/img/icon-hamburger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="18"><g fill="#242D52" fill-rule="evenodd"><path d="M0 0h25v4H0zM0 7h25v4H0zM0 14h25v4H0z"/></g></svg>
\ No newline at end of file
diff --git a/img/icon-instagram.svg b/img/icon-instagram.svg
new file mode 100644
index 0000000..4a864af
--- /dev/null
+++ b/img/icon-instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20"><path fill="#FFF" d="M10.333 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.976 1.409 4.1 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.058 4.042-.124 2.687-1.386 3.975-4.099 4.099-1.055.048-1.37.058-4.042.058-2.67 0-2.986-.01-4.04-.058-2.717-.124-3.976-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058zm0-1.802C7.618 0 7.278.012 6.211.06 2.579.227.56 2.242.394 5.877.345 6.944.334 7.284.334 10s.011 3.057.06 4.123c.166 3.632 2.181 5.65 5.816 5.817 1.068.048 1.408.06 4.123.06 2.716 0 3.057-.012 4.124-.06 3.628-.167 5.651-2.182 5.816-5.817.049-1.066.06-1.407.06-4.123s-.011-3.056-.06-4.122C20.11 2.249 18.093.228 14.458.06 13.39.01 13.049 0 10.333 0zm0 4.865a5.135 5.135 0 100 10.27 5.135 5.135 0 000-10.27zm0 8.468a3.333 3.333 0 110-6.666 3.333 3.333 0 010 6.666zm5.339-9.87a1.2 1.2 0 10-.001 2.4 1.2 1.2 0 000-2.4z"/></svg>
\ No newline at end of file
diff --git a/img/icon-pinterest.svg b/img/icon-pinterest.svg
new file mode 100644
index 0000000..c58f2e2
--- /dev/null
+++ b/img/icon-pinterest.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#FFF" d="M10 0C4.478 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.182-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.545 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.522 0 10-4.477 10-10S15.522 0 10 0z"/></svg>
\ No newline at end of file
diff --git a/img/icon-twitter.svg b/img/icon-twitter.svg
new file mode 100644
index 0000000..9ae1e5a
--- /dev/null
+++ b/img/icon-twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18"><path fill="#FFF" d="M20.667 2.797a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.804-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0014.513.873c-2.649 0-4.595 2.472-3.997 5.038a11.648 11.648 0 01-8.457-4.287 4.109 4.109 0 001.27 5.478A4.086 4.086 0 011.47 6.59c-.045 1.901 1.317 3.68 3.29 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.834 2.85 8.25 8.25 0 01-6.075 1.7 11.616 11.616 0 006.29 1.843c7.618 0 11.922-6.434 11.662-12.205a8.354 8.354 0 002.048-2.124z"/></svg>
\ No newline at end of file
diff --git a/img/icon-youtube.svg b/img/icon-youtube.svg
new file mode 100644
index 0000000..155659f
--- /dev/null
+++ b/img/icon-youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20"><path fill="#FFF" d="M10.333 0c-5.522 0-10 4.478-10 10 0 5.523 4.478 10 10 10 5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10zm3.701 14.077c-1.752.12-5.653.12-7.402 0C4.735 13.947 4.514 13.018 4.5 10c.014-3.024.237-3.947 2.132-4.077 1.749-.12 5.651-.12 7.402 0 1.898.13 2.118 1.059 2.133 4.077-.015 3.024-.238 3.947-2.133 4.077zM8.667 8.048l4.097 1.949-4.097 1.955V8.048z"/></svg>
\ No newline at end of file
diff --git a/img/illustration-intro.svg b/img/illustration-intro.svg
new file mode 100644
index 0000000..c3f127b
--- /dev/null
+++ b/img/illustration-intro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="580" height="525"><defs><filter id="c" width="126.9%" height="129.8%" x="-13.5%" y="-10.6%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.311765745 0 0 0 0 0.336514196 0 0 0 0 0.386011096 0 0 0 0.03 0"/></filter><filter id="e" width="126.9%" height="129.8%" x="-13.5%" y="-10.6%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.311765745 0 0 0 0 0.336514196 0 0 0 0 0.386011096 0 0 0 0.03 0"/></filter><filter id="i" width="126.9%" height="129.8%" x="-13.5%" y="-10.6%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.311765745 0 0 0 0 0.336514196 0 0 0 0 0.386011096 0 0 0 0.03 0"/></filter><rect id="d" width="260" height="235" x="0" y="0" rx="4"/><rect id="f" width="260" height="235" x="0" y="0" rx="4"/><rect id="j" width="260" height="235" x="0" y="0" rx="4"/><ellipse id="a" cx="81.039" cy="81.034" rx="81.039" ry="81.034"/><ellipse id="b" cx="81.039" cy="81.034" rx="81.039" ry="81.034"/><mask id="g" width="162.078" height="162.069" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#a"/></mask><mask id="h" width="162.078" height="162.069" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#b"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(20 10)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/><path fill="#FAFAFA" stroke="#E5E9EA" d="M16.208 16.207h230.286v202.586H16.208z"/><path fill="#E5E9EA" d="M16.208 117.5h230.286v1H16.208zM16.208 136.493h230.286v1H16.208zM16.208 155.485h230.286v1H16.208zM16.208 174.477h230.286v1H16.208zM16.208 41.53h230.286v1H16.208zM16.208 22.538h230.286v1H16.208zM16.208 60.523h230.286v1H16.208zM16.208 79.515h230.286v1H16.208zM16.208 98.508h230.286v1H16.208zM16.208 193.47h230.286v1H16.208zM16.208 212.462h230.286v1H16.208z"/><path fill="#242D52" d="M22.286 117.5h31.065v45.647a5 5 0 01-5 5H27.286a5 5 0 01-5-5V117.5z"/><path fill="#F3603C" d="M22.286 117.5h31.065v32.985a5 5 0 01-5 5H27.286a5 5 0 01-5-5V117.5zM69.558 117.234h31.065V82.658a5 5 0 00-5-5H74.558a5 5 0 00-5 5v34.576z"/><path fill="#242D52" d="M69.558 117.234h31.065v51.99a5 5 0 01-5 5H74.558a5 5 0 01-5-5v-51.99zM162.078 117.5h31.065V46.193a5 5 0 00-5-5h-21.065a5 5 0 00-5 5V117.5z"/><path fill="#F3603C" d="M162.078 117.5h31.065V65.27a5 5 0 00-5-5h-21.065a5 5 0 00-5 5v52.23z"/><g><path fill="#242D52" d="M209.351 117.5h31.065v58.477a5 5 0 01-5 5H214.35a5 5 0 01-5-5V117.5z"/><path fill="#F3603C" d="M209.351 117.5h31.065v45.782a5 5 0 01-5 5H214.35a5 5 0 01-5-5V117.5z"/></g><g><path fill="#F3603C" d="M115.481 117.5h31.065v90.216a5 5 0 01-5 5H120.48a5 5 0 01-5-5V117.5z"/><path fill="#242D52" d="M115.481 117.5h31.065v33.086a5 5 0 01-5 5H120.48a5 5 0 01-5-5V117.5z"/></g><g transform="translate(280)"><use fill="#000" filter="url(#e)" xlink:href="#f"/><use fill="#FFF" xlink:href="#f"/><g transform="translate(49.299 36.466)"><ellipse cx="81.039" cy="81.034" stroke="#FFF" stroke-width="40" rx="61.039" ry="61.034"/><use stroke="#F3603C" stroke-dasharray="502" stroke-width="80" mask="url(#g)" xlink:href="#a"/><use stroke="#242D52" stroke-dasharray="340" stroke-width="80" mask="url(#h)" xlink:href="#b"/></g></g><g transform="translate(140 250)"><use fill="#000" filter="url(#i)" xlink:href="#j"/><use fill="#FFF" xlink:href="#j"/><g transform="translate(16.208 140.46)"><rect width="106.026" height="78.333" fill="#F3603C" rx="4"/><path fill="#FFF" fill-rule="nonzero" d="M23.044 59.413v-3.907h3.897v-1.78h-3.897v-3.908h-1.781v3.907h-3.908v1.78h3.908v3.908h1.78zm12.264 2.038V47.345H33.15l-3.433 2.997v2.374l3.314-2.977V61.45h2.276zm6.437.198c.382 0 .71-.135.984-.406.274-.27.41-.597.41-.98 0-.382-.136-.71-.41-.983a1.343 1.343 0 00-.984-.41c-.376 0-.702.136-.98.41a1.335 1.335 0 00-.415.984c0 .376.139.7.416.974.277.274.603.41.979.41zm8.584-.01c1.45 0 2.623-.444 3.517-1.33.893-.888 1.34-2.053 1.34-3.497 0-1.438-.438-2.544-1.316-3.32-.877-.774-2.199-1.161-3.966-1.161H48.36l.307-2.918h5.876v-2.058H46.68l-.732 6.914h3.63c2.21 0 3.314.874 3.314 2.622 0 .791-.232 1.43-.697 1.914-.465.485-1.103.727-1.915.727-.705 0-1.307-.205-1.805-.613-.498-.41-.747-1.023-.747-1.84 0-.165.023-.403.07-.712l-2.286.138c-.033.284-.05.521-.05.712 0 .917.228 1.716.683 2.399a4.204 4.204 0 001.771 1.523c.726.333 1.53.5 2.414.5zm9.207-8.29a2.96 2.96 0 002.186-.91c.6-.613.9-1.348.9-2.205 0-.851-.3-1.58-.9-2.187a2.96 2.96 0 00-2.186-.91c-.85 0-1.58.304-2.186.91a2.981 2.981 0 00-.91 2.187c0 .863.302 1.599.905 2.205.603.607 1.334.91 2.191.91zm1.088 8.112l7.46-14.136h-1.98l-7.438 14.136h1.958zm-1.088-9.684c-.422 0-.785-.15-1.088-.45a1.48 1.48 0 01-.455-1.093c0-.43.152-.79.455-1.084a1.51 1.51 0 011.088-.44c.429 0 .792.149 1.088.445.297.297.445.656.445 1.079 0 .428-.146.793-.44 1.093-.293.3-.658.45-1.093.45zm7.785 9.842c.851 0 1.575-.303 2.172-.91a3.006 3.006 0 00.895-2.186c0-.857-.3-1.588-.9-2.191a2.945 2.945 0 00-2.167-.905c-.857 0-1.589.301-2.196.905a2.976 2.976 0 00-.91 2.191c0 .857.302 1.588.905 2.191.604.603 1.338.905 2.201.905zm0-1.563c-.435 0-.8-.15-1.098-.45a1.485 1.485 0 01-.445-1.083c0-.435.149-.801.445-1.098a1.492 1.492 0 011.098-.445c.416 0 .777.151 1.084.455.306.303.46.666.46 1.088 0 .422-.152.783-.455 1.083-.304.3-.666.45-1.089.45z"/></g><g transform="translate(137.766 140.46)"><rect width="106.026" height="78.333" fill="#FAFAFA" rx="4"/><path fill="#1E272E" fill-rule="nonzero" d="M22.104 61.639c.936 0 1.777-.168 2.522-.505a4.186 4.186 0 001.776-1.503c.439-.66.658-1.421.658-2.285 0-.85-.218-1.593-.653-2.226a4.118 4.118 0 00-1.77-1.444c.527-.31.942-.714 1.246-1.212a3.14 3.14 0 00.455-1.667c0-1.068-.4-1.943-1.202-2.626-.801-.682-1.812-1.024-3.032-1.024-1.24 0-2.262.34-3.067 1.02-.804.678-1.207 1.555-1.207 2.63 0 .614.155 1.17.465 1.667.31.498.736.902 1.276 1.212-.758.323-1.353.801-1.785 1.434-.432.633-.648 1.379-.648 2.236 0 .864.22 1.625.658 2.285a4.147 4.147 0 001.78 1.498c.749.34 1.591.51 2.528.51zm0-8.665c-.607 0-1.118-.197-1.533-.589a1.926 1.926 0 01-.624-1.459c0-.567.208-1.044.624-1.43.415-.385.926-.578 1.533-.578.6 0 1.108.193 1.523.579.416.385.624.862.624 1.429 0 .574-.21 1.058-.629 1.454a2.131 2.131 0 01-1.518.594zm0 6.607c-.772 0-1.411-.227-1.92-.682-.507-.455-.761-1.062-.761-1.82 0-.745.254-1.342.762-1.79.508-.45 1.147-.673 1.919-.673.758 0 1.391.224 1.9.672.507.449.761 1.046.761 1.79 0 .753-.254 1.358-.762 1.816-.508.458-1.14.687-1.9.687zM33.18 61.64c.936 0 1.777-.168 2.522-.505a4.186 4.186 0 001.776-1.503c.439-.66.658-1.421.658-2.285 0-.85-.218-1.593-.653-2.226a4.118 4.118 0 00-1.77-1.444c.527-.31.942-.714 1.246-1.212a3.14 3.14 0 00.455-1.667c0-1.068-.4-1.943-1.202-2.626-.801-.682-1.812-1.024-3.032-1.024-1.24 0-2.262.34-3.067 1.02-.804.678-1.207 1.555-1.207 2.63 0 .614.155 1.17.465 1.667.31.498.736.902 1.276 1.212-.758.323-1.353.801-1.785 1.434-.432.633-.648 1.379-.648 2.236 0 .864.22 1.625.658 2.285a4.147 4.147 0 001.78 1.498c.749.34 1.591.51 2.528.51zm0-8.665c-.607 0-1.118-.197-1.534-.589a1.926 1.926 0 01-.623-1.459c0-.567.208-1.044.623-1.43.416-.385.927-.578 1.534-.578.6 0 1.108.193 1.523.579.416.385.623.862.623 1.429 0 .574-.209 1.058-.628 1.454a2.131 2.131 0 01-1.518.594zm0 6.607c-.772 0-1.412-.227-1.92-.682-.507-.455-.761-1.062-.761-1.82 0-.745.254-1.342.762-1.79.507-.45 1.147-.673 1.919-.673.758 0 1.391.224 1.9.672.507.449.76 1.046.76 1.79 0 .753-.253 1.358-.76 1.816-.509.458-1.142.687-1.9.687zm8.435 2.068c.383 0 .711-.135.985-.406.273-.27.41-.597.41-.98 0-.382-.137-.71-.41-.983a1.343 1.343 0 00-.985-.41c-.375 0-.702.136-.979.41a1.335 1.335 0 00-.415.984c0 .376.138.7.415.974.277.274.604.41.98.41zm13.313-.198v-2.058h-6.51l4.146-4.293c.666-.692 1.154-1.342 1.464-1.948.31-.607.465-1.27.465-1.989 0-1.253-.419-2.238-1.257-2.957-.837-.72-1.915-1.079-3.234-1.079-1.405 0-2.52.393-3.344 1.178-.824.784-1.237 1.909-1.237 3.373v.791l2.266.218v-1.039c0-.917.207-1.584.623-2.003.415-.419.983-.628 1.701-.628.686 0 1.23.19 1.633.569.402.379.603.908.603 1.587 0 .877-.471 1.8-1.414 2.77l-5.64 5.787v1.721h9.735zm9.702 0v-2.76h1.939v-2.048h-1.94v-9.298H61.16l-5.431 9.289v2.057h6.628v2.76h2.275zm-2.275-4.808h-4.412l4.412-7.834v7.834zm8.129-3.294a2.96 2.96 0 002.186-.91c.6-.613.9-1.348.9-2.205 0-.851-.3-1.58-.9-2.187a2.96 2.96 0 00-2.186-.91c-.851 0-1.58.304-2.187.91a2.981 2.981 0 00-.91 2.187c0 .863.302 1.599.905 2.205.604.607 1.334.91 2.192.91zm1.088 8.112l7.459-14.136h-1.979l-7.439 14.136h1.959zm-1.088-9.684c-.422 0-.785-.15-1.089-.45a1.48 1.48 0 01-.455-1.093c0-.43.152-.79.455-1.084a1.51 1.51 0 011.089-.44c.428 0 .791.149 1.088.445.297.297.445.656.445 1.079 0 .428-.147.793-.44 1.093-.294.3-.658.45-1.093.45zm7.785 9.842c.85 0 1.574-.303 2.171-.91a3.006 3.006 0 00.896-2.186c0-.857-.3-1.588-.9-2.191a2.945 2.945 0 00-2.167-.905c-.857 0-1.59.301-2.196.905a2.976 2.976 0 00-.91 2.191c0 .857.301 1.588.905 2.191.603.603 1.337.905 2.2.905zm0-1.563c-.435 0-.801-.15-1.098-.45a1.485 1.485 0 01-.445-1.083c0-.435.148-.801.445-1.098a1.492 1.492 0 011.098-.445c.415 0 .776.151 1.083.455.307.303.46.666.46 1.088 0 .422-.152.783-.455 1.083-.303.3-.666.45-1.088.45z"/></g><g transform="translate(16.208 16.207)"><rect width="227.584" height="108.046" fill="#FAFAFA" rx="4"/><path fill="#343A40" fill-rule="nonzero" d="M28.786 84.812c1.998 0 3.791-.359 5.381-1.076 1.59-.732 2.853-1.801 3.788-3.208.936-1.407 1.404-3.032 1.404-4.875 0-1.815-.465-3.397-1.393-4.748-.929-1.35-2.188-2.377-3.778-3.08 1.126-.662 2.012-1.524 2.66-2.586.647-1.062.97-2.247.97-3.556 0-2.279-.855-4.146-2.564-5.602-1.71-1.457-3.865-2.185-6.468-2.185-2.645 0-4.826.725-6.542 2.174-1.717 1.449-2.575 3.32-2.575 5.613 0 1.309.33 2.494.992 3.556.661 1.062 1.568 1.924 2.722 2.585-1.618.69-2.888 1.71-3.81 3.06-.92 1.35-1.381 2.94-1.381 4.77 0 1.842.467 3.467 1.403 4.874.936 1.407 2.202 2.473 3.799 3.197 1.597.725 3.394 1.087 5.392 1.087zm0-18.486c-1.295 0-2.385-.419-3.271-1.256-.887-.837-1.33-1.874-1.33-3.112 0-1.21.443-2.227 1.33-3.05.886-.823 1.976-1.234 3.27-1.234 1.281 0 2.364.411 3.25 1.234.887.823 1.33 1.84 1.33 3.05 0 1.224-.446 2.258-1.34 3.102-.893.844-1.973 1.266-3.24 1.266zm0 14.097c-1.646 0-3.011-.486-4.094-1.457-1.084-.97-1.625-2.265-1.625-3.882 0-1.59.541-2.863 1.625-3.82 1.083-.957 2.448-1.435 4.094-1.435 1.618 0 2.968.478 4.052 1.435 1.083.957 1.625 2.23 1.625 3.82 0 1.603-.542 2.894-1.625 3.872-1.084.978-2.434 1.467-4.052 1.467zm21.737 3.988l9.729-12.873c1.772-2.391 2.659-4.818 2.659-7.28 0-1.97-.479-3.746-1.435-5.329a9.904 9.904 0 00-3.894-3.682c-1.64-.872-3.458-1.308-5.455-1.308-1.956 0-3.753.432-5.392 1.297-1.64.866-2.948 2.104-3.926 3.714-.978 1.611-1.46 3.423-1.445 5.434.014 1.97.482 3.718 1.403 5.244.922 1.527 2.107 2.684 3.556 3.472a9.656 9.656 0 004.685 1.182c.661 0 1.294-.064 1.9-.19l-8.02 10.319h5.635zm1.73-13.76c-1.8 0-3.274-.565-4.421-1.698-1.147-1.132-1.727-2.62-1.741-4.463-.014-1.815.563-3.289 1.73-4.421 1.168-1.133 2.645-1.699 4.432-1.699 1.815 0 3.278.549 4.39 1.646 1.111 1.098 1.667 2.575 1.667 4.432 0 1.758-.566 3.232-1.699 4.42-1.132 1.19-2.585 1.784-4.358 1.784zm17.664 14.182c.816 0 1.516-.288 2.1-.865a2.83 2.83 0 00.876-2.09c0-.815-.292-1.515-.876-2.1a2.864 2.864 0 00-2.1-.875c-.802 0-1.498.292-2.09.876-.59.584-.885 1.284-.885 2.1 0 .801.295 1.494.886 2.078.59.584 1.287.876 2.09.876zm14.224-.422l14.16-26.23v-3.863H77.389v4.369h15.448L78.612 84.41h5.53zm34.378 0v-5.888h4.137v-4.368h-4.137V54.318h-7.407L99.526 74.134v4.39h14.14v5.887h4.853zm-4.853-10.256h-9.413l9.413-16.713v16.713zm17.094-7.027c1.829 0 3.383-.647 4.664-1.942 1.28-1.308 1.92-2.877 1.92-4.706 0-1.814-.64-3.369-1.92-4.663-1.28-1.295-2.835-1.942-4.664-1.942-1.815 0-3.37.647-4.664 1.942-1.295 1.294-1.942 2.849-1.942 4.663 0 1.843.644 3.412 1.931 4.706 1.288 1.295 2.846 1.942 4.675 1.942zm2.321 17.304l15.913-30.156h-4.221l-15.87 30.156h4.178zm-2.321-20.66c-.9 0-1.675-.32-2.322-.96a3.157 3.157 0 01-.97-2.332c0-.914.323-1.684.97-2.31a3.222 3.222 0 012.322-.94c.914 0 1.688.317 2.321.95.633.633.95 1.4.95 2.3 0 .915-.313 1.692-.94 2.332-.625.64-1.403.96-2.331.96zm16.609 20.998c1.814 0 3.359-.647 4.632-1.942 1.273-1.294 1.91-2.849 1.91-4.663 0-1.83-.64-3.387-1.92-4.675-1.281-1.287-2.822-1.93-4.622-1.93-1.83 0-3.391.643-4.686 1.93-1.294 1.288-1.941 2.846-1.941 4.675 0 1.828.644 3.386 1.93 4.674 1.288 1.287 2.853 1.93 4.697 1.93zm0-3.335c-.93 0-1.71-.32-2.343-.96a3.168 3.168 0 01-.95-2.31c0-.929.317-1.71.95-2.343s1.414-.95 2.343-.95c.886 0 1.656.324 2.31.971.655.647.982 1.421.982 2.322 0 .9-.324 1.67-.971 2.31-.647.64-1.421.96-2.321.96z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/img/logo-white.svg b/img/logo-white.svg
new file mode 100644
index 0000000..6d348a0
--- /dev/null
+++ b/img/logo-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="146" height="24"><g fill="none" fill-rule="evenodd"><path fill="#FFFFFF" fill-rule="nonzero" d="M40.014 16.809V8.553c0-1.577.366-2.82 1.098-3.73.733-.91 1.65-1.365 2.75-1.365 2.158 0 3.237 1.577 3.237 4.731v8.62h3.782v-9.58c0-2.415-.5-4.22-1.503-5.417C48.376.615 46.945.017 45.084.017c-1.222 0-2.34.234-3.352.703a6.833 6.833 0 00-2.56 2.043h-.066C38.126.932 36.486.017 34.184.017c-.969 0-1.902.217-2.799.653a6.976 6.976 0 00-2.353 1.878h-.05V.265H25.2v16.527h3.782V8.553c0-1.577.372-2.82 1.115-3.73.743-.91 1.693-1.365 2.849-1.365 2.19 0 3.286 1.577 3.286 4.731v8.62h3.782zm21.101.248c2.246 0 3.997-.827 5.252-2.482h.05v2.217h3.616V.265h-3.782V2.25h-.066C64.93.761 63.23.017 61.082.017a7.76 7.76 0 00-5.681 2.415c-.705.75-1.26 1.66-1.668 2.73a9.589 9.589 0 00-.611 3.44c0 1.258.203 2.416.61 3.475.408 1.059.964 1.952 1.669 2.68a7.348 7.348 0 002.535 1.696 8.325 8.325 0 003.18.604zm.595-3.441c-1.399 0-2.538-.466-3.419-1.398-.88-.932-1.321-2.132-1.321-3.599 0-1.555.454-2.804 1.362-3.747.909-.943 2.04-1.414 3.394-1.414 1.343 0 2.458.493 3.345 1.48.886.988 1.33 2.215 1.33 3.681 0 1.467-.455 2.667-1.363 3.599-.909.932-2.018 1.398-3.328 1.398zm27.112 3.193V7.064c0-2.393-.536-4.166-1.61-5.319C86.14.593 84.655.017 82.762.017a7.373 7.373 0 00-3.056.645 6.958 6.958 0 00-2.477 1.87h-.05V.264h-3.782v16.527h3.782V8.487c0-1.588.388-2.823 1.164-3.706.777-.882 1.814-1.323 3.113-1.323.595 0 1.104.077 1.528.231.424.155.796.406 1.115.753.32.348.556.819.71 1.415.154.595.231 1.323.231 2.183v8.769h3.782zm10.218.248c2.246 0 3.996-.827 5.252-2.482h.05v2.217h3.616V.265h-3.782V2.25h-.066C102.855.761 101.154.017 99.007.017a7.76 7.76 0 00-5.682 2.415c-.704.75-1.26 1.66-1.668 2.73a9.589 9.589 0 00-.61 3.44c0 1.258.203 2.416.61 3.475.408 1.059.964 1.952 1.668 2.68a7.348 7.348 0 002.536 1.696 8.325 8.325 0 003.179.604zm.594-3.441c-1.398 0-2.538-.466-3.418-1.398-.881-.932-1.322-2.132-1.322-3.599 0-1.555.455-2.804 1.363-3.747.908-.943 2.04-1.414 3.394-1.414 1.343 0 2.458.493 3.344 1.48.886.988 1.33 2.215 1.33 3.681 0 1.467-.455 2.667-1.363 3.599-.908.932-2.018 1.398-3.328 1.398zm19.07 10.125c1.2 0 2.274-.14 3.22-.422.947-.281 1.743-.673 2.387-1.175a6.385 6.385 0 001.602-1.844 8.14 8.14 0 00.916-2.383c.188-.86.281-1.803.281-2.829V.265h-3.782v1.737h-.066a7.059 7.059 0 00-2.353-1.49A7.62 7.62 0 00118.142 0c-1.508 0-2.862.358-4.062 1.075-1.2.717-2.134 1.713-2.8 2.987-.666 1.273-.999 2.705-.999 4.293 0 1.61.35 3.038 1.049 4.285.699 1.246 1.66 2.203 2.882 2.87 1.222.667 2.598 1.001 4.129 1.001 2.047 0 3.716-.673 5.004-2.018h.066v1.753c0 1.17-.43 2.14-1.288 2.912-.86.772-2.07 1.158-3.634 1.158-1.068 0-2.006-.132-2.816-.397-.809-.265-1.742-.678-2.799-1.24l-.892 3.341c.925.552 1.966.976 3.122 1.274 1.156.298 2.356.447 3.6.447zm.132-10.72c-1.365 0-2.491-.434-3.377-1.3-.887-.865-1.33-2.026-1.33-3.482 0-1.4.435-2.542 1.305-3.425.87-.882 2.004-1.323 3.402-1.323 1.332 0 2.442.435 3.328 1.307.886.871 1.33 2.002 1.33 3.391 0 1.401-.433 2.556-1.297 3.466-.864.91-1.985 1.365-3.361 1.365zm19.086 4.036c1.542 0 2.899-.281 4.071-.844 1.173-.562 2.133-1.323 2.882-2.283l-2.642-2.266c-1.035 1.301-2.406 1.952-4.113 1.952-1.21 0-2.237-.337-3.08-1.01-.842-.672-1.384-1.593-1.627-2.762h12.024c.066-.397.099-.9.099-1.506 0-1.599-.325-3.027-.975-4.285a7.198 7.198 0 00-2.807-2.961c-1.222-.717-2.632-1.075-4.228-1.075a8.191 8.191 0 00-3.188.62c-.99.414-1.844.99-2.56 1.729-.715.739-1.277 1.638-1.684 2.696-.407 1.06-.611 2.212-.611 3.458 0 1.688.369 3.185 1.106 4.492.738 1.307 1.746 2.308 3.023 3.003 1.277.695 2.714 1.042 4.31 1.042zm3.815-10.274h-8.257c.264-1.059.776-1.878 1.535-2.457.76-.579 1.663-.868 2.709-.868 1.057 0 1.93.298 2.618.893.688.596 1.153 1.406 1.395 2.432z"/><g fill="#F3603C"><path d="M2.786 10.286c1.538 0 2.785 1.279 2.785 2.857C5.571 14.72 4.324 16 2.786 16 1.247 16 0 14.72 0 13.143c0-1.578 1.247-2.857 2.786-2.857zM2.786 0C4.324 0 5.57 1.28 5.57 2.857c0 1.578-1.247 2.857-2.785 2.857C1.247 5.714 0 4.435 0 2.857 0 1.28 1.247 0 2.786 0zm10.028 0C14.353 0 15.6 1.28 15.6 2.857c0 1.578-1.247 2.857-2.786 2.857-1.538 0-2.785-1.279-2.785-2.857C10.029 1.28 11.276 0 12.814 0z"/><ellipse cx="12.814" cy="13.257" opacity=".5" rx="2.786" ry="2.857"/></g></g></svg>
\ No newline at end of file
diff --git a/img/logo.svg b/img/logo.svg
new file mode 100644
index 0000000..d561b6e
--- /dev/null
+++ b/img/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="146" height="24"><g fill="none" fill-rule="evenodd"><path fill="#242D52" fill-rule="nonzero" d="M40.014 16.809V8.553c0-1.577.366-2.82 1.098-3.73.733-.91 1.65-1.365 2.75-1.365 2.158 0 3.237 1.577 3.237 4.731v8.62h3.782v-9.58c0-2.415-.5-4.22-1.503-5.417C48.376.615 46.945.017 45.084.017c-1.222 0-2.34.234-3.352.703a6.833 6.833 0 00-2.56 2.043h-.066C38.126.932 36.486.017 34.184.017c-.969 0-1.902.217-2.799.653a6.976 6.976 0 00-2.353 1.878h-.05V.265H25.2v16.527h3.782V8.553c0-1.577.372-2.82 1.115-3.73.743-.91 1.693-1.365 2.849-1.365 2.19 0 3.286 1.577 3.286 4.731v8.62h3.782zm21.101.248c2.246 0 3.997-.827 5.252-2.482h.05v2.217h3.616V.265h-3.782V2.25h-.066C64.93.761 63.23.017 61.082.017a7.76 7.76 0 00-5.681 2.415c-.705.75-1.26 1.66-1.668 2.73a9.589 9.589 0 00-.611 3.44c0 1.258.203 2.416.61 3.475.408 1.059.964 1.952 1.669 2.68a7.348 7.348 0 002.535 1.696 8.325 8.325 0 003.18.604zm.595-3.441c-1.399 0-2.538-.466-3.419-1.398-.88-.932-1.321-2.132-1.321-3.599 0-1.555.454-2.804 1.362-3.747.909-.943 2.04-1.414 3.394-1.414 1.343 0 2.458.493 3.345 1.48.886.988 1.33 2.215 1.33 3.681 0 1.467-.455 2.667-1.363 3.599-.909.932-2.018 1.398-3.328 1.398zm27.112 3.193V7.064c0-2.393-.536-4.166-1.61-5.319C86.14.593 84.655.017 82.762.017a7.373 7.373 0 00-3.056.645 6.958 6.958 0 00-2.477 1.87h-.05V.264h-3.782v16.527h3.782V8.487c0-1.588.388-2.823 1.164-3.706.777-.882 1.814-1.323 3.113-1.323.595 0 1.104.077 1.528.231.424.155.796.406 1.115.753.32.348.556.819.71 1.415.154.595.231 1.323.231 2.183v8.769h3.782zm10.218.248c2.246 0 3.996-.827 5.252-2.482h.05v2.217h3.616V.265h-3.782V2.25h-.066C102.855.761 101.154.017 99.007.017a7.76 7.76 0 00-5.682 2.415c-.704.75-1.26 1.66-1.668 2.73a9.589 9.589 0 00-.61 3.44c0 1.258.203 2.416.61 3.475.408 1.059.964 1.952 1.668 2.68a7.348 7.348 0 002.536 1.696 8.325 8.325 0 003.179.604zm.594-3.441c-1.398 0-2.538-.466-3.418-1.398-.881-.932-1.322-2.132-1.322-3.599 0-1.555.455-2.804 1.363-3.747.908-.943 2.04-1.414 3.394-1.414 1.343 0 2.458.493 3.344 1.48.886.988 1.33 2.215 1.33 3.681 0 1.467-.455 2.667-1.363 3.599-.908.932-2.018 1.398-3.328 1.398zm19.07 10.125c1.2 0 2.274-.14 3.22-.422.947-.281 1.743-.673 2.387-1.175a6.385 6.385 0 001.602-1.844 8.14 8.14 0 00.916-2.383c.188-.86.281-1.803.281-2.829V.265h-3.782v1.737h-.066a7.059 7.059 0 00-2.353-1.49A7.62 7.62 0 00118.142 0c-1.508 0-2.862.358-4.062 1.075-1.2.717-2.134 1.713-2.8 2.987-.666 1.273-.999 2.705-.999 4.293 0 1.61.35 3.038 1.049 4.285.699 1.246 1.66 2.203 2.882 2.87 1.222.667 2.598 1.001 4.129 1.001 2.047 0 3.716-.673 5.004-2.018h.066v1.753c0 1.17-.43 2.14-1.288 2.912-.86.772-2.07 1.158-3.634 1.158-1.068 0-2.006-.132-2.816-.397-.809-.265-1.742-.678-2.799-1.24l-.892 3.341c.925.552 1.966.976 3.122 1.274 1.156.298 2.356.447 3.6.447zm.132-10.72c-1.365 0-2.491-.434-3.377-1.3-.887-.865-1.33-2.026-1.33-3.482 0-1.4.435-2.542 1.305-3.425.87-.882 2.004-1.323 3.402-1.323 1.332 0 2.442.435 3.328 1.307.886.871 1.33 2.002 1.33 3.391 0 1.401-.433 2.556-1.297 3.466-.864.91-1.985 1.365-3.361 1.365zm19.086 4.036c1.542 0 2.899-.281 4.071-.844 1.173-.562 2.133-1.323 2.882-2.283l-2.642-2.266c-1.035 1.301-2.406 1.952-4.113 1.952-1.21 0-2.237-.337-3.08-1.01-.842-.672-1.384-1.593-1.627-2.762h12.024c.066-.397.099-.9.099-1.506 0-1.599-.325-3.027-.975-4.285a7.198 7.198 0 00-2.807-2.961c-1.222-.717-2.632-1.075-4.228-1.075a8.191 8.191 0 00-3.188.62c-.99.414-1.844.99-2.56 1.729-.715.739-1.277 1.638-1.684 2.696-.407 1.06-.611 2.212-.611 3.458 0 1.688.369 3.185 1.106 4.492.738 1.307 1.746 2.308 3.023 3.003 1.277.695 2.714 1.042 4.31 1.042zm3.815-10.274h-8.257c.264-1.059.776-1.878 1.535-2.457.76-.579 1.663-.868 2.709-.868 1.057 0 1.93.298 2.618.893.688.596 1.153 1.406 1.395 2.432z"/><g fill="#F3603C"><path d="M2.786 10.286c1.538 0 2.785 1.279 2.785 2.857C5.571 14.72 4.324 16 2.786 16 1.247 16 0 14.72 0 13.143c0-1.578 1.247-2.857 2.786-2.857zM2.786 0C4.324 0 5.57 1.28 5.57 2.857c0 1.578-1.247 2.857-2.785 2.857C1.247 5.714 0 4.435 0 2.857 0 1.28 1.247 0 2.786 0zm10.028 0C14.353 0 15.6 1.28 15.6 2.857c0 1.578-1.247 2.857-2.786 2.857-1.538 0-2.785-1.279-2.785-2.857C10.029 1.28 11.276 0 12.814 0z"/><ellipse cx="12.814" cy="13.257" opacity=".5" rx="2.786" ry="2.857"/></g></g></svg>
\ No newline at end of file
diff --git a/img/screen.png b/img/screen.png
new file mode 100644
index 0000000..5e78bef
Binary files /dev/null and b/img/screen.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..741209c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="css/main.css" rel="stylesheet">
+  <title>Manage Landing</title>
+</head>
+<body>
+<!-- Navbar -->
+  <!-- relative because hamburger menu will be absolute. The container of the hamburger therefore must be set to relative -->
+  <!-- container adds the breakpoints we defined in tailwind.config.js -->
+  <!-- container unlike bootstrap does not add auto margins add mx-auto -->
+  <!-- we want padding on all sides p-6 adds padding all sides with 6  -->
+  <nav class="relative container mx-auto p-6">
+      <!-- flex container for alignment. Gives flex row by default. Aligning items in the center. Justifing content with between option -->
+    <div class="flex items-center justify-between">
+        <!-- Logo with padding top 2 -->
+        <div class="pt2">
+            <img src="img/logo.svg" alt="">
+        </div>
+        <!-- Menu items -->
+        <!-- flex again for alignment but disappear on sm screens -->
+        <!-- So on md: flex  -->
+        <div class="hidden md:flex space-x-6">
+            <a class="hover:text-darkGrayishBlue" href="#">Pricing</a>
+            <a class="hover:text-darkGrayishBlue" href="#">Product</a>
+            <a class="hover:text-darkGrayishBlue" href="#">About Us</a>
+            <a class="hover:text-darkGrayishBlue" href="#">Careers</a>
+            <a class="hover:text-darkGrayishBlue" href="#">Community</a>
+        </div>
+        <!-- Button -->
+        <!-- Hidden on smaller screens but on md(and up) display as block -->
+        <a href="#" class="hidden md:block p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight">Get Started</a>
+    </div>
+  </nav>
+<!-- End Navbar -->
+<!-- Hero Section -->
+<!-- In Large + Med screens needs to be a flex box row, but on small screens we want it stacked as columns -->
+<!-- End Hero Section -->
+  <section id="hero">
+      <!-- Flex Container -->
+      <!-- Since we do mobile first it is set as flex-col-reverse to begin with (since we want the right most item placed on top). -->
+      <div class="container flex flex-col-reverse md:flex-row items-center px-6 mx-auto mt-10 space-y-0 md:space-y-0">
+          <!-- ITEM 1 -->
+          <!-- Also a flexbox container painted as a column for h1,p,button -->
+          <!-- On medium screens and up we want it to be half width -->
+          <div class="flex flex-col mb-32 space-y-12 md:w-1/2">
+              <h1 class="max-w-md text-4xl font-bold text-center md:text-5xl md:text-left">Bring everyone together to build better products</h1>
+              <p class="max-w-sm text-center text-darkGrayishBlue md:text-left">Manage makes it simple for teams to plan day-to-day tasks while keeping the larger team goals in view.</p>
+              <!-- button should be in the center on mobile and start for md and up -->
+              <div class="flex justify-center md:justify-start">
+                <a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight">Get Started</a>
+              </div>
+          </div>
+          <!-- ITEM 2 -->
+          <!-- Once again only take up half the available width of the container -->
+          <div class="md:w-1/2">
+              <img src="img/illustration-intro.svg" alt="">
+          </div>
+      </div>
+  </section>
+  <!-- Features -->
+  <!-- End Features -->
+  <section id="features">
+      <!-- Flex container -->
+      <div  class="container flex flex-col md:flex-row px-4 mx-auto mt-10 space-y-12 md:space-y-0">
+          <!-- What's Different -->
+          <div class="flex flex-col items-center space-y-12 md:w-1/2">
+              <h2 class="max-w-md text-4xl font-bold text-center md:text-left">What's different about Manage?</h2>
+              <p class="max-w-sm text-center text-darkGrayishBlue md:text-left">
+                  Manage provides all the functionality your team needs, without the complexity.
+                  Our software is tailor-made for modern digital product teams.
+              </p>
+          </div>
+          <!-- Numbered List -->
+          <!-- This we want painted as a column -->
+          <div class="flex flex-col space-y-8 md:w-1/2">
+              <!-- List items -->
+              <!-- This is the container for L1 on mobile it appears stacked on md and about it has a row appearance. -->
+            <div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
+                <!-- heading -->
+                <!-- On medium screens we want the background transparent. -->
+                <div class="rounded-full bg-brightRedSupLight md:bg-transparent">
+                    <div class="flex items-center space-x-2">
+                        <!-- The number icon "button thing" -->
+                        <div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">01</div>
+                        <!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
+                        <h3 class="text-base font-bold md:mb-4 md:hidden">
+                            Track company-wide progress 
+                        </h3>
+                    </div>
+                </div>
+                <div class="">
+                    <!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
+                    <!-- md:block shows it on larger screens -->
+                    <h3 class="hidden text-lg font-bold md:block">Track company-wide progress </h3>
+                    <p class="text-darkGrayishBlue">
+                        See how your day-to-day tasks fit into the wider
+                        vision. Go from
+                        tracking progress at the milestone level to all the way
+                        done to the
+                        smallest of details. Never lose sight of the bigger 
+                        picture
+                        again.
+                    </p>
+                </div>
+            </div>
+            <!-- List Item 2 -->
+            <div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
+                <!-- heading -->
+                <!-- On medium screens we want the background transparent. -->
+                <div class="rounded-full bg-brightRedSupLight md:bg-transparent">
+                    <div class="flex items-center space-x-2">
+                        <!-- The number icon "button thing" -->
+                        <div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">02</div>
+                        <!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
+                        <h3 class="text-base font-bold md:mb-4 md:hidden">
+                            Number two
+                        </h3>
+                    </div>
+                </div>
+                <div>
+                    <!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
+                    <!-- md:block shows it on larger screens -->
+                    <h3 class="hidden text-lg font-bold md:block">Number two </h3>
+                    <p class="text-darkGrayishBlue">
+                        See how your day-to-day tasks fit into the wider
+                        vision. Go from
+                        tracking progress at the milestone level to all the way
+                        done to the
+                        smallest of details. Never lose sight of the bigger 
+                        picture
+                        again.
+                    </p>
+                </div>
+            </div>
+            <!-- List Item 3 -->
+            <div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
+                <!-- heading -->
+                <!-- On medium screens we want the background transparent. -->
+                <div class="rounded-full bg-brightRedSupLight md:bg-transparent">
+                    <div class="flex items-center space-x-2">
+                        <!-- The number icon "button thing" -->
+                        <div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">03</div>
+                        <!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
+                        <h3 class="text-base font-bold md:mb-4 md:hidden">
+                            Number 3
+                        </h3>
+                    </div>
+                </div>
+                <div class="">
+                    <!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
+                    <!-- md:block shows it on larger screens -->
+                    <h3 class="hidden text-lg font-bold md:block">Number 3 </h3>
+                    <p class="text-darkGrayishBlue">
+                        See how your day-to-day tasks fit into the wider
+                        vision. Go from
+                        tracking progress at the milestone level to all the way
+                        done to the
+                        smallest of details. Never lose sight of the bigger 
+                        picture
+                        again.
+                    </p>
+                </div>
+            </div>
+          </div>
+      </div>
+  </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/input.css b/input.css
new file mode 100644
index 0000000..a90f074
--- /dev/null
+++ b/input.css
@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
diff --git a/package.json b/package.json
index 131ccdb..f1d26a4 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "Video: https://www.youtube.com/watch?v=dFgzHOX84xQ",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tailwindcss -i ./input.css -o ./css/main.css",
+    "watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
   },
   "keywords": [],
   "author": "",
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7355294
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  content: ['./*.html'],
+  theme: {
+    screens: {
+      sm: "480px",
+      md: "768px",
+      lg: "976px",
+      xl: "1440px",
+    },
+    extend: {
+      colors: {
+        brightRed: "hsl(12, 88%, 59%)",
+        brightRedLight: "hsl(12, 88%, 69%)",
+        brightRedSupLight: "hsl(12, 88%, 95%)",
+        darkBlue: "hsl(228, 39%, 23%)",
+        darkGrayishBlue: "hsl(227, 12%, 61%)",
+        veryDarkBlue: "hsl(233, 12%, 13%)",
+        veryPaleRed: "hsl(13, 100%, 96%)",
+        veryLightGray: "hsl(0, 0%, 98%)",
+      }
+    },
+  },
+  plugins: [],
+}