Solution: Nacho Peinado Montoya, Ethan Alfaro Figueira

.gitignore

@@ -2,3 +2,4 @@
 *.css.map
 *.sass.map
 *.scss.map
+node_modules

assets/css/components/components.scss

@@ -0,0 +1,128 @@
+@use "../root/root.scss" as root;
+
+.left-login {
+  align-self: center;
+  background-image: url(../img/43cc71bb1b43.png);
+  background-position: 0 0;
+  background-size: 454px 618px;
+  height: 618px;
+  margin-left: -35px;
+  margin-right: -15px;
+  flex-basis: 454px;
+  position: relative;
+}
+
+.right-login {
+  display: flex;
+  flex-direction: column;
+  margin-top: 12px;
+  max-width: 350px;
+  flex-grow: 1;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.box {
+  background-color: white;
+  border: 1px solid root.$border;
+  border-radius: 1px;
+  padding: 10px 0;
+  margin-bottom: 10px;
+}
+
+.main-logo {
+  background-repeat: no-repeat;
+  background-position: 0;
+  height: 51px;
+  width: 175px;
+  background-image: url(../img/Instagram-Logo.png);
+  background-size: cover;
+}
+
+.logo-fb {
+  background-image: url(../img/fb.png);
+  margin-right: 8px;
+  display: inline-block;
+  position: relative;
+  top: 3;
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+  background-size: cover;
+}
+
+.blue-font {
+  color: root.$fb;
+}
+
+.font14 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.font12 {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.app-store {
+  margin-right: 8px;
+}
+
+.font-prim {
+  color: root.$black-font;
+}
+
+.fw400 {
+  font-weight: 400;
+}
+
+.get {
+  line-height: 18px;
+  margin: 10px 20px;
+  text-align: center;
+  font-weight: 400;
+}
+
+.icons-div {
+  margin: 10px 0;
+  align-items: stretch;
+}
+
+.h40 {
+  height: 40px;
+}
+
+.map-foot {
+  margin: -2px 8px 9px;
+  color: root.$grey-font;
+  font-size: 12px;
+  line-height: 14px;
+  cursor: pointer;
+}
+
+.legal-cont {
+  margin: 12px 0;
+}
+
+.legal-foot {
+  color: root.$grey-font;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.sel {
+  margin: -2px 0 -3px;
+  border: none;
+  background-color: transparent;
+}
+
+.ml16 {
+  margin-left: 16px;
+}
+
+.img-inside {
+  margin: 99px 0 0 151px;
+  height: 427px;
+  width: 240px;
+}

assets/css/components/hcomponents.scss

@@ -0,0 +1,161 @@
+@use '../root/root.scss' as root;
+@use '../root/hroot.scss' as hroot;
+
+.story-post {
+  @include hroot.story-post(42px);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .whiteb {
+    width: 34px;
+    height: 34px;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.postUser {
+  .my-user-info {
+    margin-left: 14px;
+    height: 41px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    .info {
+      color: root.$black-font;
+      font-size: 14px;
+      font-weight: 600;
+      max-width: 220px;
+      padding: 2px;
+      top: 1px;
+    }
+
+    .info2 {
+      color: root.$black-font;
+      font-size: 12px;
+      line-height: 15px;
+      padding: 2px;
+      bottom: 1px;
+    }
+  }
+}
+
+.post {
+  width: 100%;
+  height: max-content;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.p-foot {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.mb4 {
+  margin-bottom: 4px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.bar-i {
+  display: flex;
+  align-items: center;
+}
+
+.icon-f {
+  padding: 8px;
+  height: 24px;
+  width: 24px;
+  display: block;
+  position: relative;
+}
+
+.icon-c {
+  height: 24px;
+  width: 24px;
+  padding: 8px 16px 8px 0;
+}
+
+.c {
+  width: 100%;
+}
+
+.mneg6 {
+  margin-left: -8px;
+}
+
+.r {
+  margin-left: auto;
+  margin-right: -10px;
+}
+
+.text-f {
+  font-size: 14px;
+  color: root.$black-font;
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.grey {
+  color: root.$grey-font;
+}
+
+.text-s {
+  height: 16px;
+  font-size: 10px;
+  color: root.$grey-font;
+  text-transform: uppercase;
+}
+
+.mt8 {
+  margin-top: 8px;
+}
+
+.nc-div {
+  border-top: 1px solid root.$border;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.blue {
+  color: root.$blue;
+}
+
+.w100 {
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.3;
+  justify-self: flex-end;
+}
+
+.icon-h {
+  height: 12px;
+}
+
+.row {
+  display: flex;
+}