Something went wrong. Try again.
A travel web-app for B&BMC
Something went wrong. Try again.
2.0 kB · 100 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101---import { Image } from "astro:assets";import AtlassiaLogo from "../assets/atlassia_logo.svg";---
<header> <div id="logo"> <a href="/" ><Image src={AtlassiaLogo} alt="Atlassia" height={40} loading="eager" /></a > </div>
<nav class="navSection"> <a href="/">Home</a> <a href="/discover">Discover</a> <a href="/contribute">Contribute</a> </nav>
<div id="account" class="navSection"> <a class="primaryButton" href="/login">Sign In</a> </div></header>
<style> .primaryButton { background-color: #073b4c; color: white !important;
&:hover { background-color: hsl(195, 83%, 30%) !important; } } .navSection { a { padding: 10px; border-radius: 10px;
color: #073b4c; text-decoration: none; font-weight: 500; font-size: 20px;
&:hover { background-color: #e5e5e5; } } } header { position: sticky
&:sticky { border-bottom: 1px solid black; }
margin: 6px 0 0 0; gap: 5px;
display: flex; justify-content: left; align-items: center;
min-height: 60px;
#logo { display: flex; align-items: center; flex-grow: 1; height: 45px; a { line-height: 0%; } }
nav { display: flex; justify-content: right; align-items: center;
gap: 5px; }
#account { display: flex; justify-content: right; align-items: center; } }
@media only screen and (max-width: 630px) { header { flex-direction: column; justify-content: center; } }</style>