tristan/willowmecreations
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates to font choices, color scheme

Browse source
This commit is contained in:
Tristan Smith 2023-12-10 15:34:29 -05:00
parent 07c6df421b
commit 4fef75fccf
7 changed files with 57 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
about.html
View file

@ -4,6 +4,8 @@
<title>About Bethany - WillowMeCreations</title> <title>About Bethany - WillowMeCreations</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
</head> </head>
<body> <body>
<div class="container"> <div class="container">

2
contact.html
View file

@ -4,6 +4,8 @@
<title>Contact Us - WillowMeCreations</title> <title>Contact Us - WillowMeCreations</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
</head> </head>
<body> <body>
<div class="container"> <div class="container">

4
index.html
View file

@ -4,6 +4,8 @@
<title>Willow Me Creations</title> <title>Willow Me Creations</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
</head> </head>
<body> <body>
@ -51,6 +53,7 @@
<p>My sweaters, scarves, and shawls are meticulously crafted in small batches. They come in a diverse range of colors and weights, ensuring a unique and personalized touch to each piece. We also offer custom orders, so if you don't see what you're looking for, please contact us and we will do our best to accommodate your needs.</p> <p>My sweaters, scarves, and shawls are meticulously crafted in small batches. They come in a diverse range of colors and weights, ensuring a unique and personalized touch to each piece. We also offer custom orders, so if you don't see what you're looking for, please contact us and we will do our best to accommodate your needs.</p>
<p>My items are available for purchase through our online store, or at one of the many fiber festivals we attend throughout the year. Please check our <a href="products.html">Products</a> page for more information.</p> <p>My items are available for purchase through our online store, or at one of the many fiber festivals we attend throughout the year. Please check our <a href="products.html">Products</a> page for more information.</p>
<p>Thank you for visiting my website!</p> <p>Thank you for visiting my website!</p>
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>
</div> </div>
</div> </div>
<!-- <div class="footer"> <!-- <div class="footer">
@ -109,6 +112,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="script.js"></script>
</body> </body>
</html> </html>

2
privacy.html
View file

@ -4,6 +4,8 @@
<title>Contact Us - WillowMeCreations</title> <title>Contact Us - WillowMeCreations</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
</head> </head>
<body> <body>
<div class="container"> <div class="container">

2
products.html
View file

@ -4,6 +4,8 @@
<title>Products - WillowMeCreations</title> <title>Products - WillowMeCreations</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
</head> </head>
<body> <body>
<div class="container"> <div class="container">

19
script.js
View file

@ -0,0 +1,19 @@
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

32
style.css
View file

@ -1,9 +1,9 @@
body { body {
background: linear-gradient(to bottom, #F5F5DC, #FFFFFF); /* gradient from cream to white */ background: linear-gradient(to bottom, #FFDAB9, #FFFACD); /* gradient from light peach to cream */
color: #006400; /* dark green */ color: #006400; /* dark green */
font-family: Arial, sans-serif; font-family: Kalnia, 'Times New Roman', Times, serif;
line-height: 1.6; line-height: 1.6;
} }
@ -22,7 +22,7 @@ body {
} }
h1, h2 { h1, h2 {
color: #800080; /* purple */ color: #333333; /* dark grey */
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -31,16 +31,16 @@ p {
} }
a { a {
color: #006400; /* dark green */ color: #000080; /* dark blue */
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #800080; /* purple */ color: #800000; /* maroon */
} }
.fab { .fab {
color: #006400; /* dark green */ color: #000080; /* dark blue */
} }
.card img { .card img {
@ -58,4 +58,24 @@ a:hover {
.header, .topnav { .header, .topnav {
flex: 1; flex: 1;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: #555;
} }