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 @@
}
.NavInput {
outline: none;
margin-right: 10%;
height: 40%;
width: 90%;
......
src/app/nav-bar/nav-bar.component.html
<div class="Navbar">
<header>
<div class="Navbar">
<a href="/" style="height: auto;">
<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 300px;">
</a>
<div class="NavSearchContainer">
<input class="NavInput" type="text" placeholder="Search..." style="outline: none;">
<a href="">
<i class="fas fa-search fa-2x " style="color:white;
"></i>
<a routerLink="/">
<!-- style included because child of <a> tag changes appeareance -->
<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 300px;">
</a>
<div class="NavSearchContainer">
<input class="NavInput" type="text" placeholder="Search..">
<a routerLink="/">
<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>
</div>
<a href="">
<i class="fas fa-user-circle fa-3x" style="color:white;
"></i>
</a>
</div>
</header>
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TickeTech</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta charset="utf-8">
<title>TickeTech</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/1e8ed7b331.js" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
<app-root></app-root>
</body>
</html>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!