Gist for Dart language tour (https://www.dartlang.org/guides/language/language-tour)

index.html

<div class="app">
  
  <div class="header">
    <div>☎ ♻ ✪</div> 
    <span></span>
    <div>mydartapp.io</div>
  </div>
  
  <div class="navigation">
    <div>Welcome</div>
    <span></span>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
  
  <div class="content">
    <div>Lorem Amoralium</div>
  </div>
  
  <div class="footer"></div>
</div>

main.dart

import 'dart:html';

void main() {  
  final DateTime now = new DateTime.now();
  querySelector('.footer').text = '(c) Fyodor, ${now.year}';
}

styles.css

body {
  height: 100vh;
}
.app {
  height: 100%;
  background-color: #D6ECFA;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}
.header, .footer, .navigation, .content {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.header, .footer {
  background-color: #6F3826;
  color: rgb(183, 155, 146);
  height: 48px;
}
.navigation {
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #D6ECFA;
  color: #F15C5C;
  height: 64px;
  text-transform: uppercase;
} 
span {
  display: flex;
  flex: auto;
}
ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}
ul li {
  margin-left: 16px;
}
.content {
  font-size: 4rem;
  font-weight: bold;
	color: white;
  flex: auto;
  background: url(https://wallpapercave.com/wp/GOoZpGh.jpg) #B84A39;
  background-size: 100% 100%;
}