updated draft

src/app/shared/footer/footer.component.css

@@ -85,3 +85,7 @@ a:hover {
   align-items: center;
   flex-direction: row;
 }
+.container-width {
+  width: 85vw;
+  margin: auto;
+}

src/app/shared/footer/footer.component.html

 <footer class="footer col-xs-12" id="global-footer">
-	<div class="container">
+	<div class="container-width">
 		<div class="row row-center">
 			<div class="col-sm-2">
 				<!-- NMaaS Logo optionally -->
                 <a href="https://www.geant.org/">
-                    <img alt="Geant Logo" src="/assets/images/geant-logo.png" class="image-link"/>
+                    <img alt="Geant Logo" src="/assets/images/geant-logo.png"  width="200" class="image-link"/>
                 </a>
 			</div>
             <div class="col-sm-3">

src/app/shared/navbar/navbar.component.html

-<nav class="navbar navbar-default" id="navbar" role="navigation">
+<nav class="navbar navbar-default" id="navbar" role="navigation" style="margin:0">
     <div class="container-fluid">
         <div class="navbar-header">
             <a routerLink="/"><img alt="Geant" src="assets/images/logo-small.png" style="margin: 5px; height:35px"></a>

src/app/welcome/welcome.component.css

 html, body {
 	min-height: 100vh;
 }
-
-.container-fluid {
-	min-height: 70vh;
-    background-repeat: no-repeat;
-    background-color: rgb(255, 255, 255);
-	padding-bottom: 50px;
-}
-
-.vertical-offset {
-	margin-top: 50px;
-}
-
-.landing-img-sm{
-	width: 100%;
-	height: 100%;
-	max-width: 200px;
-	max-height: 160px;
-}
-
-.landing-img-lg{
-	width: 100%;
-	height: 100%;
-	max-width: 500px;
-	max-height: 400px;
-}
-
-.landing-img-left{
-	padding-left: 15px;
-}
-
-.landing-img-right{
-	padding-right: 15px;
-}
-
-.landing-img-logo{
-	width: 100%;
-	height: 100%;
-	max-height: 150px;
-	max-width: 200px;
-}
-
-.landing-block-padding{
-	padding-top: 4vh;
-}
-
-.features-bottom-padding{
-	padding-bottom: 1px;
-}
-
-.features-top-padding{
-	padding-top: 15px;
-}
-
-.banner{
-	background-color : #424242;
-	color: #E8E8E8;
-	margin-top: -20px;
-	padding: 12px;
-	justify-self: center;
-	display: grid;
-	width: 100%;
-}
-
-.container {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 75rem;
-}
-.w-40{
-	width: 40%;
+.w-50{
+	width: 50%;
 }
 .flex{
 	display: flex;
@@ -80,12 +12,66 @@ html, body {
 }
 .button{
 	text-decoration: none;
-	background: #DC6E28;
 	font-weight: bold;
 	color:#ffffff;
 	border-radius: 30px;
-	padding:12px 25px;
+	padding:10px 20px;
+}
+.button-vNOC{
+	background: #DC6E28;
+}
+.button-vLAB{
+	background: #E9A143;
 }
 .margin2{
 	margin: 3rem 0;
 }
+
+.shape {
+	padding-bottom: 25px;
+	border-radius: 100% 100% 0 0;
+	background: #FFF6EF;
+	height: 100%;
+	width: 80%;
+	overflow: hidden;
+	box-shadow: inset 0 6px 7px rgba(0, 0, 0, .2)
+}
+.position {
+	transform: rotate(-90deg);
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	height: 100%;
+	width: 65%;
+	background-color: #ffffff;
+}
+.map {
+	height: 80%;
+	width: 100%;
+}
+.cls-1,.cls-2 {
+	fill:none;
+	stroke-linecap:round;
+	stroke-miterlimit:10;
+	stroke-width:3px;
+}
+.cls-1{
+	stroke:#E57002;
+}
+.cls-2{
+	stroke:#EEA054;
+}
+
+.line {
+	stroke-dasharray: 400;
+	stroke-dashoffset: 400;
+	animation: draw 10s infinite alternate;
+}
+@keyframes draw {
+	from {
+		stroke-dashoffset: 400;
+	}
+	to {
+		stroke-dashoffset: 0;
+	}
+}