Update GH Pages

master
DavidDGTNT 2022-02-11 01:46:33 +00:00
parent dbfd544e11
commit 02425ea922
6 changed files with 214 additions and 116 deletions

View File

@ -6,16 +6,13 @@
<link rel="stylesheet" href="../assets/css/fonts.css">
</head>
<body>
<div class="content">
<header>
<img src="../assets/img/lyza.png" width="250" height="250"><br>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="#" class="current">About</a></li><br><br>
<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>
<img src="../assets/img/banner.png">
<a href="../index.html">Home</a>
<a href="#" class="current">About</a>
<a href="../book1/index.html">Lyza the Sheepdog: Christmas</a>
<a href="../book2/index.html">Lyza the Sheepdog: The Flood</a>
</header>
<main>
<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>
</main>
</div>
</body>
</html>

View File

@ -1,8 +1,13 @@
body {
margin: 0px;
margin: 15px;
margin-top: 45px;
background-color: #828282;
}
body {
.content {
border-radius: 25px;
padding: 10px;
background: linear-gradient(270deg, #a52a2a, #d2691e, #ee6e40, #ff7f50, #ff7f61, #ff8f61);
background-size: 1200% 1200%;
@ -35,47 +40,40 @@ body {
header {
display: block;
padding: 10px;
margin: 10px;
width: 95.75%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
header img {
padding: 10px;
background-color: #a52a2a;
display: block;
padding: 15px;
border-radius: 25px;
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 20%;
width: 300px;
height: auto;
}
header nav {
display: flex;
justify-content: center;
width: 100%;
}
nav ul {
header a, .fp-header a {
list-style-type: none;
margin: 0;
margin: 0px;
padding: 10px;
background-color: #d2691e;
}
nav li {
display: inline;
}
nav li a {
transition: background-color 1s;
display: inline-block;
transition: background-color 1s;
color: #ffffff;
background-color: #a52a2a;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "M PLUS 1", sans-serif;
border-radius: 25px;
}
nav li a:hover {
header a:hover, .fp-header a:hover {
background-color: #d2691e;
}
@ -87,9 +85,18 @@ nav li a:hover {
background-color: #ff7f61;
}
.fp-header {
width: 100% - 30px;
height: 10rem; /* set to auto after you add the image */
background-color: #ffffff;
padding: 30px;
font-family: "M_PLUS_1", sans-serif;
}
main {
margin: 10px;
padding: 10px;
border-radius: 25px;
background-color: #d2691e;
font-family: "Open Sans", sans-serif;
color: #ffffff;
@ -98,3 +105,82 @@ main {
main p {
font-family: "Roboto", sans-serif;
}
main a {
text-decoration: none;
color: #dddddd;
transition: color 500ms;
}
main a:hover {
color: #ffffff;
}
::-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;
}
.flex-w {
display: flex;
flex-direction: row;
}
.flex-w div {
flex: 50%;
padding: 10px;
margin: 10px;
background-color: #a52a2a;
border-radius: 25px;
}
.flex-w-nc {
display: flex;
flex-direction: row;
}
.flex-w-nc div {
padding: 10px;
margin: 10px;
}
.cover {
width: 95%;
height: auto;
}
@media (max-width: 800px) {
body {
margin: 0px;
}
.content {
width: 100%;
border-radius: 0px;
}
.flex-w {
flex-direction: column;
}
.flex-w div {
flex: 100%
}
header {
font-size: 20px;
}
}

BIN
docs/assets/img/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

View File

@ -6,22 +6,22 @@
<link rel="stylesheet" href="../assets/css/fonts.css">
</head>
<body>
<div class="content">
<header>
<img src="../assets/img/lyza.png" width="250" height="250"><br>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../about/index.html">About</a></li><br><br>
<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>
<img src="../assets/img/banner.png">
<a href="../index.html">Home</a>
<a href="../about/index.html">About</a>
<a href="#" class="current">Lyza the Sheepdog: Christmas</a>
<a href="../book2/index.html">Lyza the Sheepdog: The Flood</a>
</header>
<main>
<div class="flex-w-nc">
<div>
<img src="../assets/img/book1cover.png" class="cover">
</div>
<div>
<h2>Lyza the Sheepdog: Christmas</h2>
<p><img src="../assets/img/book1cover.png" alt="Lyza the Sheepdog: Christmas cover" title="" /></p>
<p>Hey look, a baby has been born! Wait, what is that star? </p>
<p>In Lyza the Sheepdog: Christmas, Lyza talks to the animals that were at the stable at Jesus' birth. She hears what others are thinking about what's going on, and tries to figure out whats going on herself. </p>
@ -29,6 +29,8 @@
<p>When you read this book, you enter the world of Lyza the Sheepdog, a world where the event of Jesus' birth and all things that came before are the same, and we can see the fictional responses of the animals. </p>
<p>This book was released in December of 2020.</p>
</div>
</main>
</div>
</body>
</html>

View File

@ -6,22 +6,22 @@
<link rel="stylesheet" href="../assets/css/fonts.css">
</head>
<body>
<div class="content">
<header>
<img src="../assets/img/lyza.png" width="250" height="250"><br>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../about/index.html">About</a></li><br><br>
<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>
<img src="../assets/img/banner.png">
<a href="../index.html">Home</a>
<a href="../about/index.html">About</a>
<a href="../book1/index.html">Lyza the Sheepdog: Christmas</a>
<a href="../book2/index.html" class="current">Lyza the Sheepdog: The Flood</a>
</header>
<main>
<div class="flex-w-nc">
<div>
<img src="../assets/img/book2cover.png" class="cover">
</div>
<div>
<h2>Lyza the Sheepdog: The Flood</h2>
<p><img src="../assets/img/book2cover.png" alt="Lyza the Sheepdog: The Flood cover" title="" /></p>
<p>Hey! Why's there water on my back? </p>
<p>In Lyza the Sheepdog: The Flood, Lyza talks to the animals that were at going to the Ark before the flood. She hears what others are thinking about what's going on, and tries to figure out whats going on herself. </p>
@ -29,6 +29,8 @@
<p>When you read this book, you enter the world of Lyza the Sheepdog, a world where the event of Jesus' birth and all things that came before are the same, and we can see the fictional responses of the animals. </p>
<p>This book was released in December of 2021.</p>
</div>
</main>
</div>
</body>
</html>

View File

@ -6,34 +6,44 @@
<link rel="stylesheet" href="assets/css/fonts.css">
</head>
<body>
<div class="content">
<header>
<img src="assets/img/lyza.png" width="250" height="250"><br>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="about/index.html">About</a></li><br><br>
<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>
<img src="assets/img/banner.png">
<a href="#" class="current">Home</a></li>
<a href="about/index.html">About</a>
<a href="book1/index.html">Lyza the Sheepdog: Christmas</a>
<a href="book2/index.html">Lyza the Sheepdog: The Flood</a>
</header>
<div class="fp-header">
<h1>Travel back in time</h2>
<a href="book2/index.html">Buy our newest book!</a>
</div>
<main>
<h2>Travel back in time</h2>
<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>Go back in time with Lyza the Sheepdog! See what the animals thought in popular Bible stories, such as Christ's birth and the entrance onto the Ark! You can learn more about the books on their respective pages accessible in the Books section of the title bar.</p>
<h2>Where to buy Lyza the Sheepdog books:</h2>
<div class="flex-w">
<div>
<h2>Learn more about Bible stories in a unique way!</h2>
<p>Seeing what the animals are thinking is an interesting thing to see, and while we may know the stories already, we can see them in new ways through the perspective of the confused animals.</p>
</div>
<div>
<h2>Learn more about things happening at the time!</h2>
<p>It's hard to know what's happening without knowing what's happening before! For this reason, we include more context relating to the story that is around the time of the story.</p>
</div>
</div><br><br>
<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>
<p>Lyza the Sheepdog eBooks are available on Kindle, Nook, Kobo, DavidReader, and possibly on your local library's eBook catalog, such as Tennesee R.E.A.D.S.</p>
<div class="flex-w">
<div>
<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>
</div>
<div>
<h2>About the author</h2>
<p>David Jentes is a programmer, author, speedcuber, and LCS student. Learn more about him <a href="about/index.html">here</a></p>
</div>
</div>
</main>
</div>
</body>
</html>