Move hero and introduction into welcome

The styling is a bit less big and bold.
2 years ago · 7951e2b1e5
3 changed files with 44 additions and 17 deletions
--- a/index.html
+++ b/index.html
@ -8,25 +8,19 @@
        <link rel="stylesheet" href="styles/index.css" />
    </head>
    <body>
-        <section class="hero">
-            <div class="hero__text-area__container">
-                <h1 class="hero__text-area__heading">/dev.space</h1>
-                <h3 class="hero__text-area__subheading">
-                    The digital hackerspace
-                </h3>
-            </div>
-        </section>
-        <section class="introduction">
-            <div class="introduction__container">
-                <h1 class="introduction__container__heading">
-                    /dev.space is a platform providing online services for
-                    developers to collectively learn and grow.
+        <section class="welcome">
+            <div class="welcome__container">
+                <h1 class="welcome__text-area__heading">
+                    /dev.space
                </h1>
-                <h3 class="introduction__container__subheading">
-                    Whether you're freshly starting out, or you are just looking
-                    to connect with likeminded people. We help you turn your
-                    project ideas into reality.
+                <h3 class="welcome__text-area__subheading">
+                    Where developers can collectively learn an grow.
                </h3>
+                <p class="welcome__text-area__description">
+                    Whether you're freshly starting out, or you are just looking
+                    to connect with likeminded people. Our suite of online services
+                    help you turn your project ideas into reality.
+                </p>
            </div>
        </section>
        <section class="services">
--- a/styles/index.css
+++ b/styles/index.css
@ -4,6 +4,7 @@
 /* Components */
@import url("./hero.css");
@import url("./introduction.css");
+@import url("./welcome.css");
@import url("./services.css");

 body {
--- a/styles/welcome.css
+++ b/styles/welcome.css
@ -0,0 +1,32 @@
+.welcome {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    font-family: "Work Sans", sans-serif;
+}
+
+.welcome__container {
+	margin-top: 8vh;
+    text-align: center;
+}
+
+.welcome__text-area__heading {
+    font-size: 5rem;
+    margin: 1rem;
+    text-align: center;
+}
+
+.welcome__text-area__subheading {
+    font-size: 2rem;
+    text-align: center;
+	margin-top: 0;
+	margin-bottom: 2em;
+}
+
+.welcome__text-area__description {
+    font-size: 1.5rem;
+	/* font-weight: 350; */ /* Can't try out, I don't have multiple weights installed. */
+    text-align: center;
+	margin-left: 12vw;
+	margin-right: 12vw;
+}