DavidJentes
/
websitedesign2022
mirror of https://github.com/davidjentes/websitedesign2022
1
0
Fork 0
Code

Improve rudimentary full page header

master
DavidDGTNT 2022-02-10 18:52:34 +00:00
parent 404a263abc
commit 22b1be6e43
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/css/main.css
View File

@ -58,7 +58,7 @@ header img {
height: auto; height: auto;
} }
header a { header a, .fp-header a {
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
padding: 10px; padding: 10px;
@ -73,7 +73,7 @@ header a {
border-radius: 25px; border-radius: 25px;
} }
header a:hover { header a:hover, .fp-header a:hover {
background-color: #d2691e; background-color: #d2691e;
} }
@ -86,9 +86,11 @@ header a:hover {
} }
.fp-header { .fp-header {
width: 100%; width: 100% - 30px;
height: 50rem; height: 10rem; /* set to auto after you add the image */
background-color: #ffffff; background-color: #ffffff;
padding: 30px;
font-family: "M_PLUS_1", sans-serif;
} }
main { main {
@ -104,6 +106,16 @@ main p {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
main a {
text-decoration: none;
color: #dddddd;
transition: color 500ms;
}
main a:hover {
color: #ffffff;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
border-radius: 25px; border-radius: 25px;
} }

3
src/index.html
View File

@ -15,7 +15,8 @@
<a href="book2/index.html">Lyza the Sheepdog: The Flood</a> <a href="book2/index.html">Lyza the Sheepdog: The Flood</a>
</header> </header>
<div class="fp-header"> <div class="fp-header">
<h1>Travel back in time</h2>
<a href="book2/index.html">Buy our newest book!</a>
</div> </div>
<main> <main>