Create final project solution

jaybones90 · Nov 23, 2020 · 6cf8e6d · 6cf8e6d
1 parent 0723669
commit 6cf8e6d
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
 TODO
+
+## Color palette
+
+Primary: `hsl(245deg, 100%, 55%)`
+Secondary: `hsl(45deg, 100%, 50%)`
diff --git a/index.html b/index.html
@@ -2,8 +2,40 @@
   <head>
     <title>CSS for JavaScript Developers – Exercise</title>
     <link rel="stylesheet" href="./style.css"></link>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap" rel="stylesheet">
   </head>
 <body>
-  Hello World
+  <header class="max-width-wrapper">
+    <div class="intro-chunk">
+
+      <h1 class="title">
+        Synergy Inc.
+      </h1>
+
+      <p>
+        When you deal in productionized solutions, you're in <strong>good hands</strong>.
+      </p>
+      <p>
+        We’ve solutionized a culture of contribution.
+      </p>
+    </div>
+  </header>
+  <main>
+  <section class="max-width-wrapper">
+    <div class="card">
+      <h2 class="indented-heading">Synergies for the 23rd century</h2>
+      <p>
+        No matter your KPIs, we know that optics matter. When your team is operating at 110%, when a target-rich environment meets product-market fit, when cross-pollination happens serendipitously, that's when you've found <em>Synergy</em>.
+      </p>
+      <p>
+        <em>Synergy</em> is a solutions agency for the 23rd century. We focus on high-yield, long-tail, curated experiences for modern SaaS enterprises operating in the business-to-business space. If that sounds like you, let's chat. ☎
+      </p>
+    </div>
+  </section>
+  </main>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,4 +1,84 @@
 * {
   box-sizing: border-box;
-  font-family: sans-serif;
+  font-family: 'Lato', sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* Add styles here! */
+html {
+  font-size: 18px;
+}
+
+p {
+  line-height: 1.4;
+}
+
+.intro-chunk {
+  padding-top: 128px;
+  padding-bottom: 72px;
+  max-width: 500px;
+}
+
+.intro-chunk p {
+  font-size: 1.5rem;
+  margin-bottom: 0;
+}
+
+.intro-chunk strong {
+  font-weight: 900;
+  color: hsl(245deg, 100%, 55%);
+}
+
+main {
+  padding-top: 96px;
+  padding-bottom: 128px;
+  background: #111;
+}
+
+main p {
+  font-size: 1.25rem;
+}
+
+.title {
+  font-size: 1.5rem;
+  margin: 0;
+  margin-bottom: 64px;
+  color: black;
+}
+
+.max-width-wrapper {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 32px;
+}
+
+.card {
+  background: white;
+  color: #333;
+  padding: 32px;
+  margin: 0 -32px;
+}
+
+.card *:last-child {
+  margin-bottom: 0;
+}
+
+.indented-heading {
+  margin: 0;
+  margin-top: -24px;
+  margin-left: -48px;
+  margin-bottom: 24px;
+  padding: 16px;
+  padding-left: 48px;
+  padding-right: 48px;
+  background: hsl(45deg, 100%, 50%);
+  color: black;
+  width: fit-content;
+  font-size: 1.5rem;
 }