Skip to content

Luciano Barletta / TicketTech

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 49e3a38b by Luciano Barletta
Options

added navbar and footer

1 parent f436834d
Inline Side-by-side
Showing 5 changed files with 46 additions and 21 deletions
src/app/footer-bar/footer-bar.component.css
.Navbar {
padding: 0% 2% 0% 2%;
height: 100%;
color: white;
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;
}
.Footer {
width: 100%;
position: absolute;
bottom: 0px;
}
src/app/footer-bar/footer-bar.component.html
<p>footer-bar works!</p> <footer class="Footer">
<div class="Navbar" style="display:block;">
(Footer content)
</div>
</footer>
src/app/nav-bar/nav-bar.component.css
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
} }
.NavInput { .NavInput {
outline: none;
margin-right: 10%; margin-right: 10%;
height: 40%; height: 40%;
width: 90%; width: 90%;
......
src/app/nav-bar/nav-bar.component.html
<div class="Navbar"> <header>
<div class="Navbar">
<a href="/" style="height: auto;"> <a routerLink="/">
<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 300px;"> <!-- style included because child of <a> tag changes appeareance -->
</a> <img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 300px;">
<div class="NavSearchContainer"> </a>
<input class="NavInput" type="text" placeholder="Search..." style="outline: none;"> <div class="NavSearchContainer">
<a href=""> <input class="NavInput" type="text" placeholder="Search..">
<i class="fas fa-search fa-2x " style="color:white; <a routerLink="/">
"></i> <i class="fas fa-search fa-2x" style="color:white;"></i>
</a>
</div>
<a href="javascript:" routerLink="/">
<i class="fas fa-user-circle fa-3x" style="color:white;"></i>
</a> </a>
</div> </div>
<a href=""> </header>
<i class="fas fa-user-circle fa-3x" style="color:white;
"></i>
</a>
</div>
src/index.html
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>TickeTech</title> <title>TickeTech</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/1e8ed7b331.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!