added nav

trunk
Jahnertz 2023-05-22 00:02:55 +10:00
parent 717aa2e805
commit 2c07310a9a
5 changed files with 74 additions and 18 deletions

View File

@ -0,0 +1,15 @@
<header>
<div class="masthead">
<a href="/">
<div class="logo">
<h1>Jordan Hanrahan</h1>
<h2>Art Direction · Graphic Design · Motion Graphics</h2>
</div>
</a>
<nav>
<ul>
<li><a href="/about.html">about</a></li>
</ul>
</nav>
</div>
</header>

View File

@ -1,6 +0,0 @@
<div class="masthead">
<div class="logo">
<h1>Jordan Hanrahan</h1>
<h2>Art Direction · Graphic Design · Motion Graphics</h2>
</div>
</div>

View File

@ -7,12 +7,21 @@
<title>Jordan Hanrahan - Portfolio</title> <title>Jordan Hanrahan - Portfolio</title>
</head> </head>
<body> <body>
<header class="masthead"> <header>
<div class="logo"> <div class="masthead">
<h1>Jordan Hanrahan</h1> <a href="/">
<h2>Art Direction · Graphic Design · Motion Graphics</h2> <div class="logo">
<h1>Jordan Hanrahan</h1>
<h2>Art Direction · Graphic Design · Motion Graphics</h2>
</div>
</a>
<nav>
<ul>
<li><a href="/about.html">about</a></li>
</ul>
</nav>
</div> </div>
</div> </header>
<!-- the build script should generate links from items in project folder here. --> <!-- the build script should generate links from items in project folder here. -->
<main> <main>
<div class="projects"> <div class="projects">

View File

@ -23,10 +23,19 @@
<title>Jordan Hanrahan - Portfolio</title> <title>Jordan Hanrahan - Portfolio</title>
</head> </head>
<body> <body>
<header class="masthead"> <header>
<div class="logo"> <div class="masthead">
<h1>Jordan Hanrahan</h1> <a href="/">
<h2>Art Direction · Graphic Design · Motion Graphics</h2> <div class="logo">
<h1>Jordan Hanrahan</h1>
<h2>Art Direction · Graphic Design · Motion Graphics</h2>
</div>
</a>
<nav>
<ul>
<li><a href="/about.html">about</a></li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>

View File

@ -1,21 +1,50 @@
html { html {
background-color: #222222; background-color: #202020;
color: #ffffff; color: #f0f0f0;
font-family: sans-serif; font-family: sans-serif;
} }
a {
color: #e04080;
}
a:visited {
color: #b02050;
}
main { main {
padding: 80px 16px; padding: 80px 16px;
margin: 0 auto; margin: 0 auto;
max-width: 1280px; max-width: 1280px;
} }
.masthead { header {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
background-color: #222222;
border-bottom: 1px solid #666666;
}
.masthead .logo {
float: left;
}
.masthead nav {
float: left;
}
.masthead nav li {
list-style: none;
padding: 0;
margin: 0;
}
.masthead a, .masthead a:visited {
color: #f0f0f0;
text-decoration: none;
} }
.masthead .logo h1 { .masthead .logo h1 {