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

Change a lot of stuff to migrate to the new UI

master
DavidDGTNT 2022-02-09 20:44:33 +00:00
parent aa4219c765
commit b192b6b7cd
7 changed files with 111 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/about/index.html
View File

@ -6,16 +6,13 @@
<link rel="stylesheet" href="../assets/css/fonts.css"> <link rel="stylesheet" href="../assets/css/fonts.css">
</head> </head>
<body> <body>
<div class="content">
<header> <header>
<img src="../assets/img/lyza.png" width="250" height="250"><br> <img src="../assets/img/banner.png">
<nav> <a href="../index.html">Home</a>
<ul> <a href="#" class="current">About</a>
<li><a href="../index.html">Home</a></li> <a href="../book1/index.html">Lyza the Sheepdog: Christmas</a>
<li><a href="#" class="current">About</a></li><br><br> <a href="../book2/index.html">Lyza the Sheepdog: The Flood</a>
<li><a href="../book1/index.html">Lyza the Sheepdog: Christmas</a></li><br><br>
<li><a href="../book2/index.html">Lyza the Sheepdog: The Flood</a></li>
</ul>
</nav>
</header> </header>
<main> <main>
<h2>About the author</h2> <h2>About the author</h2>
@ -37,5 +34,6 @@
<p>Lyza in real life is David's dog. Lyza barks a lot in David's backyard, and loves to play ball. She is adventurous and will take any chance she gets to go on an adventure. Lyza would love these books if she could read them!</p> <p>Lyza in real life is David's dog. Lyza barks a lot in David's backyard, and loves to play ball. She is adventurous and will take any chance she gets to go on an adventure. Lyza would love these books if she could read them!</p>
</main> </main>
</div>
</body> </body>
</html> </html>

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

