New features

Assets/css/main.css

@@ -0,0 +1,93 @@
+:root {
+    --lilas-nebuloso: rgba(212,198,212,1);
+    --rosa-neve: rgba(243,239,239,1);
+    --azul-nevoeiro: rgba(199,210,216,1);
+    --bege-areia: rgba(226,216,195,1);
+    --verde-salvia: rgba(138,163,155,1);
+
+     /* Informaçoes da paleta de cores */
+     --primary-color: var(--lilas-nebuloso);
+     --secondary-color: var(--verde-salvia);
+     --accent-color: var(--bege-areia);
+     --background-color: var(--azul-nevoeiro);
+     --text-color: var( --rosa-neve);
+     --secondary-text-color: var(--verde-salvia);
+    
+     /*
+     --error-color: var(--slate-gray);
+     --success-color: var(--light-slate-gray);
+     --warning-color: var(--periwinkle);
+     --info-color: var(--ivory);
+    */
+
+     --font-family: 'Roboto', sans-serif;
+     --heading-margin: 0 0 20px;
+}
+
+body{
+    font-family: var(--font-family);
+    background: var(--background-color);
+    margin: 0;
+    padding: 0;
+}
+
+
+/*              */
+/*    TOP-BAR   */
+/*              */
+
+
+.top-bar{
+    width: 100%;
+    height: 80px;
+
+    display: flex;
+    flex-direction: row;
+
+    background-color: var(--secondary-color);
+}
+
+.top-bar .branding{
+    flex-grow: 4;
+    display: flex;
+
+    margin: 5px;
+
+    align-items: center;
+    justify-content: start;
+} 
+.top-bar .branding img{
+    width: 80px;
+    height: auto;
+} 
+top-bar .branding h1{
+   font: var(--font-family);
+   font-weight: 900;
+   font-size: 36px;
+} 
+
+
+.top-bar .menu{
+    flex-grow: 2;
+    display: flex;
+    
+    margin: 5px;
+
+    align-items: center;
+    justify-content: center;
+} 
+
+.top-bar .menu-item{
+    list-style-type: none; 
+    padding: 0; 
+    margin: 0; 
+    display: flex; 
+} 
+
+.menu .menu-item li {
+    margin-right: 20px; 
+}
+
+.menu .menu-item li:last-child {
+    margin-right: 0; 
+}