claudioacioli/index.html

## index.html
<!doctype html>
<html>
	<head>
		<title>Flexbox example page</title>
		<link href="teste.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="container">
			<header>
				<h1>Ink</h1>
			</header>
			<nav>
				<ul class="site-nav">
					<li><a href="/">Home</a></li>
					<li><a href="/">Features</a></li>
					<li><a href="/">Pricing</a></li>
					<li><a href="/">Support</a></li>
					<li class="nav-right"><a href="/">About</a></li>
				</ul>
			</nav>

			<main class="flex">

				<div class="column-main tile">
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
					<h1>Team collaboration</h1>
					<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
				</div>

				<div class="column-sidebar">

					<div class="tile">
						<form class="">
							<h3>Login</h3>
							<p>
								<label for="username">Username</label>
								<input id="username" type="text" name="username" />
							</p>
							<p>
								<label for="password">Password</label>
								<input type="password" id="password" name="password" />
							</p>
						</form>
					</div>

					<div class="tile centered">
						<small>Starting at</small>
						<div class="coast">
							<span class="coast-currency">$</span>
							<span class="coast-dollars">20</span>
							<span class="coast-cents">.00</span>
						</div>
						<a class="cta-button" href="/">Sign up</a>
					</div>

				</div>

			</main>
		</div>
	</body>
</html>

## teste.css
:root{
	box-sizing: border-box;
}

*,
::before,
::after {
	box-sizing: inherit;
}

body {
	background-color: #f9f9f9;
	font-family: Helvetica, Arial, sans-serif;
}

body * + * {
	margin-top: 1.5em;
}

.container {
	max-width: 1080px;
	margin: 0 auto;
}

.site-nav {
	display: flex;
	padding: .5em;
	list-style-type: none;
	background-color: transparent;
}

.site-nav li {
	margin-top: 0;
}

.site-nav > li > a {
	background-color: white;
	color: #aaa;
	text-decoration: none;
	padding: .5em 1em;
	border-radius:.2em;
}

.site-nav > li + li {
	margin-left: 1.5em;
}

.site-nav > .nav-right {
	margin-left: auto;
}

.tile {
	padding: 1.5em;
	background-color: #fff;
}

.flex {
	display: flex;
}

.flex > * + * {
	margin-top:0;
	margin-left: 1.5em;
}

.column-main {
	flex: 2
}

.column-sidebar {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.column-sidebar > .tile:nth-child(1) {
	flex-basis:40%;
	flex-grow:2;
	flex-shirink:1;
}

.column-sidebar > .tile:nth-child(2){
	flex-basis: 20%;
	flex-grow:1;
	flex-shirink: 2;
}
	<!doctype html>
	<html>
	<head>
	<title>Flexbox example page</title>
	<link href="teste.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div class="container">
	<header>
	<h1>Ink</h1>
	</header>
	<nav>
	<ul class="site-nav">
	<li><a href="/">Home</a></li>
	<li><a href="/">Features</a></li>
	<li><a href="/">Pricing</a></li>
	<li><a href="/">Support</a></li>
	<li class="nav-right"><a href="/">About</a></li>
	</ul>
	</nav>

	<main class="flex">

	<div class="column-main tile">
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	<h1>Team collaboration</h1>
	<p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
	</div>

	<div class="column-sidebar">

	<div class="tile">
	<form class="">
	<h3>Login</h3>
	<p>
	<label for="username">Username</label>
	<input id="username" type="text" name="username" />
	</p>
	<p>
	<label for="password">Password</label>
	<input type="password" id="password" name="password" />
	</p>
	</form>
	</div>

	<div class="tile centered">
	<small>Starting at</small>
	<div class="coast">
	<span class="coast-currency">$</span>
	<span class="coast-dollars">20</span>
	<span class="coast-cents">.00</span>
	</div>
	<a class="cta-button" href="/">Sign up</a>
	</div>

	</div>

	</main>
	</div>
	</body>
	</html>
	:root{
	box-sizing: border-box;
	}

	*,
	::before,
	::after {
	box-sizing: inherit;
	}

	body {
	background-color: #f9f9f9;
	font-family: Helvetica, Arial, sans-serif;
	}

	body * + * {
	margin-top: 1.5em;
	}

	.container {
	max-width: 1080px;
	margin: 0 auto;
	}

	.site-nav {
	display: flex;
	padding: .5em;
	list-style-type: none;
	background-color: transparent;
	}

	.site-nav li {
	margin-top: 0;
	}

	.site-nav > li > a {
	background-color: white;
	color: #aaa;
	text-decoration: none;
	padding: .5em 1em;
	border-radius:.2em;
	}

	.site-nav > li + li {
	margin-left: 1.5em;
	}

	.site-nav > .nav-right {
	margin-left: auto;
	}

	.tile {
	padding: 1.5em;
	background-color: #fff;
	}

	.flex {
	display: flex;
	}

	.flex > * + * {
	margin-top:0;
	margin-left: 1.5em;
	}

	.column-main {
	flex: 2
	}

	.column-sidebar {
	flex: 1;
	display: flex;
	flex-direction: column;
	}

	.column-sidebar > .tile:nth-child(1) {
	flex-basis:40%;
	flex-grow:2;
	flex-shirink:1;
	}

	.column-sidebar > .tile:nth-child(2){
	flex-basis: 20%;
	flex-grow:1;
	flex-shirink: 2;
	}