@ -1,10 +1,12 @@
body { body {
margin: 10px; margin: 15px;
margin-top: 45px;
background-color: #828282; background-color: #828282;
} }
main, header { .content {
border-radius: 25px; border-radius: 25px;
padding: 10px;
background: linear-gradient(270deg, #a52a2a, #d2691e, #ee6e40, #ff7f50, #ff7f61, #ff8f61); background: linear-gradient(270deg, #a52a2a, #d2691e, #ee6e40, #ff7f50, #ff7f61, #ff8f61);
background-size: 1200% 1200%; background-size: 1200% 1200%;
@ -41,48 +43,37 @@ header {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
width: 95.75%; width: 95.75%;
text-align: center; overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
} }
header img { header img {
padding: 10px; padding: 15px;
background-color: #a52a2a; border-radius: 25px;
display: block; display: inline-block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 20%; width: 20%;
height: auto; height: auto;
} }
header nav { header a {
display: flex;
justify-content: center;
width: 100%;
}
nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0px;
padding: 10px; padding: 10px;
background-color: #d2691e;
}
nav li {
display: inline;
}
nav li a {
transition: background-color 1s;
display: inline-block; display: inline-block;
transition: background-color 1s;
color: #ffffff; color: #ffffff;
background-color: #a52a2a; background-color: #a52a2a;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
font-family: "M PLUS 1", sans-serif; font-family: "M PLUS 1", sans-serif;
border-radius: 25px;
} }
nav li a:hover { header a:hover {
background-color: #d2691e; background-color: #d2691e;
} }
@ -97,6 +88,7 @@ nav li a:hover {
main { main {
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
border-radius: 25px;
background-color: #d2691e; background-color: #d2691e;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #ffffff; color: #ffffff;
@ -105,3 +97,21 @@ main {
main p { main p {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
::-webkit-scrollbar {
border-radius: 25px;
}
::-webkit-scrollbar-track {
visibility: hidden;
margin: 20px;
}
::-webkit-scrollbar-thumb {
border-radius: 25px;
background-color: #544c4a;
}
::-webkit-scrollbar-thumb:hover {
background-color: #363636;
}

BIN
src/assets/img/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/assets/img/lyza.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

16
src/book1/index.html
View File

@ -6,16 +6,13 @@
<link rel="stylesheet" href="../assets/css/fonts.css"> <link rel="stylesheet" href="../assets/css/fonts.css">
</head> </head>
<body> <body>
<div class="content">
<header> <header>
<img src="../assets/img/lyza.png" width="250" height="250"><br> <img src="../assets/img/banner.png">
<nav> <a href="../index.html">Home</a>
<ul> <a href="../about/index.html">About</a>
<li><a href="../index.html">Home</a></li> <a href="#" class="current">Lyza the Sheepdog: Christmas</a>
<li><a href="../about/index.html">About</a></li><br><br> <a href="../book2/index.html">Lyza the Sheepdog: The Flood</a>
<li><a href="#" class="current">Lyza the Sheepdog: Christmas</a></li><br><br>
<li><a href="../book2/index.html">Lyza the Sheepdog: The Flood</a></li>
</ul>
</nav>
</header> </header>
<main> <main>
<h2>Lyza the Sheepdog: Christmas</h2> <h2>Lyza the Sheepdog: Christmas</h2>
@ -30,5 +27,6 @@
<p>This book was released in December of 2020.</p> <p>This book was released in December of 2020.</p>
</main> </main>
</div>
</body> </body>
</html> </html>

16
src/book2/index.html
View File

@ -6,16 +6,13 @@
<link rel="stylesheet" href="../assets/css/fonts.css"> <link rel="stylesheet" href="../assets/css/fonts.css">
</head> </head>
<body> <body>
<div class="content">
<header> <header>
<img src="../assets/img/lyza.png" width="250" height="250"><br> <img src="../assets/img/banner.png">
<nav> <a href="../index.html">Home</a>
<ul> <a href="../about/index.html">About</a>
<li><a href="../index.html">Home</a></li> <a href="../book1/index.html">Lyza the Sheepdog: Christmas</a>
<li><a href="../about/index.html">About</a></li><br><br> <a href="../book2/index.html" class="current">Lyza the Sheepdog: The Flood</a>
<li><a href="../book1/index.html">Lyza the Sheepdog: Christmas</a></li><br><br>
<li><a href="../book2/index.html" class="current">Lyza the Sheepdog: The Flood</a></li>
</ul>
</nav>
</header> </header>
<main> <main>
<h2>Lyza the Sheepdog: The Flood</h2> <h2>Lyza the Sheepdog: The Flood</h2>
@ -30,5 +27,6 @@
<p>This book was released in December of 2021.</p> <p>This book was released in December of 2021.</p>
</main> </main>
</div>
</body> </body>
</html> </html>

27
src/index.html
View File

@ -6,16 +6,13 @@
<link rel="stylesheet" href="assets/css/fonts.css"> <link rel="stylesheet" href="assets/css/fonts.css">
</head> </head>
<body> <body>
<div class="content">
<header> <header>
<img src="assets/img/lyza.png" width="250" height="250"><br> <img src="assets/img/banner.png">
<nav> <a href="#" class="current">Home</a></li>
<ul> <a href="about/index.html">About</a>
<li><a href="#" class="current">Home</a></li> <a href="book1/index.html">Lyza the Sheepdog: Christmas</a>
<li><a href="about/index.html">About</a></li><br><br> <a href="book2/index.html">Lyza the Sheepdog: The Flood</a>
<li><a href="book1/index.html">Lyza the Sheepdog: Christmas</a></li><br><br>
<li><a href="book2/index.html">Lyza the Sheepdog: The Flood</a></li>
</ul>
</nav>
</header> </header>
<main> <main>
<h2>Travel back in time</h2> <h2>Travel back in time</h2>
@ -23,20 +20,12 @@
<p>With the Lyza the Sheepdog series of books, you can go back in time and see what the animals in the time of Bible stories with animals thought about the events and what they thought was happening. You can learn more about the books on their respective pages accessible in the Books section of the title bar.</p> <p>With the Lyza the Sheepdog series of books, you can go back in time and see what the animals in the time of Bible stories with animals thought about the events and what they thought was happening. You can learn more about the books on their respective pages accessible in the Books section of the title bar.</p>
<div class="flex-w"> <div class="flex-w">
<!-- <h2>Where to buy Lyza the Sheepdog books:</h2>
<ul>
<li>David Book Stores</li>
<li>Barnes and Noble</li>
<li>Books a Million</li>
<li>Walmart</li>
<li>SlushCo</li>
<li>Target</li>
</ul> -->
<div class="flex-c"> <div class="flex-c">
<h2>Where to buy</h2> <h2>Where to buy</h2>
<p>Lyza the Sheepdog books are available at various retailers, including Walmart, Target, Barnes and Noble, and Books a Million.</p> <p>Lyza the Sheepdog books are available at various retailers, including Walmart, Target, Barnes and Noble, and Books a Million.</p>
</div> </div>
</div>
</main> </main>
</div>
</body> </body>
</html> </html>