lewagon · pdunleav · Jan 31, 2019 · Jan 21, 2019 · Jan 21, 2019 · Jan 21, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/01-profile-content-new/README.md b/01-profile-content-new/README.md
@@ -0,0 +1,20 @@
+## Background & Objectives
+
+A simple challenge to manipulate basic HTML tags and create a profile page with headers/texts/lists/images/tables.
+
+## Specs
+
+Build a simple HTML page with the following elements (use the right HTML tags):
+
+- an image of yourself
+- a header and sub-header with your name and position
+- a description of yourself
+- a list of your social links
+
+A picture is worth a thousand words, [here is what you should build in this challenge](https://lewagon.github.io/html-css-challenges/01-profile-content-new/)
+
+## Tips & Resources
+
+- You can use [Font Awesome](http://fontawesome.io/) to find nice icons (e.g. for social networks). It is a very convenient library since it is a **font** of icons (hence it will be very easy to resize these icons, change their color, and add animations on them!)
+- Don't forget the page `<title>` in the `<head>` section, and other important metatags like `<meta charset="utf-8">`.
+- You could use the `_target="blank"` attribute on your links to make them open on new tabs.
diff --git a/01-profile-content-new/index.html b/01-profile-content-new/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My profile</title>
+    <meta charset="utf-8">
+    <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/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;
+}
diff --git a/03-box-model-and-selectors/README.md b/03-box-model-and-selectors/README.md
@@ -0,0 +1,35 @@
+## Background & Objectives
+
+Play with the box model (`margin/border/padding/width/height`) by splitting your profile informations into different `<div>`.
+
+
+## Specs
+
+Here is [your objective](https://lewagon.github.io/html-css-challenges/03-box-model/).
+
+- You should start with the following structure for your page
+
+```html
+<div id="container">
+  <div class="card"></div>
+  <div class="card"></div>
+  <div class="card"></div>
+  <div class="card"></div>
+</div>
+```
+
+- The `<div id="container">` is here to center its content so that you don't have a full-screen page (which is very ugly).
+- The `<div class="card"></div>` are here to display nicely each group of infos that fit together.
+- Add a nice touch to these divs thanks to `background`, `border`, `border-radius` and `box-shadow` CSS properties.
+
+
+## Tips & Resources
+
+Here is the div centering technique for the main container
+
+```css
+div{
+  width: 500px;
+  margin: 0 auto; /* you can change 0 if your want top-bottom margin */
+}
+```
diff --git a/03-box-model-and-selectors/index.html b/03-box-model-and-selectors/index.html
@@ -0,0 +1,45 @@
+
+<!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.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+  </head>
+  <body>
+
+    <div class="container">
+      <div class="card-white" id="introduction">
+        <h1>Hello, I'm Boris 😎</h1>
+        <img src="images/profile.png" class="img-circle" 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="#" class="btn-blue">Discover Le Wagon</a>
+      </div>
+      <div class="card-white">
+        <h2>Follow me</h2>
+        <ul class="list-inline">
+          <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>
+      </div>
+    </div>
+
+  </body>
+</html>
diff --git a/03-box-model-and-selectors/style.css b/03-box-model-and-selectors/style.css
@@ -0,0 +1,102 @@
+/* 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;
+}
+
+
+/* Custom design with class (99% of your design) */
+.container {
+  width: 700px;
+  margin: 40px auto;
+}
+
+@media (max-width: 960px) {
+  /* For a screen < 960px, this CSS will be read */
+  .container {
+    width: 700px;
+  }
+}
+@media (max-width: 720px) {
+  /* For a screen < 720px, this CSS will be read */
+  .container {
+    width: 500px;
+  }
+}
+@media (max-width: 540px) {
+  /* For a screen < 540px, this CSS will be read */
+  .container {
+    width: 300px;
+  }
+}
+
+
+.card-white {
+  background-color: white;
+  padding: 40px;
+  box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
+  border-radius: 4px;
+  margin: 20px 0px;
+  text-align: center;
+}
+.img-circle {
+  border-radius: 50%;
+}
+.btn-blue {
+  background-color: #6B72E1;
+  color: white;
+  padding: 15px 20px;
+  border-radius: 4px;
+}
+.btn-blue:hover {
+  background-color: black;
+  color: white;
+}
+.list-inline {
+  list-style: none;
+  padding-left: 0px;
+}
+
+.list-inline li {
+  display: inline;
+  padding: 10px;
+}
+.list-inline i {
+  font-size: 50px;
+  color: rgb(230, 230, 230);
+}
+.list-inline i:hover {
+  color: black;
+}
+
+/* Design adjustments using id (1% design remaining) */
+#introduction p {
+  margin-bottom: 40px;
+}
diff --git a/03-box-model/style.css b/03-box-model/style.css
@@ -66,4 +66,3 @@ table{
   border-radius: 4px;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
 }
-
diff --git a/13-activity-feed/.DS_Store b/13-activity-feed/.DS_Store
diff --git a/13-activity-feed/css/components/avatar.css b/13-activity-feed/css/components/avatar.css
@@ -0,0 +1,8 @@
+.avatar {
+  width: 40px;
+  border-radius: 50%;
+}
+.avatar-large {
+  width: 56px;
+  border-radius: 50%;
+}/* Your avatar CSS code here */
diff --git a/13-activity-feed/css/components/navbar.css b/13-activity-feed/css/components/navbar.css
@@ -0,0 +1,10 @@
+.navbar-lewagon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90px;
+  box-shadow: 5px 0 10px rgba(0,0,0,0.15);
+}
+.navbar-lewagon img {
+  width: 50px;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -66,4 +66,3 @@ table{
		border-radius: 4px;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
		}