first commit

style.scss

@@ -0,0 +1,116 @@
+body {
+  background: #f2f2f2;
+  padding: 0;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+}
+
+#header {
+  height: 100px;
+  width: 100%;
+  background-color: rebeccapurple;
+  position: fixed;
+  top: 0;
+  right: 0;
+  line-height: 100px;
+  text-align: center;
+
+  span {
+    color: white;
+    font-size: 2em;
+  }
+}
+
+#content {
+  margin-top: 100px;
+  height: calc(100vh - 100px);
+  padding-top: 1rem;
+
+  div.block {
+    width: 800px;
+    max-width: calc(100vw - 8rem);
+    background: white;
+    padding: 2rem;
+    text-align: center;
+    margin: {
+      left: auto;
+      right: auto;
+      top: 1rem;
+    }
+  }
+
+  div#container {
+    position: relative;
+    height: 225px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    #img {
+      display: block;
+      height: 100%;
+      width: auto;
+      border-left: 9px solid #fff;
+    }
+
+    div#reflection {
+      background: url(reflection.svg);
+      background-size: cover;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .col {
+    display: inline-block;
+    height: 70px;
+    width: 70px;
+    cursor: pointer;
+
+    &:nth-child(n + 1) {
+      margin-left: 4px;
+    }
+  }
+
+  input#file {
+    position: absolute;
+    height: 47px;
+    max-width: 198px;
+    top: 152px;
+    opacity: 0;
+
+    &:hover {
+      cursor: pointer;
+
+      & + label {
+        background: rgb(144, 90, 199);
+      }
+    }
+
+    & + label {
+      color: white;
+      background-color: rebeccapurple;
+      padding: 0.9rem 1rem;
+      transition: background-color 0.2s ease;
+
+      svg {
+        fill: white;
+        padding-right: 5px;
+      }
+    }
+  }
+}
+
+#footer {
+  height: 100px;
+  width: 100%;
+  background-color: rgb(54, 30, 78);
+  color: white;
+  text-align: center;
+  line-height: 100px;
+
+  a {
+    color: white;
+  }
+}