Skip to content

Instantly share code, notes, and snippets.

@supix

supix/index.html

Last active May 5, 2018 20:32
Show Gist options
  • Save supix/b236842bad8905f3dd3c15922e69421c to your computer and use it in GitHub Desktop.
Save supix/b236842bad8905f3dd3c15922e69421c to your computer and use it in GitHub Desktop.
Download ZIP
Angular template for a website with top nav menu and fixed width
Raw
index.html
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="content">
<app-root></app-root>
</div>
</body>
Raw
style.css
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body {
margin: 0px;
font-family: Titillium Web,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
}
.content {
max-width: 650px;
margin: auto;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #127ae2;
overflow: hidden;
margin-bottom: 100px;
box-shadow: 5px 5px 5px lightgrey;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
border-bottom: solid white 3px;
}
/* Add a color to the active/current link */
.topnav a.active {
border-bottom: solid white 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment