Add styling

dbedggood · Nov 28, 2019 · 1ce8489 · 1ce8489
1 parent 4bd2fe0
commit 1ce8489
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 2 deletions.
diff --git a/Flexbox Card Component/css/style.css b/Flexbox Card Component/css/style.css
@@ -1,5 +1,117 @@
+* {
+  box-sizing: border-box;
+}
+
 html,
 body {
   margin: 0;
   padding: 0;
 }
+
+/* TYPOGRAPHY */
+
+body {
+  background-color: #111d4a;
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #eeeeee;
+  font-size: 16px;
+}
+
+h1,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  font-family: 'Blinker', sans-serif;
+  color: #05cbe9;
+  font-size: 28px;
+}
+
+.number {
+  font-family: 'Blinker', sans-serif;
+  font-size: 24px;
+}
+
+.read-time {
+  color: #aaaaaa;
+  font-size: 20px;
+}
+
+button {
+  font-size: 20px;
+}
+
+@media (min-width: 900px) {
+  body {
+    font-size: 18px;
+  }
+
+  h1 {
+    font-size: 36px;
+  }
+}
+
+/* MOBILE LAYOUT */
+
+.picture img {
+  width: 100%;
+  height: 30vh;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 2.5em;
+  height: 70vh;
+}
+
+.more {
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.read-time {
+  width: 50px;
+}
+
+.read-more {
+  align-self: flex-end;
+}
+
+.read-more-button {
+  background: #05cbe9;
+  font-family: 'Blinker', sans-serif;
+  color: #111d4a;
+  border: none;
+  padding: 0.5em 1.5em;
+  transition: 250ms;
+}
+
+.read-more-button:focus,
+.read-more-button:hover {
+  background: #eeeeee;
+}
+
+/* WIDESCREEN LAYOUT */
+
+@media (min-width: 900px) {
+  .container {
+    display: flex;
+  }
+
+  .picture {
+    flex-grow: 1;
+  }
+
+  .picture img {
+    height: 100vh;
+  }
+
+  .content {
+    height: 100vh;
+    flex-grow: 1;
+  }
+}
diff --git a/Flexbox Card Component/index.html b/Flexbox Card Component/index.html
@@ -2,6 +2,10 @@
   <head>
     <link rel="stylesheet" href="../normalize.css" />
     <link rel="stylesheet" href="css/style.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Blinker:800|Source+Sans+Pro&display=swap"
+      rel="stylesheet"
+    />
     <title>Flexbox Card Component</title>
   </head>
   <body>
@@ -21,8 +25,12 @@ <h1>7 tech tips and tricks that you need to know</h1>
           </p>
         </div>
         <div class="more">
-          <div class="read-time"><strong>15</strong> minute read</div>
-          <div class="read-more"><button>read more</button></div>
+          <div class="read-time">
+            <span class="number">15</span> minute read
+          </div>
+          <div class="read-more">
+            <button class="read-more-button">read more</button>
+          </div>
         </div>
       </div>
     </div>