Fist commit

_includes/layout/TopBar.html

@@ -0,0 +1,60 @@
+<nav class="is-flex">
+    <div class="nav-item is-flex is-flex-grow-1 is-align-items-center ml-6">
+        <h5 class="is-size-1-mobile"><a class=" LinkName mr-2"></a>/<a class="ml-2">STREAM</a></h5>
+        <input class="input ml-6 mr-6" placeholder="Pesquisar" />
+    </div>
+    <div class="nav-item is-flex is-flex-grow-1 is-align-items-center is-justify-content-flex-end mr-6">
+        <h4 class="usuario is-size-6 mr-4">Bem vindo</h4>
+        <figure class="image is-32x32 ">
+            <img 
+                class="is-rounded"
+                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFqZMMWnIwg5s5uicldr-MVKpmu_2e1KWaIm2wNzp-Oqs4uyaqRGY8TFhBHIdWOMFMYPs&usqp=CAU" 
+            />
+        </figure>
+    </div>
+</nav>
+
+
+<style type="text/css">
+   @media only screen and (min-width: 720px) {
+        nav{
+            height: 100px;
+            /* width: 101rem; */
+            background-color: #0b1a33;
+        }
+    }
+    @media screen and (max-width: 1080px) {
+        nav{
+        height: 100px;
+        /* width: 101rem; */
+        background-color: #0b1a33;
+    }
+    }   
+    input{
+        width: 300px;
+        /* height: 40px; */
+        background-color: #0b1a33;
+        border-color: #5ce1f4;
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        
+    }
+    input::placeholder{
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        
+    }
+    .nav-item h5 a{
+        color: #fff;
+    }
+    .LinkName{
+        color: #5ce1f4 !important;
+    }
+    .visible{
+        display: none;
+    }
+    .usuario{
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+    }
+</style>