adrianobarroso/index.html

## index.html
<html>
  <head>
    <title>Le wagon</title>
    <meta charset="utf-8"></meta>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  </head>

  <body>
    <div class="card-white">
      <img src="images/boris.jpg" id="img-circle" alt="" title="boris">
      <h1>Boris Paillard</h1>

      <h2>CEO @Le Wagon</h2>

      <p>
        After 3 years in financial markets, I got bored and launched Le Wagon. Our mission: bring technical skills to <em>creative people</em>creative people.
      </p>

      <a href="" class="btn-red">See for yourself</a>
    </div>

    <div class="card-white">
      <ul>
        <li>
          <a href="#">
            <i class="fa fa-facebook"></i>Facebook
          </a>
        </li>
        <li><a href="#"><i class="fa fa-linkedin"></i>Linkedin</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>Twiter</a></li>
      </ul>
    </div>

    <div class="card-white">
      <h2>My Favorite movies</h2>

      <table>
        <tbody>
          <tr>
            <td>
              <img src="images/space-odyssey.jpg" alt="">
            </td>
            <td>
              <h3>2001 - Space Odyssey</h3>
              <p>
                Humanity finds a mysterious, obviously artificial, object buried beneath the Lunar surface and, with the intelligent computer H.A.L. 9000, sets off on a quest.
              </p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

## style.css
body {
  color: rgb(40,40,40);
  background-color: #EBEBEB;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
}

.card-white {
  background-color: white;
  width: 400px;
  padding: 40px;
  margin: 10px auto;
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
}

li i { margin-right: 10px; }

a {
  text-decoration: none;
  color: rgba(200,40,10, 0.7);
}

a:hover { color: rgba(200,40,10, 0.3); }

.btn-red {
  padding: 5px 15px;
  background-color: red;
  border-radius: 4px;
  color: white;
}

#img-circle {
  border-radius: 50%;
}

li {
  list-style: none;
}
	<html>
	<head>
	<title>Le wagon</title>
	<meta charset="utf-8"></meta>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans\|Raleway" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
	</head>

	<body>
	<div class="card-white">
	<img src="images/boris.jpg" id="img-circle" alt="" title="boris">
	<h1>Boris Paillard</h1>

	<h2>CEO @Le Wagon</h2>

	<p>
	After 3 years in financial markets, I got bored and launched Le Wagon. Our mission: bring technical skills to <em>creative people</em>creative people.
	</p>

	<a href="" class="btn-red">See for yourself</a>
	</div>

	<div class="card-white">
	<ul>
	<li>
	<a href="#">
	<i class="fa fa-facebook"></i>Facebook
	</a>
	</li>
	<li><a href="#"><i class="fa fa-linkedin"></i>Linkedin</a></li>
	<li><a href="#"><i class="fa fa-twitter"></i>Twiter</a></li>
	</ul>
	</div>

	<div class="card-white">
	<h2>My Favorite movies</h2>

	<table>
	<tbody>
	<tr>
	<td>
	<img src="images/space-odyssey.jpg" alt="">
	</td>
	<td>
	<h3>2001 - Space Odyssey</h3>
	<p>
	Humanity finds a mysterious, obviously artificial, object buried beneath the Lunar surface and, with the intelligent computer H.A.L. 9000, sets off on a quest.
	</p>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</body>
	</html>
	body {
	color: rgb(40,40,40);
	background-color: #EBEBEB;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	}

	h1, h2, h3 {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	}

	.card-white {
	background-color: white;
	width: 400px;
	padding: 40px;
	margin: 10px auto;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	}

	li i { margin-right: 10px; }

	a {
	text-decoration: none;
	color: rgba(200,40,10, 0.7);
	}

	a:hover { color: rgba(200,40,10, 0.3); }

	.btn-red {
	padding: 5px 15px;
	background-color: red;
	border-radius: 4px;
	color: white;
	}

	#img-circle {
	border-radius: 50%;
	}

	li {
	list-style: none;
	}