termscp site

site/css/intro.css

@@ -0,0 +1,121 @@
+/** Intro */
+
+.intro {
+  text-align: center;
+}
+
+.intro .title {
+  font-size: 5em;
+}
+
+.intro .logo {
+  border-radius: 25%;
+  height: auto;
+  width: 256px;
+}
+
+.intro .caption {
+  font-size: 2em;
+  font-weight: 300;
+  width: 100%;
+}
+
+.intro .get-started {
+  background-color: #404040;
+  border-radius: 0.5em;
+  color: snow;
+  font-size: 1.5em;
+}
+
+.intro .get-started a {
+  color: snow;
+  text-decoration: none;
+}
+
+.intro .features {
+  align-content: stretch;
+  align-items: flex-start;
+  border-top: 1px solid #eee;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 2.5rem;
+  padding: 1.2rem 0;
+}
+
+.intro .feature {
+  flex: auto;
+}
+
+@media (min-width: 600px) {
+  .intro .feature {
+    flex-grow: 1;
+    flex-basis: 30%;
+    max-width: 30%;
+  }
+}
+
+.intro .feature h3 {
+  color: #101010;
+  font-size: 1.5em;
+  font-weight: 400;
+}
+
+.intro .feature p {
+  color: #303030;
+}
+
+.intro .preview {
+  border-radius: 5px;
+  padding: 5% 10%;
+  width: 80%;
+}
+
+.intro .preview video {
+  height: auto;
+  width: 100%;
+}
+
+.intro .discover {
+  align-content: stretch;
+  align-items: flex-start;
+  border-top: 1px solid #eee;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-left: 0;
+  margin-top: 2.5rem;
+  padding: 1.2rem 0;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .intro .discover {
+    margin-left: 20%;
+    width: 60%;
+  }
+}
+
+.intro .discover .hook {
+  flex-grow: 1;
+  flex-basis: 30%;
+  font-size: 1.5em;
+  max-width: 30%;
+}
+
+.intro .discover .hook a {
+  text-decoration: none;
+  color: #404040;
+}
+
+.intro .discover .hook a i {
+  font-size: 0.8em;
+}
+
+.intro .discover .hook a {
+  transition: all 0.4s ease-in;
+}
+
+.intro .discover .hook a:hover {
+  color: dodgerblue;
+}