nav styling
This commit is contained in:
parent
0ca56186b8
commit
04bef99ae7
|
@ -1,11 +1,13 @@
|
|||
<header id="top">
|
||||
<img src="../site-resources/assets/header-cat.svg" height="32px" width="32px">
|
||||
<p>This cat rocks!</p>
|
||||
<p>A homepage for my fine feline friend, Baxter</p>
|
||||
<nav>
|
||||
<a href="index.php">Home</a>
|
||||
<a href="loveletter.php">Love you, Baxter</a>
|
||||
<a href="behavior.php">Baxter's behaviors</a>
|
||||
<a href="about.php">About this site</a>
|
||||
</nav>
|
||||
<span>
|
||||
<p>This cat rocks!</p>
|
||||
<p>A homepage for my fine feline friend, Baxter</p>
|
||||
<nav>
|
||||
<a href="index.php">Home</a>
|
||||
<a href="loveletter.php">Love you, Baxter</a>
|
||||
<a href="behavior.php">Baxter's behaviors</a>
|
||||
<a href="about.php">About this site</a>
|
||||
</nav>
|
||||
</span>
|
||||
</header>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
:root {
|
||||
--section-color: #fccce4bb;
|
||||
--border-color: #f6da92;
|
||||
--header-color: #fc94bcbb;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
|
@ -98,6 +99,23 @@ main {
|
|||
object-fit: fill;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--header-color);
|
||||
border-bottom: 4px solid var(--border-color);
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 48px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: var(--section-color);
|
||||
padding: 1.25rem;
|
||||
|
|
Loading…
Reference in New Issue