1 files changed, 204 insertions, 0 deletions
diff --git a/home/static/css/welcome_page.css b/home/static/css/welcome_page.css
new file mode 100644
index 0000000..ce8b149
--- /dev/null
+++ b/home/static/css/welcome_page.css
@@ -0,0 +1,204 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    max-width: 960px;
+    min-height: 100vh;
+    margin: 0 auto;
+    padding: 0 15px;
+    color: #231f20;
+    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
+    line-height: 1.25;
+}
+
+a {
+    background-color: transparent;
+    color: #308282;
+    text-decoration: underline;
+}
+
+a:hover {
+    color: #ea1b10;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+ul {
+    padding: 0;
+    margin: 0;
+    font-weight: 400;
+}
+
+main {
+    display: block; /* For IE11 support */
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.logo {
+    width: 150px;
+    margin-right: 20px;
+}
+
+.logo a {
+    display: block;
+}
+
+.figure-logo {
+    max-width: 150px;
+    max-height: 55.1px;
+}
+
+.release-notes {
+    font-size: 14px;
+}
+
+.main {
+    padding: 40px 0;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.figure-space {
+    max-width: 265px;
+}
+
+@-webkit-keyframes pos {
+    0%, 100% {
+        -webkit-transform: rotate(-6deg);
+        transform: rotate(-6deg);
+    }
+    50% {
+        -webkit-transform: rotate(6deg);
+        transform: rotate(6deg);
+    }
+}
+
+@keyframes pos {
+    0%, 100% {
+        -webkit-transform: rotate(-6deg);
+        transform: rotate(-6deg);
+    }
+    50% {
+        -webkit-transform: rotate(6deg);
+        transform: rotate(6deg);
+    }
+}
+
+.egg {
+    fill: #43b1b0;
+    -webkit-animation: pos 3s ease infinite;
+            animation: pos 3s ease infinite;
+    -webkit-transform: translateY(50px);
+            transform: translateY(50px);
+    -webkit-transform-origin: 50% 80%;
+            transform-origin: 50% 80%;
+}
+
+.main-text {
+    max-width: 400px;
+    margin: 5px auto;
+}
+
+.main-text h1 {
+    font-size: 22px;
+}
+
+.main-text p {
+    margin: 15px auto 0;
+}
+
+.footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-top: 1px solid #e6e6e6;
+    padding: 10px;
+}
+
+.option {
+    display: block;
+    padding: 10px 10px 10px 34px;
+    position: relative;
+    text-decoration: none;
+}
+
+.option svg {
+    width: 24px;
+    height: 24px;
+    fill: gray;
+    border: 1px solid #d9d9d9;
+    padding: 5px;
+    border-radius: 100%;
+    top: 10px;
+    left: 0;
+    position: absolute;
+}
+
+.option h4 {
+    font-size: 19px;
+    text-decoration: underline;
+}
+
+.option p {
+    padding-top: 3px;
+    color: #231f20;
+    font-size: 15px;
+    font-weight: 300;
+}
+
+@media (max-width: 996px) {
+    body {
+        max-width: 780px;
+    }
+}
+
+@media (max-width: 767px) {
+    .option {
+        flex: 0 0 50%;
+    }
+}
+
+@media (max-width: 599px) {
+    .main {
+        padding: 20px 0;
+    }
+
+    .figure-space {
+        max-width: 200px;
+    }
+
+    .footer {
+        display: block;
+        width: 300px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 360px) {
+    .header-link {
+        max-width: 100px;
+    }
+}