diff --git a/public/index.html b/public/index.html
index b50a5f0..f34b495 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel='stylesheet' href='styles.css'>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
     <title>xdrm-brackets</title>
   </head>
   <body>
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..96bb465
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,28 @@
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+*:before, *:after {
+	box-sizing: inherit;
+}
+
+html, body{
+	overflow: hidden;
+}
+
+body {
+	display: block;
+	position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	font-size: 16px;
+	font-family: 'Roboto', Arial, sans-serif;
+	font-weight: 300;
+    color: #444;
+
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index cc09747..1480448 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,32 @@
 <template>
-  <div id="app">
-    <HelloWorld/>
-  </div>
+	<div id="app">
+		<Banner/>
+		<HelloWorld/>
+	</div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import HelloWorld from './components/HelloWorld.vue';
+import Banner from './components/Banner.vue';
 
 @Component({
-  components: {
-    HelloWorld,
-  },
+	components: {
+		HelloWorld,
+		Banner,
+	},
 })
 export default class App extends Vue {}
 </script>
 
 <style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+	#app {
+		display: block;
+		position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+
+	}
 </style>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
new file mode 100644
index 0000000..f1a33d9
--- /dev/null
+++ b/src/components/Banner.vue
@@ -0,0 +1,193 @@
+<template>
+	<div id='banner'>
+
+		<div class='icon-wrapper'>
+			<div class='icon'>
+				<div class='ring'></div>
+				<div class='picture'></div>
+			</div>
+		</div>
+
+		<div class='content'>
+
+			<div class='contact'>
+				<span>{{ model.phone }}</span>
+				<span>{{ model.email }}</span>
+				<span>{{ model.address }}</span>
+			</div>
+
+			<div class='name'>
+				<span class='firstname'>
+					{{ model.firstname | capitalize }}
+				</span>
+				<span class='lastname'>
+					{{ model.lastname | uppercase }}
+				</span>
+			</div>
+
+			<div class='headline'>
+				{{ model.headline | uppercase }}
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { Component, Vue } from 'vue-property-decorator';
+	import BannerModel from '../model/banner';
+
+	@Component({
+		filters: {
+			uppercase(raw: string): string {
+				return raw.toUpperCase();
+			},
+			capitalize(raw: string): string {
+				if ( raw.length < 2 ) {
+					return raw.toUpperCase();
+				}
+				return raw[0].toUpperCase() + raw.substr(1).toLowerCase();
+			},
+		},
+	})
+	export default class Banner extends Vue {
+		private model: any = BannerModel;
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+	$banner-size: 14rem;
+	$icon-size: 9rem;
+	$wave-height: 1rem;
+
+	$mq-noresize: 1250px;
+	$mq-noicon: 940px;
+
+	#banner {
+		display: flex;
+		position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: $banner-size;
+
+		flex-flow: row nowrap;
+		justify-contnet: stretch;
+		align-items: stretch;
+
+		color: #fff;
+		font-family: 'Roboto';
+		font-weight: 300;
+		white-space: nowrap;
+
+		background:linear-gradient(to bottom right, #5154fc, #518dfc);
+
+
+		.icon-wrapper {
+			flex: $banner-size 0 0;
+
+			display: flex;
+			position: relative;
+				margin-right: 1rem;
+
+			flex-flow: row nowrap;
+			justify-content: center;
+			align-items: center;
+
+			.icon {
+				flex: $icon-size 0 0;
+
+				display: block;
+				position: relative;
+					height: $icon-size;
+
+				.ring {
+					display: block;
+					position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+
+					border: 2px solid #fff;
+					border-radius: 50% / 50%;
+				}
+
+				.picture {
+					display: block;
+					position: absolute;
+						top: 10%;
+						left: 10%;
+						width: 80%;
+						height: 80%;
+
+					background: rgba(#fff, .2);
+					border-radius: 50% / 50%;
+				}
+
+			}
+
+		}
+
+		.content{
+			flex: auto 0 1;
+
+			display: flex;
+			position: relative;
+				margin: auto;
+
+			flex-flow: column nowrap;
+			justify-content: center;
+			align-items: center;
+
+			.contact {
+				display: flex;
+				position: relative;
+
+				flex-flow: row nowrap;
+				justify-content: space-around;
+				align-items: center;
+
+				color: rgba(#fff, .7);
+
+				span {
+					margin: 0 2rem;
+				}
+			}
+
+			.name {
+				display: block;
+				position: relative;
+
+				font-size: 5rem;
+
+				.lastname {
+					font-weight: 100;
+				}
+			}
+
+			.headline {
+				font-weight: 400;
+			}
+
+		}
+	}
+
+
+	// remove icon if less than $mq-noresize px wide
+	@media screen and (max-width: $mq-noicon){
+		#banner {
+			.icon-wrapper {
+				display: none;
+			}
+		}
+	}
+
+	// stop resizing: fixed width since $mq-noresize px wide
+	@media screen and (min-width: $mq-noresize){
+		#banner {
+			padding: 0 calc( 50% - #{$mq-noresize/2} );
+		}
+	}
+</style>
diff --git a/src/model/banner.ts b/src/model/banner.ts
new file mode 100644
index 0000000..8c56616
--- /dev/null
+++ b/src/model/banner.ts
@@ -0,0 +1,8 @@
+export default  {
+	firstname: 'adrien',
+	lastname: 'marques',
+	headline: 'full-stack developer',
+	phone: '(+33) 06 69 05 19 10',
+	email: 'xdrm.brackets.dev@gmail.com',
+	address: 'Eaunes, 31600',
+};
