first upload
BIN
.DS_Store
vendored
Normal file
BIN
20210715.09.46-06.jpg
Executable file
After Width: | Height: | Size: 514 KiB |
10
Classic Homepage.html
Executable file
|
@ -0,0 +1,10 @@
|
||||||
|
<h1>Classic Homepage Project</h1>
|
||||||
|
<p>Why make a classic homepage?</p>
|
||||||
|
<ul>
|
||||||
|
<li>Take your web presence back into your own hands.</li>
|
||||||
|
<li>Make the Internet fun again.</li>
|
||||||
|
<li>Be creative</li>
|
||||||
|
<li>Content that doesn’t have to be an update. (But you can still have updates)</li>
|
||||||
|
<li>Just making web pages about things that you like.</li>
|
||||||
|
<li>A small batch website?</li>
|
||||||
|
</ul>
|
49
Pages.html
Executable file
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon's Homepage</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #f7d3d6;
|
||||||
|
text-align: center;
|
||||||
|
font-family:Verdana;
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 7vw;
|
||||||
|
color: #ed999e;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header><h1>Shannon's Homepage</h1></header>
|
||||||
|
<main>
|
||||||
|
<p>Hello World
|
||||||
|
<br><img src="coffeeloveblinkie-shannon-byspeakingsoul.gif"> <img src="emoji/dolewhip.png" alt="Dole Whip Emoji"> </p>
|
||||||
|
|
||||||
|
|
||||||
|
<p><img src="beauty-reading_001.gif" alt="Beauty and the Beast reading scene"></p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<img src="family.jpg" alt="Family Selfie" style="max-width:100%;height:auto;">
|
||||||
|
<!--
|
||||||
|
<video controls loop>
|
||||||
|
<source src="family.mov" type="video/mp4" style="max-width:100%;height:auto;" >
|
||||||
|
</video>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
ShannonKay2017.jpg
Executable file
After Width: | Height: | Size: 582 KiB |
BIN
ShannonKay2017sm.jpg
Executable file
After Width: | Height: | Size: 92 KiB |
0
Untitled.txt
Executable file
69
about.html
Executable file
|
@ -0,0 +1,69 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon Kay (About)</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<h1>About Shannon Kay</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="text">
|
||||||
|
<p>Shannon Kay (She/Her)</p>
|
||||||
|
<ul>
|
||||||
|
<li>"Shannon Kay" is my first and middle name, and I've used it to low key "brand" myself since I was a child when I thought that I might grow up to be famous, but also that I might get married and change my last name. I did get married and change my last name, but I did not become famous to many people.</li>
|
||||||
|
<li>I'm an early Millennial and a member of the Oregon Trail Generation. </li>
|
||||||
|
<li>I was voted Most Unique in high school. Now I drive a mini van. It's ok because the doors open and close by themselves like magic. </li>
|
||||||
|
<li>I'm married to Jerrod, and we have three kids.</li>
|
||||||
|
</ul>
|
||||||
|
<h3 id="things-i-enjoy">Things I enjoy:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Books</li>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tech</li>
|
||||||
|
<li>Pink</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo"> <img src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;">
|
||||||
|
<figcaption class="caption">My current profile picture (actually from 2017)</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo">
|
||||||
|
<img src="family.jpg" alt="Family Selfie 2021" style="max-width:100%;height:auto;">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<video autoplay playsinline loop muted="true" style="max-width:100%;height:auto;" >
|
||||||
|
<source src="family.mov" type="video/mp4" >
|
||||||
|
</video>
|
||||||
|
-->
|
||||||
|
<figcaption class="caption">My awesome family. (Summer 2021)</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo"><img src="20210715.09.46-06.jpg" alt="coffee" style="max-width:100%;height:auto;">
|
||||||
|
<figcaption class="caption">Cold brew coffee.</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
59
ai.css
Executable file
|
@ -0,0 +1,59 @@
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(to bottom, #FFB6C1, #FF69B4);
|
||||||
|
/* background-color: #FFC0CB; This is the base pink color */
|
||||||
|
text-align: center;
|
||||||
|
font-family:Verdana;
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
color: #FF69B4; /* This is a brighter shade of pink */
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #DB7093; /* This is a more muted shade of pink */
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background-color: #FFB6C1; /* This is a pale pink */
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #FF1493; /* This is a deep pink */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* You can also use CSS gradients to create different shades of pink */
|
||||||
|
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(to bottom, #FFB6C1, #FF69B4);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 7vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 6vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
article {
|
||||||
|
text-align: justify;
|
||||||
|
padding: 2pt;
|
||||||
|
|
||||||
|
}
|
||||||
|
article p
|
||||||
|
{
|
||||||
|
max-width: 1024px;
|
||||||
|
}
|
||||||
|
article ul {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
article img {
|
||||||
|
padding: 2pt;
|
||||||
|
}
|
||||||
|
nav ul
|
BIN
android-chrome-192x192.png
Executable file
After Width: | Height: | Size: 74 KiB |
BIN
android-chrome-512x512.png
Executable file
After Width: | Height: | Size: 511 KiB |
BIN
apple-touch-icon.png
Executable file
After Width: | Height: | Size: 67 KiB |
BIN
beauty-reading_001-still.gif
Executable file
After Width: | Height: | Size: 12 KiB |
BIN
beauty-reading_001.gif
Executable file
After Width: | Height: | Size: 356 KiB |
BIN
beauty-reading_001.mp4
Executable file
61
books/index.html
Executable file
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Books [Shannon Kay]</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Shannon Kay /Books</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section class="blurb">
|
||||||
|
<h3>Book Links</h3>
|
||||||
|
<p><a class="link" href="https://app.thestorygraph.com/profile/pinkbookscoffee">StoryGraph</a></p>
|
||||||
|
<p><a class="link" href="https://www.goodreads.com/shannonkay">GoodReads</a></p>
|
||||||
|
<p><a class="link" href="https://www.instagram.com/pinkbookscoffee">"Bookstagram" @pinkbookscoffee</a></p>
|
||||||
|
<p><a class="link" href="https://bookrastinating.com/user/shannonkay">BookWyrm @shannonkay@bookrastinating.com</a></p>
|
||||||
|
|
||||||
|
<section id="currentread">
|
||||||
|
<h4>Currently Reading</h4>
|
||||||
|
<p></p>
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
.gr_grid_container1 {
|
||||||
|
/* customize grid container div here. eg: width: 500px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gr_grid_book_container1 {
|
||||||
|
/* customize book cover container div here */
|
||||||
|
|
||||||
|
width: 98px;
|
||||||
|
height: 160px;
|
||||||
|
padding: 2pt;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="gr_grid_widget_1674899180">
|
||||||
|
<!-- Show static html as a placeholder in case js is not enabled - javascript include will override this if things work -->
|
||||||
|
<div class="gr_grid_container1">
|
||||||
|
<div class="gr_grid_book_container1"><a title="The Last Fallen Star (Gifted Clans, #1)" rel="nofollow" href="https://www.goodreads.com/book/show/55277625-the-last-fallen-star"><img alt="The Last Fallen Star" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1601319805l/55277625._SX98_.jpg" /></a></div>
|
||||||
|
<noscript><br/>Share <a rel="nofollow" href="/">book reviews</a> and ratings with Shannon, and even join a <a rel="nofollow" href="/group">book club</a> on Goodreads.</noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
50
classichome.html
Executable file
|
@ -0,0 +1,50 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Classic Homepage Project</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Classic Homepage Project</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<article class="blurb">
|
||||||
|
|
||||||
|
<h3 id="why-make-a-classic-homepage">Why make a classic homepage?</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Own your web presence.</li>
|
||||||
|
<li>Recapture the joy of the internet.</li>
|
||||||
|
<li>Be creative</li>
|
||||||
|
<li>Content that does not have to be an update. (But you can still have updates)</li>
|
||||||
|
<li>Just making web pages about things that you like.</li>
|
||||||
|
<li>A small batch website</li>
|
||||||
|
</ul>
|
||||||
|
<h3 id="my-website-story">My Website Story</h3>
|
||||||
|
<p>I'm an "early Millennial". My first websites were homepages with rainbow dividers. In 1995, when I was 12, my dad bought me a book called <a href="https://openlibrary.org/books/OL822310M/Internet_and_World_Wide_Web_simplified">Internet and World Wide Web, Simplified</a>. That's how I learned how the internet worked, and that I should pronounce GIF "like the peanut butter".</p>
|
||||||
|
<p>My first websites were free homepages. The first was on a website called <a href="http://web.archive.org/web/19970628183245/http://www.tool-box.com/">tool-box </a>which didn't last long and I've never heard anyone else mention. I think it only existed in 1996/97. I moved on to other free hosts like Angelfire, and moved from using the basic form page editors to learning basic html. But the real magic happened after I saw the movie Titanic in January of 1998. I loved it so much, I made a Titanic website called Titanic Crazy. My first fansite! </p>
|
||||||
|
|
||||||
|
<h3>Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://stackingthebricks.com/how-blogs-broke-the-web/">How the Blog Broke the Web</a></li>
|
||||||
|
<li><a href="https://joelhooks.com/digital-garden">My blog is a digital garden, not a blog</a></li>
|
||||||
|
<li><a href="https://matthiasott.com/notes/the-year-of-the-personal-website">The Year of the Personal Website</a></li>
|
||||||
|
<li><a href="https://localghost.dev/blog/building-a-website-like-it-s-1999-in-2022">Building a website like it's 1999... in 2022</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Created: August 21, 2021. Updated: January 12, 2023</p>
|
||||||
|
<a href="index.html">Shannon's Homepage</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
coffee/heartmugpinkbook.jpg
Executable file
After Width: | Height: | Size: 632 KiB |
45
coffee/index.html
Executable file
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Coffee (Shannon Kay)</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Coffee (Shannon Kay)</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section class="text">
|
||||||
|
|
||||||
|
<p>I love coffee. </p>
|
||||||
|
|
||||||
|
<p><figure class="photo"><img src="heartmugpinkbook.jpg" alt="coffee in a pink mug next to a pink book" style="max-width:70%;height:auto;">
|
||||||
|
|
||||||
|
</figure></p>
|
||||||
|
<h3 id="coffee">Coffee Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://aeropress.com">AeroPress</a></li>
|
||||||
|
<li><a href="https://bluebottlecoffee.com/us/eng/subscriptions?tb=coffee-subscriptions">Blue Bottle Coffee Single Origin Subscription</a></li>
|
||||||
|
<li><a href="https://fellowproducts.com/products/stagg-ekg-electric-pour-over-kettle?variant=31212444811364">Fellow Stagg EKG Electric Kettle</a></li>
|
||||||
|
<li><a href="https://www.oxo.com/cold-brew-coffee-maker.html">OXO Cold Brew Maker</a></li>
|
||||||
|
<li><a href="https://drops.fellowproducts.com">Fellow Drops</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><figure class="photo"><img src="../20210715.09.46-06.jpg" alt="coffee" style="max-width:100%;height:auto;">
|
||||||
|
<figcaption class="caption">Cold brew coffee.</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
coffeeloveblinkie-shannon-byspeakingsoul.gif
Executable file
After Width: | Height: | Size: 4.9 KiB |
BIN
coffeeloveblinkie-shannon-still.gif
Executable file
After Width: | Height: | Size: 1 KiB |
BIN
coffeeloveblinkie-shannon.gif
Executable file
After Width: | Height: | Size: 4.9 KiB |
52
colors.css
Executable file
|
@ -0,0 +1,52 @@
|
||||||
|
background color Ballet, Pale Pink: #f7d3d6;
|
||||||
|
background color Flamingo Pink: #FC8EAC;
|
||||||
|
h1 flamingo color: #FC8EAC;
|
||||||
|
h2 Watermelon color Begonia / Ultra Red: #FC6C85;
|
||||||
|
link color Deep Pink: #FF1493; /* This is a deep pink */
|
||||||
|
link button background-color Embarressed: #fb6f92;
|
||||||
|
Hot Pink: #FF69B4;
|
||||||
|
Salmon Pink: #FD899D;
|
||||||
|
Baby Pink: #f4c2c2;
|
||||||
|
Baker-Miller Pink: #ff91af;
|
||||||
|
Bubble Gum: #ffc1cc;
|
||||||
|
Carnation Pink: #ffa6c9;
|
||||||
|
Cherry Blossom Pink: #ffb7c5;
|
||||||
|
Champagne: #f7e2d3;
|
||||||
|
Rock N Rose: #ff8fab;
|
||||||
|
|
||||||
|
/* Valentine Mug Pallette */
|
||||||
|
Whisper: #eae0df;
|
||||||
|
Seal Brown: #190d0a;
|
||||||
|
Mauvelous: #ef84b1;
|
||||||
|
Hippie Pink: #aa4f5a;
|
||||||
|
Melanie: #ddaebd;
|
||||||
|
Sour Dough: #c8b693;
|
||||||
|
Nepal: #97afbd;
|
||||||
|
|
||||||
|
/* https://colorkit.co */
|
||||||
|
|
||||||
|
/* Girl Zine Palette */
|
||||||
|
/* List */
|
||||||
|
c095e4, fcedf2, ffd1d4, ffb7c5, ffa0c5
|
||||||
|
#c095e4, #fcedf2, #ffd1d4, #ffb7c5, #ffa0c5
|
||||||
|
|
||||||
|
/* Comma Seperated */
|
||||||
|
c095e4,fcedf2,ffd1d4,ffb7c5,ffa0c5
|
||||||
|
#c095e4,#fcedf2,#ffd1d4,#ffb7c5,#ffa0c5
|
||||||
|
|
||||||
|
/* Array */
|
||||||
|
["c095e4","fcedf2","ffd1d4","ffb7c5","ffa0c5"]
|
||||||
|
["#c095e4","#fcedf2","#ffd1d4","#ffb7c5","#ffa0c5"]
|
||||||
|
|
||||||
|
/* Pink Fade */
|
||||||
|
<span class=comment>/* List */</span>
|
||||||
|
ffe5ec, ffc2d1, ffb3c6, ff8fab, fb6f92
|
||||||
|
#ffe5ec, #ffc2d1, #ffb3c6, #ff8fab, #fb6f92
|
||||||
|
|
||||||
|
<span class=comment>/* Comma Seperated */</span>
|
||||||
|
ffe5ec,ffc2d1,ffb3c6,ff8fab,fb6f92
|
||||||
|
#ffe5ec,#ffc2d1,#ffb3c6,#ff8fab,#fb6f92
|
||||||
|
|
||||||
|
<span class=comment>/* Array */</span>
|
||||||
|
["ffe5ec","ffc2d1","ffb3c6","ff8fab","fb6f92"]
|
||||||
|
["#ffe5ec","#ffc2d1","#ffb3c6","#ff8fab","#fb6f92"]
|
BIN
emoji/dolewhip.png
Executable file
After Width: | Height: | Size: 18 KiB |
BIN
emoji/minniebow.png
Executable file
After Width: | Height: | Size: 21 KiB |
BIN
emoji/princesshatemoji.png
Executable file
After Width: | Height: | Size: 20 KiB |
BIN
emoji/spacemountain.png
Executable file
After Width: | Height: | Size: 14 KiB |
BIN
family.jpg
Executable file
After Width: | Height: | Size: 800 KiB |
BIN
family.mov
Executable file
BIN
favicon-16x16.png
Executable file
After Width: | Height: | Size: 987 B |
BIN
favicon-32x32.png
Executable file
After Width: | Height: | Size: 2.9 KiB |
BIN
favicon.ico
Executable file
After Width: | Height: | Size: 15 KiB |
BIN
favicon.jpg
Executable file
After Width: | Height: | Size: 92 KiB |
BIN
favicon.png
Executable file
After Width: | Height: | Size: 57 KiB |
BIN
favicon_io-2.zip
Executable file
BIN
favicon_io-2/android-chrome-192x192.png
Executable file
After Width: | Height: | Size: 74 KiB |
BIN
favicon_io-2/android-chrome-512x512.png
Executable file
After Width: | Height: | Size: 511 KiB |
BIN
favicon_io-2/apple-touch-icon.png
Executable file
After Width: | Height: | Size: 67 KiB |
BIN
favicon_io-2/favicon-16x16.png
Executable file
After Width: | Height: | Size: 987 B |
BIN
favicon_io-2/favicon-32x32.png
Executable file
After Width: | Height: | Size: 2.9 KiB |
BIN
favicon_io-2/favicon.ico
Executable file
After Width: | Height: | Size: 15 KiB |
1
favicon_io-2/site.webmanifest
Executable file
|
@ -0,0 +1 @@
|
||||||
|
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
BIN
follow/ShannonKay2017.jpg
Executable file
After Width: | Height: | Size: 582 KiB |
BIN
follow/ShannonKay2017sm.jpg
Executable file
After Width: | Height: | Size: 92 KiB |
40
follow/buttons.html
Executable file
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.button {
|
||||||
|
background-color: #FC8EAC; /* Green */
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 4px 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button1 {border-radius: 2px;}
|
||||||
|
.button2 {border-radius: 4px;}
|
||||||
|
.button3 {border-radius: 8px;}
|
||||||
|
.button4 {border-radius: 12px;}
|
||||||
|
.button5 {border-radius: 50%;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Rounded Buttons</h2>
|
||||||
|
|
||||||
|
<p>Add rounded corners to a button with the border-radius property:</p>
|
||||||
|
|
||||||
|
<button class="button button1">2px</button>
|
||||||
|
<button class="button button2">4px</button>
|
||||||
|
<button class="button button3">8px</button>
|
||||||
|
<button class="button button4">12px</button>
|
||||||
|
<button class="button button5">50%</button>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
47
follow/follow.html
Executable file
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon Kay (Follow)</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Follow Shannon Kay</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<p></p>
|
||||||
|
|
||||||
|
<section class="blurb">
|
||||||
|
<section id="icons">
|
||||||
|
<p>
|
||||||
|
<a class="link" href="https://instagram.com/shannonkay">@shannonkay on Instagram</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<p><a rel="me" class="link" href="https://bookstodon.com/@shannonkay">[Mastodon] (@shannonkay@bookstodon.com)</a></p>
|
||||||
|
<p><a class="link" href="https://shannonkay.tumblr.com">Tumblr</a></p>
|
||||||
|
<p><a class="link" href="https://shannonkay.substack.com">Shannon Kay's Notes on Substack</a></p>
|
||||||
|
<p><a class="link" href="../index.html">Shannon's Classic Homepage</a></p>
|
||||||
|
<p><a class="link" href="https://spoutible.com/shannonkay">@shannonkay on Spoutible</a></p>
|
||||||
|
<p><a href="https://twitter.com/shannonkay">@shannonkay</a> on Twitter since 2006. </p>
|
||||||
|
|
||||||
|
<h3>Book Links</h3>
|
||||||
|
<p><a class="link" href="https://app.thestorygraph.com/profile/pinkbookscoffee">StoryGraph</a></p>
|
||||||
|
<p><a class="link" href="https://www.goodreads.com/shannonkay">GoodReads</a></p>
|
||||||
|
<p><a class="link" href="https://www.instagram.com/pinkbookscoffee">"Bookstagram" @pinkbookscoffee</a></p>
|
||||||
|
<p><a class="link" href="https://bookrastinating.com/user/shannonkay">BookWyrm @shannonkay@bookrastinating.com</a></p>
|
||||||
|
|
||||||
|
<p><img class="photo" src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;"></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
47
follow/index.html
Executable file
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon Kay (Follow)</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Follow Shannon Kay</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<p></p>
|
||||||
|
|
||||||
|
<section class="blurb">
|
||||||
|
<section id="icons">
|
||||||
|
<p>
|
||||||
|
<a class="link" href="https://instagram.com/shannonkay">@shannonkay on Instagram</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<p><a rel="me" class="link" href="https://bookstodon.com/@shannonkay">[Mastodon] (@shannonkay@bookstodon.com)</a></p>
|
||||||
|
<p><a class="link" href="https://shannonkay.tumblr.com">Tumblr</a></p>
|
||||||
|
<p><a class="link" href="https://shannonkay.substack.com">Shannon Kay's Notes on Substack</a></p>
|
||||||
|
<p><a class="link" href="../index.html">Shannon's Classic Homepage</a></p>
|
||||||
|
<p><a class="link" href="https://spoutible.com/shannonkay">@shannonkay on Spoutible</a></p>
|
||||||
|
<p><a href="https://twitter.com/shannonkay">@shannonkay</a> on Twitter since 2006. </p>
|
||||||
|
|
||||||
|
<h3>Book Links</h3>
|
||||||
|
<p><a class="link" href="https://app.thestorygraph.com/profile/pinkbookscoffee">StoryGraph</a></p>
|
||||||
|
<p><a class="link" href="https://www.goodreads.com/shannonkay">GoodReads</a></p>
|
||||||
|
<p><a class="link" href="https://www.instagram.com/pinkbookscoffee">"Bookstagram" @pinkbookscoffee</a></p>
|
||||||
|
<p><a class="link" href="https://bookrastinating.com/user/shannonkay">BookWyrm @shannonkay@bookrastinating.com</a></p>
|
||||||
|
|
||||||
|
<p><img class="photo" src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;"></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
3
follow/instagram.svg
Executable file
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||||
|
|
||||||
|
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path class="socialicon" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
|
After Width: | Height: | Size: 1.2 KiB |
92
follow/links.css
Executable file
|
@ -0,0 +1,92 @@
|
||||||
|
body {
|
||||||
|
|
||||||
|
background: linear-gradient(to bottom, #f7d3d6, #FC8EAC);
|
||||||
|
text-align: center;
|
||||||
|
font-family: Verdana;
|
||||||
|
font-size: 12pt;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(to bottom, #f7d3d6, #FC8EAC);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 5vw;
|
||||||
|
color: #FC8EAC;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 4vw;
|
||||||
|
color: #FC6C85;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.link
|
||||||
|
{
|
||||||
|
background-color: #FC8EAC;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #FF1493; /* This is a deep pink */
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-size: 10pt;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:link, nav a:visited
|
||||||
|
{
|
||||||
|
background-color: #FC8EAC;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover, nav a:active
|
||||||
|
{
|
||||||
|
background-color: #FF69B4;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
text-align: justify;
|
||||||
|
padding: 2pt;
|
||||||
|
margin: auto;
|
||||||
|
align: center;
|
||||||
|
max-width: 1024px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
article img {
|
||||||
|
padding: 2pt;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.socialicon {
|
||||||
|
fill: #FC8EAC;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer
|
||||||
|
{
|
||||||
|
font-size: 10pt;
|
||||||
|
padding: 2pt;
|
||||||
|
}
|
BIN
fonts/HoneyCream.otf
Executable file
BIN
fonts/Soulbeams.otf
Executable file
BIN
fonts/VeryBerry-Regular.otf
Executable file
89
goodreads.html
Executable file
|
@ -0,0 +1,89 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>GoodReads</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>GoodReads</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section id="currentread">
|
||||||
|
<p>Currently Reading</p>
|
||||||
|
<br>
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
.gr_grid_container1 {
|
||||||
|
/* customize grid container div here. eg: width: 500px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gr_grid_book_container1 {
|
||||||
|
/* customize book cover container div here */
|
||||||
|
|
||||||
|
width: 98px;
|
||||||
|
height: 160px;
|
||||||
|
padding: 2pt;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="gr_grid_widget_1674899180">
|
||||||
|
<!-- Show static html as a placeholder in case js is not enabled - javascript include will override this if things work -->
|
||||||
|
<div class="gr_grid_container1">
|
||||||
|
<div class="gr_grid_book_container1"><a title="The Last Fallen Star (Gifted Clans, #1)" rel="nofollow" href="https://www.goodreads.com/book/show/55277625-the-last-fallen-star"><img alt="The Last Fallen Star" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1601319805l/55277625._SX98_.jpg" /></a></div>
|
||||||
|
<noscript><br/>Share <a rel="nofollow" href="/">book reviews</a> and ratings with Shannon, and even join a <a rel="nofollow" href="/group">book club</a> on Goodreads.</noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="recentlyread">
|
||||||
|
<p>Recently Read</p>
|
||||||
|
<br>
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
.gr_grid_container {
|
||||||
|
/* customize grid container div here. eg: width: 500px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gr_grid_book_container {
|
||||||
|
/* customize book cover container div here */
|
||||||
|
float: left;
|
||||||
|
width: 98px;
|
||||||
|
height: 160px;
|
||||||
|
padding: 2pt;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="gr_grid_widget_1674899435">
|
||||||
|
<!-- Show static html as a placeholder in case js is not enabled - javascript include will override this if things work -->
|
||||||
|
<div class="gr_grid_container">
|
||||||
|
<div class="gr_grid_book_container"><a title="Percy Jackson and the Sword of Hades (Percy Jackson and the Olympians)" rel="nofollow" href="https://www.goodreads.com/book/show/63840956-percy-jackson-and-the-sword-of-hades"><img alt="Percy Jackson and the Sword of Hades" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1671931441l/63840956._SX98_.jpg" /></a></div>
|
||||||
|
<div class="gr_grid_book_container"><a title="When the Stars Lead to You" rel="nofollow" href="https://www.goodreads.com/book/show/41908418-when-the-stars-lead-to-you"><img alt="When the Stars Lead to You" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548349567l/41908418._SX98_.jpg" /></a></div>
|
||||||
|
<div class="gr_grid_book_container"><a title="Lucy Maud Montgomery Short Stories, 1902-1903" rel="nofollow" href="https://www.goodreads.com/book/show/6993977-lucy-maud-montgomery-short-stories-1902-1903"><img alt="Lucy Maud Montgomery Short Stories, 1902-1903" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1348299239l/6993977._SX98_.jpg" /></a></div>
|
||||||
|
<div class="gr_grid_book_container"><a title="The House in the Cerulean Sea" rel="nofollow" href="https://www.goodreads.com/book/show/57312022-the-house-in-the-cerulean-sea"><img alt="The House in the Cerulean Sea" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1614902762l/57312022._SX98_.jpg" /></a></div>
|
||||||
|
<div class="gr_grid_book_container"><a title="Knight Owl" rel="nofollow" href="https://www.goodreads.com/book/show/57007688-knight-owl"><img alt="Knight Owl" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1626717278l/57007688._SX98_.jpg" /></a></div>
|
||||||
|
<div class="gr_grid_book_container"><a title="Once Upon a December" rel="nofollow" href="https://www.goodreads.com/book/show/60097392-once-upon-a-december"><img alt="Once Upon a December" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1658166690l/60097392._SX98_.jpg" /></a></div>
|
||||||
|
<noscript><br/>Share <a rel="nofollow" href="/">book reviews</a> and ratings with Shannon, and even join a <a rel="nofollow" href="/group">book club</a> on Goodreads.</noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20read%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=6&order=d&shelf=read&sort=date_added&widget_id=1674899435" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Footer</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
210
home.css
Executable file
|
@ -0,0 +1,210 @@
|
||||||
|
body {
|
||||||
|
/*
|
||||||
|
background: linear-gradient(to bottom, #f7d3d6, #FC8EAC);
|
||||||
|
*/
|
||||||
|
background: linear-gradient(to bottom, #f9dee1, #f7d3d6, #fab1c1, #FC8EAC, #fc7d99 );
|
||||||
|
text-align: center;
|
||||||
|
font-family: Verdana;
|
||||||
|
font-size: 12pt;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(to bottom, #ffffff, #f7d3d6, #FC8EAC);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 5vw;
|
||||||
|
color: #FC8EAC;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
h1 {
|
||||||
|
background: linear-gradient(183deg, #f9c2cc 10%, #FC8EAC 70%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
font-size: 5vw;
|
||||||
|
margin-bottom: 10pt;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 428px)
|
||||||
|
{
|
||||||
|
h1 { font-size: 8vw !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 4vw;
|
||||||
|
color: #FC6C85;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #FC6C85;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #FC6C85;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
max-width: 80%;
|
||||||
|
border: solid 1pt #FC8EAC;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fb6f92;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover, a:active {
|
||||||
|
color: #ffffff;
|
||||||
|
background: linear-gradient(183deg, #f9c2cc 10%, #FC8EAC 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link
|
||||||
|
{
|
||||||
|
background-color: #FC8EAC;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 5pt;
|
||||||
|
margin-bottom: 5pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-size: 10pt;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:link, nav a:visited
|
||||||
|
{
|
||||||
|
background-color: #FC8EAC;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: solid 2px #ffb3c6;
|
||||||
|
margin-top: 2pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pages a:hover, nav a:active
|
||||||
|
{
|
||||||
|
background-color: #fb6f92;
|
||||||
|
color: #ffe5ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
text-align: justify;
|
||||||
|
padding: 2pt;
|
||||||
|
margin: auto;
|
||||||
|
align: center;
|
||||||
|
max-width: 1024px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
article img {
|
||||||
|
padding: 2pt;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.intro img {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.blurb {
|
||||||
|
display: block;
|
||||||
|
background-color: #f7d3d6;
|
||||||
|
border: solid 2pt;
|
||||||
|
border-color: white;
|
||||||
|
padding: 5pt;
|
||||||
|
margin: auto;
|
||||||
|
align: center;
|
||||||
|
max-width: 1024px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.now {
|
||||||
|
display: block;
|
||||||
|
background-color: #f7d3d6;
|
||||||
|
border: solid 2pt;
|
||||||
|
border-color: white;
|
||||||
|
padding: 5pt;
|
||||||
|
margin: auto;
|
||||||
|
text-align: justify;
|
||||||
|
max-width: 1024px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
display: block;
|
||||||
|
background-color: #f7d3d6;
|
||||||
|
border: solid 2pt;
|
||||||
|
border-color: white;
|
||||||
|
padding: 5pt;
|
||||||
|
margin: auto;
|
||||||
|
text-align: justify;
|
||||||
|
max-width: 1024px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
display: block;
|
||||||
|
background-color: #f7d3d6;
|
||||||
|
border: solid 2pt;
|
||||||
|
border-color: white;
|
||||||
|
padding: 5pt;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 1024px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.photo img {
|
||||||
|
border: solid white 2pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo {
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updated {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #484848;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer
|
||||||
|
{
|
||||||
|
font-size: 10pt;
|
||||||
|
padding: 2pt;
|
||||||
|
}
|
1
icons/goodreads-g.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M42.6 403.3h2.8c12.7 0 25.5 0 38.2.1 1.6 0 3.1-.4 3.6 2.1 7.1 34.9 30 54.6 62.9 63.9 26.9 7.6 54.1 7.8 81.3 1.8 33.8-7.4 56-28.3 68-60.4 8-21.5 10.7-43.8 11-66.5.1-5.8.3-47-.2-52.8l-.9-.3c-.8 1.5-1.7 2.9-2.5 4.4-22.1 43.1-61.3 67.4-105.4 69.1-103 4-169.4-57-172-176.2-.5-23.7 1.8-46.9 8.3-69.7C58.3 47.7 112.3.6 191.6 0c61.3-.4 101.5 38.7 116.2 70.3.5 1.1 1.3 2.3 2.4 1.9V10.6h44.3c0 280.3.1 332.2.1 332.2-.1 78.5-26.7 143.7-103 162.2-69.5 16.9-159 4.8-196-57.2-8-13.5-11.8-28.3-13-44.5zM188.9 36.5c-52.5-.5-108.5 40.7-115 133.8-4.1 59 14.8 122.2 71.5 148.6 27.6 12.9 74.3 15 108.3-8.7 47.6-33.2 62.7-97 54.8-154-9.7-71.1-47.8-120-119.6-119.7z"/></svg>
|
After Width: | Height: | Size: 891 B |
1
icons/goodreads.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M299.9 191.2c5.1 37.3-4.7 79-35.9 100.7-22.3 15.5-52.8 14.1-70.8 5.7-37.1-17.3-49.5-58.6-46.8-97.2 4.3-60.9 40.9-87.9 75.3-87.5 46.9-.2 71.8 31.8 78.2 78.3zM448 88v336c0 30.9-25.1 56-56 56H56c-30.9 0-56-25.1-56-56V88c0-30.9 25.1-56 56-56h336c30.9 0 56 25.1 56 56zM330 313.2s-.1-34-.1-217.3h-29v40.3c-.8.3-1.2-.5-1.6-1.2-9.6-20.7-35.9-46.3-76-46-51.9.4-87.2 31.2-100.6 77.8-4.3 14.9-5.8 30.1-5.5 45.6 1.7 77.9 45.1 117.8 112.4 115.2 28.9-1.1 54.5-17 69-45.2.5-1 1.1-1.9 1.7-2.9.2.1.4.1.6.2.3 3.8.2 30.7.1 34.5-.2 14.8-2 29.5-7.2 43.5-7.8 21-22.3 34.7-44.5 39.5-17.8 3.9-35.6 3.8-53.2-1.2-21.5-6.1-36.5-19-41.1-41.8-.3-1.6-1.3-1.3-2.3-1.3h-26.8c.8 10.6 3.2 20.3 8.5 29.2 24.2 40.5 82.7 48.5 128.2 37.4 49.9-12.3 67.3-54.9 67.4-106.3z"/></svg>
|
After Width: | Height: | Size: 979 B |
1
icons/instagram.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
|
After Width: | Height: | Size: 1.1 KiB |
1
icons/mastodon.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
|
After Width: | Height: | Size: 863 B |
1
icons/reddit.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
After Width: | Height: | Size: 1.1 KiB |
1
icons/square-reddit.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"/></svg>
|
After Width: | Height: | Size: 1.2 KiB |
1
icons/square-tumblr.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-82.3 364.2c-8.5 9.1-31.2 19.8-60.9 19.8-75.5 0-91.9-55.5-91.9-87.9v-90h-29.7c-3.4 0-6.2-2.8-6.2-6.2v-42.5c0-4.5 2.8-8.5 7.1-10 38.8-13.7 50.9-47.5 52.7-73.2.5-6.9 4.1-10.2 10-10.2h44.3c3.4 0 6.2 2.8 6.2 6.2v72h51.9c3.4 0 6.2 2.8 6.2 6.2v51.1c0 3.4-2.8 6.2-6.2 6.2h-52.1V321c0 21.4 14.8 33.5 42.5 22.4 3-1.2 5.6-2 8-1.4 2.2.5 3.6 2.1 4.6 4.9l13.8 40.2c1 3.2 2 6.7-.3 9.1z"/></svg>
|
After Width: | Height: | Size: 725 B |
1
icons/square-twitter.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"/></svg>
|
After Width: | Height: | Size: 839 B |
1
icons/tumblr.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"/></svg>
|
After Width: | Height: | Size: 613 B |
1
icons/twitter.svg
Executable file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
After Width: | Height: | Size: 1 KiB |
72
index.html
Executable file
|
@ -0,0 +1,72 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon Kay [Shannon's Homepage]</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="home.css">
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/site.webmanifest">
|
||||||
|
<link rel="me" href="https://bookstodon.com/@shannonkay">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header><h1>Shannon Kay</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<nav class="pages">
|
||||||
|
<a href="now/index.html">Now</a>
|
||||||
|
<a href="classichome.html">Classic Homepage Project</a>
|
||||||
|
<a href="projects/index.html">Projects</a>
|
||||||
|
<a href="me.html">Me</a>
|
||||||
|
<a href="https://photo.shannonkay.com">Photos</a>
|
||||||
|
<a href="books/index.html">Books</a>
|
||||||
|
<a href="uses.html">Uses</a>
|
||||||
|
<a href="follow/index.html">Follow</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section id="welcome" class="intro">
|
||||||
|
<p>Welcome to my classic homepage! This website is an attempt to make my space on the web more personal, fun, and creative. 💗 📚
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<picture>
|
||||||
|
<source srcset="coffeeloveblinkie-shannon.gif"
|
||||||
|
media="(prefers-reduced-motion: no-preference)">
|
||||||
|
<img src="coffeeloveblinkie-shannon-still.gif"
|
||||||
|
alt="coffee blinkie Shannon" />
|
||||||
|
</picture>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><img src="emoji/minniebow.png" alt="Minnie Bow"> <img src="emoji/dolewhip.png" alt="Dole Whip Emoji"> <img src="emoji/princesshatemoji.png" alt="Princess Hat"> <img src="emoji/spacemountain.png" alt="space mountain"></p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<picture>
|
||||||
|
<source srcset="beauty-reading_001.gif"
|
||||||
|
media="(prefers-reduced-motion: no-preference)">
|
||||||
|
<img src="beauty-reading_001-still.gif"
|
||||||
|
alt="Beauty and the Beast reading scene" />
|
||||||
|
</picture>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p></p>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<hr>
|
||||||
|
<p>Shannon's Homepage by Shannon Kay Putman</p>
|
||||||
|
<p>Updated January 14, 2023</p>
|
||||||
|
<p>Created August 15, 2021</p>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
links/ShannonKay2017.jpg
Executable file
After Width: | Height: | Size: 582 KiB |
BIN
links/ShannonKay2017sm.jpg
Executable file
After Width: | Height: | Size: 92 KiB |
40
links/buttons.html
Executable file
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.button {
|
||||||
|
background-color: #FC8EAC; /* Green */
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 4px 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button1 {border-radius: 2px;}
|
||||||
|
.button2 {border-radius: 4px;}
|
||||||
|
.button3 {border-radius: 8px;}
|
||||||
|
.button4 {border-radius: 12px;}
|
||||||
|
.button5 {border-radius: 50%;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Rounded Buttons</h2>
|
||||||
|
|
||||||
|
<p>Add rounded corners to a button with the border-radius property:</p>
|
||||||
|
|
||||||
|
<button class="button button1">2px</button>
|
||||||
|
<button class="button button2">4px</button>
|
||||||
|
<button class="button button3">8px</button>
|
||||||
|
<button class="button button4">12px</button>
|
||||||
|
<button class="button button5">50%</button>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
41
links/index.html
Executable file
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Links</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Links</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<p>Shannon Kay's Links </p>
|
||||||
|
|
||||||
|
<section class="blurb">
|
||||||
|
<section id="icons">
|
||||||
|
<p>
|
||||||
|
<a href="https://instagram.com/shannonkay">Instagram</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<p><a class="link" href="https://bookstodon.com/@shannonkay">[Mastodon] (@shannonkay@bookstodon.com)</a></p>
|
||||||
|
|
||||||
|
<p>Book Links</p>
|
||||||
|
<p><a class="link" href="https://app.thestorygraph.com/profile/pinkbookscoffee">StoryGraph</a></p>
|
||||||
|
<p><a class="link" href="https://www.goodreads.com/shannonkay">GoodReads</a></p>
|
||||||
|
<p><a class="link" href="https://www.instagram.com/pinkbookscoffee">"Bookstagram" @pinkbookscoffee</a></p>
|
||||||
|
|
||||||
|
<p><img class="photo" src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;"></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
3
links/instagram.svg
Executable file
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||||
|
|
||||||
|
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path class="socialicon" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
|
After Width: | Height: | Size: 1.2 KiB |
92
links/links.css
Executable file
|
@ -0,0 +1,92 @@
|
||||||
|
body {
|
||||||
|
|
||||||
|
background: linear-gradient(to bottom, #f7d3d6, #FC8EAC);
|
||||||
|
text-align: center;
|
||||||
|
font-family: Verdana;
|
||||||
|
font-size: 12pt;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(to bottom, #f7d3d6, #FC8EAC);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 5vw;
|
||||||
|
color: #FC8EAC;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 4vw;
|
||||||
|
color: #FC6C85;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.link
|
||||||
|
{
|
||||||
|
background-color: #FC8EAC;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #FF1493; /* This is a deep pink */
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-size: 10pt;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:link, nav a:visited
|
||||||
|
{
|
||||||
|
background-color: #FC8EAC;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover, nav a:active
|
||||||
|
{
|
||||||
|
background-color: #FF69B4;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
text-align: justify;
|
||||||
|
padding: 2pt;
|
||||||
|
margin: auto;
|
||||||
|
align: center;
|
||||||
|
max-width: 1024px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
article img {
|
||||||
|
padding: 2pt;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.socialicon {
|
||||||
|
fill: #FC8EAC;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer
|
||||||
|
{
|
||||||
|
font-size: 10pt;
|
||||||
|
padding: 2pt;
|
||||||
|
}
|
76
me.html
Executable file
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon Kay (About)</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<h1>About Shannon Kay</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="text">
|
||||||
|
<p>Shannon Kay (She/Her)</p>
|
||||||
|
<ul>
|
||||||
|
<li>"Shannon Kay" is my first and middle name, and I've used it to low key "brand" myself since I was a child when I thought that I might grow up to be famous, but also that I might get married and change my last name. I did get married and change my last name, but I did not become famous to many people.</li>
|
||||||
|
<li>I'm an early Millennial and a member of the Oregon Trail Generation. </li>
|
||||||
|
<li>I was voted Most Unique in high school. Now I drive a mini van. It's ok because the doors open and close by themselves like magic. </li>
|
||||||
|
<li>I'm married to Jerrod, and we have three kids.</li>
|
||||||
|
</ul>
|
||||||
|
<h3 id="things-i-enjoy">Things I enjoy:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Books</li>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tech</li>
|
||||||
|
<li>Pink</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo"> <img src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;">
|
||||||
|
<figcaption class="caption">My current profile picture (actually from 2017)</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo">
|
||||||
|
<img src="family.jpg" alt="Family Selfie 2021" style="max-width:100%;height:auto;">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<video autoplay playsinline loop muted="true" style="max-width:100%;height:auto;" >
|
||||||
|
<source src="family.mov" type="video/mp4" >
|
||||||
|
</video>
|
||||||
|
-->
|
||||||
|
<figcaption class="caption">My awesome family. (Summer 2021)</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo"><img src="pic/20230210.17.14-15-shannonkay.jpg" alt="Selfie with the kids" style="max-width:100%;height:auto;">
|
||||||
|
<figcaption class="caption">Selfie on a walk with my kids. (February 2023)</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p><figure class="photo"><img src="pic/20180528.15.59-05-shannonkay.jpg" alt="Disneyland Big Thunder Mountain Ride Selfie" style="max-width:100%;height:auto;">
|
||||||
|
<figcaption class="caption">Disneyland Date selfie on Big Thunder Mountain (May 2018)</figcaption>
|
||||||
|
</figure></p>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
29
new/index.html
Executable file
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Index Page</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Index Page</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<nav>Navigation goes here</nav>
|
||||||
|
<section class="blurb">
|
||||||
|
<p>This is the Index page. </p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
30
newpage.html
Executable file
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Index Page</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Index Page</h1></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<nav>Navigation goes here</nav>
|
||||||
|
<section class="blurb">
|
||||||
|
<p>This is the Index page. </p>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
76
now/index.html
Executable file
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shannon Kay (Now)</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../home.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header><h1>Shannon Kay /Now</h1></header>
|
||||||
|
|
||||||
|
<main class="now">
|
||||||
|
|
||||||
|
<h3 id="currently">Currently</h3>
|
||||||
|
<p>Really excited to work on my "IndieWeb" personal projects. I'm still enjoying my Classic Homepage, and working on a blog with Static Site Generator, Jekyll.</p>
|
||||||
|
<p class="updated"> Updated March 6, 2023</p>
|
||||||
|
|
||||||
|
<h3 id="family">Family</h3>
|
||||||
|
<p>I've been married to Jerrod for 14 years. Jerrod got his 5 year sword from Blizzard! Our kids are Guinevere(11), Caspian(6), and Beatrix(3)</p>
|
||||||
|
<ul>
|
||||||
|
<li>Guinevere is in 5th Grade and started pointe in ballet this year.</li>
|
||||||
|
<li>Caspian is in Kindergarten and loves video games, especially Mario and Minecraft.</li>
|
||||||
|
<li>Beatrix is a fun and funny toddler, she loves playing with dolls and collecting care bears. </li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 id="watching">Watching</h3>
|
||||||
|
<p>Another rewatch of Leverage. We finished the original Leverage series and now we're rewatching Leverage: Redemption.</p>
|
||||||
|
<p>Also watching Picard Season 3!</p>
|
||||||
|
|
||||||
|
<h3 id="books">Books</h3>
|
||||||
|
<p>I've finished Chain of Thorns by Cassandra Clare. It's the third book in The Last Hours series, and now I'm in a bit of a post-series reading funk. </p>
|
||||||
|
<p>I'm also continuing on my re-read of Percy Jackson books. I've finished the Percy Jackson and the Olympians series and the Heroes of Olympus series. Now I'm on the the second book in the Trials of Apollo series, The Dark Prophecy.</p>
|
||||||
|
|
||||||
|
<section id="currentread">
|
||||||
|
<h4>Currently Reading</h4>
|
||||||
|
<p></p>
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
.gr_grid_container1 {
|
||||||
|
/* customize grid container div here. eg: width: 500px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gr_grid_book_container1 {
|
||||||
|
/* customize book cover container div here */
|
||||||
|
|
||||||
|
width: 98px;
|
||||||
|
height: 160px;
|
||||||
|
padding: 2pt;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="gr_grid_widget_1674899180">
|
||||||
|
<!-- Show static html as a placeholder in case js is not enabled - javascript include will override this if things work -->
|
||||||
|
<div class="gr_grid_container1">
|
||||||
|
<div class="gr_grid_book_container1"><a title="The Last Fallen Star (Gifted Clans, #1)" rel="nofollow" href="https://www.goodreads.com/book/show/55277625-the-last-fallen-star"><img alt="The Last Fallen Star" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1601319805l/55277625._SX98_.jpg" /></a></div>
|
||||||
|
<noscript><br/>Share <a rel="nofollow" href="/">book reviews</a> and ratings with Shannon, and even join a <a rel="nofollow" href="/group">book club</a> on Goodreads.</noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<p></p>
|
||||||
|
<p>This is a <a href="https://nownownow.com/about">Now Page</a></p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><a href="../index.html">Shannon's Homepage</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
pic/20180528.14.48-08-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.3 MiB |
BIN
pic/20180528.15.59-05-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.2 MiB |
BIN
pic/20221012.16.36-234-shannonkay.jpg
Executable file
After Width: | Height: | Size: 2 MiB |
BIN
pic/20221120.15.50-26-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.4 MiB |
BIN
pic/20230116.13.32-62-shannonkay.jpg
Executable file
After Width: | Height: | Size: 589 KiB |
BIN
pic/20230117.07.50-01-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.1 MiB |
BIN
pic/20230204.16.45-05-shannonkay.jpg
Executable file
After Width: | Height: | Size: 730 KiB |
BIN
pic/20230204.16.45-06-shannonkay.jpg
Executable file
After Width: | Height: | Size: 934 KiB |
BIN
pic/20230204.16.45-07-shannonkay.jpg
Executable file
After Width: | Height: | Size: 772 KiB |
BIN
pic/20230204.17.01-08-shannonkay.jpg
Executable file
After Width: | Height: | Size: 838 KiB |
BIN
pic/20230204.17.01-09-shannonkay.jpg
Executable file
After Width: | Height: | Size: 840 KiB |
BIN
pic/20230204.17.01-10-shannonkay.jpg
Executable file
After Width: | Height: | Size: 873 KiB |
BIN
pic/20230204.17.28-11-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.3 MiB |
BIN
pic/20230204.17.28-12-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.3 MiB |
BIN
pic/20230204.17.29-13-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.1 MiB |
BIN
pic/20230204.17.29-14-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.3 MiB |
BIN
pic/20230204.17.29-15-shannonkay.jpg
Executable file
After Width: | Height: | Size: 965 KiB |
BIN
pic/20230204.17.29-16-shannonkay.jpg
Executable file
After Width: | Height: | Size: 967 KiB |
BIN
pic/20230204.17.29-17-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.1 MiB |
BIN
pic/20230204.17.29-18-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1 MiB |
BIN
pic/20230204.17.29-19-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.1 MiB |
BIN
pic/20230210.17.12-09-shannonkay.jpg
Executable file
After Width: | Height: | Size: 2.4 MiB |
BIN
pic/20230210.17.14-15-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.3 MiB |
BIN
pic/NewPointeShoes-shannonkay.jpg
Executable file
After Width: | Height: | Size: 1.1 MiB |