new temp folder for new profile fonts and colors

pdunleav · pdunleav · commit 8abfd1fc93c4 · 2019-01-31T15:23:42.000Z
diff --git a/02-fonts-colors-new/README.md b/02-fonts-colors-new/README.md
@@ -0,0 +1,26 @@
+## Background & Objectives
+
+Add simple CSS rules to design fonts and colors of your profile page.
+
+## Specs
+
+[This is an example](https://lewagon.github.io/html-css-challenges/02-fonts-colors-new/) of what you should reproduce. Here is a list of CSS rules to write:
+
+
+### Body
+- Pick a nice background color, font family/color/size and line-height for the `<body>`. Setting font properties at the body-level will apply it on all basic texts (`<p>`, `<li>`, etc...).
+
+### Headers
+- Choose a nice color and font-family for headers (`<h1>`, `<h2>`, `<h3>`)
+- Choose harmonious `font-size` and `line-height` for headers
+- Resize image `width`
+
+### Links
+- Change links colors & text decoration
+- Add some hover effects on links using the pseudo-class `a:hover`.
+
+## Tips & Resources
+
+- Use Colorzilla plugin to pick nice colors from other websites. You can find inspiration [here](http://www.flatuicolorpicker.com/).
+- Pick your fonts on [google fonts](https://www.google.com/fonts)
+- On Google fonts, **Open Sans** is the standard choice for core texts. **Varela** & **Montserrat** are elegant candidates for headers.
diff --git a/02-fonts-colors-new/index.html b/02-fonts-colors-new/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My profile</title>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Roboto:300,400,500,700,900" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+  </head>
+  <body>
+
+    <h1>Hello, I'm Boris 😎</h1>
+    <img src="../shared/images/profile.png" width="100px" alt="Boris Paillard">
+    <p>
+      I love Github, UX/UI Design, web-development and motorbikes 🏍️. I launched Le Wagon to teach code to entrepreneurs and creative people around the world 🌍.
+    </p>
+    <a href="#">Discover Le Wagon</a>
+    <h2>Follow me</h2>
+    <ul>
+      <li>
+        <a href="https://github.com/papillard" target="_blank">
+          <i class="fab fa-github-square"></i>
+        </a>
+      </li>
+      <li>
+        <a href="https://twitter.com/bpapillard" target="_blank">
+          <i class="fab fa-twitter-square"></i>
+        </a>
+      </li>
+      <li>
+        <a href="https://medium.com/@papillard" target="_blank">
+          <i class="fab fa-medium"></i>
+        </a>
+      </li>
+    </ul>
+
+  </body>
+</html>
diff --git a/02-fonts-colors-new/style.css b/02-fonts-colors-new/style.css
@@ -0,0 +1,32 @@
+/* Colors and fonts */
+body {
+  background: #F7F9FC;
+  color: #575F7D;
+  font-family: 'Lora', serif;
+  font-size: 17px;
+  font-weight: lighter;
+}
+h1, h2, h3 {
+  font-family: 'Roboto', sans-serif;
+}
+h1 {
+  color: #575F7D;
+  font-size: 32px;
+  font-weight: 900;
+}
+h2 {
+  color: #7ECE90;
+  font-size: 20px;
+  font-weight: lighter;
+  font-weight: 500;
+}
+a {
+  font-family: 'Roboto', sans-serif;
+  text-decoration: none;
+  color: #6B72E1;
+  font-weight: 600;
+  font-size: 16px;
+}
+a:hover {
+  color: black;
+}
