Natours project finished

Natours/starter/sass/components/_popup.scss

@@ -0,0 +1,100 @@
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  height: 100vh;
+  width: 100%;
+
+  background-color: rgba($color-black, 0.82);
+
+  z-index: 4000;
+
+  opacity: 0;
+  visibility: hidden; //NOTE: animable way of simulate a display: 0
+
+  transition: all 0.4s;
+
+  &__content {
+    @include absCenter;
+
+    display: table;
+    width: 75%;
+    // height: 70%; //TODO: remove later
+
+    box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
+    background-color: $color-white;
+    border-radius: 3px;
+
+    overflow: hidden;
+
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+
+    transition: all 0.4s 0.2s; //NOTE: .2 seconds delay
+  }
+
+  &__left {
+    width: 33.3333333%;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  &__right {
+    width: 66.6666667%;
+    display: table-cell;
+    vertical-align: middle;
+    padding: 3rem 5rem;
+  }
+
+  &__img {
+    display: block;
+    width: 100%;
+  }
+
+  &__text {
+    font-size: 1.4rem;
+    margin-bottom: 4rem;
+
+    -moz-column-count: 2;
+    -moz-column-gap: 4rem;
+    -moz-column-rule: 1px solid $color-gray-dark-2;
+
+    column-count: 2;
+    column-gap: 4rem;
+    column-rule: 1px solid $color-gray-dark-2;
+
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto; //NOTE: takes into account document language (html...)
+  }
+
+  &:target {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &:target &__content {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  &__close {
+    &:link,
+    &:visited {
+      color: $color-gray-dark;
+      position: absolute;
+      top: 2.5rem;
+      right: 2.5rem;
+      font-size: 3rem;
+      text-decoration: none;
+      display: inline-block;
+      transition: all 0.2s;
+    }
+
+    &:hover {
+      color: $color-primary;
+    }
+  }
+}